Angular Data GridSave / Restore Charts

import { Component, ViewChild } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartModel,
  ChartRef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CreateChartContainer,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  IntegratedChartsModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { getData } from "./data";

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

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  NumberEditorModule,
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="wrapper">
    <div id="buttons">
      <button (click)="saveChart()">Save chart</button>
      <button (click)="clearChart()">Clear chart</button>
      <button (click)="restoreChart()">Restore chart</button>
    </div>
    <ag-grid-angular
      id="myGrid"
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [cellSelection]="true"
      [popupParent]="popupParent"
      [enableCharts]="true"
      [createChartContainer]="createChartContainer"
      [rowData]="rowData"
      (firstDataRendered)="onFirstDataRendered($event)"
      (gridReady)="onGridReady($event)"
    />
    <div id="myChart" class="my-chart"></div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    { field: "country", chartDataType: "category" },
    { field: "sugar", chartDataType: "series" },
    { field: "fat", chartDataType: "series" },
    { field: "weight", chartDataType: "series" },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  popupParent: HTMLElement | null = document.body;
  rowData!: any[];

  onFirstDataRendered(params: FirstDataRenderedEvent) {
    currentChartRef = params.api.createRangeChart({
      chartContainer: document.querySelector("#myChart") as any,
      cellRange: {
        columns: ["country", "sugar", "fat", "weight"],
        rowStartIndex: 0,
        rowEndIndex: 2,
      },
      chartType: "groupedColumn",
    });
  }

  saveChart() {
    const chartModels = this.gridApi.getChartModels() || [];
    if (chartModels.length > 0) {
      chartModel = chartModels[0];
    }
  }

  clearChart() {
    if (currentChartRef) {
      currentChartRef.destroyChart();
      currentChartRef = undefined;
    }
  }

  restoreChart() {
    if (!chartModel) return;
    currentChartRef = this.gridApi.restoreChart(chartModel)!;
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;

    getData().then((rowData) => params.api.setGridOption("rowData", rowData));
  }

  createChartContainer = (chartRef: ChartRef) => {
    if (currentChartRef) {
      currentChartRef.destroyChart();
    }
    const eChart = chartRef.chartElement;
    const eParent = document.querySelector<HTMLElement>("#myChart")!;
    eParent.appendChild(eChart);
    currentChartRef = chartRef;
  };
}

let chartModel: ChartModel | undefined;
let currentChartRef: ChartRef | undefined;

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#myGrid {
    flex: 1;
}

.my-chart {
    flex: 1;
}

#buttons {
    padding-bottom: 10px;
}

export async function getData(delay: number = 100): Promise<any[]> {
    return new Promise((resolve) => setTimeout(() => resolve(generateData()), delay));
}

function generateData(): any[] {
    const countries = [
        'Ireland',
        'Spain',
        'United Kingdom',
        'France',
        'Germany',
        'Luxembourg',
        'Sweden',
        'Norway',
        'Italy',
        'Greece',
        'Iceland',
        'Portugal',
        'Malta',
        'Brazil',
        'Argentina',
        'Colombia',
        'Peru',
        'Venezuela',
        'Uruguay',
        'Belgium',
    ];

    return countries.map((country) => ({
        country,
        sugar: getRandomNumber(0, 50),
        fat: getRandomNumber(0, 100),
        weight: getRandomNumber(0, 200),
    }));
}

function getRandomNumber(min: number, max: number): number {
    return Math.floor(window.agRandom() * (max - min + 1)) + min;
}

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

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

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

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