Vue Data GridChart Types

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('groupedColumn')">Grouped Column</button>
        <button v-on:click="updateChart('stackedColumn')">Stacked Column</button>
        <button v-on:click="updateChart('normalizedColumn')">Normalized Column</button>
        <button v-on:click="updateChart('groupedBar')">Grouped Bar</button>
        <button v-on:click="updateChart('stackedBar')">Stacked Bar</button>
        <button v-on:click="updateChart('normalizedBar')">Normalized Bar</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "period",
        chartDataType: "category",
        headerName: "Financial Period",
        width: 150,
      },
      {
        field: "recurring",
        chartDataType: "series",
        headerName: "Recurring revenue",
      },
      {
        field: "individual",
        chartDataType: "series",
        headerName: "Individual sales",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        cellRange: {
          columns: ["period", "recurring", "individual"],
        },
        chartType: "groupedColumn",
      })!;
    }
    function updateChart(chartType: ChartType) {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType: chartType,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const chartConfig: Record<
  "pie" | "donut",
  {
    chartColumns: string[];
  }
> = {
  pie: {
    chartColumns: ["period", "individual"],
  },
  donut: {
    chartColumns: ["period", "recurring", "individual"],
  },
};

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('pie')">Pie</button>
        <button v-on:click="updateChart('donut')">Donut</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "period",
        chartDataType: "category",
        headerName: "Financial Period",
        width: 150,
      },
      {
        field: "recurring",
        chartDataType: "series",
        headerName: "Recurring revenue",
      },
      {
        field: "individual",
        chartDataType: "series",
        headerName: "Individual sales",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      const chartType = "pie";
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        chartType,
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 3,
          columns: chartConfig[chartType].chartColumns,
        },
      })!;
    }
    function updateChart(chartType: "pie" | "donut") {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType,
        cellRange: {
          rowStartIndex: 0,
          rowEndIndex: 3,
          columns: chartConfig[chartType].chartColumns,
        },
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('line')">Line</button>
        <button v-on:click="updateChart('stackedLine')">Stacked Line</button>
        <button v-on:click="updateChart('normalizedLine')">Normalized Line</button>
        <button v-on:click="updateChart('area')">Grouped Area</button>
        <button v-on:click="updateChart('stackedArea')">Stacked Area</button>
        <button v-on:click="updateChart('normalizedArea')">Normalized Area</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "period",
        chartDataType: "category",
        headerName: "Financial Period",
        width: 150,
      },
      {
        field: "recurring",
        chartDataType: "series",
        headerName: "Recurring revenue",
      },
      {
        field: "individual",
        chartDataType: "series",
        headerName: "Individual sales",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        cellRange: {
          columns: ["period", "recurring", "individual"],
        },
        chartType: "line",
      })!;
    }
    function updateChart(chartType: ChartType) {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType: chartType,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('scatter')">Scatter</button>
        <button v-on:click="updateChart('bubble')">Bubble</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "division", width: 150, chartDataType: "category" },
      { field: "resource", width: 150, chartDataType: "category" },
      { field: "revenue", chartDataType: "series" },
      { field: "expenses", chartDataType: "series" },
      { field: "headcount", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        cellRange: {
          columns: ["resource", "revenue", "expenses", "headcount"],
        },
        chartType: "scatter",
      })!;
    }
    function updateChart(chartType: ChartType) {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType: chartType,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('radarLine')">Radar Line</button>
        <button v-on:click="updateChart('radarArea')">Radar Area</button>
        <button v-on:click="updateChart('nightingale')">Nightingale</button>
        <button v-on:click="updateChart('radialColumn')">Radial Column</button>
        <button v-on:click="updateChart('radialBar')">Radial Bar</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "division", chartDataType: "category", width: 150 },
      {
        field: "recurring",
        chartDataType: "series",
        headerName: "Recurring revenue",
      },
      {
        field: "individual",
        chartDataType: "series",
        headerName: "Individual sales",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        cellRange: {
          columns: ["division", "recurring", "individual"],
        },
        chartType: "radarLine",
      })!;
    }
    function updateChart(chartType: ChartType) {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType: chartType,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('boxPlot')">Box Plot</button>
        <button v-on:click="updateChart('histogram')">Histogram</button>
        <button v-on:click="updateChart('rangeBar')">Range Bar</button>
        <button v-on:click="updateChart('rangeArea')">Range Area</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "period",
        chartDataType: "category",
        headerName: "Financial Period",
        width: 150,
      },
      { field: "client", chartDataType: "category", headerName: "Client name" },
      {
        field: "recurring",
        chartDataType: "series",
        headerName: "Recurring revenue",
      },
      {
        field: "individual",
        chartDataType: "series",
        headerName: "Individual sales",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        cellRange: {
          columns: ["period", "client", "recurring", "individual"],
        },
        chartType: "boxPlot",
      })!;
    }
    function updateChart(chartType: ChartType) {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType: chartType,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('treemap')">Treemap</button>
        <button v-on:click="updateChart('sunburst')">Sunburst</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "division", width: 150, chartDataType: "category" },
      { field: "resource", width: 150, chartDataType: "category" },
      { field: "revenue", chartDataType: "series" },
      { field: "expenses", chartDataType: "series" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        cellRange: {
          columns: ["division", "resource", "revenue", "expenses"],
        },
        chartType: "treemap",
      })!;
    }
    function updateChart(chartType: ChartType) {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType: chartType,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const heatmapColIds: string[] = [
  "year",
  "jan",
  "feb",
  "mar",
  "apr",
  "may",
  "jun",
  "jul",
  "aug",
  "sep",
  "oct",
  "nov",
  "dec",
];

const heatmapColDefs: ColDef[] = [
  { field: "year", width: 150, chartDataType: "category" },
  { field: "jan" },
  { field: "feb" },
  { field: "mar" },
  { field: "apr" },
  { field: "may" },
  { field: "jun" },
  { field: "jul" },
  { field: "aug" },
  { field: "sep" },
  { field: "oct" },
  { field: "nov" },
  { field: "dec" },
];

const waterfallColIds: string[] = ["financials", "amount"];

const waterfallColDefs: ColDef[] = [
  { field: "financials", width: 150, chartDataType: "category" },
  { field: "amount", chartDataType: "series" },
];

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('heatmap')">Heatmap</button>
        <button v-on:click="updateChart('waterfall')">Waterfall</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>(heatmapColDefs);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        chartType: "heatmap",
        cellRange: {
          columns: heatmapColIds,
        },
      })!;
    }
    function updateChart(chartType: "heatmap" | "waterfall") {
      getData(chartType).then((rowData) => {
        gridApi.value.updateGridOptions({
          columnDefs:
            chartType === "heatmap" ? heatmapColDefs : waterfallColDefs,
          rowData,
        });
        setTimeout(() => {
          gridApi.value.updateChart({
            type: "rangeChartUpdate",
            chartId: chartRef.chartId,
            chartType,
            cellRange: {
              columns:
                chartType === "heatmap" ? heatmapColIds : waterfallColIds,
            },
          });
        });
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('funnel')">Funnel</button>
        <button v-on:click="updateChart('coneFunnel')">Cone Funnel</button>
        <button v-on:click="updateChart('pyramid')">Pyramid</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "group",
        chartDataType: "category",
        headerName: "Group",
        width: 150,
      },
      { field: "count", chartDataType: "series", headerName: "Count" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        cellRange: {
          columns: ["group", "count"],
        },
        chartType: "funnel",
      })!;
    }
    function updateChart(chartType: ChartType) {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType: chartType,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ChartRef,
  ChartToolPanelsDef,
  ChartType,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  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([
  ClientSideRowModelModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let chartRef: ChartRef;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="wrapper">
      <div class="button-container">
        <button v-on:click="updateChart('columnLineCombo')">Column Line Combo</button>
        <button v-on:click="updateChart('areaColumnCombo')">Area Column Combo</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :popupParent="popupParent"
        :cellSelection="true"
        :enableCharts="true"
        :chartToolPanelsDef="chartToolPanelsDef"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        <div id="myChart"></div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "period",
        chartDataType: "category",
        headerName: "Financial Period",
        width: 150,
      },
      {
        field: "recurring",
        chartDataType: "series",
        headerName: "Recurring revenue",
      },
      {
        field: "individual",
        chartDataType: "series",
        headerName: "Individual sales",
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const popupParent = ref<HTMLElement | null>(document.body);
    const chartToolPanelsDef = ref<ChartToolPanelsDef>({
      defaultToolPanel: "settings",
    });
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      chartRef = params.api.createRangeChart({
        chartContainer: document.querySelector("#myChart") as any,
        cellRange: {
          columns: ["period", "recurring", "individual"],
        },
        chartType: "columnLineCombo",
      })!;
    }
    function updateChart(chartType: ChartType) {
      gridApi.value.updateChart({
        type: "rangeChartUpdate",
        chartId: `${chartRef.chartId}`,
        chartType: chartType,
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      popupParent,
      chartToolPanelsDef,
      rowData,
      onGridReady,
      onFirstDataRendered,
      updateChart,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");