refactor(charts-web): refactor to remove duplicate aggregate method call

rahmanunver · gjulivan · commit bd3598313d47 · 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
@@ -5,7 +5,6 @@ import {
     containerPropsEqual,
     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 +36,23 @@ 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, pts.dataSourceItems)
+                ? getExpressionValue<string>(fillColorExpression, dataPoints.dataSourceItems)
                 : undefined,
             mode: line.lineStyle === "line" ? "lines" : "lines+markers",
             line: {
                 shape: line.interpolation,
                 color: lineColorExpression
-                    ? getExpressionValue<string>(lineColorExpression, pts.dataSourceItems)
+                    ? getExpressionValue<string>(lineColorExpression, dataPoints.dataSourceItems)
                     : undefined
             },
             marker: {
                 color: markerColorExpression
-                    ? getExpressionValue<string>(markerColorExpression, pts.dataSourceItems)
+                    ? getExpressionValue<string>(markerColorExpression, dataPoints.dataSourceItems)
                     : undefined
             }
         };
diff --git a/packages/pluggableWidgets/bar-chart-web/src/BarChart.tsx b/packages/pluggableWidgets/bar-chart-web/src/BarChart.tsx
@@ -2,7 +2,6 @@ import { ChartWidget, ChartWidgetProps, containerPropsEqual, usePlotChartDataSer
 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";
 
@@ -46,16 +45,13 @@ 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, pts.dataSourceItems)
+                        ? getExpressionValue<string>(barColorExpression, dataPoints.dataSourceItems)
                         : undefined
                 }
             };
diff --git a/packages/pluggableWidgets/bubble-chart-web/src/BubbleChart.tsx b/packages/pluggableWidgets/bubble-chart-web/src/BubbleChart.tsx
@@ -6,7 +6,6 @@ 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: {
@@ -70,16 +69,13 @@ 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, pts.dataSourceItems)
+                            ? getExpressionValue<string>(markerColorExpression, dataPoints.dataSourceItems)
                             : undefined,
                         symbol: ["circle"],
                         size,
diff --git a/packages/pluggableWidgets/column-chart-web/src/ColumnChart.tsx b/packages/pluggableWidgets/column-chart-web/src/ColumnChart.tsx
@@ -3,7 +3,6 @@ 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: {
@@ -46,14 +45,10 @@ 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, pts.dataSourceItems)
+                        ? getExpressionValue<string>(columnColorExpression, dataPoints.dataSourceItems)
                         : undefined
                 }
             };
diff --git a/packages/pluggableWidgets/line-chart-web/src/LineChart.tsx b/packages/pluggableWidgets/line-chart-web/src/LineChart.tsx
@@ -1,5 +1,4 @@
 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";
@@ -35,22 +34,19 @@ 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, pts.dataSourceItems)
+                            ? getExpressionValue<string>(lineColorExpression, dataPoints.dataSourceItems)
                             : undefined
                     },
                     marker: {
                         color: markerColorExpression
-                            ? getExpressionValue<string>(markerColorExpression, pts.dataSourceItems)
+                            ? getExpressionValue<string>(markerColorExpression, dataPoints.dataSourceItems)
                             : undefined
                     }
                 };
diff --git a/packages/pluggableWidgets/time-series-chart-web/src/TimeSeries.tsx b/packages/pluggableWidgets/time-series-chart-web/src/TimeSeries.tsx
@@ -1,5 +1,4 @@
 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";
@@ -57,11 +56,7 @@ export const TimeSeries = memo(
     function TimeSeries(props: TimeSeriesContainerProps): ReactElement | null {
         const chartLines = usePlotChartDataSeries(
             props.lines,
-            useCallback((line, dataPoints) => {
-                const pts =
-                    line.aggregationType === "none"
-                        ? dataPoints
-                        : aggregateDataPoints(line.aggregationType, dataPoints);
+            useCallback(line => {
                 return {
                     mode: line.lineStyle === "line" ? "lines" : "lines+markers",
                     fill: line.enableFillArea ? "tonexty" : "none",
diff --git a/packages/shared/charts/src/utils/aggregations.ts b/packages/shared/charts/src/utils/aggregations.ts
@@ -1,4 +1,3 @@
-// packages/shared/charts/src/utils/aggregations.ts
 import { Datum } from "plotly.js-dist-min";
 import { PlotChartDataPoints } from "../hooks/usePlotChartDataSeries";
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-// packages/shared/charts/src/utils/aggregations.ts`
`2`	`1`	`import { Datum } from "plotly.js-dist-min";`
`3`	`2`	`import { PlotChartDataPoints } from "../hooks/usePlotChartDataSeries";`
`4`	`3`