Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ add unit to axis labels / TAS-784 #4403

Open
wants to merge 2 commits into
base: markdown-text-wrap-group
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/@ourworldindata/core-table/src/CoreTableColumns.ts
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,12 @@ export abstract class AbstractCoreColumn<JS_TYPE extends PrimitiveType> {
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(
Expand Down
36 changes: 25 additions & 11 deletions packages/@ourworldindata/grapher/src/axis/Axis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Expand Down
Loading