@datarailsshared/dr_renderer 1.3.17 → 1.3.19

package/package.json

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

package/src/charts/dr_gauge_chart.js

@@ -338,8 +338,9 @@ function DrGaugeChart(pivotData, opts) {
     };
 
     this.setTicksStyles = function (chart, options) {
-        Object.keys(chart.yAxis[0].ticks).forEach((i) => {
-            const tick = chart.yAxis[0].ticks[i];
+        const ticks = chart.yAxis[0].ticks;
+        Object.keys(ticks).forEach((i) => {
+            const tick = ticks[i];
             const isLeftQuarter = this.isLeftQuarter(tick.pos);
 
             if (tick.pos === options.goal.value) {
@@ -357,8 +358,42 @@ function DrGaugeChart(pivotData, opts) {
                 transform: `translate(${isLeftQuarter ? "-100%" : 0}, 0)`,
             });
         });
+
+        // If goal is hidden, we need to always show goal and hide the closest visible label before it
+        this.updateLabelsWhenGoalIsHidden(ticks, options);
+        
     };
 
+    this.updateLabelsWhenGoalIsHidden = function (ticks, options) {
+        if (ticks[options.goal.value].label.opacity === 0) {
+
+            const ticksArray = Object.entries(ticks);
+
+            const goalTick = ticks[options.goal.value];
+
+            let firstVisibleLabelBeforeGoal = options.goal.value;
+            for (let i = ticksArray.findIndex(([key, _]) => Number(key) === options.goal.value) - 1; i >= 0; i--) {
+                const [key, tick] = ticksArray[i];
+
+                if (tick.label.opacity === 1) {
+                    firstVisibleLabelBeforeGoal = Number(key);
+                    break;
+                }
+            }
+
+            ticks[firstVisibleLabelBeforeGoal].label.css({
+                opacity: 0,
+                visibility: "hidden",
+            });
+
+            goalTick.label.css({
+                opacity: 1,
+                visibility: "visible",
+            });
+
+        }
+    }
+
     this.addTooltips = function (chart, options) {
         if (!options.tooltips.show) {
             return false;
@@ -511,7 +546,7 @@ function DrGaugeChart(pivotData, opts) {
                     enabled: !!this.options.label.show,
                     distance: 0,
                     verticalAlign: "middle",
-                    allowOverlap: true,
+                    allowOverlap: false,
                     align: "left",
                     style: {
                         whiteSpace: "nowrap",

package/src/highcharts_renderer.js

@@ -8286,6 +8286,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-walkthrough',
                         render: highchartsRenderer.ptRenderWaterfallWalkthrough,
                         suboptions: [
+                            highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label"],

package/tests/dr_gauge_chart.test.js

@@ -1204,6 +1204,15 @@ describe("DrGaugeChart", () => {
                                     css: jest.fn(),
                                 },
                             },
+                            180: {
+                                pos: 180,
+                                label: {
+                                    css: jest.fn(),
+                                },
+                                mark: {
+                                    attr: jest.fn(),
+                                },
+                            },
                         },
                     },
                 ],
@@ -1234,11 +1243,14 @@ describe("DrGaugeChart", () => {
                 yAxis: [
                     {
                         ticks: {
-                            0: {
+                            180: {
                                 pos: 180,
                                 mark: {
                                     attr: jest.fn(),
                                 },
+                                label: {
+                                    css: jest.fn(),
+                                },
                             },
                         },
                     },
@@ -1256,7 +1268,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,
@@ -1889,7 +1901,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",