@datarailsshared/dr_renderer 1.4.128 → 1.4.130

package/package.json

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

package/src/charts/dr_gauge_chart.js

@@ -483,10 +483,22 @@ function DrGaugeChart(pivotData, opts, isDynamicGoal) {
             gauge: { thickness },
         } = options;
 
+        // If goal is not positive in percentage mode, scale segments by the current needle magnitude
+        const scaleBase = !isAbsoluteValue && (!helpers.isNumber(goalValue) || goalValue === 0)
+            ? (helpers.isNumber(this.value) && Math.abs(this.value)) || 1
+            : goalValue;
+
         const bands = segments.map((item) => {
+            const fromValue = isAbsoluteValue ? item.from : (item.from * scaleBase) / 100;
+            const toValue = isAbsoluteValue ? item.to : (item.to * scaleBase) / 100;
+
+            // Ensure a valid interval for Highcharts plotBands even when goal is negative
+            const normalizedFrom = Math.min(fromValue, toValue);
+            const normalizedTo = Math.max(fromValue, toValue);
+
             return {
-                from: isAbsoluteValue ? item.from : (item.from * goalValue) / 100,
-                to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
+                from: normalizedFrom,
+                to: normalizedTo,
                 color: item.color,
                 thickness: thickness,
                 title: item.title,
@@ -634,10 +646,10 @@ function DrGaugeChart(pivotData, opts, isDynamicGoal) {
     this.options = this.mergeOptions(opts.chartOptions);
     this.aggregation = DrGaugeChart.getAggregation(pivotData, opts.chartOptions);
     this.format = this.aggregation.widget_values_format;
+    this.value = DrGaugeChart.getValue(pivotData, opts, isDynamicGoal);
     this.setGoal(pivotData, opts);
     this.plotBands = this.createPlotBands(this.options);
     this.ticks = this.createTicks(this.plotBands, this.options);
-    this.value = DrGaugeChart.getValue(pivotData, opts, isDynamicGoal);
     this.max = this.ticks[this.ticks.length - 1];
     this.min = this.ticks[0];
 }

package/src/highcharts_renderer.js

@@ -6657,7 +6657,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     element_type: 'checkbox',
                     value_name: 'dislay_empty_values',
                     element_label: 'Display empty values',
-                    default_value: true
+                    default_value: false
                 },
             ]
         },
@@ -6685,7 +6685,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 element_type: 'checkbox',
                 value_name: 'dislay_empty_values',
                 element_label: 'Display empty values',
-                default_value: true
+                default_value: false
             },
             {
                 element_type: 'devider',

package/tests/dr_gauge_chart.test.js

@@ -310,6 +310,93 @@ describe("DrGaugeChart", () => {
                 },
             ]);
         });
+
+        it("scales by needle magnitude when goal is 0 in percentage mode", () => {
+            chart.value = 250;
+            expect(
+                chart.createPlotBands({
+                    isAbsoluteValue: false,
+                    gauge: { thickness: 10 },
+                    goal: { value: 0 },
+                    segments: [
+                        { from: 0, to: 50, color: "red", title: "Title 1" },
+                        { from: 50, to: 100, color: "blue", title: "Title 2" },
+                    ],
+                })
+            ).toEqual([
+                { from: 0, to: 125, color: "red", thickness: 10, title: "Title 1" },
+                { from: 125, to: 250, color: "blue", thickness: 10, title: "Title 2" },
+            ]);
+        });
+
+        it("scales by absolute needle magnitude when goal is not a number", () => {
+            const featureSpy = jest
+                .spyOn(DrGaugeChart.highchartsRenderer, "hasFeature")
+                .mockReturnValue(true);
+
+            chart.value = -300;
+            const res = chart.createPlotBands({
+                isAbsoluteValue: false,
+                gauge: { thickness: 8 },
+                goal: { value: undefined },
+                segments: [
+                    { from: 0, to: 50, color: "#1", title: "A" },
+                    { from: 50, to: 100, color: "#2", title: "B" },
+                ],
+            });
+
+            expect(res).toEqual([
+                { from: 0, to: 150, color: "#1", thickness: 8, title: "A" },
+                { from: 150, to: 300, color: "#2", thickness: 8, title: "B" },
+            ]);
+
+            featureSpy.mockRestore();
+        });
+
+        it("normalizes bands when goal is negative in percentage mode", () => {
+            const res = chart.createPlotBands({
+                isAbsoluteValue: false,
+                gauge: { thickness: 12 },
+                goal: { value: -1000 },
+                segments: [
+                    { from: 0, to: 50, color: "r", title: "S1" },
+                    { from: 50, to: 100, color: "b", title: "S2" },
+                ],
+            });
+
+            expect(res[0].from).toBe(-500);
+            expect(Math.abs(res[0].to)).toBe(0);
+            expect(res[0].color).toBe("r");
+            expect(res[0].thickness).toBe(12);
+            expect(res[0].title).toBe("S1");
+
+            expect(res[1]).toEqual({ from: -1000, to: -500, color: "b", thickness: 12, title: "S2" });
+        });
+
+        it("does not clamp last segment when dynamic goal feature is enabled", () => {
+            const featureSpy = jest
+                .spyOn(DrGaugeChart.highchartsRenderer, "hasFeature")
+                .mockReturnValue(true);
+
+            const res = chart.createPlotBands({
+                isAbsoluteValue: true,
+                gauge: { thickness: 10 },
+                goal: { value: 1800 },
+                segments: [
+                    { from: 100, to: 200, color: "red", title: "Title 1" },
+                    { from: 200, to: 400, color: "blue", title: "Title 2" },
+                    { from: 400, to: 800, color: "green", title: "Title 3" },
+                ],
+            });
+
+            expect(res).toEqual([
+                { from: 100, to: 200, color: "red", thickness: 10, title: "Title 1" },
+                { from: 200, to: 400, color: "blue", thickness: 10, title: "Title 2" },
+                { from: 400, to: 800, color: "green", thickness: 10, title: "Title 3" },
+            ]);
+
+            featureSpy.mockRestore();
+        });
     });
 
     describe("createTicks", () => {