@datarailsshared/dr_renderer 1.2.463 → 1.3.1-27.merge

package/tests/dr_gauge_chart.test.js

@@ -5,6 +5,7 @@ const { DrChartTooltip } = require("../src/dr_chart_tooltip");
 jest.mock("../src/dr_chart_tooltip"); // Mock the tooltip class
 
 const mockFormattedValue = "16,549";
+let disableChartAnimation = false;
 
 DrGaugeChart.highchartsRenderer = {
     CHART_TYPES: {
@@ -20,6 +21,8 @@ DrGaugeChart.highchartsRenderer = {
     formatValue: jest.fn().mockReturnValue({
         value: mockFormattedValue,
     }),
+    disableChartAnimations: jest.fn((value) => disableChartAnimation = value),
+    chartAnimationsDisabled: jest.fn(() => disableChartAnimation),
 };
 
 const mockAggregationValue = 1000;
@@ -111,19 +114,28 @@ describe("DrGaugeChart", () => {
             chart.render();
             expect(chart.configChart).toHaveBeenCalled();
         });
+
+        it("disables chart animations by demand", () => {
+            chart.render();
+            expect(DrGaugeChart.highchartsRenderer.chartAnimationsDisabled).toHaveBeenCalledTimes(2);
+        });
     });
 
     describe("isLeftQuarter", () => {
         it("should check in which quarter the chart value is", () => {
-            expect(chart.isLeftQuarter(20, 100)).toBe(true);
-            expect(chart.isLeftQuarter(20, 30)).toBe(false);
-            expect(chart.isLeftQuarter(20, 20)).toBe(false);
-            expect(chart.isLeftQuarter(100, 200)).toBe(false);
-            expect(chart.isLeftQuarter(99, 200)).toBe(true);
+            expect(chart.isLeftQuarter(20, 100, 0)).toBe(true);
+            expect(chart.isLeftQuarter(20, 30, 0)).toBe(false);
+            expect(chart.isLeftQuarter(20, 20, 0)).toBe(false);
+            expect(chart.isLeftQuarter(100, 200, 0)).toBe(false);
+            expect(chart.isLeftQuarter(99, 200, 0)).toBe(true);
+
+            expect(chart.isLeftQuarter(59, 100, 20)).toBe(true);
+            expect(chart.isLeftQuarter(60, 100, 20)).toBe(false);
         });
 
-        it("should use default #max parameter", () => {
+        it("should use default #max  and #min parameters", () => {
             // Max = 180
+            // Min = 0
             expect(chart.isLeftQuarter(20)).toBe(true);
             expect(chart.isLeftQuarter(120)).toBe(false);
         });
@@ -148,13 +160,13 @@ describe("DrGaugeChart", () => {
                             title: "Title 1",
                         },
                         {
-                            from: 201,
+                            from: 200,
                             to: 400,
                             color: "blue",
                             title: "Title 2",
                         },
                         {
-                            from: 401,
+                            from: 400,
                             to: 800,
                             color: "blue",
                             title: "Title 3",
@@ -204,13 +216,13 @@ describe("DrGaugeChart", () => {
                             title: "Title 1",
                         },
                         {
-                            from: 201,
+                            from: 200,
                             to: 400,
                             color: "blue",
                             title: "Title 2",
                         },
                         {
-                            from: 401,
+                            from: 400,
                             to: 800,
                             color: "blue",
                             title: "Title 3",
@@ -260,13 +272,13 @@ describe("DrGaugeChart", () => {
                             title: "Title 1",
                         },
                         {
-                            from: 51,
+                            from: 50,
                             to: 100,
                             color: "blue",
                             title: "Title 2",
                         },
                         {
-                            from: 101,
+                            from: 100,
                             to: 175,
                             color: "blue",
                             title: "Title 3",
@@ -302,7 +314,7 @@ describe("DrGaugeChart", () => {
     describe("createTicks", () => {
         it("should create a ticks array", () => {
             expect(
-                chart.createTicks(
+                DrGaugeChart.createTicks(
                     [
                         {
                             to: 100,
@@ -325,7 +337,7 @@ describe("DrGaugeChart", () => {
 
         it("should sort and remove duplicates", () => {
             expect(
-                chart.createTicks(
+                DrGaugeChart.createTicks(
                     [
                         {
                             to: 100,
@@ -461,7 +473,7 @@ describe("DrGaugeChart", () => {
             expect(simplifyString(label)).toBe(
                 simplifyString(
                     `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px;">
-                        <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: #000">
+                        <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: #000">
                             ${mockFormattedValue}
                         </span>
                         <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: #808080;">Current status</span>
@@ -486,7 +498,7 @@ describe("DrGaugeChart", () => {
             expect(simplifyString(label)).toBe(
                 simplifyString(
                     `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 24px;">
-                        <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: #000">
+                        <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: #000">
                             ${mockFormattedValue}
                             <span style="font-size: 0.5833em; font-weight: 600; color: #929292;">(56%)</span>
                         </span>
@@ -703,12 +715,12 @@ describe("DrGaugeChart", () => {
     describe("getValue", () => {
         it("should return aggregator value unledss the total is empty", () => {
             DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([]);
-            expect(chart.getValue(mockPivotData, {})).toBe(mockAggregationValue);
+            expect(DrGaugeChart.getValue(mockPivotData, {})).toBe(mockAggregationValue);
         });
 
         it("should return value to display", () => {
             DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries.mockReturnValue([{ data: [2000] }]);
-            expect(chart.getValue(mockPivotData, {})).toBe(2000);
+            expect(DrGaugeChart.getValue(mockPivotData, {})).toBe(2000);
         });
 
         it("should calculate total", () => {
@@ -717,7 +729,7 @@ describe("DrGaugeChart", () => {
                 { data: [3000] },
                 { data: [5000] },
             ]);
-            expect(chart.getValue(mockPivotData, {})).toBe(10000);
+            expect(DrGaugeChart.getValue(mockPivotData, {})).toBe(10000);
         });
     });
 
@@ -741,14 +753,14 @@ describe("DrGaugeChart", () => {
         };
 
         it("return a start border position", () => {
-            expect(chart.getBorderPosition(mockChart, mockOptions, "start")).toEqual({
+            expect(DrGaugeChart.getBorderPosition(mockChart, mockOptions, "start")).toEqual({
                 x: 170,
                 y: 201,
             });
         });
 
         it("return an end border position", () => {
-            expect(chart.getBorderPosition(mockChart, mockOptions, "end")).toEqual({
+            expect(DrGaugeChart.getBorderPosition(mockChart, mockOptions, "end")).toEqual({
                 x: 230,
                 y: 201,
             });
@@ -757,7 +769,7 @@ describe("DrGaugeChart", () => {
 
     describe("createBorder", () => {
         beforeEach(() => {
-            chart.getBorderPosition = jest.fn().mockReturnValue({
+            DrGaugeChart.getBorderPosition = jest.fn().mockReturnValue({
                 x: 100,
                 y: 200,
             });
@@ -801,7 +813,7 @@ describe("DrGaugeChart", () => {
         };
 
         it("should create a start border", () => {
-            chart.createBorder(
+            DrGaugeChart.createBorder(
                 mockChart,
                 {
                     gauge: {
@@ -830,7 +842,7 @@ describe("DrGaugeChart", () => {
         });
 
         it("should create an end border", () => {
-            chart.createBorder(
+            DrGaugeChart.createBorder(
                 mockChart,
                 {
                     gauge: {
@@ -986,7 +998,7 @@ describe("DrGaugeChart", () => {
     describe("getValueLabelPosition", () => {
         it("should return a value label position depends on the pane center and offsets", () => {
             expect(
-                chart.getValueLabelPosition(
+                DrGaugeChart.getValueLabelPosition(
                     {
                         pane: [
                             {
@@ -1008,7 +1020,7 @@ describe("DrGaugeChart", () => {
             });
 
             expect(
-                chart.getValueLabelPosition(
+                DrGaugeChart.getValueLabelPosition(
                     {
                         pane: [
                             {
@@ -1040,7 +1052,7 @@ describe("DrGaugeChart", () => {
 
         beforeEach(() => {
             chart.formatValueLabel = jest.fn().mockReturnValue("<div>Mock label</div>");
-            chart.getValueLabelPosition = jest.fn().mockReturnValue({
+            DrGaugeChart.getValueLabelPosition = jest.fn().mockReturnValue({
                 x: 100,
                 y: 200,
             });
@@ -1204,6 +1216,15 @@ describe("DrGaugeChart", () => {
                                     css: jest.fn(),
                                 },
                             },
+                            180: {
+                                pos: 180,
+                                label: {
+                                    css: jest.fn(),
+                                },
+                                mark: {
+                                    attr: jest.fn(),
+                                },
+                            },
                         },
                     },
                 ],
@@ -1234,11 +1255,14 @@ describe("DrGaugeChart", () => {
                 yAxis: [
                     {
                         ticks: {
-                            0: {
+                            180: {
                                 pos: 180,
                                 mark: {
                                     attr: jest.fn(),
                                 },
+                                label: {
+                                    css: jest.fn(),
+                                },
                             },
                         },
                     },
@@ -1256,7 +1280,7 @@ describe("DrGaugeChart", () => {
                 },
             });
             // add a goal tick styles
-            expect(mockChart.yAxis[0].ticks[0].mark.attr).toHaveBeenCalledWith({
+            expect(mockChart.yAxis[0].ticks[180].mark.attr).toHaveBeenCalledWith({
                 "pointer-events": "none",
                 stroke: "blue",
                 "stroke-dasharray": 2,
@@ -1524,7 +1548,7 @@ describe("DrGaugeChart", () => {
 
             // Spy on class methods
             jest.spyOn(chart, "createValueLabel").mockReturnValue(mockValueLabel);
-            jest.spyOn(chart, "createBorder").mockImplementation((chart, options, position) => {
+            jest.spyOn(DrGaugeChart, "createBorder").mockImplementation((chart, options, position) => {
                 if (position === "start") return mockStartBorder;
                 if (position === "end") return mockEndBorder;
             });
@@ -1545,14 +1569,14 @@ describe("DrGaugeChart", () => {
         it("assigns the start border to chart.startBorder", () => {
             chart.setCustomElements(mockChart, mockOptions);
 
-            expect(chart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "start");
+            expect(DrGaugeChart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "start");
             expect(mockChart.startBorder).toBe(mockStartBorder);
         });
 
         it("assigns the end border to chart.endBorder", () => {
             chart.setCustomElements(mockChart, mockOptions);
 
-            expect(chart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "end");
+            expect(DrGaugeChart.createBorder).toHaveBeenCalledWith(mockChart, mockOptions, "end");
             expect(mockChart.endBorder).toBe(mockEndBorder);
         });
 
@@ -1593,12 +1617,12 @@ describe("DrGaugeChart", () => {
             mockValueLabelPosition = { x: 70, y: 80 };
 
             // Spy on helper methods
-            jest.spyOn(chart, "getBorderPosition").mockImplementation((chart, options, position) => {
+            jest.spyOn(DrGaugeChart, "getBorderPosition").mockImplementation((chart, options, position) => {
                 if (position === "start") return mockStartPosition;
                 if (position === "end") return mockEndPosition;
             });
             jest.spyOn(chart, "getGoalIconPosition").mockReturnValue(mockGoalIconPosition);
-            jest.spyOn(chart, "getValueLabelPosition").mockReturnValue(mockValueLabelPosition);
+            jest.spyOn(DrGaugeChart, "getValueLabelPosition").mockReturnValue(mockValueLabelPosition);
         });
 
         afterEach(() => {
@@ -1608,14 +1632,14 @@ describe("DrGaugeChart", () => {
         it("updates startBorder attributes correctly", () => {
             chart.updateCustomElements(mockChart, mockOptions);
 
-            expect(chart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "start");
+            expect(DrGaugeChart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "start");
             expect(mockChart.startBorder.attr).toHaveBeenCalledWith(mockStartPosition);
         });
 
         it("updates endBorder attributes correctly", () => {
             chart.updateCustomElements(mockChart, mockOptions);
 
-            expect(chart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "end");
+            expect(DrGaugeChart.getBorderPosition).toHaveBeenCalledWith(mockChart, mockOptions, "end");
             expect(mockChart.endBorder.attr).toHaveBeenCalledWith(mockEndPosition);
         });
 
@@ -1629,7 +1653,7 @@ describe("DrGaugeChart", () => {
         it("updates label attributes correctly", () => {
             chart.updateCustomElements(mockChart, mockOptions);
 
-            expect(chart.getValueLabelPosition).toHaveBeenCalledWith(mockChart, mockOptions);
+            expect(DrGaugeChart.getValueLabelPosition).toHaveBeenCalledWith(mockChart, mockOptions);
             expect(mockChart.label.attr).toHaveBeenCalledWith(mockValueLabelPosition);
         });
     });
@@ -1729,13 +1753,13 @@ describe("DrGaugeChart", () => {
                     color: "#BF1D30",
                 },
                 {
-                    from: 51,
+                    from: 50,
                     to: 160,
                     title: "Medium",
                     color: "#FFA310",
                 },
                 {
-                    from: 161,
+                    from: 160,
                     to: 200,
                     title: "High",
                     color: "#037C5A",
@@ -1889,7 +1913,7 @@ describe("DrGaugeChart", () => {
             expect(config.yAxis.labels.enabled).toBe(mockOptions.label.show);
             expect(config.yAxis.labels.distance).toBe(0),
                 expect(config.yAxis.labels.verticalAlign).toBe("middle"),
-                expect(config.yAxis.labels.allowOverlap).toBe(true),
+                expect(config.yAxis.labels.allowOverlap).toBe(false),
                 expect(config.yAxis.labels.align).toBe("left");
             expect(config.yAxis.labels.style).toEqual({
                 whiteSpace: "nowrap",