Vue Embedded AnalyticsModes & Layout

Version 3.0.0

AG Studio has two main modes - view and edit. Edit mode allows for the construction of reports with the drag-and-drop builder, whilst view mode presents the report for consumption, with the editing controls hidden.

Modes Copy Link

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <div class="example-controls">
        <div class="controls-row">
          <button id="toggleMode" v-on:click="toggleMode()">Switch to {{ mode === 'edit' ? 'View' : 'Edit' }} Mode</button>
        </div>
      </div>
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "a",
          widgets: {
            "1": {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.sport" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
            },
            "2": {
              type: "column-chart-grouped",
              dataMapping: {
                categoryKey: [{ id: "medals.country" }],
                valueKey: [
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                ],
                tooltipKey: [],
              },
            },
          },
          widgetLayout: {
            "1": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 24,
              ySpan: 16,
            },
            "2": {
              xTrack: 0,
              yTrack: 16,
              xSpan: 24,
              ySpan: 16,
            },
          },
        },
      ],
      selectedPageId: "a",
    });
    const mode = ref<AgStudioMode>("edit");
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    function toggleMode() {
      const currentMode = mode.value;
      const newMode = currentMode === "edit" ? "view" : "edit";
      mode.value = newMode;
    }
    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      data,
      onApiReady,
      toggleMode,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

The mode can be changed via the mode property.

By default, view mode hides all editing controls. Setting enableFilterEditingInViewMode relaxes this for filters only, so Page and Widget Filters can still be added and removed in view mode.

AgStudioMode

default: 'view'

Which mode Studio is in. Changing this only changes what is shown and what is editable: the active state is neither saved nor restored on a mode change, and carries across the switch unchanged. The undo and redo history also carries across by default; set history.onModeChange to discard it instead.

boolean

default: false

Allows filters to be added to, and removed from, the filters panel while in view mode. When false, filters can only be added and removed in edit mode. Studio does not store filters added this way. Listen to onStateUpdated and persist the state yourself if it needs to survive a reload.

Layout Copy Link

The layout property controls the grid that widgets are placed on, and the space the page occupies.

Partial<AgPageLayoutState>

Default layout styling.

Layout Properties Copy Link

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgPageLayoutState,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :layout="layout"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "a",
          widgets: {
            "1": {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.sport" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
            },
            "2": {
              type: "column-chart-grouped",
              dataMapping: {
                categoryKey: [{ id: "medals.country" }],
                valueKey: [
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                ],
                tooltipKey: [],
              },
            },
          },
          widgetLayout: {
            "1": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 4,
              ySpan: 4,
            },
            "2": {
              xTrack: 0,
              yTrack: 4,
              xSpan: 4,
              ySpan: 4,
            },
          },
        },
      ],
      selectedPageId: "a",
      panels: {
        filters: {
          collapsed: true,
        },
        data: {
          collapsed: true,
        },
      },
    });
    const mode = ref<AgStudioMode>("edit");
    const layout = ref<Partial<AgPageLayoutState>>({
      columns: 4,
      rowHeight: 50,
    });
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      layout,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

The default layout setup can be overridden via the layout property. The example above adjusts the default number of columns and the row height in the layout. This affects the widget moving and resizing behaviour.

<ag-studio
    :layout="layout"
    /* other studio properties ... */>
</ag-studio>

this.layout = {
    columns: 4,
    rowHeight: 50,
};

Page Dimensions Copy Link

Page Dimensions define the space your report should fit into and how it behaves when the browser window or device size changes.

<ag-studio
    :layout="layout"
    /* other studio properties ... */>
</ag-studio>

this.layout = {
    minWidth: 800,
    maxWidth: 1200,
    height: 600,
};

Width Copy Link

Width settings help keep the layout readable and well-proportioned across different screen sizes.

Min Width defaults to 720px. It defines the smallest width the page can shrink to before horizontal scrolling is needed. In the example below, a large minimum width is set, so a horizontal scrollbar appears when the viewport is narrower than the minimum width.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgPanelConfig,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :panels="panels"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "a",
          layout: {
            minWidth: 1500,
          },
          widgets: {
            "gold-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.gold", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Gold Medals",
                },
              },
            },
            "silver-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.silver", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Silver Medals",
                },
              },
            },
            "bronze-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.bronze", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Bronze Medals",
                },
              },
            },
          },
          widgetLayout: {
            "gold-medals": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 8,
              ySpan: 8,
            },
            "silver-medals": {
              xTrack: 8,
              yTrack: 0,
              xSpan: 8,
              ySpan: 8,
            },
            "bronze-medals": {
              xTrack: 16,
              yTrack: 0,
              xSpan: 8,
              ySpan: 8,
            },
          },
        },
      ],
      selectedPageId: "a",
    });
    const mode = ref<AgStudioMode>("view");
    const panels = ref<AgPanelConfig>({
      edit: {
        right: ["edit", "data"],
      },
    });
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      panels,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

Max Width is optional and can be left as Auto. When left as Auto, the dashboard can continue expanding beyond the minimum width as the viewport grows.

If Max Width is set, the dashboard stops growing once it reaches that width and remains centred on the screen. In the example below, a fixed maximum width is applied, so the dashboard stops expanding and centres within the available space.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgPanelConfig,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :panels="panels"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "a",
          layout: {
            maxWidth: 300,
          },
          widgets: {
            "gold-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.gold", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Gold Medals",
                },
              },
            },
            "silver-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.silver", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Silver Medals",
                },
              },
            },
            "bronze-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.bronze", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Bronze Medals",
                },
              },
            },
          },
          widgetLayout: {
            "gold-medals": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 8,
              ySpan: 8,
            },
            "silver-medals": {
              xTrack: 8,
              yTrack: 0,
              xSpan: 8,
              ySpan: 8,
            },
            "bronze-medals": {
              xTrack: 16,
              yTrack: 0,
              xSpan: 8,
              ySpan: 8,
            },
          },
        },
      ],
      selectedPageId: "a",
    });
    const mode = ref<AgStudioMode>("view");
    const panels = ref<AgPanelConfig>({
      edit: {
        right: ["edit", "data"],
      },
    });
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      panels,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

This means:

A required Min Width sets the minimum readable size.
An optional Max Width controls how wide the dashboard is allowed to grow.

Height Copy Link

Auto Height allows the page to grow as Widgets are added. This works well for dashboards that may expand over time, or reports where content scrolls vertically.

Fixed Height locks the page to a specific height, like a slide or poster. This works well when vertical boundaries need to be fixed for a consistent, contained view, especially for dashboards designed to fit on a single screen.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgPanelConfig,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :panels="panels"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "a",
          layout: {
            height: 88,
          },
          widgets: {
            "gold-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.gold", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Gold Medals",
                },
              },
            },
            "silver-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.silver", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Silver Medals",
                },
              },
            },
            "bronze-medals": {
              type: "value",
              dataMapping: {
                value: [{ id: "medals.bronze", aggregation: "sum" }],
              },
              format: {
                caption: {
                  enabled: true,
                  text: "Bronze Medals",
                },
              },
            },
          },
          widgetLayout: {
            "gold-medals": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 8,
              ySpan: 5,
            },
            "silver-medals": {
              xTrack: 8,
              yTrack: 0,
              xSpan: 8,
              ySpan: 5,
            },
            "bronze-medals": {
              xTrack: 16,
              yTrack: 0,
              xSpan: 8,
              ySpan: 5,
            },
          },
        },
      ],
      selectedPageId: "a",
    });
    const mode = ref<AgStudioMode>("view");
    const panels = ref<AgPanelConfig>({
      edit: {
        right: ["edit", "data"],
      },
    });
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      panels,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

When using Fixed Height, set it to be a multiple of the layout rowHeight plus double the layout pagePadding to avoid additional padding at the top and bottom of the layout. rowHeight defaults to the studioCanvasRowHeight theme variable, which is 16 in the default theme. pagePadding defaults to widgetPadding if not defined, which in turn defaults to the studioWidgetPadding theme variable, which is 4 in the default theme

Panels Copy Link

Studio has four different panels that can be displayed depending on the mode:

AI Panel ('ai') - Used for the AI Feature.
Filters Panel ('filters') - Contains page filters, widget filters, cross filters, and filters from filter widgets.
Edit Panel ('edit') - Changes function based on the UI selection to display editing controls.
Data Panel ('data') - Displays the fields available in the data.

Panel Configuration Copy Link

Which panels are displayed, and on which side, can be configured for both view mode and edit mode.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgPanelConfig,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <div class="example-controls">
        <div class="controls-row">
          <button id="toggleMode" v-on:click="toggleMode()">Switch to {{ mode === 'edit' ? 'View' : 'Edit' }} Mode</button>
        </div>
      </div>
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :panels="panels"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "a",
          widgets: {
            "1": {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.sport" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
            },
            "2": {
              type: "column-chart-grouped",
              dataMapping: {
                categoryKey: [{ id: "medals.country" }],
                valueKey: [
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                ],
                tooltipKey: [],
              },
            },
          },
          widgetLayout: {
            "1": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 24,
              ySpan: 16,
            },
            "2": {
              xTrack: 0,
              yTrack: 16,
              xSpan: 24,
              ySpan: 16,
            },
          },
        },
      ],
      selectedPageId: "a",
      panels: {
        filters: {
          collapsed: true,
        },
      },
    });
    const mode = ref<AgStudioMode>("edit");
    const panels = ref<AgPanelConfig>({
      edit: {
        left: ["filters"],
        right: ["edit", "data"],
      },
      view: {
        left: [],
      },
    });
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    function toggleMode() {
      const currentMode = mode.value;
      const newMode = currentMode === "edit" ? "view" : "edit";
      mode.value = newMode;
    }
    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      panels,
      data,
      onApiReady,
      toggleMode,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

The example above demonstrates displaying the Filters Panel on the left-hand side in edit mode (and collapsed by default via Initial State). In view mode, the Filters Panel is hidden completely.

<ag-studio
    :panels="panels"
    /* other studio properties ... */>
</ag-studio>

this.panels = {
    edit: {
        left: ['filters'],
        right: ['edit', 'data']
    },
    view: {
        left: [],
    },
};

AgPanelConfig

Configure which panels are displayed and on which side.

Note that panels controlling editing functionality are only available in edit mode.

Panel Content Copy Link

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgPageConfig,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :page="page"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "a",
          widgets: {
            "1": {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.sport" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
            },
            "2": {
              type: "column-chart-grouped",
              dataMapping: {
                categoryKey: [{ id: "medals.country" }],
                valueKey: [
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                ],
                tooltipKey: [],
              },
            },
          },
          widgetLayout: {
            "1": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 24,
              ySpan: 16,
            },
            "2": {
              xTrack: 0,
              yTrack: 16,
              xSpan: 24,
              ySpan: 16,
            },
          },
        },
      ],
      selectedPageId: "a",
      panels: {
        filters: {
          collapsed: true,
        },
        data: {
          collapsed: true,
        },
      },
    });
    const mode = ref<AgStudioMode>("edit");
    const page = ref<AgPageConfig | ((config: AgPageConfig) => AgPageConfig)>(
      ({ setupForm }: AgPageConfig) => {
        const newConfig: AgPageConfig = {
          // only show the first item from the page setup form
          setupForm: Array.isArray(setupForm)
            ? setupForm.slice(0, 1)
            : { ...setupForm, items: setupForm.items.slice(0, 1) },
        };
        return newConfig;
      },
    );
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      page,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

The content of the edit panel can be customised in multiple ways. The example above demonstrates configuring the Page tab to only show the first item (page background).

AgPageConfig | ((config: AgPageConfig) => AgPageConfig)

Configure page (e.g. page setup form in page tab of edit panel).

The widget content of the panels is controlled by Available Widgets and Widget Overrides.

The page setup form items are set up in a similar way to the widget Form Grouping Items and Form Input Items, but only a subset of input items are supported.

Getting Started

Connecting Data

Agent Framework

Fields & Formatting

Appearance & Behaviour

Widgets

Server-Side Data

User Guide

Vue Embedded AnalyticsModes & Layout

Modes Copy Link

Layout Copy Link

Layout Properties Copy Link

Page Dimensions Copy Link

Width Copy Link

Height Copy Link

Panels Copy Link

Panel Configuration Copy Link

Panel Content Copy Link