JavaScript Embedded AnalyticsStandalone Layout

A standalone layout is a page layout for a page that holds exactly one widget. The widget fills the width and height of the page canvas, so it suits pages such as a full-page grid or a single detail chart.

import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
  studioTheme,
} from "ag-studio";

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

const initialState: AgReportState = {
  pages: [
    {
      id: "a",
      layout: {
        type: "standalone",
      },
      widgets: {
        grid: {
          type: "grid",
          dataMapping: {
            cols: [
              { id: "medals.country" },
              { id: "medals.gold", aggregation: "sum" },
              { id: "medals.silver", aggregation: "sum" },
              { id: "medals.bronze", aggregation: "sum" },
              { id: "medals.total", aggregation: "sum" },
            ],
          },
          sort: [
            {
              field: { id: "medals.total", aggregation: "sum" },
              direction: "desc",
            },
          ],
        },
      },
    },
  ],
  selectedPageId: "a",
  panels: {
    filters: { collapsed: true },
    edit: { collapsed: true },
    data: { collapsed: true },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  theme: studioTheme.withParams({ studioMinWidth: 0, studioMinHeight: 0 }),
  initialState,
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);

fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) =>
    studioApi!.setProperty("data", { sources: [{ id: "medals", data }] }),
  );

Setting a Standalone Layout Copy Link

Set type to 'standalone' in the layout of a page in the report state:

const studioProperties = {
    initialState: {
        pages: [
            {
                id: 'medals',
                layout: {
                    type: 'standalone',
                },
                widgets: {
                    grid: {
                        type: 'grid',
                        dataMapping: {
                            cols: [{ id: 'medals.country' }, { id: 'medals.gold', aggregation: 'sum' }],
                        },
                    },
                },
            },
        ],
        selectedPageId: 'medals',
    },

    // other studio properties ...
}

To use a standalone layout for every page, set type in the Studio-wide layout property instead. A page's own layout takes precedence over the Studio-wide value. For a page that holds more than one widget, see More Than One Widget.

const studioProperties = {
    layout: {
        type: 'standalone',
    },

    // other studio properties ...
}

In a standalone layout:

• The widget cannot be moved or resized.
• The page's widgetLayout is not used, so it can be left out.
• The columns and rowHeight properties have no effect, because the widget is not placed on a grid.

Width and Height Copy Link

The outer Studio component has a default Min Width and Min Height of 600px. In a standalone layout, consider overriding the studioMinWidth and studioMinHeight theme parameters (for example, setting them to 0) to avoid double scrollbars when the widget fills the page.

Canvas Width Copy Link

A standalone layout takes its default canvas width from two theme parameters, in place of the Canvas Min Width and Canvas Max Width used by other pages:

• Canvas Standalone Min Width (studioCanvasStandaloneMinWidth) defaults to 0, so there is no minimum width.
• Canvas Standalone Max Width (studioCanvasStandaloneMaxWidth) defaults to the value of studioCanvasMaxWidth, which has no maximum unless set.

The minWidth and maxWidth layout properties override these theme parameters. A value set on the page is used first, then a value set in the Studio-wide layout property, then the theme parameter.

More Than One Widget Copy Link

A page with a standalone layout must hold exactly one widget. This applies whether the page sets the layout in its own layout or inherits it from the Studio-wide layout property.

When such a page holds more than one widget, Studio reports a state error and shows only the first widget. What happens to the other widgets in the report state depends on the mode:

• In edit mode, they are removed from the report state.
• In view mode, they are kept in the report state but are not shown, and the state error is fatal.

See Invalid State for how to handle state errors.