feat: padBandRange

TanStack · Dec 21, 2021 · 9c21df7 · 9c21df7
1 parent 8d45051
commit 9c21df7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/examples/simple/src/components/MultipleAxes.tsx b/examples/simple/src/components/MultipleAxes.tsx
@@ -17,6 +17,8 @@ export default function MultipleAxes() {
   >(
     () => ({
       getValue: (datum) => datum.primary as unknown as Date,
+      // Pad the automatically detected time scale with half of the band-size
+      padBandRange: true,
     }),
     []
   );

diff --git a/src/seriesTypes/Bar.tsx b/src/seriesTypes/Bar.tsx
@@ -41,23 +41,13 @@ export default function BarComponent<TDatum>({
             {series.datums.map((datum, i) => {
               const dataStyle = getDatumStatusStyle(datum, focusedDatum)
 
-              const x = clampPxToAxis(
-                0,
+              const [x, width] = clampPxToAxis(
                 getRectX(datum, primaryAxis, secondaryAxis) ?? NaN,
-                xAxis
-              )
-              const y = clampPxToAxis(
-                0,
-                getRectY(datum, primaryAxis, secondaryAxis) ?? NaN,
-                yAxis
-              )
-              const width = clampPxToAxis(
-                x,
                 getWidth(datum, primaryAxis, secondaryAxis) ?? NaN,
                 xAxis
               )
-              const height = clampPxToAxis(
-                y,
+              const [y, height] = clampPxToAxis(
+                getRectY(datum, primaryAxis, secondaryAxis) ?? NaN,
                 getHeight(datum, primaryAxis, secondaryAxis) ?? NaN,
                 yAxis
               )
@@ -216,12 +206,22 @@ function getSecondary<TDatum>(
   return secondaryAxis.scale(datum.secondaryValue) ?? NaN
 }
 
-function clampPxToAxis<TDatum>(base: number, px: number, axis: Axis<TDatum>) {
+function clampPxToAxis<TDatum>(
+  startPx: number,
+  lengthPx: number,
+  axis: Axis<TDatum>
+) {
   const range = axis.scale.range()
 
   if (axis.isVertical) {
     range.reverse()
   }
 
-  return Math.max(range[0], Math.min(px, range[1] - base))
+  const safe = (num: number) => Math.max(range[0], Math.min(num, range[1]))
+
+  const safeStart = safe(startPx)
+  const safeEnd = safe(startPx + lengthPx)
+  const safeLength = safeEnd - safeStart
+
+  return [safeStart, safeLength] as const
 }
diff --git a/src/types.ts b/src/types.ts
@@ -267,6 +267,7 @@ export type AxisTimeOptions<TDatum> = AxisOptionsBase & {
   max?: Date
   hardMin?: Date
   hardMax?: Date
+  padBandRange?: boolean
   formatters?: {
     scale?: (
       value: Date,

diff --git a/src/utils/buildAxis.linear.ts b/src/utils/buildAxis.linear.ts
@@ -168,7 +168,7 @@ function buildTimeAxis<TDatum>(
 
   const outerScale = scale.copy().range(outerRange)
 
-  // Supplmentary band scale
+  // Supplementary band scale
   const primaryBandScale = isPrimary
     ? buildPrimaryBandScale(options, scale, series, range)
     : undefined
@@ -177,6 +177,19 @@ function buildTimeAxis<TDatum>(
     ? buildSeriesBandScale(options, primaryBandScale, series)
     : undefined
 
+  const primaryBandWidth = primaryBandScale?.bandwidth()
+
+  if (options.padBandRange && primaryBandWidth) {
+    const bandStart = scale.invert(0)
+    const bandEnd = scale.invert(primaryBandWidth)
+    const diff = bandEnd.valueOf() - bandStart.valueOf()
+
+    scale.domain([
+      new Date(scale.domain()[0].valueOf() - diff / 2),
+      new Date(scale.domain()[1].valueOf() + diff / 2),
+    ])
+  }
+
   const defaultFormat = scale.tickFormat()
 
   const formatters = {} as AxisTime<TDatum>['formatters']