React Embedded AnalyticsForm Configuration

"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioRef } from "ag-studio-react";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgDefaultRegistry,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  AgWidgetFormParams,
  AgWidgetsConfig,
  createWidgets,
} from "ag-studio";
import { CustomDef, MyRegistry } from "./interfaces.tsx";
import CustomWidget from "./customWidget.tsx";

const StudioExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSourcesDefinition | AgDataEngine>();
  const initialState = useMemo<AgReportState<MyRegistry>>(() => {
    return {
      pages: [
        {
          id: "page1",
          widgets: {
            "1": {
              type: "customWidget",
              dataMapping: {
                value: [
                  {
                    id: "medals.gold",
                    aggregation: "sum",
                  },
                ],
              },
            },
          },
          widgetLayout: {
            "1": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 24,
              ySpan: 12,
            },
          },
          selection: {
            type: "widget",
            id: "1",
          },
        },
      ],
      selectedPageId: "page1",
      panels: {
        filters: {
          collapsed: true,
        },
        data: {
          collapsed: true,
        },
      },
    };
  }, []);
  const widgets = useMemo<
    | AgWidgetsConfig<MyRegistry>
    | ((
        widgets: AgWidgetsConfig<AgDefaultRegistry>,
      ) => AgWidgetsConfig<MyRegistry>)
  >(() => {
    return createWidgets<MyRegistry>({
      additionalTypes: [
        {
          id: "customWidget",
          icon: {
            url: "https://www.ag-grid.com/studio/images/brandmark.svg",
          },
          label: "Custom Widget",
          dataMapping: {
            value: {
              type: "field",
              supportedRoles: ["numeric"],
              requires: { cardinality: "one" },
              required: true,
            },
          },
          form: (params: AgWidgetFormParams<CustomDef>) => {
            const defaultForm = params.createDefaults({
              dataMappingItems: [
                {
                  key: "value",
                  label: "Value",
                },
              ],
            });
            defaultForm.items[0].items.push({
              type: "section",
              key: "customSection",
              label: "Special Config",
              items: [
                {
                  type: "number",
                  id: "format.style.valueFontSize",
                  label: "Value Font Size",
                  defaultValue: 48,
                },
              ],
            });
            return defaultForm;
          },
          comp: CustomWidget,
          defaultSize: {
            width: 400,
            height: 300,
          },
          minSize: {
            width: 200,
            height: 100,
          },
          ai: {
            description:
              "Custom widget used for displaying values in an interesting way.",
          },
        },
      ],
      menu: [
        {
          label: "Custom",
          widgetIds: ["customWidget"],
        },
      ],
    });
  }, []);

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

  return (
    <div style={containerStyle}>
      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <AgStudio<MyRegistry>
          style={studioStyle}
          className="my-studio-container"
          data={data}
          initialState={initialState}
          widgets={widgets}
          mode={"edit"}
          onApiReady={onApiReady}
        />
      </div>
    </div>
  );
};

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

.custom-widget-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}

.custom-widget-desc {
    margin: 16px;
    font-size: 24px;
    align-content: center;
}

.custom-widget-value {
    margin: 16px;
    border: 2px solid var(--ag-border-color);
    border-radius: var(--ag-border-radius);
    text-align: center;
    align-content: center;
    font-weight: bold;
    font-size: var(--custom-widget-value-font-size, 48px);
}

importScripts('https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.min.js');

self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', (event) => event.waitUntil(self.clients.claim()));

async function transpile(request, ext) {
    const response = await fetch(request);
    if (!response.ok) return response;

    const source = await response.text();

    const result = ts.transpileModule(source, {
        compilerOptions: {
            module: ts.ModuleKind.ESNext,
            target: ts.ScriptTarget.ESNext,
            jsx: ext.endsWith('x') ? ts.JsxEmit.React : undefined,
            experimentalDecorators: ext === 'ts',
            emitDecoratorMetadata: ext === 'ts',
        },
    });

    return new Response(result.outputText, {
        headers: { 'Content-Type': 'application/javascript' },
    });
}

self.addEventListener('fetch', (event) => {
    const url = new URL(event.request.url);
    const ext = url.pathname
        .match(/\.([a-z0-9]+)$/i)
        ?.at(1)
        ?.toLowerCase();

    if (['jsx', 'ts', 'tsx'].includes(ext)) {
        event.respondWith(transpile(event.request, ext));
    }
});

import type { AgBaseRegistry, AgBaseWidgetDefinition, AgWidgetDataFormat, AgWidgetFieldReference } from 'ag-studio';

interface CustomWidgetStyle {
    valueFontSize?: number;
}

export interface CustomDef {
    type: 'customWidget';
    dataMapping: {
        value: AgWidgetFieldReference[];
    };
    format?: AgWidgetDataFormat<CustomWidgetStyle>;
}

export interface MyRegistry extends AgBaseRegistry {
    widgets: readonly AgBaseWidgetDefinition<'customWidget', CustomDef>[];
}

import type { AgWidgetParams } from 'ag-studio';
import type { CSSProperties } from 'react';
import React, { useEffect, useRef, useState } from 'react';

import type { CustomDef } from './interfaces';

export default ({ dataMapping, widgetApi, format }: AgWidgetParams<CustomDef>) => {
    const [value, setValue] = useState<string>();
    const hasLoaded = useRef(false);
    const valueFontSize = format?.style?.valueFontSize;
    useEffect(() => {
        const fetchData = async () => {
            const field = dataMapping.value?.at(0);
            if (!field) {
                widgetApi.setDisplayState('incompleteDataMapping');
                return;
            }
            widgetApi.setDisplayState('loading', { prominent: !hasLoaded.current });
            const response = await widgetApi.getData({ fields: [field] });
            const data = response.results.rows;
            const newValue = data.at(0)?.[field.key];
            const hasData = newValue != null;
            hasLoaded.current = hasData;
            setValue(widgetApi.formatFieldValue(field, newValue));
            widgetApi.setDisplayState(hasData ? 'displayed' : 'noData');
        };
        fetchData();
    }, [dataMapping]);

    return (
        <div
            className="custom-widget-container"
            style={{ '--custom-widget-value-font-size': valueFontSize ? `${valueFontSize}px` : null } as CSSProperties}
        >
            <div className="custom-widget-desc">Custom widget</div>
            <div className="custom-widget-value">{value ?? ''}</div>
        </div>
    );
};