🔨 refactor hover states

owid · Dec 6, 2024 · b0bb266 · b0bb266
1 parent 8fec598
commit b0bb266
Show file tree

Hide file tree

Showing 18 changed files with 571 additions and 589 deletions.
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
@@ -81,7 +81,6 @@ export interface ChartManager {
     sortConfig?: SortConfig
     showNoDataArea?: boolean // No data area in Marimekko charts
 
-    externalLegendHoverBin?: ColorScaleBin | undefined
     disableIntroAnimation?: boolean
 
     missingDataStrategy?: MissingDataStrategy

diff --git a/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx b/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx
@@ -7,6 +7,7 @@ import {
     GrapherChartType,
     GRAPHER_CHART_TYPES,
     GRAPHER_TAB_QUERY_PARAMS,
+    InteractionState,
 } from "@ourworldindata/types"
 import { LineChartSeries } from "../lineCharts/LineChartConstants"
 import { SelectionArray } from "../selection/SelectionArray"
@@ -188,3 +189,15 @@ export function findValidChartTypeCombination(
     }
     return undefined
 }
+
+/** Useful for sorting series by their interaction state */
+export function byInteractionState(series: {
+    hover?: InteractionState
+}): number {
+    // background series first,
+    // then series in their default state,
+    // then active series
+    if (series.hover === InteractionState.background) return 1
+    else if (series.hover === InteractionState.active) return 3
+    else return 2
+}
diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -479,7 +479,6 @@ export class FacetChart
             const manager = {
                 ...series.manager,
                 useValueBasedColorScheme,
-                externalLegendHoverBin: this.legendHoverBin,
                 xAxisConfig: {
                     // For now, sharing an x axis means hiding the tick labels of inner facets.
                     // This means that none of the x axes are actually hidden (we just don't plot their tick labels).
@@ -763,17 +762,6 @@ export class FacetChart
         return sortedBins
     }
 
-    @observable.ref private legendHoverBin: ColorScaleBin | undefined =
-        undefined
-
-    @action.bound onLegendMouseOver(bin: ColorScaleBin): void {
-        this.legendHoverBin = bin
-    }
-
-    @action.bound onLegendMouseLeave(): void {
-        this.legendHoverBin = undefined
-    }
-
     // end of legend props
 
     @computed private get legend(): HorizontalColorLegend {