fix(charts-web): add aggregate utils for charts

rahmanunver · gjulivan · commit c5c00851c96e · 2025-06-03T18:05:39.000+02:00
diff --git a/packages/pluggableWidgets/area-chart-web/src/AreaChart.tsx b/packages/pluggableWidgets/area-chart-web/src/AreaChart.tsx
@@ -3,9 +3,9 @@ import {
     ChartWidgetProps,
     SeriesMapper,
     containerPropsEqual,
-    getPlotChartDataTransforms,
     usePlotChartDataSeries
 } from "@mendix/shared-charts/main";
+import { aggregateDataPoints } from "@mendix/shared-charts/utils/aggregations";
 import "@mendix/shared-charts/ui/Chart.scss";
 import classNames from "classnames";
 import { createElement, memo, ReactElement, useCallback } from "react";
@@ -37,25 +37,31 @@ export const AreaChart = memo(function AreaChart(props: AreaChartContainerProps)
         const lineColorExpression = line.dataSet === "static" ? line.staticLineColor : line.dynamicLineColor;
         const markerColorExpression = line.dataSet === "static" ? line.staticMarkerColor : line.dynamicMarkerColor;
         const fillColorExpression = line.dataSet === "static" ? line.staticFillColor : line.dynamicFillColor;
+        const pts =
+            line.aggregationType === "none" ? dataPoints : aggregateDataPoints(line.aggregationType, dataPoints);
+
         return {
             type: "scatter",
             fill: "tonexty",
             fillcolor: fillColorExpression
-                ? getExpressionValue<string>(fillColorExpression, dataPoints.dataSourceItems)
+                ? getExpressionValue<string>(fillColorExpression, pts.dataSourceItems)
                 : undefined,
             mode: line.lineStyle === "line" ? "lines" : "lines+markers",
             line: {
                 shape: line.interpolation,
                 color: lineColorExpression
-                    ? getExpressionValue<string>(lineColorExpression, dataPoints.dataSourceItems)
+                    ? getExpressionValue<string>(lineColorExpression, pts.dataSourceItems)
                     : undefined
             },
             marker: {
                 color: markerColorExpression
-                    ? getExpressionValue<string>(markerColorExpression, dataPoints.dataSourceItems)
+                    ? getExpressionValue<string>(markerColorExpression, pts.dataSourceItems)
                     : undefined
             },
-            transforms: getPlotChartDataTransforms(line.aggregationType, dataPoints)
+            x: pts.x,
+            y: pts.y,
+            hovertext: pts.hovertext,
+            hoverinfo: pts.hoverinfo
         };
     }, []);
 
diff --git a/packages/pluggableWidgets/bar-chart-web/src/BarChart.tsx b/packages/pluggableWidgets/bar-chart-web/src/BarChart.tsx
@@ -1,13 +1,8 @@
-import {
-    ChartWidget,
-    ChartWidgetProps,
-    containerPropsEqual,
-    getPlotChartDataTransforms,
-    usePlotChartDataSeries
-} from "@mendix/shared-charts/main";
+import { ChartWidget, ChartWidgetProps, containerPropsEqual, usePlotChartDataSeries } from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import classNames from "classnames";
 import { ReactElement, createElement, memo, useCallback, useMemo } from "react";
+import { aggregateDataPoints } from "@mendix/shared-charts/utils/aggregations";
 
 import { BarChartContainerProps } from "../typings/BarChartProps";
 
@@ -51,15 +46,22 @@ export const BarChart = memo(function BarChart(props: BarChartContainerProps): R
         useCallback((dataSeries, dataPoints, { getExpressionValue }) => {
             const barColorExpression =
                 dataSeries.dataSet === "static" ? dataSeries.staticBarColor : dataSeries.dynamicBarColor;
+            const pts =
+                dataSeries.aggregationType === "none"
+                    ? dataPoints
+                    : aggregateDataPoints(dataSeries.aggregationType, dataPoints);
             return {
                 type: "bar",
                 orientation: "h",
                 marker: {
                     color: barColorExpression
-                        ? getExpressionValue<string>(barColorExpression, dataPoints.dataSourceItems)
+                        ? getExpressionValue<string>(barColorExpression, pts.dataSourceItems)
                         : undefined
                 },
-                transforms: getPlotChartDataTransforms(dataSeries.aggregationType, dataPoints)
+                x: pts.x,
+                y: pts.y,
+                hovertext: pts.hovertext,
+                hoverinfo: pts.hoverinfo
             };
         }, [])
     );
diff --git a/packages/pluggableWidgets/bubble-chart-web/src/BubbleChart.tsx b/packages/pluggableWidgets/bubble-chart-web/src/BubbleChart.tsx
@@ -1,17 +1,12 @@
-import {
-    ChartWidget,
-    ChartWidgetProps,
-    getPlotChartDataTransforms,
-    traceEqual,
-    usePlotChartDataSeries
-} from "@mendix/shared-charts/main";
+import { ChartWidget, ChartWidgetProps, traceEqual, usePlotChartDataSeries } from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import { defaultEqual, flatEqual } from "@mendix/widget-plugin-platform/utils/flatEqual";
 import Big from "big.js";
 import classNames from "classnames";
 import { ReactElement, createElement, memo, useCallback } from "react";
 import { BubbleChartContainerProps, LinesType } from "../typings/BubbleChartProps";
 import { calculateSizeRef } from "./utils";
+import { aggregateDataPoints } from "@mendix/shared-charts/utils/aggregations";
 
 const bubbleChartLayoutOptions: ChartWidgetProps["layoutOptions"] = {
     xaxis: {
@@ -75,18 +70,25 @@ export const BubbleChart = memo(
                 );
                 const markerColorExpression =
                     line.dataSet === "static" ? line.staticMarkerColor : line.dynamicMarkerColor;
+                const pts =
+                    line.aggregationType === "none"
+                        ? dataPoints
+                        : aggregateDataPoints(line.aggregationType, dataPoints);
                 return {
                     type: "scatter",
                     mode: "markers",
                     marker: {
                         color: markerColorExpression
-                            ? getExpressionValue<string>(markerColorExpression, dataPoints.dataSourceItems)
+                            ? getExpressionValue<string>(markerColorExpression, pts.dataSourceItems)
                             : undefined,
                         symbol: ["circle"],
                         size,
                         ...markerOptions
                     },
-                    transforms: getPlotChartDataTransforms(line.aggregationType, dataPoints)
+                    x: pts.x,
+                    y: pts.y,
+                    hovertext: pts.hovertext,
+                    hoverinfo: pts.hoverinfo
                 };
             }, [])
         );
diff --git a/packages/pluggableWidgets/column-chart-web/src/ColumnChart.tsx b/packages/pluggableWidgets/column-chart-web/src/ColumnChart.tsx
@@ -1,14 +1,9 @@
-import {
-    ChartWidget,
-    ChartWidgetProps,
-    containerPropsEqual,
-    getPlotChartDataTransforms,
-    usePlotChartDataSeries
-} from "@mendix/shared-charts/main";
+import { ChartWidget, ChartWidgetProps, containerPropsEqual, usePlotChartDataSeries } from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
 import classNames from "classnames";
 import { ReactElement, createElement, memo, useCallback, useMemo } from "react";
 import { ColumnChartContainerProps } from "../typings/ColumnChartProps";
+import { aggregateDataPoints } from "@mendix/shared-charts/utils/aggregations";
 
 const columnChartLayoutOptions: ChartWidgetProps["layoutOptions"] = {
     xaxis: {
@@ -51,13 +46,20 @@ export const ColumnChart = memo(function ColumnChart(props: ColumnChartContainer
         useCallback((dataSeries, dataPoints, { getExpressionValue }) => {
             const columnColorExpression =
                 dataSeries.dataSet === "static" ? dataSeries.staticBarColor : dataSeries.dynamicBarColor;
+            const pts =
+                dataSeries.aggregationType === "none"
+                    ? dataPoints
+                    : aggregateDataPoints(dataSeries.aggregationType, dataPoints);
             return {
                 marker: {
                     color: columnColorExpression
-                        ? getExpressionValue<string>(columnColorExpression, dataPoints.dataSourceItems)
+                        ? getExpressionValue<string>(columnColorExpression, pts.dataSourceItems)
                         : undefined
                 },
-                transforms: getPlotChartDataTransforms(dataSeries.aggregationType, dataPoints)
+                x: pts.x,
+                y: pts.y,
+                hovertext: pts.hovertext,
+                hoverinfo: pts.hoverinfo
             };
         }, [])
     );
diff --git a/packages/pluggableWidgets/line-chart-web/src/LineChart.tsx b/packages/pluggableWidgets/line-chart-web/src/LineChart.tsx
@@ -1,10 +1,5 @@
-import {
-    ChartWidget,
-    ChartWidgetProps,
-    getPlotChartDataTransforms,
-    traceEqual,
-    usePlotChartDataSeries
-} from "@mendix/shared-charts/main";
+import { ChartWidget, ChartWidgetProps, traceEqual, usePlotChartDataSeries } from "@mendix/shared-charts/main";
+import { aggregateDataPoints } from "@mendix/shared-charts/utils/aggregations";
 import "@mendix/shared-charts/ui/Chart.scss";
 import { defaultEqual, flatEqual } from "@mendix/widget-plugin-platform/utils/flatEqual";
 import classNames from "classnames";
@@ -40,22 +35,28 @@ export const LineChart = memo(
                 const lineColorExpression = line.dataSet === "static" ? line.staticLineColor : line.dynamicLineColor;
                 const markerColorExpression =
                     line.dataSet === "static" ? line.staticMarkerColor : line.dynamicMarkerColor;
-
+                const pts =
+                    line.aggregationType === "none"
+                        ? dataPoints
+                        : aggregateDataPoints(line.aggregationType, dataPoints);
                 return {
                     type: "scatter",
                     mode: line.lineStyle === "line" ? "lines" : "lines+markers",
                     line: {
                         shape: line.interpolation,
                         color: lineColorExpression
-                            ? getExpressionValue<string>(lineColorExpression, dataPoints.dataSourceItems)
+                            ? getExpressionValue<string>(lineColorExpression, pts.dataSourceItems)
                             : undefined
                     },
                     marker: {
                         color: markerColorExpression
-                            ? getExpressionValue<string>(markerColorExpression, dataPoints.dataSourceItems)
+                            ? getExpressionValue<string>(markerColorExpression, pts.dataSourceItems)
                             : undefined
                     },
-                    transforms: getPlotChartDataTransforms(line.aggregationType, dataPoints)
+                    x: pts.x,
+                    y: pts.y,
+                    hovertext: pts.hovertext,
+                    hoverinfo: pts.hoverinfo
                 };
             }, [])
         );
diff --git a/packages/pluggableWidgets/time-series-chart-web/src/TimeSeries.tsx b/packages/pluggableWidgets/time-series-chart-web/src/TimeSeries.tsx
@@ -1,10 +1,5 @@
-import {
-    ChartWidget,
-    ChartWidgetProps,
-    getPlotChartDataTransforms,
-    usePlotChartDataSeries,
-    traceEqual
-} from "@mendix/shared-charts/main";
+import { ChartWidget, ChartWidgetProps, usePlotChartDataSeries, traceEqual } from "@mendix/shared-charts/main";
+import { aggregateDataPoints } from "@mendix/shared-charts/utils/aggregations";
 import "@mendix/shared-charts/ui/Chart.scss";
 import { defaultEqual, flatEqual } from "@mendix/widget-plugin-platform/utils/flatEqual";
 import classNames from "classnames";
@@ -62,8 +57,12 @@ export const TimeSeries = memo(
     function TimeSeries(props: TimeSeriesContainerProps): ReactElement | null {
         const chartLines = usePlotChartDataSeries(
             props.lines,
-            useCallback(
-                (line, dataPoints) => ({
+            useCallback((line, dataPoints) => {
+                const pts =
+                    line.aggregationType === "none"
+                        ? dataPoints
+                        : aggregateDataPoints(line.aggregationType, dataPoints);
+                return {
                     mode: line.lineStyle === "line" ? "lines" : "lines+markers",
                     fill: line.enableFillArea ? "tonexty" : "none",
                     fillcolor: line.fillColor?.value,
@@ -74,10 +73,12 @@ export const TimeSeries = memo(
                     marker: {
                         color: line.markerColor?.value
                     },
-                    transforms: getPlotChartDataTransforms(line.aggregationType, dataPoints)
-                }),
-                []
-            )
+                    x: pts.x,
+                    y: pts.y,
+                    hovertext: pts.hovertext,
+                    hoverinfo: pts.hoverinfo
+                };
+            }, [])
         );
 
         const timeSeriesLayout = useMemo<ChartWidgetProps["layoutOptions"]>(
diff --git a/packages/shared/charts/src/hooks/usePlotChartDataSeries.ts b/packages/shared/charts/src/hooks/usePlotChartDataSeries.ts
@@ -17,7 +17,7 @@ import { ExtraTraceProps } from "../components/types";
 // Use "value" prop on EditableValue to extract AttributeValue, as AttributeValue not exported.
 type AttributeValue = EditableValue["value"];
 
-type PlotChartDataPoints = {
+export type PlotChartDataPoints = {
     x: Datum[];
     y: Datum[];
     hovertext: string[] | undefined;
@@ -102,10 +102,10 @@ function loadStaticSeries(series: PlotDataSeries, mapSerie: SeriesMapper<PlotDat
 
     return {
         ...(onClickAction ? { onClick: bindListAction(onClickAction) } : undefined),
-        ...mapSerie(series, dataPoints, mapperHelpers),
         ...dataPoints,
+        ...mapSerie(series, dataPoints, mapperHelpers),
         customSeriesOptions
-    };
+    } as PlotChartSeries;
 }
 
 function loadDynamicSeries(series: PlotDataSeries, mapSerie: SeriesMapper<PlotDataSeries>): PlotChartSeries[] | null {
@@ -116,27 +116,25 @@ function loadDynamicSeries(series: PlotDataSeries, mapSerie: SeriesMapper<PlotDa
     }
 
     const dataSourceItemGroups = groupDataSourceItems(series);
-
     if (!dataSourceItemGroups) {
         return null;
     }
 
     const loadedSeries = dataSourceItemGroups
         .map(itemGroup => {
             const dataPoints = extractDataPoints(series, itemGroup.dynamicNameValue, itemGroup.items);
-
             if (!dataPoints) {
                 return null;
             }
 
             return {
                 ...(onClickAction ? { onClick: bindListAction(onClickAction) } : undefined),
-                ...mapSerie(series, dataPoints, mapperHelpers),
                 ...dataPoints,
+                ...mapSerie(series, dataPoints, mapperHelpers),
                 customSeriesOptions
-            };
+            } as PlotChartSeries;
         })
-        .filter((element): element is PlotChartSeries => Boolean(element));
+        .filter((e): e is PlotChartSeries => Boolean(e));
 
     return loadedSeries;
 }
@@ -249,37 +247,6 @@ function extractDataPoints(
     };
 }
 
-type AggregationTypeEnum = "none" | "count" | "sum" | "avg" | "min" | "max" | "median" | "mode" | "first" | "last";
-
-export function getPlotChartDataTransforms(
-    aggregationType: AggregationTypeEnum,
-    dataPoints: PlotChartDataPoints
-): PlotData["transforms"] {
-    if (aggregationType === "none") {
-        return [];
-    }
-    return [
-        {
-            type: "aggregate",
-            groups: dataPoints.x.map(dataPoint => {
-                if (dataPoint == null) {
-                    return "";
-                }
-                return typeof dataPoint === "string" || typeof dataPoint === "number"
-                    ? dataPoint.toLocaleString()
-                    : dataPoint.toLocaleDateString();
-            }),
-            aggregations: [
-                {
-                    target: "y",
-                    func: aggregationType,
-                    enabled: true
-                }
-            ]
-        }
-    ];
-}
-
 export const mapperHelpers: MapperHelpers = {
     // NOTE: For now ignore explicit "return undefined" statements. They exist just to make TS happy.
     getExpressionValue(attr, items) {
diff --git a/packages/shared/charts/src/utils/aggregations.ts b/packages/shared/charts/src/utils/aggregations.ts
