Angular Embedded AnalyticsForm Configuration

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgStudio } from "ag-studio-angular";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgDefaultRegistry,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  AgWidgetFormParams,
  AgWidgetsConfig,
  enableStudioDevValidations,
} from "ag-studio";
import { CustomDef, MyRegistry } from "./interfaces.ts";
import { createWidgets } from "ag-studio-angular";

import { CustomWidget } from "./custom-widget.component.ts";
if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgStudio, CustomWidget],
  template: `<div style="display: flex; flex-direction: column; height: 100%">
    <ag-studio
      style="width: 100%; height: 100%;"
      class="my-studio-container"
      [initialState]="initialState"
      [widgets]="widgets"
      [mode]="mode"
      [data]="data"
      (apiReady)="onApiReady($event)"
    />
  </div> `,
})
export class AppComponent {
  initialState: AgReportState<MyRegistry> = {
    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,
      },
    },
  };
  widgets:
    | AgWidgetsConfig<MyRegistry>
    | ((
        widgets: AgWidgetsConfig<AgDefaultRegistry>,
      ) => AgWidgetsConfig<MyRegistry>) = 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"],
      },
    ],
  });
  mode: AgStudioMode = "edit";

  constructor(private http: HttpClient) {}

  onApiReady(params: AgStudioApiReadyEvent) {
    this.http
      .get("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
      .subscribe((data) => (this.data = { sources: [{ id: "medals", data }] }));
  }
}

.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);
}

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component.ts';

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

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 { WritableSignal } from '@angular/core';
import { Component, signal } from '@angular/core';
import type { AgWidgetParams } from 'ag-studio';
import type { AgCustomComponent } from 'ag-studio-angular';

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

@Component({
    standalone: true,
    template: `<div class="custom-widget-container" [style.--custom-widget-value-font-size]="valueFontSize()">
        <div class="custom-widget-desc">Custom widget</div>
        <div class="custom-widget-value">{{ value() }}</div>
    </div>`,
})
export class CustomWidget implements AgCustomComponent<AgWidgetParams<CustomDef>> {
    value = signal('');
    valueFontSize: WritableSignal<string | null> = signal(null);
    private hasLoaded = false;

    agInit(params: AgWidgetParams<CustomDef>): Promise<void> {
        return this.updateData(params);
    }

    refresh(params: AgWidgetParams<CustomDef>): Promise<void> {
        return this.updateData(params);
    }

    private async updateData({ widgetApi, dataMapping, format }: AgWidgetParams<CustomDef>): Promise<void> {
        const valueFontSize = format?.style?.valueFontSize;
        this.valueFontSize.set(valueFontSize ? `${valueFontSize}px` : null);
        const field = dataMapping.value?.at(0);
        if (!field) {
            widgetApi.setDisplayState('incompleteDataMapping');
            return;
        }
        widgetApi.setDisplayState('loading', { prominent: !this.hasLoaded });
        const response = await widgetApi.getData({ fields: [field] });
        const data = response.results.rows;
        const value = data.at(0)?.[field.key];
        const hasData = value != null;
        this.hasLoaded = hasData;
        this.value.set(widgetApi.formatFieldValue(field, value));
        widgetApi.setDisplayState(hasData ? 'displayed' : 'noData');
    }
}