@datarailsshared/dr_renderer 1.3.18 → 1.3.20

package/package.json

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

package/src/charts/dr_gauge_chart.js

@@ -145,7 +145,7 @@ function DrGaugeChart(pivotData, opts) {
         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.5em; line-height: 1; color: ${options.label.font_color}">
+            <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
@@ -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/tests/dr_gauge_chart.test.js

@@ -461,7 +461,7 @@ describe("DrGaugeChart", () => {
             expect(simplifyString(label)).toBe(
                 simplifyString(
                     `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px;">
-                        <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: #000">
+                        <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: #000">
                             ${mockFormattedValue}
                         </span>
                         <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: #808080;">Current status</span>
@@ -486,7 +486,7 @@ describe("DrGaugeChart", () => {
             expect(simplifyString(label)).toBe(
                 simplifyString(
                     `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 24px;">
-                        <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: #000">
+                        <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: #000">
                             ${mockFormattedValue}
                             <span style="font-size: 0.5833em; font-weight: 600; color: #929292;">(56%)</span>
                         </span>
@@ -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",