React Embedded AnalyticsState

"use client";

import type {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioPreDestroyedEvent,
  AgStudioStateUpdatedEvent,
} from "ag-studio";
import { AgStudioApiReadyEvent, enableStudioDevValidations } from "ag-studio";
import type { AgStudioRef } from "ag-studio-react";
import { AgStudio } from "ag-studio-react";
import React, {
  StrictMode,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

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

const EMPTY_STATE: AgReportState = {
  pages: [
    {
      id: "page-1",
    },
  ],
  selectedPageId: "page-1",
};

const HARDCODED_STATE: AgReportState = {
  pages: [
    {
      id: "page-1",
      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" },
            ],
          },
        },
      },
      widgetLayout: {
        "1": {
          xTrack: 0,
          yTrack: 0,
          xSpan: 24,
          ySpan: 16,
        },
        "2": {
          xTrack: 0,
          yTrack: 16,
          xSpan: 24,
          ySpan: 16,
        },
      },
    },
  ],
  selectedPageId: "page-1",
  panels: {
    filters: {
      collapsed: true,
    },
  },
};

const StudioExample = () => {
  const studioRef = useRef<AgStudioRef>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSourcesDefinition | AgDataEngine>();
  const [initialState, setInitialState] =
    useState<AgReportState>(HARDCODED_STATE);
  const [savedState, setSavedState] = useState<AgReportState>(EMPTY_STATE);
  const [studioVisible, setStudioVisible] = useState(true);

  useEffect(() => {
    fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
      .then((resp) => resp.json())
      .then((data: any[]) =>
        setData({
          sources: [{ id: "medals", data }],
        }),
      );
  }, []);

  const onStateUpdated = useCallback(
    ({ state }: AgStudioStateUpdatedEvent): void => {
      console.log("State updated", state);
    },
    [],
  );

  const onStudioPreDestroyed = useCallback(
    ({ state }: AgStudioPreDestroyedEvent): void => {
      console.log("Studio state on destroy", state);
      setInitialState(state);
    },
    [],
  );

  const clearState = useCallback(() => {
    studioRef.current!.api.setState(EMPTY_STATE);
  }, []);

  const saveState = useCallback(() => {
    const state = studioRef.current!.api.getState();
    console.log("Current state", state);
    setSavedState(state);
  }, []);

  const restoreState = useCallback(() => {
    studioRef.current!.api.setState(savedState);
  }, [savedState]);

  const hardcodedState = useCallback(() => {
    studioRef.current!.api.setState(HARDCODED_STATE);
  }, []);

  const recreate = useCallback(() => {
    setStudioVisible(false);
    setTimeout(() => {
      setStudioVisible(true);
    });
  }, []);

  return (
    <div style={containerStyle}>
      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <div className="example-controls">
          <div className="controls-row">
            <button onClick={clearState}>Clear State</button>
            <button onClick={saveState}>Save State</button>
            <button onClick={restoreState}>Restore State</button>
            <button onClick={hardcodedState}>Load Hardcoded State</button>
            <button onClick={recreate}>
              Recreate Studio with Current State
            </button>
          </div>
        </div>

        {studioVisible && (
          <AgStudio
            ref={studioRef}
            style={studioStyle}
            className="my-studio-container"
            data={data}
            initialState={initialState}
            mode={"edit"}
            onStateUpdated={onStateUpdated}
            onStudioPreDestroyed={onStudioPreDestroyed}
          />
        )}
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <StudioExample />
  </StrictMode>,
);