Skip to content

Commit

Permalink
✨ (line chart) improve static version for Figma (#3990)
Browse files Browse the repository at this point in the history 
Makes line charts a bit nicer to work with in Figma. In particular:
- Simplifies/flattens the hierarchy
- Removes groups and elements that are unnecessary for a static export
- Groups elements by type more often

I find grouping elements by type a bit un-elegant in code tbh. But if it helps our authors edit charts in Figma, it's a small price to pay, I guess :)

#### Screenshots (Figma)

| Before  | After  |
| ------- | ------ |
| <img width="333" alt="Screenshot 2024-10-07 at 13 52 38" src="https://github.com/user-attachments/assets/ed85d96b-c00d-4e06-bbd5-d20f60998c1c">  | <img width="333" alt="Screenshot 2024-10-07 at 13 52 52" src="https://github.com/user-attachments/assets/27684c02-c67a-40fe-92e5-525ef337c20b"> |
  • Loading branch information
@sophiamersmann
sophiamersmann authored Oct 11, 2024
1 parent dbd3c5d commit 51936d0
Show file tree
Hide file tree
Showing 6 changed files with 490 additions and 348 deletions.
144 changes: 54 additions & 90 deletions packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export class VerticalAxisGridLines extends React.Component<{
verticalAxis: VerticalAxis
bounds: Bounds
strokeWidth?: number
dashPattern?: string
}> {
render(): React.ReactElement {
const { bounds, verticalAxis, strokeWidth } = this.props
Expand All @@ -48,12 +49,14 @@ export class VerticalAxisGridLines extends React.Component<{
: t.solid
? SOLID_TICK_COLOR
: TICK_COLOR
const dasharray =
this.props.dashPattern ??
dasharrayFromFontSize(verticalAxis.tickFontSize)

return (
<line
id={makeIdForHumanConsumption(
"grid-line",
t.value.toString()
verticalAxis.formatTick(t.value)
)}
key={i}
x1={bounds.left.toFixed(2)}
Expand All @@ -62,13 +65,7 @@ export class VerticalAxisGridLines extends React.Component<{
y2={axis.place(t.value)}
stroke={color}
strokeWidth={strokeWidth}
strokeDasharray={
t.solid
? undefined
: dasharrayFromFontSize(
verticalAxis.tickFontSize
)
}
strokeDasharray={t.solid ? undefined : dasharray}
/>
)
})}
Expand All @@ -82,6 +79,7 @@ export class HorizontalAxisGridLines extends React.Component<{
horizontalAxis: HorizontalAxis
bounds?: Bounds
strokeWidth?: number
dashPattern?: string
}> {
@computed get bounds(): Bounds {
return this.props.bounds ?? DEFAULT_BOUNDS
Expand All @@ -104,12 +102,14 @@ export class HorizontalAxisGridLines extends React.Component<{
: t.solid
? SOLID_TICK_COLOR
: TICK_COLOR
const dasharray =
this.props.dashPattern ??
dasharrayFromFontSize(horizontalAxis.tickFontSize)

return (
<line
id={makeIdForHumanConsumption(
"grid-line",
t.value.toString()
horizontalAxis.formatTick(t.value)
)}
key={i}
x1={axis.place(t.value)}
Expand All @@ -118,13 +118,7 @@ export class HorizontalAxisGridLines extends React.Component<{
y2={bounds.top.toFixed(2)}
stroke={color}
strokeWidth={strokeWidth}
strokeDasharray={
t.solid
? undefined
: dasharrayFromFontSize(
horizontalAxis.tickFontSize
)
}
strokeDasharray={t.solid ? undefined : dasharray}
/>
)
})}
Expand Down Expand Up @@ -189,6 +183,7 @@ interface DualAxisViewProps {
labelColor?: string
tickColor?: string
lineWidth?: number
gridDashPattern?: string
detailsMarker?: DetailsMarker
}

Expand All @@ -201,6 +196,7 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
labelColor,
tickColor,
lineWidth,
gridDashPattern,
detailsMarker,
} = this.props
const { bounds, horizontalAxis, verticalAxis, innerBounds } = dualAxis
Expand All @@ -210,6 +206,7 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
verticalAxis={verticalAxis}
bounds={innerBounds}
strokeWidth={lineWidth}
dashPattern={gridDashPattern}
/>
)

Expand All @@ -218,6 +215,7 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
horizontalAxis={horizontalAxis}
bounds={innerBounds}
strokeWidth={lineWidth}
dashPattern={gridDashPattern}
/>
)

Expand Down Expand Up @@ -245,15 +243,12 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
)

return (
<g
id={makeIdForHumanConsumption("dual-axis")}
className="DualAxisView"
>
<>
{horizontalAxisComponent}
{verticalAxisComponent}
{verticalGridlines}
{horizontalGridlines}
</g>
</>
)
}
}
Expand Down Expand Up @@ -303,6 +298,9 @@ export class VerticalAxisComponent extends React.Component<{
<g id={makeIdForHumanConsumption("tick-marks")}>
{tickLabels.map((label, i) => (
<VerticalAxisTickMark
id={makeIdForHumanConsumption(
label.formattedValue
)}
key={i}
tickMarkYPosition={verticalAxis.place(
label.value
Expand All @@ -322,10 +320,6 @@ export class VerticalAxisComponent extends React.Component<{
return (
<text
key={i}
id={makeIdForHumanConsumption(
"tick-label",
formattedValue
)}
x={(
bounds.left +
verticalAxis.width -
Expand Down Expand Up @@ -420,77 +414,47 @@ export class HorizontalAxisComponent extends React.Component<{
},
detailsMarker,
})}
{(showTickMarks || showTickLabels) &&
tickLabels.map((label) => {
const { x, xAlign, formattedValue } = label
return (
<g
{showTickMarks && (
<g id={makeIdForHumanConsumption("tick-marks")}>
{tickLabels.map((label) => (
<line
key={label.formattedValue}
id={makeIdForHumanConsumption(
"tick",
formattedValue
)}
key={formattedValue}
>
{showTickMarks && (
<line
x1={axis.place(label.value)}
y1={
tickMarksYPosition -
tickMarkWidth / 2
}
x2={axis.place(label.value)}
y2={tickMarksYPosition + tickSize}
stroke={SOLID_TICK_COLOR}
strokeWidth={tickMarkWidth}
/>
label.formattedValue
)}
{showTickLabels && (
<text
x={x}
y={tickLabelYPlacement}
fill={tickColor || GRAPHER_DARK_TEXT}
textAnchor={textAnchorFromAlign(
xAlign ?? HorizontalAlign.center
)}
fontSize={axis.tickFontSize}
>
{formattedValue}
</text>
x1={axis.place(label.value)}
y1={tickMarksYPosition - tickMarkWidth / 2}
x2={axis.place(label.value)}
y2={tickMarksYPosition + tickSize}
stroke={SOLID_TICK_COLOR}
strokeWidth={tickMarkWidth}
/>
))}
</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
)}
</g>
)
})}
fontSize={axis.tickFontSize}
>
{label.formattedValue}
</text>
))}
</g>
)}
</g>
)
}
}

export class HorizontalAxisTickMark extends React.Component<{
tickMarkTopPosition: number
tickMarkXPosition: number
color: string
width?: number
id?: string
}> {
render(): React.ReactElement {
const { tickMarkTopPosition, tickMarkXPosition, color, width, id } =
this.props
const tickSize = 5
const tickBottom = tickMarkTopPosition + tickSize
return (
<line
id={id}
x1={tickMarkXPosition}
y1={tickMarkTopPosition}
x2={tickMarkXPosition}
y2={tickBottom}
stroke={color}
strokeWidth={width}
/>
)
}
}

export class VerticalAxisTickMark extends React.Component<{
tickMarkLeftPosition: number
tickMarkYPosition: number
Expand Down
19 changes: 0 additions & 19 deletions packages/@ourworldindata/grapher/src/core/grapher.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,25 +146,6 @@ $zindex-controls-drawer: 150;
cursor: pointer;
}

/* Make World line slightly thicker */
svg .key-World_0 polyline {
stroke-width: 2 !important;
}

.projection .nv-line {
stroke-dasharray: 3, 3;
}

.projection .nv-point {
fill: #fff;
stroke-width: 1;
opacity: 0.5;
}

.projection .nv-point.hover {
stroke-width: 4;
}

.DataTableContainer {
z-index: $zindex-table;
}
Expand Down
Loading

0 comments on commit 51936d0

Please sign in to comment.