fix: remove auto tick mode

Author: tannerlinsley

src/components/AxisLinear.useMeasure.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import useChartState from '../hooks/useChartState'
 import useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'
-import { axisTypeOrdinal, axisTypeTime, axisTypeUtc } from '../utils/Constants'
 import { round } from '../utils/Utils'
 
 const getElBox = el => {
@@ -23,24 +22,17 @@ export default function useMeasure({
   rotation,
   setRotation,
   id,
-  type,
   position,
   tickSizeInner,
   tickSizeOuter,
   labelRotation,
   tickPadding,
-  tickCount,
-  minTickCount,
-  maxTickCount,
   vertical,
   gridWidth,
   gridHeight,
   show,
 }) {
-  const [estimatedTickCount, setChartState] = useChartState(
-    state => state.estimatedTickCounts[id]
-  )
-  const [tickLabelSkipIndices] = useChartState(
+  const [tickLabelSkipIndices, setChartState] = useChartState(
     state => state.tickLabelSkipIndices[id]
   )
   const [axisDimension] = useChartState(
@@ -71,12 +63,6 @@ export default function useMeasure({
     }
 
     let gridSize = !vertical ? gridWidth : gridHeight
-    let width = 0
-    let height = 0
-    let top = 0
-    let bottom = 0
-    let left = 0
-    let right = 0
 
     const domainDims = getElBox(elRef.current.querySelector('.domain'))
 
@@ -89,19 +75,13 @@ export default function useMeasure({
     ).map(el => getElBox(el))
 
     // Determine the largest labels on the axis
-    const [widestMeasureLabel, tallestMeasureLabel] = measureLabelDims.reduce(
-      (labels, d) => {
-        let [largestW = d, largestH = d] = labels
-        if (d.width > 0 && d.width > largestW.width) {
-          largestW = d
-        }
-        if (d.height > 0 && d.height > largestH.height) {
-          largestH = d
-        }
-        return [largestW, largestH]
-      },
-      []
-    )
+    const widestMeasureLabel = measureLabelDims.reduce((label, d) => {
+      label = label || d
+      if (d.width > 0 && d.width > label.width) {
+        label = d
+      }
+      return label
+    }, null)
 
     // Determine the largest labels on the axis
     const [widestRealLabel, tallestRealLabel] = realLabelDims.reduce(
@@ -133,55 +113,8 @@ export default function useMeasure({
       }, false)
     }
 
-    const largestMeasureLabelSize = !vertical
-      ? widestMeasureLabel?.width || 0
-      : tallestMeasureLabel?.height || 0
-
-    // Auto-fit ticks in "auto" tick mode for non-ordinal scales
-    if (tickCount === 'auto' && type !== 'ordinal') {
-      // if it's on, determine how many ticks we could display if they were all flat
-      // How many ticks can we fit in the available axis space?
-      let calculatedTickCount = Math.floor(
-        (gridSize + largestMeasureLabelSize + tickPadding * 2) /
-          (largestMeasureLabelSize + tickPadding * 2)
-      )
-
-      calculatedTickCount = Math.max(
-        Math.min(calculatedTickCount, maxTickCount),
-        minTickCount
-      )
-
-      if (calculatedTickCount !== estimatedTickCount) {
-        setChartState(old => ({
-          ...old,
-          estimatedTickCounts: {
-            ...old.estimatedTickCounts,
-            [id]: calculatedTickCount,
-          },
-        }))
-      }
-    }
-
     let newTickLabelSkipIndices = []
 
-    // Visual Skipping of time-based axis labels if they overlap (rotation not included)
-    if (
-      !rotation &&
-      [axisTypeTime, axisTypeUtc].includes(type) &&
-      realLabelDims?.length
-    ) {
-      realLabelDims.reduce((last, d) => {
-        if (
-          round(last.right, 5, Math.ceil) >
-          round(d.left - tickPadding, 5, Math.ceil)
-        ) {
-          newTickLabelSkipIndices.push(realLabelDims.indexOf(d))
-          return last
-        }
-        return d
-      })
-    }
-
     if (
       JSON.stringify(newTickLabelSkipIndices) !==
       JSON.stringify(tickLabelSkipIndices)
@@ -196,7 +129,7 @@ export default function useMeasure({
     }
 
     // Rotate ticks for non-time horizontal axes
-    if (!vertical && type === axisTypeOrdinal) {
+    if (!vertical) {
       const newRotation =
         (widestMeasureLabel?.width || 0) + tickPadding > smallestTickGap
           ? labelRotation
@@ -207,6 +140,15 @@ export default function useMeasure({
       }
     }
 
+    const newDimensions = {
+      width: 0,
+      height: 0,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    }
+
     // Axis overflow measurements
     if (!vertical) {
       const leftMostLabelDim = realLabelDims.length
@@ -220,23 +162,23 @@ export default function useMeasure({
           )
         : null
 
-      left = round(
+      newDimensions.left = round(
         Math.max(0, domainDims.left - leftMostLabelDim?.left),
-        10,
+        5,
         Math.ceil
       )
 
-      right = round(
+      newDimensions.right = round(
         Math.max(0, rightMostLabelDim?.right - domainDims.right),
-        10,
+        5,
         Math.ceil
       )
 
-      height = round(
+      newDimensions.height = round(
         Math.max(tickSizeInner, tickSizeOuter) +
           tickPadding +
           (tallestRealLabel?.height || 0),
-        10,
+        5,
         Math.ceil
       )
     } else {
@@ -248,36 +190,27 @@ export default function useMeasure({
         labelDim.bottom > d.bottom ? labelDim : d
       )
 
-      top = round(
+      newDimensions.top = round(
         Math.max(0, domainDims.top - topMostLabelDim?.top),
-        10,
+        5,
         Math.ceil
       )
 
-      bottom = round(
+      newDimensions.bottom = round(
         Math.max(0, bottomMostLabelDim?.bottom - domainDims.bottom),
-        10,
+        5,
         Math.ceil
       )
 
-      width = round(
+      newDimensions.width = round(
         Math.max(tickSizeInner, tickSizeOuter) +
           tickPadding +
           (widestRealLabel?.width || 0),
-        10,
+        5,
         Math.ceil
       )
     }
 
-    const newDimensions = {
-      width,
-      height,
-      top,
-      bottom,
-      left,
-      right,
-    }
-
     // Only update the axisDimensions if something has changed
     if (
       !axisDimension ||
@@ -297,27 +230,22 @@ export default function useMeasure({
       }))
     }
   }, [
-    axisDimension,
     elRef,
-    estimatedTickCount,
     gridHeight,
     gridWidth,
     id,
     labelRotation,
-    maxTickCount,
-    minTickCount,
     position,
     rotation,
     setChartState,
     setRotation,
     show,
-    tickCount,
     tickLabelSkipIndices,
     tickPadding,
     tickSizeInner,
     tickSizeOuter,
-    type,
     vertical,
+    axisDimension,
   ])
 
   // Measure after if needed

src/components/Chart.js

@@ -99,7 +99,6 @@ export default function ChartState(options) {
       hovered: null,
       element: null,
       axisDimensions: {},
-      estimatedTickCounts: {},
       tickLabelSkipIndices: {},
       offset: {},
       pointer: {},
@@ -138,14 +137,11 @@ export function Chart(options) {
     ...rest
   } = applyDefaults(options)
 
-  const [
-    { hovered, element, axisDimensions, estimatedTickCounts, pointer },
-  ] = useChartState(
+  const [{ hovered, element, axisDimensions, pointer }] = useChartState(
     d => ({
       hovered: d.hovered,
       element: d.element,
       axisDimensions: d.axisDimensions,
-      estimatedTickCounts: d.estimatedTickCounts,
       pointer: d.pointer,
     }),
     'shallow'
@@ -182,7 +178,6 @@ export function Chart(options) {
     materializedData,
     gridHeight,
     gridWidth,
-    estimatedTickCounts,
   })
 
   const stackData = useStackData({

src/components/pipeline/useAxes.js

@@ -2,13 +2,7 @@ import React from 'react'
 //
 import buildAxis from '../../utils/buildAxis'
 
-export default ({
-  axes,
-  materializedData,
-  gridHeight,
-  gridWidth,
-  estimatedTickCounts,
-}) => {
+export default ({ axes, materializedData, gridHeight, gridWidth }) => {
   // Detect axes changes and build axes
   let prePrimaryAxes = axes.filter(d => d.primary)
   let preSecondaryAxes = axes.filter(d => !d.primary)
@@ -25,7 +19,6 @@ export default ({
           materializedData,
           gridWidth,
           gridHeight,
-          estimatedTickCounts,
         })
       })
     },
@@ -42,7 +35,6 @@ export default ({
           materializedData,
           gridWidth,
           gridHeight,
-          estimatedTickCounts,
         })
       })
     },

src/utils/buildAxis.linear.js

@@ -39,7 +39,7 @@ export default function buildAxisLinear({
     hardMin = undefined,
     hardMax = undefined,
     base = undefined,
-    tickCount = 'auto',
+    tickCount = 10,
     minTickCount = 1,
     maxTickCount = 99999999,
     tickValues = null,
@@ -56,6 +56,7 @@ export default function buildAxisLinear({
     show = true,
     stacked = false,
     id: userId,
+    estimatedTickSize: userEstimatedTickSize,
   },
   materializedData,
   gridHeight,
@@ -71,8 +72,10 @@ export default function buildAxisLinear({
   const AxisIdKey = `${valueKey}AxisId`
   const vertical = detectVertical(position)
   const RTL = detectRTL(position) // Right to left OR top to bottom
+  const estimatedTickSize = userEstimatedTickSize ?? vertical ? 20 : 50
 
   const id = userId || `${position}_${type}`
+  const isTimeType = [axisTypeTime, axisTypeUtc].includes(type)
 
   // TODO: Any sorting needs to happen here, else the min/max's might not line up correctly
 
@@ -258,10 +261,6 @@ export default function buildAxisLinear({
 
   let resolvedTickCount = tickCount
 
-  if (tickCount === 'auto') {
-    resolvedTickCount = estimatedTickCounts[id] ?? 10
-  }
-
   const ticks = filterTicks(
     tickValues ||
       (scale.ticks ? scale.ticks(resolvedTickCount) : scale.domain())
@@ -294,6 +293,7 @@ export default function buildAxisLinear({
     hardMin,
     hardMax,
     base,
+    isTimeType,
     tickCount,
     minTickCount,
     maxTickCount,
@@ -325,6 +325,7 @@ export default function buildAxisLinear({
     ticks,
     format,
     spacing,
+    estimatedTickSize,
   }
 
   if (type === axisTypeOrdinal) {