Skip to content

Commit

Permalink
✨ hide axis labels for inner facets
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiamersmann
sophiamersmann committed Mar 5, 2025
1 parent 247ab4e commit a5c8c8f
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 68 deletions.
17 changes: 8 additions & 9 deletions packages/@ourworldindata/grapher/src/axis/Axis.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -580,12 +580,16 @@ export class HorizontalAxis extends AbstractAxis {
}

@computed get orient(): Position {
// Default to `bottom` unless overriden to `top`.
// Default to `bottom` unless overridden to `top`.
return this.config.orient === Position.top
? Position.top
: Position.bottom
}

@computed get labelPadding(): number {
return this.config.labelPadding ?? 5
}

@computed get labelOffset(): number {
return this.labelHeight
}
Expand All @@ -594,12 +598,11 @@ export class HorizontalAxis extends AbstractAxis {
return this.rangeSize
}

// note that we intentionally don't take `hideAxisLabels` into account here.
// tick labels might be hidden in faceted charts. when faceted, it's important
// the axis size doesn't change as a result of hiding the axis labels, or else
// note that we intentionally don't take `hideAxis` into account here.
// the axis might be hidden in faceted charts. when faceted, it's important
// the axis size doesn't change as a result of hiding it, or else
// we might end up with misaligned axes.
@computed get height(): number {
if (this.hideAxis) return 0
const { labelOffset, tickPadding } = this
const maxTickHeight = max(this.tickLabels.map((tick) => tick.height))
const tickHeight = maxTickHeight ? maxTickHeight + tickPadding : 0
Expand Down Expand Up @@ -717,10 +720,6 @@ export class VerticalAxis extends AbstractAxis {
return this.labelPosition === AxisAlign.middle ? 0 : this.labelHeight
}

// note that we intentionally don't take `hideAxisLabels` into account here.
// tick labels might be hidden in faceted charts. when faceted, it's important
// the axis size doesn't change as a result of hiding the axis labels, or else
// we might end up with misaligned axes.
@computed get width(): number {
if (this.hideAxis) return 0
const { tickPadding, labelOffsetLeft } = this
Expand Down
2 changes: 0 additions & 2 deletions packages/@ourworldindata/grapher/src/axis/AxisConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ class AxisConfigDefaults implements AxisConfigInterface {
@observable.ref minSize?: number = undefined
@observable.ref hideAxis?: boolean = undefined
@observable.ref hideGridlines?: boolean = undefined
@observable.ref hideTickLabels?: boolean = undefined
@observable.ref hideTickMarks?: boolean = undefined
@observable.ref labelPosition?: AxisAlign = AxisAlign.middle
@observable.ref labelPadding?: number = undefined
Expand Down Expand Up @@ -93,7 +92,6 @@ export class AxisConfig
minSize: this.minSize,
hideAxis: this.hideAxis,
hideGridlines: this.hideGridlines,
hideTickLabels: this.hideTickLabels,
hideTickMarks: this.hideTickMarks,
labelPadding: this.labelPadding,
nice: this.nice,
Expand Down
88 changes: 40 additions & 48 deletions packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,6 @@ export class VerticalAxisComponent extends React.Component<{
const labelX = isLabelCentered ? -verticalAxis.rangeCenter : bounds.left
const labelY = isLabelCentered ? bounds.left : bounds.top

const showTickLabels = !config.hideTickLabels
const showTickMarks = !(config.hideTickMarks ?? true)

return (
Expand Down Expand Up @@ -296,34 +295,30 @@ export class VerticalAxisComponent extends React.Component<{
))}
</g>
)}
{showTickLabels && (
<g id={makeIdForHumanConsumption("tick-labels")}>
{tickLabels.map((label, i) => {
const { y, xAlign, yAlign, formattedValue } = label
return (
<text
key={i}
x={(
bounds.left +
verticalAxis.width -
verticalAxis.tickPadding
).toFixed(2)}
y={y}
dy={dyFromAlign(
yAlign ?? VerticalAlign.middle
)}
textAnchor={textAnchorFromAlign(
xAlign ?? HorizontalAlign.right
)}
fill={tickColor || GRAPHER_DARK_TEXT}
fontSize={verticalAxis.tickFontSize}
>
{formattedValue}
</text>
)
})}
</g>
)}
<g id={makeIdForHumanConsumption("tick-labels")}>
{tickLabels.map((label, i) => {
const { y, xAlign, yAlign, formattedValue } = label
return (
<text
key={i}
x={(
bounds.left +
verticalAxis.width -
verticalAxis.tickPadding
).toFixed(2)}
y={y}
dy={dyFromAlign(yAlign ?? VerticalAlign.middle)}
textAnchor={textAnchorFromAlign(
xAlign ?? HorizontalAlign.right
)}
fill={tickColor || GRAPHER_DARK_TEXT}
fontSize={verticalAxis.tickFontSize}
>
{formattedValue}
</text>
)
})}
</g>
</g>
)
}
Expand Down Expand Up @@ -379,7 +374,6 @@ export class HorizontalAxisComponent extends React.Component<{
? bounds.top + labelOffset + 10
: bounds.bottom - labelOffset

const showTickLabels = !axis.config.hideTickLabels
const showTickMarks = !axis.config.hideTickMarks

const isLabelCentered = axis.labelPosition === AxisAlign.middle
Expand Down Expand Up @@ -422,24 +416,22 @@ export class HorizontalAxisComponent extends React.Component<{
))}
</g>
)}
{showTickLabels && (
<g id={makeIdForHumanConsumption("tick-labels")}>
{tickLabels.map((label) => (
<text
key={label.formattedValue}
x={label.x}
y={tickLabelYPlacement}
fill={tickColor || GRAPHER_DARK_TEXT}
textAnchor={textAnchorFromAlign(
label.xAlign ?? HorizontalAlign.center
)}
fontSize={axis.tickFontSize}
>
{label.formattedValue}
</text>
))}
</g>
)}
<g id={makeIdForHumanConsumption("tick-labels")}>
{tickLabels.map((label) => (
<text
key={label.formattedValue}
x={label.x}
y={tickLabelYPlacement}
fill={tickColor || GRAPHER_DARK_TEXT}
textAnchor={textAnchorFromAlign(
label.xAlign ?? HorizontalAlign.center
)}
fontSize={axis.tickFontSize}
>
{label.formattedValue}
</text>
))}
</g>
</g>
)
}
Expand Down
11 changes: 3 additions & 8 deletions packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -495,20 +495,15 @@ export class FacetChart
useValueBasedColorScheme,
externalLegendHoverBin: this.legendHoverBin,
xAxisConfig: {
// For now, sharing an x axis means hiding the tick labels of inner facets.
// This means that none of the x axes are actually hidden (we just don't plot their tick labels).
// For now, sharing an x axis means hiding the axis label and tick labels of inner facets.
// This means that none of the x axes are actually removed (we just don't plot them).
// If we ever allow shared x axes to be actually hidden, we need to be careful with how we determine
// the `minSize` – in the intermediate series (at this time) all axes are shown in
// order to find the one with maximum size, but in the placed series, some axes are
// hidden. This expands the available area for the chart, which can in turn increase
// the number of ticks shown, which can make the size of the axis in the placed
// series greater than the one in the intermediate series.
hideTickLabels: shouldHideFacetAxis(
xAxis,
cellEdges,
sharedAxesSizes
),
hideTickMarks: shouldHideFacetAxis(
hideAxis: shouldHideFacetAxis(
xAxis,
cellEdges,
sharedAxesSizes
Expand Down
1 change: 0 additions & 1 deletion packages/@ourworldindata/types/src/grapherTypes/GrapherTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,6 @@ export interface AxisConfigInterface {
canChangeScaleType?: boolean
removePointsOutsideDomain?: boolean
hideAxis?: boolean
hideTickLabels?: boolean
hideTickMarks?: boolean

/** Hide the faint lines that are shown inside the plot (axis ticks may still be visible). */
Expand Down

0 comments on commit a5c8c8f

Please sign in to comment.