@datarailsshared/dr_renderer 1.3.31 → 1.3.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.3.31",
+  "version": "1.3.33",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/charts/dr_gauge_chart.js

@@ -115,22 +115,18 @@ function DrGaugeChart(pivotData, opts) {
     };
 
     this.formatValueLabel = function (value, options) {
-        return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${
-            options.label.font_size
-        }px;">
+        return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${options.label.font_size
+            }px;">
             <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: ${options.label.font_color}">
                 ${this.formatValue(value)}
-                ${
-            options.label.show_percentage_in_value
-                ? `<span style="font-size: 0.5833em; font-weight: 600; color: ${
-                    options.gauge.colors.meta
+                ${options.label.show_percentage_in_value
+                ? `<span style="font-size: 0.5833em; font-weight: 600; color: ${options.gauge.colors.meta
                 };">(${this.toPercent(value)})</span>`
                 : ""
-        }
+            }
             </span>
-            <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: ${
-            options.gauge.colors.meta
-        };">Current status</span>
+            <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: ${options.gauge.colors.meta
+            };">Current status</span>
         </span>`;
     };
 
@@ -334,8 +330,7 @@ function DrGaugeChart(pivotData, opts) {
             // goal tooltip if lebels are hidden
             if (tick.pos === options.goal.value && !options.label.show) {
                 drTooltip.add(
-                    `${
-                        options.label.show_goal_name ? options.goal.title || "" : ""
+                    `${options.label.show_goal_name ? options.goal.title || "" : ""
                     }<span style="font-weight: 600">${this.formatValue(options.goal.value)}</span>`,
                     chart.goalIcon.element,
                     {
@@ -385,10 +380,9 @@ function DrGaugeChart(pivotData, opts) {
             gauge: { thickness },
         } = options;
 
-        const bands = segments.map((item, index) => {
-            const itemFrom = !!index ? item.from - 1 : item.from;
+        const bands = segments.map((item) => {
             return {
-                from: isAbsoluteValue ? itemFrom : (itemFrom * goalValue) / 100,
+                from: isAbsoluteValue ? item.from : (item.from * goalValue) / 100,
                 to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
                 color: item.color,
                 thickness: thickness,
@@ -451,6 +445,7 @@ function DrGaugeChart(pivotData, opts) {
                 },
                 margin: [0, 0, 0, 0],
                 spacing: [0, 0, 0, 0],
+                animation: !DrGaugeChart.highchartsRenderer.chartAnimationsDisabled(),
             },
 
             pane: {
@@ -510,6 +505,7 @@ function DrGaugeChart(pivotData, opts) {
                         backgroundColor: this.options.gauge.pivot.color,
                         radius: this.options.gauge.pivot.radius,
                     },
+                    animation: !DrGaugeChart.highchartsRenderer.chartAnimationsDisabled(),
                 },
             ],
         };
@@ -531,7 +527,7 @@ DrGaugeChart.createTicks = function (plotBands, options) {
     return _.uniq([plotBands[0].from || 0, ...plotBands.map((b) => b.to), options.goal.value]).sort((a, b) => a - b);
 };
 
-DrGaugeChart.getBorderPosition  = function (chart, options, position) {
+DrGaugeChart.getBorderPosition = function (chart, options, position) {
     const { center, size } = chart.pane[0].options;
     const {
         gauge: { tickLength, tickWidth },

package/src/highcharts_renderer.js

@@ -9932,6 +9932,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         disableAnimation = disabled;
     };
 
+    highchartsRenderer.chartAnimationsDisabled = function () {
+        return disableAnimation;
+    };
+
     highchartsRenderer.adjustFormatToSupportedByMoment = function(format) {
         return typeof format === 'string'
             ? format.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/h/g, 'H')

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,6 +114,11 @@ describe("DrGaugeChart", () => {
             chart.render();
             expect(chart.configChart).toHaveBeenCalled();
         });
+
+        it("disables chart animations by demand", () => {
+            chart.render();
+            expect(DrGaugeChart.highchartsRenderer.chartAnimationsDisabled).toHaveBeenCalledTimes(2);
+        });
     });
 
     describe("isLeftQuarter", () => {
@@ -152,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",
@@ -208,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",
@@ -264,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",
@@ -1745,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",