Add "auto" option to Coordinates.Cartesian (#176)

Added experimental "auto" option for cartesian coordinates that will
automatically change the amount of gridlines based on zoom level. No
config options for it yet, it just enables it with some default settings
if you pass `"auto"` into `xAxis` or `yAxis`.


https://github.com/user-attachments/assets/0c1dcbce-1eb2-4d44-baf4-cf50a0eff2ff

Author: spidunno

src/display/Coordinates/Cartesian.tsx

@@ -1,31 +1,72 @@
 import * as React from "react"
-import { range, round } from "../../math"
+import { pickClosestToValue, range, round, roundToNearestPowerOf10 } from "../../math"
 import { usePaneContext } from "../../context/PaneContext"
 import { useTransformContext } from "../../context/TransformContext"
 import { vec } from "../../vec"
 import { XLabels, YLabels, AxisOptions, defaultAxisOptions } from "./Axes"
+import { useCoordinateContext } from "../../context/CoordinateContext"
+import { useSpanContext } from "../../context/SpanContext"
 
 // This is sort of a hack—every SVG pattern on a page needs a unique ID, otherwise they conflict.
 let incrementer = 0
 
 type GridAxisOptions = Partial<AxisOptions & { subdivisions: number | false }>
 
 export interface CartesianCoordinatesProps {
-  xAxis?: GridAxisOptions | false
-  yAxis?: GridAxisOptions | false
+  xAxis?: GridAxisOptions | false | "auto"
+  yAxis?: GridAxisOptions | false | "auto"
   subdivisions?: number | false
 }
 
 export function Cartesian({
-  xAxis: xAxisOverrides,
-  yAxis: yAxisOverrides,
+  xAxis: xAxisProp,
+  yAxis: yAxisProp,
   subdivisions = false,
 }: CartesianCoordinatesProps) {
-  const xAxisEnabled = xAxisOverrides !== false
-  const yAxisEnabled = yAxisOverrides !== false
+  const xAxisEnabled = xAxisProp !== false
+  const yAxisEnabled = yAxisProp !== false
+
+  // Better name? Also `3.5` is a magic number that makes it feel right to me,
+  // it could have any other value (and perhaps it should be computed).
+  // It *kind of* represents how many major grid lines can be on screen at once,
+  // e.g. if it's 4 then there can be at most 4 major gridlines on the canvas.
+  //
+  // it seems like its behavior isn't quite that simple but it roughly explains why we divide at all here
+
+  const mathWidth = useSpanContext().xSpan / 3.5
+
+  const nearestPowerOf10 = roundToNearestPowerOf10(mathWidth)
+
+  // This should be a prop or something later, just a constant right now
+  const multiples = [
+    { value: 1, subdivisions: 5 },
+    { value: 2, subdivisions: 4 },
+    { value: 5, subdivisions: 5 },
+  ]
+
+  const autoClosest = pickClosestToValue(
+    mathWidth,
+    multiples.map((multiple) => nearestPowerOf10 * multiple.value),
+  )
 
-  const xAxis = { subdivisions, ...defaultAxisOptions, ...xAxisOverrides } as GridAxisOptions
-  const yAxis = { subdivisions, ...defaultAxisOptions, ...yAxisOverrides } as GridAxisOptions
+	const autoLines = autoClosest[0];
+  const autoSubdivisions = multiples[autoClosest[1]].subdivisions
+
+  const xAxisOverrides =
+    xAxisProp === "auto" ? { lines: autoLines, subdivisions: autoSubdivisions } : xAxisProp !== false ? xAxisProp : false
+  const yAxisOverrides =
+    yAxisProp === "auto" ? { lines: autoLines, subdivisions: autoSubdivisions } : yAxisProp !== false ? yAxisProp : false
+
+  const xAxis = {
+    subdivisions,
+    ...defaultAxisOptions,
+    ...xAxisOverrides,
+  } as GridAxisOptions
+  const yAxis = {
+    subdivisions,
+    ...defaultAxisOptions,
+    ...yAxisOverrides,
+  } as GridAxisOptions
 
   const id = React.useMemo(() => `cartesian-${incrementer++}`, [])
 

src/math.ts

@@ -6,6 +6,23 @@ export function round(value: number, precision = 0): number {
   return Math.round(value * multiplier) / multiplier
 }
 
+// TODO: Maybe better name (even though this one perfectly describes its purpose)
+export function roundToNearestPowerOf10(value: number): number {
+  return 10 ** Math.floor(Math.log10(value))
+}
+
+export function pickClosestToValue(value: number, options: number[]) {
+  // [Distance from value to option, index of option]
+  const distanceMap = options
+    .map((option, i) => [Math.abs(option - value), i])
+    .sort((a, b) => a[0] - b[0])
+
+  const closest = distanceMap[0]
+
+  // [value, index]
+  return [options[closest[1]], closest[1]]
+}
+
 export function range(min: number, max: number, step = 1): number[] {
   const result = []
   for (let i = min; i < max - step / 2; i += step) {