Angular Embedded AnalyticsCalculations

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgStudio } from "ag-studio-angular";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgFieldDefinition,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

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

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgStudio],
  template: `<div style="display: flex; flex-direction: column; height: 100%">
    <ag-studio
      style="width: 100%; height: 100%;"
      class="my-studio-container"
      [initialState]="initialState"
      [mode]="mode"
      [data]="data"
      (apiReady)="onApiReady($event)"
    />
  </div> `,
})
export class AppComponent {
  initialState: AgReportState = {
    pages: [
      {
        id: "a",
        widgets: {
          "1": {
            type: "grid",
            dataMapping: {
              cols: [
                { id: "medals.country" },
                {
                  id: "user-created-calculated-column::number",
                  aggregation: "sum",
                },
              ],
            },
          },
        },
        widgetLayout: {
          "1": { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 16 },
        },
      },
    ],
    selectedPageId: "a",
    panels: {
      filters: {
        collapsed: true,
      },
    },
    schema: {
      fields: {
        "user-created-calculated-column": {
          name: "Total Medals",
          description:
            "User created calculated column that sums gold, silver, and bronze medals",
          expression: "[medals.gold] + [medals.silver] + [medals.bronze]",
        },
        "user-created-measure": {
          name: "Total Points",
          description:
            "User created measure that measures points as determined by medals",
          expression:
            "3 * SUM([medals.gold]) +\n2 * SUM([medals.silver]) +\nSUM([medals.bronze])",
        },
      },
      expressions: [
        {
          id: "user-created-calculated-column",
          tableId: "medals",
          isMeasure: false,
          format: "integerFormat",
        },
        {
          id: "user-created-measure",
          tableId: "medals",
          isMeasure: true,
          format: "integerFormat",
        },
      ],
    },
  };
  mode: AgStudioMode = "edit";
  data!: AgDataSourcesDefinition | AgDataEngine;

  constructor(private http: HttpClient) {}

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

const fields: AgFieldDefinition[] = [
  {
    id: "country",
    format: "textFormat",
  },
  {
    id: "sport",
    format: "textFormat",
  },
  {
    id: "gold",
    format: "integerFormat",
  },
  {
    id: "silver",
    format: "integerFormat",
  },
  {
    id: "bronze",
    format: "integerFormat",
  },
];

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()],
});