Add hide_tick_unit option for gauges. GH-249

Daveiano · Feb 7, 2024 · ecf2cda · ecf2cda
1 parent 5d02c9e
commit ecf2cda
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 11 deletions.
diff --git a/changelog.md b/changelog.md
@@ -766,4 +766,4 @@ See https://github.com/Daveiano/weewx-wdc/compare/v3.3.0...580071ca175a03fe4924b
 - Added new property for charts: `legendPosition` - Change legend position GH-228
 - Added option to set default theme (light/dark/auto) GH-241
 - Added per-month statistic tables GH-215
-- Added `windRose_legend_show_units` to hide the units in the windRose legend GH-249
+- Added `windRose_legend_show_units` to hide the units in the windRose legend, added `hide_tick_unit` for gauges GH-249
diff --git a/skins/weewx-wdc/skin.conf b/skins/weewx-wdc/skin.conf
@@ -194,6 +194,7 @@ SKIN_VERSION = 3.5.0-alpha1
         color_scheme = interpolateRdBu
         invert_color_scheme = 1
         show_min_max = 1
+        hide_tick_unit = 0
 
     # For instructions, see https://github.com/Daveiano/weewx-wdc/wiki/Support-for-weewx-xaggs
     # ONLY enable these if you have weewx-xaggs installed!

diff --git a/skins/weewx-wdc/src/js/diagrams/d3/gauge.tsx b/skins/weewx-wdc/src/js/diagrams/d3/gauge.tsx
@@ -36,6 +36,7 @@ type GaugeDiagramBaseProps = {
     color_scheme: string;
     invert_color_scheme: string;
     show_min_max: string;
+    hide_tick_unit: string;
   };
 };
 
@@ -208,8 +209,10 @@ export const D3GaugeDiagram: FunctionComponent<GaugeDiagramBaseProps> = (
     const ticks = d3.range(ticksNumber).map(function (d) {
       const sub_angle = angles.start_angle + sub_arc_ticks * d;
       let label =
-        (scaleMin + d * tick_pct).toFixed(props.rounding) +
-        he.decode(props.unit);
+        `${(scaleMin + d * tick_pct).toFixed(props.rounding)}` +
+        (!parseInt(props.properties.hide_tick_unit)
+          ? he.decode(props.unit)
+          : "");
 
       if (windDirAsOridnal) {
         label =
@@ -222,10 +225,11 @@ export const D3GaugeDiagram: FunctionComponent<GaugeDiagramBaseProps> = (
         }
 
         if (arc >= 1.97 && d == ticksNumber - 1) {
-          label = `${label} / ${
-            (scaleMin + 0 * tick_pct).toFixed(props.rounding) +
-            he.decode(props.unit)
-          }`;
+          label =
+            `${label} / ${(scaleMin + 0 * tick_pct).toFixed(props.rounding)}` +
+            (!parseInt(props.properties.hide_tick_unit)
+              ? he.decode(props.unit)
+              : "");
         }
       }
 

diff --git a/test/e2e-tests/diagrams/gauges.test.ts b/test/e2e-tests/diagrams/gauges.test.ts
@@ -128,4 +128,32 @@ test.describe("Gauges", () => {
       barometerSVG.locator(".gauge-text .gauge-legend-max")
     ).toHaveText("1023.5 mbar");
   });
+
+  test("hide_tick_unit = 1", async ({ page }) => {
+    await page.goto("artifacts-custom-weewx-html/public_html/month.html");
+
+    // Check for each tick that unit is hidden.
+    const windSpeed = page.locator('[data-test="windSpeedGaugeSeries2"] '),
+      windSpeedSVG = windSpeed.locator('[data-test="d3-gauge-svg"]');
+
+    let ticks = windSpeedSVG.locator(".tick-label");
+
+    await expect(ticks).toHaveCount(7);
+
+    for (const tick of await windSpeedSVG.locator(".tick-label").all()) {
+      await expect(tick).not.toContainText("km/h");
+    }
+
+    // Check for each tick that unit is shown.
+    const outTemp = page.locator('[data-test="outTempGaugeSeries0"] '),
+      outTempSVG = outTemp.locator('[data-test="d3-gauge-svg"]');
+
+    ticks = outTempSVG.locator(".tick-label");
+
+    await expect(ticks).toHaveCount(7);
+
+    for (const tick of await outTempSVG.locator(".tick-label").all()) {
+      await expect(tick).toContainText("°C");
+    }
+  });
 });
diff --git a/...sic-rendering-url-artifacts-custom-weewx-html-public-html-index-html-1-chromium-linux.txt b/...sic-rendering-url-artifacts-custom-weewx-html-public-html-index-html-1-chromium-linux.txt
@@ -8,7 +8,7 @@
                 obs: 'outTemp',
                 unit: "&#176;C",
                 rounding: 1,
-                properties: {'tick_number': '7', 'arc': '1.2', 'offset': '20', 'mode': 'normal', 'color_scheme': 'interpolateRdBu', 'invert_color_scheme': '1', 'show_min_max': '1', 'min': '-20', 'max': '40'},
+                properties: {'tick_number': '7', 'arc': '1.2', 'offset': '20', 'mode': 'normal', 'color_scheme': 'interpolateRdBu', 'invert_color_scheme': '1', 'show_min_max': '1', 'hide_tick_unit': '0', 'min': '-20', 'max': '40'},
                 label: "Outside Temperature",
                 dayChange: false,
             }

diff --git a/...sic-rendering-url-artifacts-custom-weewx-html-public-html-month-html-1-chromium-linux.txt b/...sic-rendering-url-artifacts-custom-weewx-html-public-html-month-html-1-chromium-linux.txt
@@ -8,7 +8,7 @@
                 obs: 'outTemp',
                 unit: "&#176;C",
                 rounding: 1,
-                properties: {'tick_number': '7', 'arc': '1.2', 'offset': '20', 'mode': 'normal', 'color_scheme': 'interpolateRdBu', 'invert_color_scheme': '1', 'show_min_max': '1', 'min': '-20', 'max': '40'},
+                properties: {'tick_number': '7', 'arc': '1.2', 'offset': '20', 'mode': 'normal', 'color_scheme': 'interpolateRdBu', 'invert_color_scheme': '1', 'show_min_max': '1', 'hide_tick_unit': '0', 'min': '-20', 'max': '40'},
                 label: "Outside Temperature",
                 dayChange: false,
             }

diff --git a/...uges-Full-arc-url-artifacts-custom-weewx-html-public-html-index-html-1-chromium-linux.txt b/...uges-Full-arc-url-artifacts-custom-weewx-html-public-html-index-html-1-chromium-linux.txt
@@ -8,7 +8,7 @@
                 obs: 'windDir',
                 unit: "&#176;",
                 rounding: 0,
-                properties: {'tick_number': '7', 'arc': '2', 'offset': '20', 'mode': 'normal', 'color_scheme': 'interpolateRdBu', 'invert_color_scheme': '1', 'show_min_max': '1', 'min': '0', 'max': '360'},
+                properties: {'tick_number': '7', 'arc': '2', 'offset': '20', 'mode': 'normal', 'color_scheme': 'interpolateRdBu', 'invert_color_scheme': '1', 'show_min_max': '1', 'hide_tick_unit': '0', 'min': '0', 'max': '360'},
                 label: "Wind Direction",
                 dayChange: false,
             }

diff --git a/...uges-Full-arc-url-artifacts-custom-weewx-html-public-html-month-html-1-chromium-linux.txt b/...uges-Full-arc-url-artifacts-custom-weewx-html-public-html-month-html-1-chromium-linux.txt
@@ -8,7 +8,7 @@
                 obs: 'windDir',
                 unit: "&#176;",
                 rounding: 0,
-                properties: {'tick_number': '7', 'arc': '2', 'offset': '20', 'mode': 'normal', 'color_scheme': 'interpolateRdBu', 'invert_color_scheme': '1', 'show_min_max': '1', 'min': '0', 'max': '360'},
+                properties: {'tick_number': '7', 'arc': '2', 'offset': '20', 'mode': 'normal', 'color_scheme': 'interpolateRdBu', 'invert_color_scheme': '1', 'show_min_max': '1', 'hide_tick_unit': '0', 'min': '0', 'max': '360'},
                 label: "Wind Direction",
                 dayChange: false,
             }

diff --git a/test/test_install_report/src/skin-custom.conf b/test/test_install_report/src/skin-custom.conf
@@ -135,6 +135,7 @@ SKIN_VERSION = 2.2.1
         color_scheme = interpolateRdBu
         invert_color_scheme = 1
         show_min_max = 1
+        hide_tick_unit = 0
         [[[day]]]
             [[[[outTemp]]]]
                 min = -20
@@ -156,6 +157,7 @@ SKIN_VERSION = 2.2.1
                 offset = 3
             [[[[windSpeed]]]]
                 min = 0
+                hide_tick_unit = 1
             [[[[windDir]]]]
                 arc = 2
                 min = 0