diff --git a/packages/@ourworldindata/core-table/src/CoreTableColumns.ts b/packages/@ourworldindata/core-table/src/CoreTableColumns.ts index 8c08d7f2489..210d344f72b 100644 --- a/packages/@ourworldindata/core-table/src/CoreTableColumns.ts +++ b/packages/@ourworldindata/core-table/src/CoreTableColumns.ts @@ -269,6 +269,12 @@ export abstract class AbstractCoreColumn { return undefined } + @imemo get displayUnit(): string | undefined { + return this.unit && this.unit !== this.shortUnit + ? this.unit.replace(/^\((.*)\)$/, "$1") + : undefined + } + // Returns a map where the key is a series slug such as "name" and the value is a set // of all the unique values that this column has for that particular series. getUniqueValuesGroupedBy( diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx index b3f24acebbf..929d3ece221 100644 --- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx +++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx @@ -1281,7 +1281,10 @@ export class ScatterPlotChart const axis = axisConfig.toVerticalAxis() axis.formatColumn = this.yColumn axis.scaleType = this.yScaleType - axis.label = this.currentVerticalAxisLabel + + let label = this.currentVerticalAxisLabel + if (this.yColumn.displayUnit) label += ` (${this.yColumn.displayUnit})` + axis.label = label if ( this.manager.isSingleTimeScatterAnimationActive && @@ -1345,8 +1348,12 @@ export class ScatterPlotChart axis.formatColumn = this.xColumn axis.scaleType = this.xScaleType - if (this.currentHorizontalAxisLabel) - axis.label = this.currentHorizontalAxisLabel + if (this.currentHorizontalAxisLabel) { + let label = this.currentHorizontalAxisLabel + if (this.xColumn.displayUnit) + label += ` (${this.xColumn.displayUnit})` + axis.label = label + } if ( this.manager.isSingleTimeScatterAnimationActive && diff --git a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx index a3a8b7f0f1d..ef380580ad1 100644 --- a/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx +++ b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx @@ -132,11 +132,7 @@ class Variable extends React.Component<{ if (column.isMissing || column.name === "time") return null - const { unit, shortUnit, displayName } = column, - displayUnit = - unit && unit !== shortUnit - ? unit.replace(/^\((.*)\)$/, "$1") - : undefined, + const { displayUnit, displayName } = column, displayNotice = uniq((notice ?? []).filter((t) => t !== undefined)) .map((time) =>