From fc326e8ab8e10b950228233adf87b87f274d9410 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Fri, 8 Nov 2024 13:58:20 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20(grapher)=20remove=20entity-year?= =?UTF-8?q?=20highlight=20from=20stacked=20area=20charts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../grapher/src/chart/ChartManager.ts | 9 +-------- .../grapher/src/core/Grapher.tsx | 10 +++++++--- .../grapher/src/lineCharts/LineChart.tsx | 5 +++-- .../src/lineCharts/LineChartConstants.ts | 7 ++++++- .../grapher/src/mapCharts/MapTooltip.tsx | 2 +- .../src/stackedCharts/StackedAreaChart.tsx | 17 +++++++---------- .../types/src/grapherTypes/GrapherTypes.ts | 2 +- packages/@ourworldindata/types/src/index.ts | 2 +- 8 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/chart/ChartManager.ts b/packages/@ourworldindata/grapher/src/chart/ChartManager.ts index bdd16eecc06..4f04a69d072 100644 --- 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 index 330c06e9237..93674aecb1f 100644 --- 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 index 47a3620b927..7687af7fda8 100644 --- 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 index b290a436a23..e7e9a01cf7e 100644 --- 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 index a09d6f07969..59a4bee155e 100644 --- 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 { 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 index e4cadcec2c5..9d6ad54858c 100644 --- 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 index e82a2d23b1c..2291a7e268f 100644 --- 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 index 4f0e8a12d1a..9df1efb40aa 100644 --- 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,