Vue Embedded AnalyticsWidgets Overview

Version 3.0.0

Widgets are the building blocks of a report. AG Studio ships a set of widgets covering tables, charts, values, filters and static content, and offers three levels of control over them.

  • Configuring Widgets - choose which widgets are available and how they are grouped in the widget selector, and change how an individual widget is labelled, configured, rendered and actioned.
  • Custom Widgets - add a widget type of your own when the built-in widgets do not meet your requirements.

The form shown in the Edit Panel is configured the same way for built-in and custom widgets. See Form Configuration for the form items and helpers available.

Widget Configuration API Copy Link

widgetsCopy Link
AgWidgetsConfig<TRegistry> | ((widgets: AgWidgetsConfig<AgDefaultRegistry>) => AgWidgetsConfig<TRegistry>)
Configure widgets:
  • Add custom widgets
  • Override provided widgets
  • Change displayed widgets
  • Change default widget type when dragging fields
  • 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:

    Import createWidgets from ag-studio-vue3 rather than ag-studio, so that the Vue-specific widget defaults are applied.

    AgWidgetMenuGroup<TRegistry>[]
    Configures the widget menu that is displayed in the widgets tab in the edit panel, and the widget selection input.
    overridesCopy Link
    ExtractOverride<AgWidgetRegistry<TRegistry>>[]
    Overrides to the default widgets.
    defaultTypeCopy Link
    AgWidgetType<TRegistry>
    The default widget type created when dragging fields into the layout.