🐛 mute all series if active series is not in facet

owid · Dec 11, 2024 · 96d13d7 · 96d13d7
1 parent bb551ce
commit 96d13d7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx b/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx
@@ -206,9 +206,12 @@ export function byInteractionState(series: {
 
 export function getInteractionStateForSeries(
     series: ChartSeries,
-    activeSeriesNames: SeriesName[]
+    {
+        activeSeriesNames,
+        isInteractionModeActive,
+    }: { activeSeriesNames: SeriesName[]; isInteractionModeActive: boolean }
 ): InteractionState {
     const active = activeSeriesNames.includes(series.seriesName)
-    const background = activeSeriesNames.length > 0 && !active
+    const background = isInteractionModeActive && !active
     return { active, background }
 }
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -556,6 +556,10 @@ export class LineChart
 
     @computed get isHoverModeActive(): boolean {
         return this.hoveredSeriesNames.length > 0
+        return (
+            this.hoveredSeriesNames.length > 0 ||
+            !!this.manager.externalLegendHoverBin
+        )
     }
 
     @computed private get hasEntityYearHighlight(): boolean {
@@ -1097,7 +1101,10 @@ export class LineChart
     }
 
     private hoverStateForSeries(series: LineChartSeries): InteractionState {
-        return getInteractionStateForSeries(series, this.hoveredSeriesNames)
+        return getInteractionStateForSeries(series, {
+            isInteractionModeActive: this.isHoverModeActive,
+            activeSeriesNames: this.hoveredSeriesNames,
+        })
     }
 
     @computed get renderSeries(): RenderLineChartSeries[] {

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -237,7 +237,10 @@ export class SlopeChart
     }
 
     @computed private get isHoverModeActive(): boolean {
-        return this.hoveredSeriesNames.length > 0
+        return (
+            this.hoveredSeriesNames.length > 0 ||
+            !!this.manager.externalLegendHoverBin
+        )
     }
 
     @computed private get yColumns(): CoreColumn[] {
@@ -448,7 +451,10 @@ export class SlopeChart
     }
 
     private hoverStateForSeries(series: SlopeChartSeries): InteractionState {
-        return getInteractionStateForSeries(series, this.hoveredSeriesNames)
+        return getInteractionStateForSeries(series, {
+            isInteractionModeActive: this.isHoverModeActive,
+            activeSeriesNames: this.hoveredSeriesNames,
+        })
     }
 
     @computed private get renderSeries(): RenderSlopeChartSeries[] {

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -301,8 +301,11 @@ export class StackedAreaChart extends AbstractStackedChart {
     private hoverStateForSeries(
         series: StackedSeries<number>
     ): InteractionState {
-        const focusedSeriesNames = excludeUndefined([this.hoveredSeriesName])
-        return getInteractionStateForSeries(series, focusedSeriesNames)
+        const hoveredSeriesNames = excludeUndefined([this.hoveredSeriesName])
+        return getInteractionStateForSeries(series, {
+            isInteractionModeActive: this.isHoverModeActive,
+            activeSeriesNames: hoveredSeriesNames,
+        })
     }
 
     @computed get lineLegendSeries(): LineLabelSeries[] {
@@ -439,6 +442,10 @@ export class StackedAreaChart extends AbstractStackedChart {
         )
     }
 
+    @computed get isHoverModeActive(): boolean {
+        return !!this.hoveredSeriesName || !!this.manager.externalLegendHoverBin
+    }
+
     @computed get hoveredSeriesNames(): string[] {
         return this.hoveredSeriesName ? [this.hoveredSeriesName] : []
     }