Skip to content

Commit

Permalink
🔨 remove label from axis components
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiamersmann
sophiamersmann committed Dec 19, 2024
1 parent 0cade32 commit 023ca89
Show file tree
Hide file tree
Showing 15 changed files with 395 additions and 199 deletions.
66 changes: 6 additions & 60 deletions packages/@ourworldindata/grapher/src/axis/Axis.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {
OwidVariableRoundingMode,
} from "@ourworldindata/utils"
import { AxisConfig, AxisManager } from "./AxisConfig"
import { MarkdownTextWrap } from "@ourworldindata/components"
import { ColumnTypeMap, CoreColumn } from "@ourworldindata/core-table"
import { GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants.js"

Expand Down Expand Up @@ -73,7 +72,6 @@ abstract class AbstractAxis {
@observable hideFractionalTicks = false
@observable.struct range: ValueRange = [0, 0]
@observable private _scaleType?: ScaleType
@observable private _label?: string

constructor(config: AxisConfig, axisManager?: AxisManager) {
this.config = config
Expand All @@ -88,7 +86,6 @@ abstract class AbstractAxis {
*/
abstract get size(): number
abstract get orient(): Position
abstract get labelWidth(): number

abstract placeTickLabel(value: number): TickLabelPlacement
abstract get tickLabels(): TickLabelPlacement[]
Expand All @@ -101,8 +98,8 @@ abstract class AbstractAxis {
return this.config.hideGridlines ?? false
}

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

@computed get nice(): boolean {
Expand Down Expand Up @@ -133,14 +130,6 @@ abstract class AbstractAxis {
this._scaleType = value
}

@computed get label(): string {
return this._label ?? this.config.label ?? ""
}

set label(value: string) {
this._label = value
}

// This will expand the domain but never shrink.
// This will change the min unless the user's min setting is less
// This will change the max unless the user's max setting is greater
Expand All @@ -167,7 +156,6 @@ abstract class AbstractAxis {
this.hideFractionalTicks = parentAxis.hideFractionalTicks
this.range = parentAxis.range.slice() as ValueRange
this._scaleType = parentAxis._scaleType
this._label = parentAxis._label
return this
}

Expand Down Expand Up @@ -479,24 +467,6 @@ abstract class AbstractAxis {
tick.toString()
)
}

@computed get labelFontSize(): number {
return GRAPHER_FONT_SCALE_12 * this.fontSize
}

@computed get labelTextWrap(): MarkdownTextWrap | undefined {
const text = this.label
return text
? new MarkdownTextWrap({
maxWidth: this.labelWidth,
fontSize: this.labelFontSize,
text,
lineHeight: 1,
detailsOrderedByReference:
this.axisManager?.detailsOrderedByReference,
})
: undefined
}
}

export class HorizontalAxis extends AbstractAxis {
Expand All @@ -511,27 +481,15 @@ export class HorizontalAxis extends AbstractAxis {
: Position.bottom
}

@computed get labelOffset(): number {
return this.labelTextWrap
? this.labelTextWrap.height + this.labelPadding * 2
: 0
}

@computed get labelWidth(): number {
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
// we might end up with misaligned axes.
@computed get height(): number {
if (this.hideAxis) return 0
const { labelOffset, labelPadding } = this
const { tickPadding } = this
const maxTickHeight = max(this.tickLabels.map((tick) => tick.height))
const height = maxTickHeight
? maxTickHeight + labelOffset + labelPadding
: 0
const height = maxTickHeight ? maxTickHeight + tickPadding : 0
return Math.max(height, this.config.minSize ?? 0)
}

Expand Down Expand Up @@ -630,28 +588,16 @@ export class VerticalAxis extends AbstractAxis {
return Position.left
}

@computed get labelWidth(): number {
return this.height
}

@computed get labelOffset(): number {
return this.labelTextWrap
? this.labelTextWrap.height + this.labelPadding * 2
: 0
}

// 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 { labelOffset, labelPadding } = this
const { tickPadding } = this
const maxTickWidth = max(this.tickLabels.map((tick) => tick.width))
const width =
maxTickWidth !== undefined
? maxTickWidth + labelOffset + labelPadding
: 0
maxTickWidth !== undefined ? maxTickWidth + tickPadding : 0
return Math.max(width, this.config.minSize ?? 0)
}

Expand Down
5 changes: 2 additions & 3 deletions packages/@ourworldindata/grapher/src/axis/AxisConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {

export interface AxisManager {
fontSize: number
detailsOrderedByReference?: string[]
}

class AxisConfigDefaults implements AxisConfigInterface {
Expand All @@ -33,7 +32,7 @@ class AxisConfigDefaults implements AxisConfigInterface {
@observable.ref hideAxis?: boolean = undefined
@observable.ref hideGridlines?: boolean = undefined
@observable.ref hideTickLabels?: boolean = undefined
@observable.ref labelPadding?: number = undefined
@observable.ref tickPadding?: number = undefined
@observable.ref nice?: boolean = undefined
@observable.ref maxTicks?: number = undefined
@observable.ref tickFormattingOptions?: TickFormattingOptions = undefined
Expand Down Expand Up @@ -89,7 +88,7 @@ export class AxisConfig
hideAxis: this.hideAxis,
hideGridlines: this.hideGridlines,
hideTickLabels: this.hideTickLabels,
labelPadding: this.labelPadding,
tickPadding: this.tickPadding,
nice: this.nice,
maxTicks: this.maxTicks,
tickFormattingOptions: this.tickFormattingOptions,
Expand Down
124 changes: 69 additions & 55 deletions packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { VerticalAxis, HorizontalAxis, DualAxis } from "./Axis"
import classNames from "classnames"
import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
import { ScaleType, DetailsMarker } from "@ourworldindata/types"
import { MarkdownTextWrap } from "@ourworldindata/components"
import { GRAPHER_AXIS_LABEL_PADDING } from "../core/GrapherConstants.js"

const dasharrayFromFontSize = (fontSize: number): string => {
const dashLength = Math.round((fontSize / 16) * 3)
Expand Down Expand Up @@ -172,11 +174,9 @@ interface DualAxisViewProps {
dualAxis: DualAxis
highlightValue?: { x: number; y: number }
showTickMarks?: boolean
labelColor?: string
tickColor?: string
lineWidth?: number
gridDashPattern?: string
detailsMarker?: DetailsMarker
}

@observer
Expand All @@ -185,11 +185,9 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
const {
dualAxis,
showTickMarks,
labelColor,
tickColor,
lineWidth,
gridDashPattern,
detailsMarker,
} = this.props
const { bounds, horizontalAxis, verticalAxis, innerBounds } = dualAxis

Expand All @@ -215,9 +213,7 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
<VerticalAxisComponent
bounds={bounds}
verticalAxis={verticalAxis}
labelColor={labelColor}
tickColor={tickColor}
detailsMarker={detailsMarker}
/>
)

Expand All @@ -227,10 +223,8 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
axis={horizontalAxis}
showTickMarks={showTickMarks}
preferredAxisPosition={innerBounds.bottom}
labelColor={labelColor}
tickColor={tickColor}
tickMarkWidth={lineWidth}
detailsMarker={detailsMarker}
/>
)

Expand All @@ -250,42 +244,17 @@ export class VerticalAxisComponent extends React.Component<{
bounds: Bounds
verticalAxis: VerticalAxis
showTickMarks?: boolean
labelColor?: string
tickColor?: string
detailsMarker?: DetailsMarker
}> {
render(): React.ReactElement {
const {
bounds,
verticalAxis,
labelColor,
tickColor,
detailsMarker,
showTickMarks,
} = this.props
const { tickLabels, labelTextWrap, config } = verticalAxis
const { bounds, verticalAxis, tickColor, showTickMarks } = this.props
const { tickLabels, config } = verticalAxis

return (
<g
id={makeIdForHumanConsumption("vertical-axis")}
className="VerticalAxis"
>
{labelTextWrap &&
labelTextWrap.renderSVG(
-verticalAxis.rangeCenter,
bounds.left,
{
id: makeIdForHumanConsumption(
"vertical-axis-label"
),
textProps: {
transform: "rotate(-90)",
fill: labelColor || GRAPHER_DARK_TEXT,
textAnchor: "middle",
},
detailsMarker,
}
)}
{showTickMarks && (
<g id={makeIdForHumanConsumption("tick-marks")}>
{tickLabels.map((label, i) => (
Expand Down Expand Up @@ -315,7 +284,7 @@ export class VerticalAxisComponent extends React.Component<{
x={(
bounds.left +
verticalAxis.width -
verticalAxis.labelPadding
verticalAxis.tickPadding
).toFixed(2)}
y={y}
dy={dyFromAlign(
Expand Down Expand Up @@ -343,10 +312,8 @@ export class HorizontalAxisComponent extends React.Component<{
axis: HorizontalAxis
showTickMarks?: boolean
preferredAxisPosition?: number
labelColor?: string
tickColor?: string
tickMarkWidth?: number
detailsMarker?: DetailsMarker
}> {
@computed get scaleType(): ScaleType {
return this.props.axis.scaleType
Expand All @@ -370,25 +337,20 @@ export class HorizontalAxisComponent extends React.Component<{
axis,
showTickMarks,
preferredAxisPosition,
labelColor,
tickColor,
tickMarkWidth = 1,
detailsMarker,
} = this.props
const { tickLabels, labelTextWrap: label, labelOffset, orient } = axis
const { tickLabels, orient } = axis
const tickSize = 5
const horizontalAxisLabelsOnTop = orient === Position.top
const labelYPosition = horizontalAxisLabelsOnTop
? bounds.top
: bounds.bottom - (label?.height ?? 0)

const tickMarksYPosition = horizontalAxisLabelsOnTop
? bounds.top + axis.height - 5
: (preferredAxisPosition ?? bounds.bottom)

const tickLabelYPlacement = horizontalAxisLabelsOnTop
? bounds.top + labelOffset + 10
: bounds.bottom - labelOffset
? bounds.top + 10
: bounds.bottom

const showTickLabels = !axis.config.hideTickLabels

Expand All @@ -397,15 +359,6 @@ export class HorizontalAxisComponent extends React.Component<{
id={makeIdForHumanConsumption("horizontal-axis")}
className="HorizontalAxis"
>
{label &&
label.renderSVG(axis.rangeCenter, labelYPosition, {
id: makeIdForHumanConsumption("horizontal-axis-label"),
textProps: {
fill: labelColor || GRAPHER_DARK_TEXT,
textAnchor: "middle",
},
detailsMarker,
})}
{showTickMarks && (
<g id={makeIdForHumanConsumption("tick-marks")}>
{tickLabels.map((label) => (
Expand Down Expand Up @@ -472,3 +425,64 @@ export class VerticalAxisTickMark extends React.Component<{
)
}
}

export function HorizonalAxisLabel({
textWrap,
dualAxis,
padding = GRAPHER_AXIS_LABEL_PADDING,
color = GRAPHER_DARK_TEXT,
detailsMarker,
}: {
textWrap: MarkdownTextWrap
dualAxis: DualAxis
padding?: number
color?: string
detailsMarker?: DetailsMarker
}): React.ReactElement | null {
const { horizontalAxis, bounds } = dualAxis

const horizontalAxisLabelsOnTop = horizontalAxis.orient === Position.top

const x = horizontalAxis.rangeCenter
const y = horizontalAxisLabelsOnTop
? bounds.top - textWrap.height - padding
: bounds.bottom + padding

return textWrap.renderSVG(x, y, {
id: makeIdForHumanConsumption("horizontal-axis-label"),
textProps: {
fill: color || GRAPHER_DARK_TEXT,
textAnchor: "middle",
},
detailsMarker,
})
}

export function VerticalAxisLabel({
textWrap,
dualAxis,
padding = GRAPHER_AXIS_LABEL_PADDING,
color = GRAPHER_DARK_TEXT,
detailsMarker,
}: {
textWrap: MarkdownTextWrap
dualAxis: DualAxis
padding?: number
color?: string
detailsMarker?: DetailsMarker
}): React.ReactElement | null {
const { verticalAxis, bounds } = dualAxis

const x = -verticalAxis.rangeCenter
const y = bounds.left - textWrap.height - padding

return textWrap.renderSVG(x, y, {
id: makeIdForHumanConsumption("vertical-axis-label"),
textProps: {
transform: "rotate(-90)",
fill: color || GRAPHER_DARK_TEXT,
textAnchor: "middle",
},
detailsMarker,
})
}
Loading

0 comments on commit 023ca89

Please sign in to comment.