Angular Embedded AnalyticsState

Studio state allows reports to be saved and restored. Reports can be created in edit mode, saved down as state, and then reloaded in view mode.

Saving and Restoring State Copy Link

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

this.initialState = {
    pages: [
        {
            id: 'page-1',
            widgets: {
                '1': {
                    type: 'grid',
                    dataMapping: {
                        cols: [
                            { id: 'medals.country' },
                        ],
                    },
                },
            },
            widgetLayout: {
                'page-1': {
                    xTrack: 0,
                    yTrack: 0,
                    xSpan: 24,
                    ySpan: 16,
                },
            },
        },
    ],
    selectedPageId: 'a',
};

State is provided to Studio on initialisation via the initialState property.

State can be saved and restored on demand via the API methods getState() and setState().

Any time state changes, a stateUpdated event is emitted with the latest state. When Studio is destroyed, the studioPreDestroyed event is fired, which contains the latest state at the time.

These are all demonstrated in the above example. See the State API below for more details.

State is immutable. Studio uses reference equality to detect which parts of the state have changed, and updates them accordingly. If updating state and providing it back to Studio, ensure that a shallow copy is made to the depth of the changes.

Changing Pages Copy Link

Reports support multiple pages. These are all defined in state, with the currently displayed page set via the top-level selectedPageId state property. The page can be changed by getting the latest state from Studio and setting back a copy with the selectedPageId updated.

const state = api.getState();
api.setState({
    ...state,
    selectedPageId: 'page-2',
});

State API Copy Link

Properties Copy Link

Initial state for Studio. Only read once on initialization. Can be used in conjunction with api.getState() to save and restore Studio state.

API Methods Copy Link

getStateCopy Link
Function
Get the current state of Studio. Can be used in conjunction with the initialState Studio property or api.setState() to save and restore Studio state.
setStateCopy Link
Function
Set the current state of Studio. Can be used in conjunction with api.getState() or onStateUpdated to save and restore Studio state. The state is expected to be a full state object, not a partial state object. State must be updated immutably as Studio uses reference equality to determine which parts of state have changed.

Events Copy Link

stateUpdatedCopy Link
AgStudioStateUpdatedEvent
State has been updated.
studioPreDestroyedCopy Link
AgStudioPreDestroyedEvent
Invoked immediately before Studio is destroyed. This is useful for cleanup logic that needs to run before Studio is torn down.