Vue 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 ... */>
</ag-studio>

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 ... */>
</ag-studio>

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

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

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:

CSV Export Copy Link

Table and Chart Widgets support exporting their data as a CSV file via the toolbar. 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 ... */>
</ag-studio>

this.dataOptions = {
    maxExportRows: 5000,
};