@datarailsshared/dr_renderer 1.4.121 → 1.4.129

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.4.121",
+  "version": "1.4.129",
   "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/value.formatter.js

@@ -31,7 +31,7 @@ function isAbsoluteValue(formula) {
     if (!formula)
         return false;
     
-    return lodash.includes(formula.replace(/\s+/g, ''), 'x2-x1');
+    return !lodash.includes(formula.replace(/\s+/g, ''), '/');
 };
 
 module.exports = {

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", () => {

package/tests/value.formatter.test.js

@@ -9,7 +9,8 @@ describe('Function getAggregatorPercentageValueIfRequired', () => {
             chartOptions: { 
                 delta_column: { 
                     name: 'Variance',
-                    formula: 'x2-x1' 
+                    formula: 'x2-x1',
+                    is_percentage: false
                 } 
             }
         };
@@ -17,7 +18,7 @@ describe('Function getAggregatorPercentageValueIfRequired', () => {
         colKey = ['SomeCol'];
     });
 
-    it('should return percentage string when all conditions are met', () => {
+    it('should return percentage string when secondaryAxisSettings.is_percentage is true but delta_column.is_percentage is false', () => {
         const data = {
             rowKeys: ['Variance'],
             getAggregator: jest.fn(() => ({
@@ -28,6 +29,19 @@ describe('Function getAggregatorPercentageValueIfRequired', () => {
         expect(result).toBe('25%');
     });
 
+    it('should return percentage string when secondaryAxisSettings.is_percentage is false but delta_column.is_percentage is true', () => {
+        const data = {
+            rowKeys: ['Variance'],
+            getAggregator: jest.fn(() => ({
+                value: () => 200
+            }))
+        };
+        render_options.comboOptions.secondaryAxisSettings.is_percentage = false;
+        render_options.chartOptions.delta_column.is_percentage = true;
+        const result = getAggregatorPercentageValueIfRequired(50, render_options, data, rowKey, colKey);
+        expect(result).toBe('25%');
+    });
+
     it('should return null if is_percentage is false', () => {
         const data = {
             rowKeys: ['Variance'],
@@ -111,20 +125,19 @@ describe('Function isAbsoluteValue', () => {
         expect(isAbsoluteValue(null)).toBe(false);
     });
 
-    it('should return false if formula does not contain "x2-x1"', () => {
-        expect(isAbsoluteValue('x2 + x1')).toBe(false);
-        expect(isAbsoluteValue('x1-x2')).toBe(false);
-        expect(isAbsoluteValue('')).toBe(false);
+    it('should return false if formula contains "/"', () => {
+        expect(isAbsoluteValue('/')).toBe(false);
+        expect(isAbsoluteValue(' / ')).toBe(false);
     });
 
-    it('should return true if formula contains "x2-x1"', () => {
+    it('should return true if formula does not contain "/"', () => {
         expect(isAbsoluteValue('x2-x1')).toBe(true);
-        expect(isAbsoluteValue(' x2 - x1 ')).toBe(true);
+        expect(isAbsoluteValue(' x1 - x2 ')).toBe(true);
         expect(isAbsoluteValue('some text x2-x1 more text')).toBe(true);
     });
 
     it('should ignore spaces in formula', () => {
         expect(isAbsoluteValue('x2 - x1')).toBe(true);
-        expect(isAbsoluteValue('  x2   -   x1  ')).toBe(true);
+        expect(isAbsoluteValue('  x1   -   x2  ')).toBe(true);
     });
 });