Angular Embedded AnalyticsWidget Configuration

Widgets can be customised in multiple ways, including changing the list of available widgets, as well as changing the configuration for individual widgets.

Customise the Available Widgets Copy Link

The example above changes the list of available widgets to:

• Add new groups of widgets
• Show one of the groups collapsed by default
• Re-use one of the default widget groups
• Change the default widget type when dragging fields to the Value widget

<ag-studio
    [widgets]="widgets"
    /* other studio properties ... */ />

this.widgets = createWidgets({
    menu: [
        // new menu configuration
    ],
    defaultType: 'value',
});

See the Widget Configuration API below for details on the createWidgets helper function.

Change the Configuration for Individual Widgets Copy Link

The example above changes the configuration for the Table widget to update the label from 'Table' to 'Grid', and move the widget selection input to the bottom of the setup tab.

<ag-studio
    [widgets]="widgets"
    /* other studio properties ... */ />

this.widgets = createWidgets({
    overrides: [
        {
            id: 'grid',
            label: 'Grid',
            // ... other overrides
        }
    ]
});

See the Widget Configuration API below for details on the createWidgets helper function.

Pre-Configured Widgets Copy Link

The example above updates the widget configuration to have two pre-configured widgets. These re-use the existing grouped column chart widgets, but set the fields and title, and hide all of the form options except for the widget selection input.

The pre-configured widgets are set up in a similar way to Implementing a Custom Widget, but they copy the existing grouped column chart widget definition.

The extends property is set to 'column-chart-grouped' so that all of the default values are set correctly, and the defaultState property is set with the desired data mapping, sort and title details.

Custom Widgets Copy Link

To create your own widgets for AG Studio, see the Custom Widgets documentation.

Widget Configuration API Copy Link

Widget configuration is set using the widgets property. The easiest way to provide configuration is using the createWidgets(params) helper function, where params are of type AgCreateWidgetsParams:

Widget Toolbar Actions Copy Link

Each widget has a toolbar containing buttons that trigger various actions.

To customise the toolbar, follow the steps for Changing the Configuration for Individual Widgets and set the toolbar property.

The following actions are available by default:

Actions can also be executed via the API method performWidgetAction.

The example above demonstrates exporting data for the first widget via the API when the button is clicked.

CSV Export Copy Link

When performing CSV export, values are formatted the same way as in the widget.

By default, exports are limited to 1,000 rows by applying a limit on the related query. Set maxExportRows on dataOptions to change this.

<ag-studio
    [dataOptions]="dataOptions"
    /* other studio properties ... */ />

this.dataOptions = {
    maxExportRows: 5000,
};