🔨 (grapher) remove entity-year highlight from stacked area charts

owid · Nov 11, 2024 · 5b0cb32 · 5b0cb32
1 parent 358e068
commit 5b0cb32
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 30 deletions.
diff --git a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts
@@ -17,12 +17,7 @@ import { TooltipManager } from "../tooltip/TooltipProps"
 import { OwidTable, CoreColumn } from "@ourworldindata/core-table"
 
 import { SelectionArray } from "../selection/SelectionArray"
-import {
-    Annotation,
-    ColumnSlug,
-    SortConfig,
-    TimeBound,
-} from "@ourworldindata/utils"
+import { ColumnSlug, SortConfig, TimeBound } from "@ourworldindata/utils"
 import { ColorScaleBin } from "../color/ColorScaleBin"
 import { ColorScale } from "../color/ColorScale"
 
@@ -85,8 +80,6 @@ export interface ChartManager {
     sortConfig?: SortConfig
     showNoDataArea?: boolean
 
-    annotation?: Annotation
-
     externalLegendFocusBin?: ColorScaleBin | undefined
     disableIntroAnimation?: boolean
 

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -50,7 +50,7 @@ import {
     setWindowQueryStr,
     getWindowUrl,
     Url,
-    Annotation,
+    EntityYearHighlight,
     ColumnSlug,
     DimensionProperty,
     SortBy,
@@ -282,7 +282,7 @@ export interface GrapherProgrammaticInterface extends GrapherInterface {
     dataApiUrl?: string
     env?: string
     dataApiUrlForAdmin?: string
-    annotation?: Annotation
+    entityYearHighlight?: EntityYearHighlight
     baseFontSize?: number
     staticBounds?: Bounds
     staticFormat?: GrapherStaticFormat
@@ -428,7 +428,11 @@ export class Grapher
     @observable comparisonLines?: ComparisonLineConfig[] = undefined // todo: Persistables?
     @observable relatedQuestions?: RelatedQuestionsConfig[] = undefined // todo: Persistables?
 
-    @observable.ref annotation?: Annotation = undefined
+    /**
+     * Used to highlight an entity at a particular time in a line chart.
+     * The sparkline in map tooltips makes use of this.
+     */
+    @observable.ref entityYearHighlight?: EntityYearHighlight = undefined
 
     @observable.ref hideFacetControl?: boolean = undefined
 

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -548,7 +548,8 @@ export class LineChart
 
     @computed get activeX(): number | undefined {
         return (
-            this.tooltipState.target?.x ?? this.props.manager.annotation?.year
+            this.tooltipState.target?.x ??
+            this.props.manager.entityYearHighlight?.year
         )
     }
 
@@ -750,7 +751,7 @@ export class LineChart
     @computed get focusedSeriesNames(): string[] {
         const { externalLegendFocusBin } = this.manager
         const focusedSeriesNames = excludeUndefined([
-            this.props.manager.annotation?.entityName,
+            this.props.manager.entityYearHighlight?.entityName,
             this.hoveredSeriesName,
         ])
         if (externalLegendFocusBin) {

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChartConstants.ts b/packages/@ourworldindata/grapher/src/lineCharts/LineChartConstants.ts
@@ -1,6 +1,10 @@
 import { DualAxis } from "../axis/Axis"
 import { ChartManager } from "../chart/ChartManager"
-import { SeriesName, CoreValueType } from "@ourworldindata/types"
+import {
+    SeriesName,
+    CoreValueType,
+    EntityYearHighlight,
+} from "@ourworldindata/types"
 import { ChartSeries } from "../chart/ChartInterface"
 import { Color } from "@ourworldindata/utils"
 
@@ -40,6 +44,7 @@ export interface LinesProps {
 }
 
 export interface LineChartManager extends ChartManager {
+    entityYearHighlight?: EntityYearHighlight
     lineStrokeWidth?: number
     canSelectMultipleEntities?: boolean
 }
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapTooltip.tsx
@@ -158,7 +158,7 @@ export class MapTooltip extends React.Component<MapTooltipProps> {
             fontSize: 11,
             disableIntroAnimation: true,
             lineStrokeWidth: 2,
-            annotation: {
+            entityYearHighlight: {
                 entityName: this.entityName,
                 year: this.datum?.time,
             },

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -389,18 +389,15 @@ export class StackedAreaChart
 
     @computed get focusedSeriesNames(): string[] {
         const { externalLegendFocusBin } = this.manager
-        const focusedSeriesNames = excludeUndefined([
-            this.props.manager.annotation?.entityName,
+        const externalFocusedSeriesNames = externalLegendFocusBin
+            ? this.rawSeries
+                  .map((s) => s.seriesName)
+                  .filter((name) => externalLegendFocusBin.contains(name))
+            : []
+        return excludeUndefined([
             this.hoverSeriesName,
+            ...externalFocusedSeriesNames,
         ])
-        if (externalLegendFocusBin) {
-            focusedSeriesNames.push(
-                ...this.rawSeries
-                    .map((s) => s.seriesName)
-                    .filter((name) => externalLegendFocusBin.contains(name))
-            )
-        }
-        return focusedSeriesNames
     }
 
     @computed get isFocusMode(): boolean {

diff --git a/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts b/packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts
@@ -52,7 +52,7 @@ export enum ScaleType {
     log = "log",
 }
 
-export interface Annotation {
+export interface EntityYearHighlight {
     entityName?: string
     year?: number
 }

diff --git a/packages/@ourworldindata/types/src/index.ts b/packages/@ourworldindata/types/src/index.ts
@@ -47,7 +47,7 @@ export {
 } from "./grapherTypes/GrapherConstants.js"
 
 export {
-    type Annotation,
+    type EntityYearHighlight,
     type Box,
     type BasicChartInformation,
     SortBy,

diff --git a/site/multiembedder/MultiEmbedder.tsx b/site/multiembedder/MultiEmbedder.tsx
@@ -11,7 +11,6 @@ import {
     SelectionArray,
 } from "@ourworldindata/grapher"
 import {
-    Annotation,
     fetchText,
     getWindowUrl,
     isPresent,
@@ -124,7 +123,7 @@ class MultiEmbedder {
     }
 
     @action.bound
-    async renderInteractiveFigure(figure: Element, annotation?: Annotation) {
+    async renderInteractiveFigure(figure: Element) {
         const isExplorer = figure.hasAttribute(
             EXPLORER_EMBEDDED_FIGURE_SELECTOR
         )
@@ -209,7 +208,6 @@ class MultiEmbedder {
                             this.selection.selectedEntityNames
                         ),
                     },
-                    annotation,
                 }
             )
             if (config.manager?.selection)