🔨 refactor hover states

packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx

@@ -7,6 +7,8 @@ import {
     GrapherChartType,
     GRAPHER_CHART_TYPES,
     GRAPHER_TAB_QUERY_PARAMS,
+    InteractionState,
+    SeriesName,
 } from "@ourworldindata/types"
 import { LineChartSeries } from "../lineCharts/LineChartConstants"
 import { SelectionArray } from "../selection/SelectionArray"
@@ -17,6 +19,7 @@ import {
     GRAPHER_SETTINGS_CLASS,
     validChartTypeCombinations,
 } from "../core/GrapherConstants"
+import { ChartSeries } from "./ChartInterface"
 
 export const autoDetectYColumnSlugs = (manager: ChartManager): string[] => {
     if (manager.yColumnSlugs && manager.yColumnSlugs.length)
@@ -188,3 +191,21 @@ export function findValidChartTypeCombination(
     }
     return undefined
 }
+
+/** Useful for sorting series by their interaction state */
+export function byInteractionState(series: {
+    hover: InteractionState
+}): number {
+    if (series.hover.background) return 1
+    if (series.hover.active) return 3
+    return 2
+}
+
+export function getInteractionStateForSeries(
+    series: ChartSeries,
+    activeSeriesNames: SeriesName[]
+): InteractionState {
+    const active = activeSeriesNames.includes(series.seriesName)
+    const background = activeSeriesNames.length > 0 && !active
+    return { active, background }
+}

packages/@ourworldindata/grapher/src/core/GrapherConstants.ts

@@ -32,11 +32,13 @@ export const GRAPHER_BACKGROUND_BEIGE = "#fbf9f3"
 export const GRAPHER_DARK_TEXT = "#5b5b5b"
 export const GRAPHER_LIGHT_TEXT = "#858585"
 
+export const GRAPHER_OPACITY_MUTE = 0.3
+
 export const GRAPHER_AXIS_LINE_WIDTH_DEFAULT = 1
 export const GRAPHER_AXIS_LINE_WIDTH_THICK = 2
 
 export const GRAPHER_AREA_OPACITY_DEFAULT = 0.8
-export const GRAPHER_AREA_OPACITY_MUTE = 0.3
+export const GRAPHER_AREA_OPACITY_MUTE = GRAPHER_OPACITY_MUTE
 export const GRAPHER_AREA_OPACITY_FOCUS = 1
 
 export const BASE_FONT_SIZE = 16