From 0fbc2389dd71a08cb3fe3a357bcdf956e4576180 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Wed, 8 Jan 2025 10:46:58 +0100 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=A8=20introduce=20displayUnit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/@ourworldindata/core-table/src/CoreTableColumns.ts | 6 ++++++ .../@ourworldindata/grapher/src/tooltip/TooltipContents.tsx | 6 +----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/@ourworldindata/core-table/src/CoreTableColumns.ts b/packages/@ourworldindata/core-table/src/CoreTableColumns.ts index 72bfe436e0..09120f2fba 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/tooltip/TooltipContents.tsx b/packages/@ourworldindata/grapher/src/tooltip/TooltipContents.tsx index 18fad5e9d4..a5e6d85c76 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) => From 3b3eb0c5b74861131aa4a2f8f5b612f05a564290 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Wed, 8 Jan 2025 11:31:21 +0100 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8=20add=20unit=20to=20axis=20labels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/MarkdownTextWrap/MarkdownTextWrap.tsx | 6 +++- .../@ourworldindata/grapher/src/axis/Axis.ts | 36 +++++++++++++------ 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx index 076208059c..58b09f4974 100644 --- a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx +++ b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx @@ -566,7 +566,11 @@ export class MarkdownTextWrap extends React.Component { const secondaryTextWrap = new MarkdownTextWrap({ text: secondaryMarkdownText, ...textWrapProps, - maxWidth: mainTextWrap.maxWidth - mainTextWrap.lastLineWidth, + maxWidth: + mainTextWrap.maxWidth - + mainTextWrap.lastLineWidth - + Bounds.forText(" ", textWrapProps).width - + 10, // arbitrary wiggle room }) const secondaryTextFitsOnSameLine = diff --git a/packages/@ourworldindata/grapher/src/axis/Axis.ts b/packages/@ourworldindata/grapher/src/axis/Axis.ts index e3bbb71c11..a5ec9351ff 100644 --- a/packages/@ourworldindata/grapher/src/axis/Axis.ts +++ b/packages/@ourworldindata/grapher/src/axis/Axis.ts @@ -493,17 +493,31 @@ abstract class AbstractAxis { } @computed get labelTextWrap(): MarkdownTextWrap | undefined { - const text = this.label - return text - ? new MarkdownTextWrap({ - maxWidth: this.labelMaxWidth, - fontSize: this.labelFontSize, - text, - lineHeight: 1, - detailsOrderedByReference: - this.axisManager?.detailsOrderedByReference, - }) - : undefined + if (!this.label) return + + const textWrapProps = { + maxWidth: this.labelMaxWidth, + fontSize: this.labelFontSize, + lineHeight: 1, + detailsOrderedByReference: + this.axisManager?.detailsOrderedByReference, + } + + const displayUnit = this.formatColumn?.displayUnit + if (displayUnit) { + return MarkdownTextWrap.fromFragments({ + main: { text: this.label, bold: true }, + secondary: { text: `(${displayUnit})` }, + newLine: "avoid-wrap", + textWrapProps, + }) + } else { + return new MarkdownTextWrap({ + text: this.label, + fontWeight: 700, + ...textWrapProps, + }) + } } @computed get labelHeight(): number { From 910deab71c1ebbfa953447540645d1f6dfae9ad7 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Tue, 21 Jan 2025 13:34:25 +0100 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=92=84fix=20linting=20issue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/src/MarkdownTextWrap/MarkdownTextWrap.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx index 58b09f4974..d9b1713076 100644 --- a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx +++ b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx @@ -978,11 +978,9 @@ function convertMarkdownNodeToIRTokens( type: "paragraph", }, (item) => { - return [ - ...item.children.flatMap((child) => - convertMarkdownNodeToIRTokens(child, fontParams) - ), - ] + return item.children.flatMap((child) => + convertMarkdownNodeToIRTokens(child, fontParams) + ) } ) .with(