🐛 (scatter) fix legend interaction on mobile

owid · May 26, 2024 · 176c8ea · 176c8ea
1 parent 3bc1a35
commit 176c8ea
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -41,6 +41,7 @@ import {
     PointVector,
     Bounds,
     DEFAULT_BOUNDS,
+    isTouchDevice,
 } from "@ourworldindata/utils"
 import { observer } from "mobx-react"
 import { NoDataModal } from "../noDataModal/NoDataModal"
@@ -385,20 +386,22 @@ export class ScatterPlotChart
     }
 
     @action.bound onLegendMouseOver(color: string): void {
+        if (isTouchDevice()) return
         this.hoverColor = color
     }
 
     @action.bound onLegendMouseLeave(): void {
+        if (isTouchDevice()) return
         this.hoverColor = undefined
     }
 
     // When the color legend is clicked, toggle selection fo all associated keys
-    @action.bound onLegendClick(): void {
-        const { hoverColor, selectionArray } = this
-        if (!this.canAddCountry || hoverColor === undefined) return
+    @action.bound onLegendClick(color: string): void {
+        const { selectionArray } = this
+        if (!this.canAddCountry) return
 
         const keysToToggle = this.series
-            .filter((g) => g.color === hoverColor)
+            .filter((g) => g.color === color)
             .map((g) => g.seriesName)
         const allKeysActive =
             intersection(keysToToggle, this.selectedEntityNames).length ===

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -18,6 +18,7 @@ import {
     clamp,
     HorizontalAlign,
     difference,
+    isTouchDevice,
 } from "@ourworldindata/utils"
 import { TextWrap } from "@ourworldindata/components"
 import { observable, computed, action } from "mobx"
@@ -171,11 +172,13 @@ export class SlopeChart
     // The <HorizontalCategoricalColorLegend /> component expects a string,
     // the <VerticalColorLegend /> component expects a ColorScaleBin.
     @action.bound onLegendMouseOver(binOrColor: string | ColorScaleBin) {
+        if (isTouchDevice()) return
         this.hoverColor =
             typeof binOrColor === "string" ? binOrColor : binOrColor.color
     }
 
     @action.bound onLegendMouseLeave() {
+        if (isTouchDevice()) return
         this.hoverColor = undefined
     }
 
@@ -195,13 +198,16 @@ export class SlopeChart
         )
     }
 
-    // When the color legend is clicked, toggle selection fo all associated keys
-    @action.bound onLegendClick() {
-        const { hoverColor, isEntitySelectionEnabled } = this
-        if (!isEntitySelectionEnabled || hoverColor === undefined) return
+    // When the color legend is clicked, toggle selection for all associated keys
+    @action.bound onLegendClick(binOrColor: string | ColorScaleBin) {
+        const { isEntitySelectionEnabled } = this
+        if (!isEntitySelectionEnabled) return
+
+        const color =
+            typeof binOrColor === "string" ? binOrColor : binOrColor.color
 
         const seriesNamesToToggle = this.series
-            .filter((g) => g.color === hoverColor)
+            .filter((g) => g.color === color)
             .map((g) => g.seriesName)
         const areAllSeriesActive =
             intersection(seriesNamesToToggle, this.selectedEntityNames)