✨ (slope) draw tick marks and connecting grid lines

owid · Mar 7, 2024 · f0db84f · f0db84f
1 parent 23a8db7
commit f0db84f
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 15 deletions.
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -227,15 +227,32 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
 export class VerticalAxisComponent extends React.Component<{
     bounds: Bounds
     verticalAxis: VerticalAxis
+    showTickMarks?: boolean
     labelColor?: string
     tickColor?: string
     detailsMarker?: DetailsMarker
 }> {
     render(): JSX.Element {
-        const { bounds, verticalAxis, labelColor, tickColor, detailsMarker } =
-            this.props
+        const {
+            bounds,
+            verticalAxis,
+            labelColor,
+            tickColor,
+            detailsMarker,
+            showTickMarks,
+        } = this.props
         const { tickLabels, labelTextWrap } = verticalAxis
 
+        const tickMarks = showTickMarks ? (
+            <VerticalAxisTickMarks
+                tickMarkYPositions={tickLabels.map((label) =>
+                    verticalAxis.place(label.value)
+                )}
+                tickMarkLeftPosition={bounds.left + verticalAxis.width}
+                color={SOLID_TICK_COLOR}
+            />
+        ) : undefined
+
         return (
             <g className="VerticalAxis">
                 {labelTextWrap &&
@@ -250,6 +267,7 @@ export class VerticalAxisComponent extends React.Component<{
                             detailsMarker,
                         }
                     )}
+                {tickMarks}
                 {tickLabels.map((label, i) => {
                     const { y, xAlign, yAlign, formattedValue } = label
                     return (
@@ -325,7 +343,7 @@ export class HorizontalAxisComponent extends React.Component<{
             : preferredAxisPosition ?? bounds.bottom
 
         const tickMarks = showTickMarks ? (
-            <AxisTickMarks
+            <HorizontalAxisTickMarks
                 tickMarkTopPosition={tickMarksYPosition}
                 tickMarkXPositions={tickLabels.map((label): number =>
                     axis.place(label.value)
@@ -374,7 +392,7 @@ export class HorizontalAxisComponent extends React.Component<{
     }
 }
 
-export class AxisTickMarks extends React.Component<{
+export class HorizontalAxisTickMarks extends React.Component<{
     tickMarkTopPosition: number
     tickMarkXPositions: number[]
     color: string
@@ -400,3 +418,30 @@ export class AxisTickMarks extends React.Component<{
         })
     }
 }
+
+export class VerticalAxisTickMarks extends React.Component<{
+    tickMarkLeftPosition: number
+    tickMarkYPositions: number[]
+    color: string
+    width?: number
+}> {
+    render(): JSX.Element[] {
+        const { tickMarkYPositions, tickMarkLeftPosition, color, width } =
+            this.props
+        const tickSize = 5
+        const tickRight = tickMarkLeftPosition + tickSize
+        return tickMarkYPositions.map((tickMarkPosition, index) => {
+            return (
+                <line
+                    key={index}
+                    x1={tickMarkLeftPosition}
+                    y1={tickMarkPosition}
+                    x2={tickRight}
+                    y2={tickMarkPosition}
+                    stroke={color}
+                    strokeWidth={width}
+                />
+            )
+        })
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -1102,23 +1102,37 @@ class LabelledSlopes
                 />
                 <g className="gridlines">
                     {this.yAxis.tickLabels.map((tick, i) => {
+                        const y = yAxis.place(tick.value)
                         return (
-                            <line
-                                key={i}
-                                x1={x1}
-                                y1={yAxis.place(tick.value)}
-                                x2={x2}
-                                y2={yAxis.place(tick.value)}
-                                stroke="#eee"
-                                strokeDasharray="3,2"
-                            />
+                            <g key={y.toString()}>
+                                {/* grid lines connecting the chart area to the axis */}
+                                <line
+                                    x1={bounds.left + this.yAxis.width + 8}
+                                    y1={y}
+                                    x2={x1}
+                                    y2={y}
+                                    stroke="#eee"
+                                    strokeDasharray="3,2"
+                                />
+                                {/* grid lines within the chart area */}
+                                <line
+                                    x1={x1}
+                                    y1={y}
+                                    x2={x2}
+                                    y2={y}
+                                    stroke="#ddd"
+                                    strokeDasharray="3,2"
+                                />
+                            </g>
                         )
                     })}
                 </g>
                 {!isPortrait && (
                     <VerticalAxisComponent
                         bounds={bounds}
                         verticalAxis={this.yAxis}
+                        showTickMarks={true}
+                        labelColor={this.manager.secondaryColorInStaticCharts}
                     />
                 )}
                 <line x1={x1} y1={y1} x2={x1} y2={y2} stroke="#333" />

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedBarChart.tsx
@@ -12,7 +12,7 @@ import {
 } from "@ourworldindata/utils"
 import {
     VerticalAxisComponent,
-    AxisTickMarks,
+    HorizontalAxisTickMarks,
     VerticalAxisGridLines,
 } from "../axis/AxisViews"
 import { NoDataModal } from "../noDataModal/NoDataModal"
@@ -458,7 +458,7 @@ export class StackedBarChart
                     strokeWidth={axisLineWidth}
                 />
 
-                <AxisTickMarks
+                <HorizontalAxisTickMarks
                     tickMarkTopPosition={innerBounds.bottom}
                     tickMarkXPositions={ticks.map(
                         (tick) => tick.bounds.centerX