@datarailsshared/dr_renderer 1.2.455 → 1.2.457

package/package.json

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

package/src/charts/dr_gauge_chart.js

@@ -25,24 +25,24 @@ const GAUGE_OPTIONS_DEFAULT = {
     },
     goal: {
         title: "Goal",
-        value: 180,
+        value: 1000000,
     },
     isAbsoluteValue: false,
     segments: [
         {
             from: 0,
-            to: 60,
+            to: 50,
             title: "Low",
             color: "#BF1D30",
         },
         {
-            from: 61,
-            to: 80,
+            from: 51,
+            to: 90,
             title: "Medium",
             color: "#FFA310",
         },
         {
-            from: 81,
+            from: 91,
             to: 100,
             title: "High",
             color: "#037C5A",
@@ -91,9 +91,10 @@ function DrGaugeChart(pivotData, opts) {
             gauge: { thickness },
         } = options;
 
-        const bands = segments.map((item) => {
+        const bands = segments.map((item, index) => {
+            const itemFrom = !!index ? item.from - 1 : item.from;
             return {
-                from: isAbsoluteValue ? Math.max(0, item.from - 1) : (Math.max(0, item.from - 1) * goalValue) / 100,
+                from: isAbsoluteValue ? itemFrom : (itemFrom * goalValue) / 100,
                 to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
                 color: item.color,
                 thickness: thickness,
@@ -101,15 +102,14 @@ function DrGaugeChart(pivotData, opts) {
             };
         });
 
-        // clamp segments
-        bands[0].from = 0;
+        // clamp last segment
         bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
 
         return bands;
     };
 
     this.createTicks = function (plotBands, options) {
-        return [...new Set([0, ...plotBands.map((b) => b.to), options.goal.value])].sort((a, b) => a - b);
+        return [...new Set([plotBands[0].from || 0, ...plotBands.map((b) => b.to), options.goal.value])].sort((a, b) => a - b);
     };
 
     this.mergeOptions = function (options) {
@@ -122,7 +122,7 @@ function DrGaugeChart(pivotData, opts) {
 
     this.getAngleForValue = function (
         value,
-        min = 0,
+        min = this.min,
         max = this.max,
         startAngle = this.options.gauge.startAngle,
         endAngle = this.options.gauge.endAngle
@@ -496,7 +496,7 @@ function DrGaugeChart(pivotData, opts) {
 
             // the value axis
             yAxis: {
-                min: 0,
+                min: this.min,
                 max: this.max,
                 tickPositions: this.ticks,
                 tickPosition: "inside",
@@ -558,6 +558,7 @@ function DrGaugeChart(pivotData, opts) {
     this.ticks = this.createTicks(this.plotBands, this.options);
     this.value = this.getValue(pivotData, opts);
     this.max = this.ticks[this.ticks.length - 1];
+    this.min = this.ticks[0];
 }
 
 module.exports = { DrGaugeChart, GAUGE_OPTIONS_DEFAULT };

package/src/highcharts_renderer.js

@@ -7357,19 +7357,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 },
                 {
                     element_type: 'checkbox',
-                    element_label: 'Goal %',
-                    value_name: 'show_percentage_in_goal',
-                    default_value: true,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Value %',
+                    element_label: 'Value % out of Goal',
                     value_name: 'show_percentage_in_value',
                     default_value: true,
                 },
                 {
                     element_type: 'checkbox',
-                    element_label: 'Segments %',
+                    element_label: 'Segment % out Goal',
                     value_name: 'show_percentage_in_segments',
                     default_value: true,
                 },

package/tests/dr_gauge_chart.test.js

@@ -186,7 +186,7 @@ describe("DrGaugeChart", () => {
             ]);
         });
 
-        it("should clamp values (min is always 0, max of goal and last segment)", () => {
+        it("should clamp values (max of goal and last segment)", () => {
             expect(
                 chart.createPlotBands({
                     isAbsoluteValue: true,
@@ -219,7 +219,7 @@ describe("DrGaugeChart", () => {
                 })
             ).toEqual([
                 {
-                    from: 0,
+                    from: 100,
                     to: 200,
                     color: "red",
                     thickness: 10,