feat: auto tick count

Author: tannerlinsley

examples/simple/src/ResizableBox.js

@@ -12,7 +12,7 @@ export default function ResizableBox({
   className = "",
 }) {
   return (
-    <div>
+    <div style={{ marginLeft: 20 }}>
       {resizable ? (
         <ReactResizableBox width={width} height={height}>
           <div

src/components/AxisLinear.tsx

@@ -1,20 +1,15 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale'
 import React from 'react'
 
-import { Axis, AxisTime } from '../types'
+import { Axis, AxisLinear } from '../types'
 import { getTickPx, translate } from '../utils/Utils'
 import useChartContext from '../utils/chartContext'
 //
 import useMeasure from './AxisLinear.useMeasure'
 
 export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
   const [showRotated, setShowRotated] = React.useState(false)
-  const {
-    getOptions,
-    gridDimensions,
-    width,
-    height,
-  } = useChartContext<TDatum>()
+  const { getOptions, gridDimensions, width, height } =
+    useChartContext<TDatum>()
 
   const { dark, showDebugAxes } = getOptions()
 
@@ -34,15 +29,22 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
     const scale = isOuter ? axis.outerScale : axis.scale
     const [rangeStart, rangeEnd] = scale.range()
 
-    const getTicks = (
-      scale: ScaleTime<any, any> | ScaleLinear<any, any>,
-      num: number
-    ) => {
-      if (scale.ticks) {
-        return scale.ticks(num)
+    const getTicks = () => {
+      const anyAxis = axis as AxisLinear<TDatum>
+
+      if ((anyAxis as AxisLinear<TDatum>).outerScale.ticks!) {
+        if (typeof anyAxis.tickCount === 'number') {
+          return anyAxis.outerScale.ticks(anyAxis.tickCount)
+        }
+
+        const autoSpacing = anyAxis.isVertical ? 40 : 80
+        const range = anyAxis.outerScale.range()
+        const num = Math.abs(range[1] - range[0]) / autoSpacing
+
+        return anyAxis.outerScale.ticks(num)
       }
 
-      return scale.domain()
+      return anyAxis.outerScale.domain()
     }
 
     const resolvedHeight = isOuter ? height : gridDimensions.gridHeight
@@ -101,7 +103,7 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
             y2={lineTo.y}
             stroke={dark ? 'rgba(255,255,255, .2)' : 'rgba(0,0,0, .2)'}
           />
-          {getTicks(scale as ScaleTime<any, any>, 10).map((tick, i) => {
+          {getTicks().map((tick, i) => {
             const px = getTickPx(scale, tick)
 
             const [tickFrom, tickTo, gridTo] =
@@ -187,7 +189,7 @@ export default function AxisLinearComp<TDatum>(axis: Axis<TDatum>) {
                     isRotated ? (axis.position === 'top' ? 60 : -60) : 0
                   })`}
                 >
-                  {(axis as AxisTime<any>).formatters.scale(tick as Date)}
+                  {(axis as AxisLinear<any>).formatters.scale(tick as number)}
                 </text>
               </g>
             )

src/components/AxisLinear.useMeasure.ts

@@ -124,77 +124,93 @@ export default function useMeasure<TDatum>({
       right: 0,
     }
 
-    const domainEl = elRef.current.querySelector(`.Axis-Group.inner .domain`)
+    const currentEl = elRef.current
 
-    if (!domainEl) {
-      return
-    }
+    const [innerDims] = ['inner'].map(inOrOut => {
+      const domainEl = currentEl.querySelector(`.Axis-Group.${inOrOut} .domain`)
 
-    const domainDims = getElBox(domainEl)
+      if (!domainEl) {
+        return
+      }
 
-    const measureDims = Array.from(
-      elRef.current.querySelectorAll('.Axis-Group.inner .tickLabel')
-    ).map(el => getElBox(el))
+      const domainDims = getElBox(domainEl)
 
-    // Determine the largest labels on the axis
-    let widestRealLabel = measureDims[0]
-    let tallestRealLabel = measureDims[0]
+      const measureDims = Array.from(
+        currentEl.querySelectorAll(`.Axis-Group.${inOrOut} .tickLabel`)
+      ).map(el => getElBox(el))
 
-    measureDims.forEach(d => {
-      if (d.width > 0 && d.width > widestRealLabel.width) {
-        widestRealLabel = d
+      if (!measureDims.length) {
+        return
       }
 
-      if (d.height > 0 && d.height > tallestRealLabel.height) {
-        tallestRealLabel = d
-      }
+      // Determine the largest labels on the axis
+      let widestLabel = measureDims[0]
+      let tallestLabel = measureDims[0]
+
+      measureDims.forEach(d => {
+        if (d.width > 0 && d.width > widestLabel.width) {
+          widestLabel = d
+        }
+
+        if (d.height > 0 && d.height > tallestLabel.height) {
+          tallestLabel = d
+        }
+      })
+
+      return { domainDims, measureDims, widestLabel, tallestLabel }
     })
 
+    if (!innerDims) {
+      return
+    }
+
     // Axis overflow measurements
     if (!axis.isVertical) {
-      if (measureDims.length) {
-        const leftMostLabelDim = measureDims.reduce((d, labelDim) =>
+      if (innerDims.measureDims.length) {
+        const leftMostLabelDim = innerDims.measureDims.reduce((d, labelDim) =>
           labelDim.left < d.left ? labelDim : d
         )
-        const rightMostLabelDim = measureDims.reduce((d, labelDim) =>
+        const rightMostLabelDim = innerDims.measureDims.reduce((d, labelDim) =>
           labelDim.right > d.right ? labelDim : d
         )
 
         newDimensions.left = Math.round(
-          Math.max(0, domainDims.left - leftMostLabelDim?.left)
+          Math.max(0, innerDims.domainDims.left - leftMostLabelDim?.left)
         )
 
         newDimensions.right = Math.round(
-          Math.max(0, rightMostLabelDim?.right - domainDims.right)
+          Math.max(0, rightMostLabelDim?.right - innerDims.domainDims.right)
         )
       }
 
       newDimensions.height = Math.round(
         // Math.max(axis.tickSizeInner, axis.tickSizeOuter) +
-        8 + axis.minTickPaddingForRotation + (tallestRealLabel?.height ?? 0)
+        8 +
+          axis.minTickPaddingForRotation +
+          (innerDims.tallestLabel?.height ?? 0)
       )
     } else {
-      if (measureDims.length) {
-        const topMostLabelDim = measureDims.reduce((d, labelDim) =>
+      if (innerDims.measureDims.length) {
+        const topMostLabelDim = innerDims.measureDims.reduce((d, labelDim) =>
           labelDim.top < d.top ? labelDim : d
         )
 
-        const bottomMostLabelDim = measureDims.reduce((d, labelDim) =>
+        const bottomMostLabelDim = innerDims.measureDims.reduce((d, labelDim) =>
           labelDim.bottom > d.bottom ? labelDim : d
         )
 
         newDimensions.top = Math.round(
-          Math.max(0, domainDims.top - topMostLabelDim?.top)
+          Math.max(0, innerDims.domainDims.top - topMostLabelDim?.top)
         )
 
         newDimensions.bottom = Math.round(
-          Math.max(0, bottomMostLabelDim?.bottom - domainDims.bottom)
+          Math.max(0, bottomMostLabelDim?.bottom - innerDims.domainDims.bottom)
         )
       }
 
       newDimensions.width = Math.round(
         // Math.max(axis.tickSizeInner, axis.tickSizeOuter) +
-        8 + axis.minTickPaddingForRotation + (widestRealLabel?.width ?? 0)
+        8 + axis.minTickPaddingForRotation + (innerDims.widestLabel?.width ?? 0)
       )
     }
 
@@ -229,10 +245,16 @@ export default function useMeasure<TDatum>({
 
   // Measure after if needed
   useIsomorphicLayoutEffect(() => {
-    measureRotation()
+    // setTimeout(() => {
+    window.requestAnimationFrame(() => {
+      measureRotation()
+    })
   }, [measureRotation])
 
   useIsomorphicLayoutEffect(() => {
-    measureDimensions()
+    // setTimeout(() => {
+    window.requestAnimationFrame(() => {
+      measureDimensions()
+    })
   }, [measureRotation])
 }

src/components/Chart.tsx

@@ -433,17 +433,6 @@ function ChartInner<TDatum>({
     })
   }, [gridDimensions, height, secondaryAxesOptions, series, width])
 
-  const axesInfo: AxesInfo = React.useMemo(() => {
-    // Make sure we're mapping x and y to the correct axes
-    const xKey = primaryAxis.isVertical ? 'secondary' : 'primary'
-    const yKey = primaryAxis.isVertical ? 'primary' : 'secondary'
-
-    return {
-      xKey,
-      yKey,
-    }
-  }, [primaryAxis])
-
   const groupedDatums = React.useMemo(() => {
     const groupedDatums = new Map<any, Datum<TDatum>[]>()
 
@@ -528,7 +517,6 @@ function ChartInner<TDatum>({
     gridDimensions,
     primaryAxis,
     secondaryAxes,
-    axesInfo,
     series,
     orderedSeries,
     groupedDatums,

src/types.ts

@@ -69,7 +69,6 @@ export type ChartContextValue<TDatum> = {
   gridDimensions: GridDimensions
   primaryAxis: Axis<TDatum>
   secondaryAxes: Axis<TDatum>[]
-  axesInfo: AxesInfo
   series: Series<TDatum>[]
   orderedSeries: Series<TDatum>[]
   groupedDatums: Map<any, Datum<TDatum>[]>
@@ -225,6 +224,7 @@ export type AxisOptionsBase = {
   position?: Position
   minTickPaddingForRotation?: number
   tickLabelRotationDeg?: number
+  tickCount?: number
   innerBandPadding?: number
   outerBandPadding?: number
   minBandSize?: number