✨ (slope) add entity annotation to tooltip

owid · Nov 29, 2024 · 2c40d5c · 2c40d5c
1 parent 8482c7e
commit 2c40d5c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -583,22 +583,25 @@ export class SlopeChart
         return !!this.manager.isSemiNarrow
     }
 
+    @computed private get showValueLabelsInline(): boolean {
+        return this.useCompactLineLegend
+    }
+
     // used by LineLegend
     @computed get focusedSeriesNames(): SeriesName[] {
         return this.hoveredSeriesName ? [this.hoveredSeriesName] : []
     }
 
     @computed get lineLegendSeriesLeft(): LineLabelSeries[] {
         return this.series.map((series) => {
-            const { seriesName, color, start, annotation } = series
+            const { seriesName, color, start } = series
             const formattedValue = this.formatColumn.formatValueShort(
                 start.value
             )
             return {
                 color,
                 seriesName,
                 label: formattedValue,
-                annotation,
                 yValue: start.value,
             }
         })
@@ -755,6 +758,9 @@ export class SlopeChart
         const title = isRelativeMode
             ? `${series.seriesName}, ${formatColumn.formatTime(endTime)}`
             : series.seriesName
+        const titleAnnotation = !this.showValueLabelsInline
+            ? series.annotation
+            : undefined
 
         const isStartValueOriginal = series.start.originalTime === startTime
         const isEndValueOriginal = series.end.originalTime === endTime
@@ -830,6 +836,7 @@ export class SlopeChart
                 offsetY={-16}
                 style={{ maxWidth: "250px" }}
                 title={title}
+                titleAnnotation={titleAnnotation}
                 subtitle={timeLabel}
                 subtitleFormat={targetYear ? "notice" : undefined}
                 dissolve={fading}
@@ -1004,7 +1011,7 @@ export class SlopeChart
                 yRange={[this.bounds.top, this.bounds.bottom]}
                 maxWidth={this.maxLineLegendWidth}
                 lineLegendAnchorX="start"
-                showValueLabelsInline={!this.useCompactLineLegend}
+                showValueLabelsInline={this.showValueLabelsInline}
                 connectorLineWidth={this.lineLegendConnectorLinesWidth}
                 fontSize={this.fontSize}
                 fontWeight={700}
@@ -1040,7 +1047,6 @@ export class SlopeChart
                 yRange={[this.bounds.top, this.bounds.bottom]}
                 maxWidth={this.maxLineLegendWidth}
                 lineLegendAnchorX="end"
-                showValueLabelsInline={!this.useCompactLineLegend}
                 connectorLineWidth={this.lineLegendConnectorLinesWidth}
                 fontSize={this.fontSize}
                 isStatic={this.manager.isStatic}

diff --git a/packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss b/packages/@ourworldindata/grapher/src/tooltip/Tooltip.scss
@@ -67,6 +67,13 @@
                     font-size: 14px;
                     font-weight: $bold;
                     letter-spacing: 0;
+
+                    .annotation {
+                        margin-left: 4px;
+                        font-weight: normal;
+                        color: $grey;
+                        font-size: 0.9em;
+                    }
                 }
                 .subtitle {
                     margin: 4px 0 2px 0;

diff --git a/packages/@ourworldindata/grapher/src/tooltip/Tooltip.tsx b/packages/@ourworldindata/grapher/src/tooltip/Tooltip.tsx
@@ -103,6 +103,7 @@ class TooltipCard extends React.Component<
         let {
             id,
             title,
+            titleAnnotation,
             subtitle,
             subtitleFormat,
             footer,
@@ -189,7 +190,14 @@ class TooltipCard extends React.Component<
             >
                 {hasHeader && (
                     <div className="frontmatter">
-                        {title && <div className="title">{title}</div>}
+                        {title && (
+                            <div className="title">
+                                {title}{" "}
+                                <span className="annotation">
+                                    {titleAnnotation}
+                                </span>
+                            </div>
+                        )}
                         {subtitle && (
                             <div className="subtitle">
                                 {timeNotice && TOOLTIP_ICON.notice}

diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts b/packages/@ourworldindata/grapher/src/tooltip/TooltipProps.ts
@@ -28,6 +28,7 @@ export interface TooltipProps {
     offsetXDirection?: "left" | "right"
     offsetYDirection?: "upward" | "downward"
     title?: string | number // header text
+    titleAnnotation?: string // rendered next to the title, but muted
     subtitle?: string | number // header deck
     subtitleFormat?: "notice" | "unit" // optional postprocessing for subtitle
     footer?: { icon: TooltipFooterIcon; text: string }[]