Skip to content

Commit f15af23

Browse files
✨ (slope) make line legend a bit more narrow in compact mode
1 parent bbf247d commit f15af23

File tree

1 file changed

+8
-6
lines changed

1 file changed

+8
-6
lines changed

packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -509,7 +509,9 @@ export class SlopeChart
509509
}
510510

511511
@computed get maxLineLegendWidth(): number {
512-
return 0.25 * this.innerBounds.width
512+
return this.useCompactLayout
513+
? 0.15 * this.innerBounds.width
514+
: 0.25 * this.innerBounds.width
513515
}
514516

515517
@computed get lineLegendFontSize(): number {
@@ -650,7 +652,7 @@ export class SlopeChart
650652
return this.xRange[1] + LINE_LEGEND_PADDING
651653
}
652654

653-
@computed get useCompactLineLegend(): boolean {
655+
@computed get useCompactLayout(): boolean {
654656
return !!this.manager.isSemiNarrow
655657
}
656658

@@ -675,7 +677,7 @@ export class SlopeChart
675677
seriesName,
676678
label,
677679
formattedValue,
678-
valueInNewLine: this.useCompactLineLegend,
680+
valueInNewLine: this.useCompactLayout,
679681
yValue: start.value,
680682
}
681683
})
@@ -690,16 +692,16 @@ export class SlopeChart
690692
color,
691693
seriesName,
692694
label: seriesName,
693-
annotation: this.useCompactLineLegend ? undefined : annotation,
695+
annotation: this.useCompactLayout ? undefined : annotation,
694696
formattedValue,
695-
valueInNewLine: this.useCompactLineLegend,
697+
valueInNewLine: this.useCompactLayout,
696698
yValue: end.value,
697699
}
698700
})
699701
}
700702

701703
@computed private get lineLegendConnectorLinesWidth(): number {
702-
return this.useCompactLineLegend ? 15 : 25
704+
return this.useCompactLayout ? 15 : 25
703705
}
704706

705707
private playIntroAnimation() {

0 commit comments

Comments
 (0)