auto tick placement

Author: AidanBlumLevine

client/src/components/sidebar/game/quick-line-chart.tsx

@@ -58,15 +58,11 @@ export const QuickLineChart: React.FC<LineChartProps> = ({ data, width, height,
             margin,
             {
                 range: { min: 0, max: data.length },
-                options: {
-                    count: 8
-                }
+                options: {}
             },
             {
                 range: { min: 0, max: max },
-                options: {
-                    count: 8
-                }
+                options: {}
             }
         )
     }, [data.length, height, margin, width])

client/src/util/graph-util.ts

@@ -3,13 +3,13 @@ import { Axis } from 'd3'
 export function getAxes(
     width: number,
     height: number,
-    margin: { top: number; right: number; bottom: number; left: number },
+    rawMargin: { top: number; right: number; bottom: number; left: number },
     size: { x: number; y: number }
 ) {
-    // +/- 1 is to avoid overlapping axis lines
-    const xScale = (value: number) => (value * (width - margin.left - margin.right)) / size.x + margin.left + 1
-    const yScale = (value: number) =>
-        height - margin.bottom - (value / size.y) * (height - margin.top - margin.bottom) - 1
+    // +1 is to avoid overlapping axis lines
+    const margin = { ...rawMargin, left: rawMargin.left + 1, bottom: rawMargin.bottom + 1 }
+    const xScale = (value: number) => (value * (width - margin.left - margin.right)) / size.x + margin.left
+    const yScale = (value: number) => height - margin.bottom - (value / size.y) * (height - margin.top - margin.bottom)
     const innerWidth = width - margin.left - margin.right
     const innerHeight = height - margin.top - margin.bottom
     return { xScale, yScale, innerWidth, innerHeight }
@@ -62,6 +62,57 @@ export function drawXAxis(
             const textWidth = context.measureText(label).width
             context.fillText(label, xPos - textWidth / 2, height)
         }
+    } else {
+        // auto mode
+        const MIN_TICKS = 4
+        const MAX_TICKS = 10
+        const { min, max } = range
+        const rangeSize = max - min
+        const roughInterval = rangeSize / ((MAX_TICKS + MIN_TICKS) / 2)
+        let interval = Math.pow(10, Math.ceil(Math.log10(roughInterval))) * 10
+        let refinedInterval = 0
+        while (!refinedInterval && interval >= 1) {
+            interval = interval / 10
+            refinedInterval =
+                interval *
+                ([1, 2, 5].find(
+                    (multiplier) =>
+                        rangeSize / (interval * multiplier) <= MAX_TICKS &&
+                        rangeSize / (interval * multiplier) >= MIN_TICKS
+                ) || 0)
+        }
+
+        if (!refinedInterval) {
+            refinedInterval = Math.pow(10, Math.ceil(Math.log10(roughInterval)))
+        }
+
+        // Calculate tick positions
+        const start = Math.ceil(min / refinedInterval) * refinedInterval
+        const end = Math.floor(max / refinedInterval) * refinedInterval
+        const ticks = []
+        for (let tick = start; tick <= end; tick += refinedInterval) {
+            ticks.push(tick)
+        }
+
+        // Ensure a tick at 0 if within range
+        if (min <= 0 && max >= 0 && !ticks.includes(0)) {
+            ticks.push(0)
+            ticks.sort((a, b) => a - b)
+        }
+
+        // Render ticks and labels
+        ticks.forEach((tick) => {
+            const xPos = margin.left + (tick - min) / valueRangeScale
+            context.beginPath()
+            context.moveTo(xPos, height - margin.bottom)
+            context.lineTo(xPos, height - margin.bottom + 6)
+            context.stroke()
+
+            context.fillStyle = options.textColor ?? 'black'
+            const label = (tick != Math.round(tick) ? tick.toFixed(1) : tick).toString()
+            const textWidth = context.measureText(label).width
+            context.fillText(label, xPos - textWidth / 2, height)
+        })
     }
 }
 export function drawYAxis(
@@ -104,6 +155,58 @@ export function drawYAxis(
             const textWidth = context.measureText(label).width
             context.fillText(label, margin.left - textWidth - 10, yPos + 5)
         }
+    } else {
+        // auto mode for y-axis
+        const MIN_TICKS = 3
+        const MAX_TICKS = 10
+        const { min, max } = range
+        const rangeSize = max - min
+        const roughInterval = rangeSize / ((MAX_TICKS + MIN_TICKS) / 2)
+        let interval = Math.pow(10, Math.ceil(Math.log10(roughInterval))) * 10
+        let refinedInterval = 0
+
+        while (!refinedInterval && interval >= 1) {
+            interval = interval / 10
+            refinedInterval =
+                interval *
+                ([1, 2, 5].find(
+                    (multiplier) =>
+                        rangeSize / (interval * multiplier) <= MAX_TICKS &&
+                        rangeSize / (interval * multiplier) >= MIN_TICKS
+                ) || 0)
+        }
+
+        if (!refinedInterval) {
+            refinedInterval = Math.pow(10, Math.ceil(Math.log10(roughInterval)))
+        }
+
+        // Calculate tick positions
+        const start = Math.ceil(min / refinedInterval) * refinedInterval
+        const end = Math.floor(max / refinedInterval) * refinedInterval
+        const ticks = []
+        for (let tick = start; tick <= end; tick += refinedInterval) {
+            ticks.push(tick)
+        }
+
+        // Ensure a tick at 0 if within range
+        if (min <= 0 && max >= 0 && !ticks.includes(0)) {
+            ticks.push(0)
+            ticks.sort((a, b) => a - b)
+        }
+
+        // Render ticks and labels
+        ticks.forEach((tick) => {
+            const yPos = height - margin.bottom - (tick - min) / valueRangeScale
+            context.beginPath()
+            context.moveTo(margin.left, yPos)
+            context.lineTo(margin.left - 6, yPos)
+            context.stroke()
+
+            context.fillStyle = options.textColor ?? 'black'
+            const label = (tick != Math.round(tick) ? tick.toFixed(1) : tick).toString()
+            const textWidth = context.measureText(label).width
+            context.fillText(label, margin.left - textWidth - 10, yPos + 5)
+        })
     }
 }