[WC-2922]: Add aggregate utils for charts

packages/pluggableWidgets/area-chart-web/src/AreaChart.tsx

@@ -3,7 +3,6 @@ import {
     ChartWidgetProps,
     SeriesMapper,
     containerPropsEqual,
-    getPlotChartDataTransforms,
     usePlotChartDataSeries
 } from "@mendix/shared-charts/main";
 import "@mendix/shared-charts/ui/Chart.scss";
@@ -37,6 +36,7 @@ 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;
+
         return {
             type: "scatter",
             fill: "tonexty",
@@ -54,8 +54,7 @@ export const AreaChart = memo(function AreaChart(props: AreaChartContainerProps)
                 color: markerColorExpression
                     ? getExpressionValue<string>(markerColorExpression, dataPoints.dataSourceItems)
                     : undefined
-            },
-            transforms: getPlotChartDataTransforms(line.aggregationType, dataPoints)
+            }
         };
     }, []);
 

packages/pluggableWidgets/area-chart-web/src/__tests__/AreaChart.spec.tsx

@@ -124,32 +124,29 @@ describe("The AreaChart widget", () => {
         );
     });
 
-    it("sets the appropriate transforms on the data series based on the aggregation type", () => {
+    it("aggregates data based on the aggregation type", () => {
         renderAreaChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
 
         expect(ChartWidget).toHaveBeenCalledWith(
             expect.objectContaining({
                 data: expect.arrayContaining([
-                    expect.objectContaining({ transforms: [] }),
                     expect.objectContaining({
-                        transforms: [
-                            {
-                                type: "aggregate",
-                                groups: ["1", "2"],
-                                aggregations: [
-                                    {
-                                        target: "y",
-                                        enabled: true,
-                                        func: "avg"
-                                    }
-                                ]
-                            }
-                        ]
+                        x: expect.arrayContaining([expect.any(Number)]),
+                        y: expect.arrayContaining([expect.any(Number)])
+                    }),
+                    expect.objectContaining({
+                        x: expect.arrayContaining([expect.any(Number)]),
+                        y: expect.arrayContaining([expect.any(Number)])
                     })
                 ])
             }),
             {}
         );
+
+        renderAreaChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
+        const mockCalls = (ChartWidget as jest.Mock).mock.calls;
+        const lastCallProps = mockCalls[mockCalls.length - 1][0];
+        expect(lastCallProps.data).toHaveLength(2);
     });
 });
 

packages/pluggableWidgets/bar-chart-web/src/BarChart.tsx

@@ -1,10 +1,4 @@
-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";
@@ -51,15 +45,15 @@ export const BarChart = memo(function BarChart(props: BarChartContainerProps): R
         useCallback((dataSeries, dataPoints, { getExpressionValue }) => {
             const barColorExpression =
                 dataSeries.dataSet === "static" ? dataSeries.staticBarColor : dataSeries.dynamicBarColor;
+
             return {
                 type: "bar",
                 orientation: "h",
                 marker: {
                     color: barColorExpression
                         ? getExpressionValue<string>(barColorExpression, dataPoints.dataSourceItems)
                         : undefined
-                },
-                transforms: getPlotChartDataTransforms(dataSeries.aggregationType, dataPoints)
+                }
             };
         }, [])
     );

packages/pluggableWidgets/bar-chart-web/src/__tests__/BarChart.spec.tsx

@@ -64,28 +64,29 @@ describe("The BarChart widget", () => {
         );
     });
 
-    it("sets the appropriate transforms on the data series based on the aggregation type", () => {
+    it("aggregates data based on the aggregation type", () => {
         renderBarChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
 
         expect(ChartWidget).toHaveBeenCalledWith(
             expect.objectContaining({
                 data: expect.arrayContaining([
-                    expect.objectContaining({ transforms: expect.arrayContaining([]) }),
                     expect.objectContaining({
-                        transforms: expect.arrayContaining([
-                            expect.objectContaining({
-                                type: "aggregate",
-                                groups: expect.arrayContaining(["1", "2"]),
-                                aggregations: expect.arrayContaining([
-                                    expect.objectContaining({ target: "y", enabled: true, func: "avg" })
-                                ])
-                            })
-                        ])
+                        x: expect.arrayContaining([expect.any(Number)]),
+                        y: expect.arrayContaining([expect.any(Number)])
+                    }),
+                    expect.objectContaining({
+                        x: expect.arrayContaining([expect.any(Number)]),
+                        y: expect.arrayContaining([expect.any(Number)])
                     })
                 ])
             }),
             {}
         );
+
+        renderBarChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
+        const mockCalls = (ChartWidget as jest.Mock).mock.calls;
+        const lastCallProps = mockCalls[mockCalls.length - 1][0];
+        expect(lastCallProps.data).toHaveLength(2);
     });
 });
 

packages/pluggableWidgets/bubble-chart-web/src/BubbleChart.tsx

@@ -1,10 +1,4 @@
-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";
@@ -75,6 +69,7 @@
                 );
                 const markerColorExpression =
                     line.dataSet === "static" ? line.staticMarkerColor : line.dynamicMarkerColor;
+
                 return {
                     type: "scatter",
                     mode: "markers",
@@ -85,10 +80,9 @@
                         symbol: ["circle"],
                         size,
                         ...markerOptions
-                    },
-                    transforms: getPlotChartDataTransforms(line.aggregationType, dataPoints)
+                    }
                 };
             }, [])
         );
         return (
             <ChartWidget

packages/pluggableWidgets/bubble-chart-web/src/__tests__/BubbleChart.spec.tsx

@@ -63,28 +63,29 @@ describe("The Bubble widget", () => {
         );
     });
 
-    it("sets the appropriate transforms on the data series based on the aggregation type", () => {
+    it("aggregates data based on the aggregation type", () => {
         renderBubbleChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
 
         expect(ChartWidget).toHaveBeenCalledWith(
             expect.objectContaining({
                 data: expect.arrayContaining([
-                    expect.objectContaining({ transforms: expect.arrayContaining([]) }),
                     expect.objectContaining({
-                        transforms: expect.arrayContaining([
-                            expect.objectContaining({
-                                type: "aggregate",
-                                groups: expect.arrayContaining(["1", "2"]),
-                                aggregations: expect.arrayContaining([
-                                    expect.objectContaining({ target: "y", enabled: true, func: "avg" })
-                                ])
-                            })
-                        ])
+                        x: expect.arrayContaining([expect.any(Number)]),
+                        y: expect.arrayContaining([expect.any(Number)])
+                    }),
+                    expect.objectContaining({
+                        x: expect.arrayContaining([expect.any(Number)]),
+                        y: expect.arrayContaining([expect.any(Number)])
                     })
                 ])
             }),
             {}
         );
+
+        renderBubbleChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
+        const mockCalls = (ChartWidget as jest.Mock).mock.calls;
+        const lastCallProps = mockCalls[mockCalls.length - 1][0];
+        expect(lastCallProps.data).toHaveLength(2);
     });
 });
 

packages/pluggableWidgets/column-chart-web/src/ColumnChart.tsx

@@ -1,10 +1,4 @@
-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";
@@ -56,8 +50,7 @@ export const ColumnChart = memo(function ColumnChart(props: ColumnChartContainer
                     color: columnColorExpression
                         ? getExpressionValue<string>(columnColorExpression, dataPoints.dataSourceItems)
                         : undefined
-                },
-                transforms: getPlotChartDataTransforms(dataSeries.aggregationType, dataPoints)
+                }
             };
         }, [])
     );

packages/pluggableWidgets/column-chart-web/src/__tests__/ColumnChart.spec.tsx

@@ -1,19 +1,27 @@
 import { ChartWidget } from "@mendix/shared-charts/main";
 import { EditableValueBuilder, ListAttributeValueBuilder, list, listExp } from "@mendix/widget-plugin-test-utils";
 import Big from "big.js";
-import { mount, ReactWrapper } from "enzyme";
+import { render, RenderResult } from "@testing-library/react";
 import { createElement } from "react";
 import { ColumnChartContainerProps, SeriesType } from "../../typings/ColumnChartProps";
 import { ColumnChart } from "../ColumnChart";
 
+jest.mock("@mendix/shared-charts/main", () => {
+    const actualModule = jest.requireActual("@mendix/shared-charts/main");
+    return {
+        ...actualModule,
+        ChartWidget: jest.fn(() => null)
+    };
+});
+
 jest.mock("react-plotly.js", () => jest.fn(() => null));
 
 describe("The ColumnChart widget", () => {
     function renderColumnChart(
         configs: Array<Partial<SeriesType>>,
         chartProps?: Partial<ColumnChartContainerProps>
-    ): ReactWrapper {
-        return mount(
+    ): RenderResult {
+        return render(
             <ColumnChart
                 name="column-chart-test"
                 class="column-chart-class"
@@ -36,47 +44,64 @@ describe("The ColumnChart widget", () => {
     }
 
     it("visualizes data as a bar chart", () => {
-        const columnChart = renderColumnChart([{}]);
-        const seriesOptions = columnChart.find(ChartWidget).prop("seriesOptions");
-        expect(seriesOptions).toHaveProperty("type", "bar");
-        expect(seriesOptions).toHaveProperty("orientation", "v");
+        renderColumnChart([{}]);
+
+        expect(ChartWidget).toHaveBeenCalledWith(
+            expect.objectContaining({
+                seriesOptions: expect.objectContaining({
+                    type: "bar",
+                    orientation: "v"
+                })
+            }),
+            expect.anything()
+        );
     });
 
     it("sets the bar color on the data series based on the barColor value", () => {
-        const columnChart = renderColumnChart([
-            { staticBarColor: listExp(() => "red") },
-            { staticBarColor: undefined }
-        ]);
-        const data = columnChart.find(ChartWidget).prop("data");
+        renderColumnChart([{ staticBarColor: listExp(() => "red") }, { staticBarColor: undefined }]);
+
+        const mockCalls = (ChartWidget as jest.Mock).mock.calls;
+        const lastCallProps = mockCalls[mockCalls.length - 1][0];
+        const data = lastCallProps.data;
+
         expect(data).toHaveLength(2);
-        expect(data[0]).toHaveProperty("marker.color", "red");
-        expect(data[1]).toHaveProperty("marker.color", undefined);
+        expect(data[0].marker.color).toBe("red");
+        expect(data[1].marker.color).toBeUndefined();
     });
 
-    it("sets the appropriate transforms on the data series based on the aggregation type", () => {
-        const columnChart = renderColumnChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
-        const data = columnChart.find(ChartWidget).prop("data");
+    it("aggregates data based on the aggregation type", () => {
+        renderColumnChart([{ aggregationType: "none" }, { aggregationType: "avg" }]);
+
+        const mockCalls = (ChartWidget as jest.Mock).mock.calls;
+        const lastCallProps = mockCalls[mockCalls.length - 1][0];
+        const data = lastCallProps.data;
+
         expect(data).toHaveLength(2);
-        expect(data[0]).toHaveProperty("transforms", []);
-        expect(data[1]).toHaveProperty("transforms", [
-            {
-                type: "aggregate",
-                groups: ["1", "2"],
-                aggregations: [
-                    {
-                        target: "y",
-                        enabled: true,
-                        func: "avg"
-                    }
-                ]
-            }
-        ]);
+
+        // Check that each data series has x and y arrays
+        expect(data[0]).toHaveProperty("x");
+        expect(data[0]).toHaveProperty("y");
+        expect(data[1]).toHaveProperty("x");
+        expect(data[1]).toHaveProperty("y");
+
+        // Verify the arrays contain numbers
+        expect(Array.isArray(data[0].x)).toBe(true);
+        expect(Array.isArray(data[0].y)).toBe(true);
+        expect(Array.isArray(data[1].x)).toBe(true);
+        expect(Array.isArray(data[1].y)).toBe(true);
     });
 
     it("sets the appropriate barmode on the layout based on the barmode type", () => {
-        const columnChart = renderColumnChart([], { barmode: "stack" });
-        const layoutOptions = columnChart.find(ChartWidget).prop("layoutOptions");
-        expect(layoutOptions).toHaveProperty("barmode", "stack");
+        renderColumnChart([], { barmode: "stack" });
+
+        expect(ChartWidget).toHaveBeenCalledWith(
+            expect.objectContaining({
+                layoutOptions: expect.objectContaining({
+                    barmode: "stack"
+                })
+            }),
+            expect.anything()
+        );
     });
 });
 

packages/pluggableWidgets/line-chart-web/src/LineChart.tsx

@@ -1,10 +1,4 @@
-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 classNames from "classnames";
@@ -54,8 +48,7 @@ export const LineChart = memo(
                         color: markerColorExpression
                             ? getExpressionValue<string>(markerColorExpression, dataPoints.dataSourceItems)
                             : undefined
-                    },
-                    transforms: getPlotChartDataTransforms(line.aggregationType, dataPoints)
+                    }
                 };
             }, [])
         );