Fixes GH-194

Daveiano · Oct 22, 2023 · 363b252 · 363b252
1 parent 109bf23
commit 363b252
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/changelog.md b/changelog.md
@@ -726,6 +726,7 @@ See https://github.com/Daveiano/weewx-wdc/compare/v3.2.0...11eed6b3#diff-ba225fb
 - Bugfix: Wind and Gust speed have a space between unit and comma (and added missing apostrophe to Yesterday's and Today's) GH-200
 - Bugfix: Division by zero in get_windrose_data GH-192
 - Bugfix: Manifest.json does not use base_path GH-197
+- Bugfix: Tool Tip out of Scope GH-194
 - Added `show_min_max` configuration to gauges config, added ordinal display for windDir gauge min/max
 - Only show 3 decimals for the geocode provided by weewx-forecast GH-191
 - Make sidebar scrollable (if there are too many items) GH-193
diff --git a/skins/weewx-wdc/src/js/diagrams/d3/bar.tsx b/skins/weewx-wdc/src/js/diagrams/d3/bar.tsx
@@ -306,6 +306,8 @@ export const D3BarDiagram: FunctionComponent<BarDiagramBaseProps> = (
         .on("mousemove", (event: MouseEvent) => {
           // @see https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales
           const xScaleStep = xScale.step();
+          const pointerX = d3.pointer(event)[0];
+          const padingInner = xScale.paddingInner();
 
           let i = Math.floor(d3.pointer(event)[0] / xScaleStep);
 
@@ -321,10 +323,28 @@ export const D3BarDiagram: FunctionComponent<BarDiagramBaseProps> = (
 
           d3.select(tooltipRef.current)
             .style("display", "block")
-            .style("left", xScaleStep * i + "px")
             // Tooltip over the bars.
             .style("top", yScale(d.y) - 45 + "px");
 
+          // Is the cursor in the right half or in the left half of the chart?
+          if (pointerX > width / 2) {
+            // Right.
+            d3.select(tooltipRef.current).style(
+              "left",
+              margin.left +
+                padingInner * i +
+                xScaleStep * i -
+                (tooltipRef.current?.clientWidth as number) +
+                "px"
+            );
+          } else {
+            // Left.
+            d3.select(tooltipRef.current).style(
+              "left",
+              margin.left + xScaleStep * i + padingInner * i + 40 + "px"
+            );
+          }
+
           if (props.nivoProps.enableCrosshair) {
             focus
               .select("line.y")

diff --git a/skins/weewx-wdc/src/js/diagrams/d3/line.tsx b/skins/weewx-wdc/src/js/diagrams/d3/line.tsx
@@ -597,33 +597,24 @@ export const D3LineDiagram: FunctionComponent<LineDiagramBaseProps> = (
           setTooltip(values);
 
           // Combined tooltip position left or right from the cursor.
-          if (props.data.length > 1) {
-            // Is the cursor in the right half or in the left half of the chart?
-            if (pointerX > width / 2) {
-              // Right.
-              d3.select(tooltipRef.current).style(
-                "left",
-                margin.left +
-                  xScale(values[0].x * 1000) -
-                  (tooltipRef.current?.clientWidth as number) -
-                  20 +
-                  "px"
-              );
-            } else {
-              // Left.
-              d3.select(tooltipRef.current).style(
-                "left",
-                margin.left + xScale(values[0].x * 1000) + 20 + "px"
-              );
-            }
-          } else {
+
+          // Is the cursor in the right half or in the left half of the chart?
+          if (pointerX > width / 2) {
+            // Right.
             d3.select(tooltipRef.current).style(
               "left",
               margin.left +
                 xScale(values[0].x * 1000) -
-                (tooltipRef.current?.clientWidth as number) / 2 +
+                (tooltipRef.current?.clientWidth as number) -
+                20 +
                 "px"
             );
+          } else {
+            // Left.
+            d3.select(tooltipRef.current).style(
+              "left",
+              margin.left + xScale(values[0].x * 1000) + 20 + "px"
+            );
           }
 
           d3.select(tooltipRef.current).style(