🔨 (tooltip) dismiss mobile tooltips in faceted charts

owid · Nov 14, 2024 · 1a76b25 · 1a76b25
1 parent a7918bc
commit 1a76b25
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -103,6 +103,8 @@ import {
     HorizontalNumericColorLegend,
 } from "../horizontalColorLegend/HorizontalColorLegends"
 
+const LINE_CHART_CLASS_NAME = "LineChart"
+
 // line color
 const BLUR_LINE_COLOR = "#eee"
 const DEFAULT_LINE_COLOR = "#000"
@@ -786,10 +788,16 @@ export class LineChart
 
     @action.bound onDocumentClick(e: MouseEvent): void {
         // only dismiss the tooltip if the click is outside of the chart area
-        if (
-            !this.base.current ||
-            isTargetOutsideElement(e.target as Node, this.base.current)
-        ) {
+        // and outside of the chart areas of neighbouring facets
+        const chartContainer = this.manager.base?.current
+        if (!chartContainer) return
+        const chartAreas = chartContainer.getElementsByClassName(
+            LINE_CHART_CLASS_NAME
+        )
+        const isTargetOutsideChartAreas = Array.from(chartAreas).every(
+            (chartArea) => isTargetOutsideElement(e.target!, chartArea)
+        )
+        if (isTargetOutsideChartAreas) {
             this.dismissTooltip()
         }
     }
@@ -962,7 +970,7 @@ export class LineChart
         return (
             <g
                 ref={this.base}
-                className="LineChart"
+                className={LINE_CHART_CLASS_NAME}
                 onMouseLeave={this.onCursorLeave}
                 onTouchEnd={this.onCursorLeave}
                 onTouchCancel={this.onCursorLeave}
@@ -995,7 +1003,7 @@ export class LineChart
 
         if (this.failMessage)
             return (
-                <g className="LineChart">
+                <g>
                     {this.renderDualAxis()}
                     <NoDataModal
                         manager={manager}

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -65,6 +65,8 @@ interface AreasProps extends React.SVGAttributes<SVGGElement> {
     onAreaMouseLeave?: () => void
 }
 
+const STACKED_AREA_CHART_CLASS_NAME = "StackedArea"
+
 const BLUR_COLOR = "#ddd"
 
 @observer
@@ -592,10 +594,16 @@ export class StackedAreaChart
 
     @action.bound onDocumentClick(e: MouseEvent): void {
         // only dismiss the tooltip if the click is outside of the chart area
-        if (
-            !this.base.current ||
-            isTargetOutsideElement(e.target as Node, this.base.current)
-        ) {
+        // and outside of the chart areas of neighbouring facets
+        const chartContainer = this.manager.base?.current
+        if (!chartContainer) return
+        const chartAreas = chartContainer.getElementsByClassName(
+            STACKED_AREA_CHART_CLASS_NAME
+        )
+        const isTargetOutsideChartAreas = Array.from(chartAreas).every(
+            (chartArea) => isTargetOutsideElement(e.target!, chartArea)
+        )
+        if (isTargetOutsideChartAreas) {
             this.dismissTooltip()
         }
     }
@@ -661,7 +669,7 @@ export class StackedAreaChart
         return (
             <g
                 ref={this.base}
-                className="StackedArea"
+                className={STACKED_AREA_CHART_CLASS_NAME}
                 onMouseLeave={this.onCursorLeave}
                 onTouchEnd={this.onCursorLeave}
                 onTouchCancel={this.onCursorLeave}
@@ -696,7 +704,7 @@ export class StackedAreaChart
     render(): React.ReactElement {
         if (this.failMessage)
             return (
-                <g className="StackedArea">
+                <g>
                     {this.renderAxis()}
                     <NoDataModal
                         manager={this.manager}