fix: area coordinates

Author: tannerlinsley

src/components/Voronoi.tsx

@@ -22,10 +22,10 @@ export default function Voronoi<TDatum>() {
 
   const handleFocus = React.useCallback(
     (datum: Datum<TDatum> | null) => {
-      onFocusDatum?.(datum)
+      getOptions().onFocusDatum?.(datum)
       setFocusedDatum(datum)
     },
-    [onFocusDatum, setFocusedDatum]
+    [getOptions, setFocusedDatum]
   )
 
   const needsVoronoi =

src/seriesTypes/Area.tsx

@@ -2,7 +2,14 @@ import { area, line } from 'd3-shape'
 import React from 'react'
 
 import { Axis, Series, Datum } from '../types'
-import { getX, getY, getYStart, translate } from '../utils/Utils'
+import {
+  getPrimary,
+  getSecondary,
+  getSecondaryStart,
+  getX,
+  getY,
+  translate,
+} from '../utils/Utils'
 import useChartContext from '../utils/chartContext'
 //
 import { monotoneX } from '../utils/curveMonotone'
@@ -52,15 +59,15 @@ export default function AreaComponent<TDatum>({
 
         const areaPath =
           area<Datum<TDatum>>(
-            datum => getX(datum, primaryAxis, secondaryAxis) ?? NaN,
-            datum => getYStart(datum, primaryAxis, secondaryAxis) ?? NaN,
-            datum => getY(datum, primaryAxis, secondaryAxis) ?? NaN
+            datum => getPrimary(datum, primaryAxis) ?? NaN,
+            datum => getSecondaryStart(datum, secondaryAxis) ?? NaN,
+            datum => getSecondary(datum, secondaryAxis) ?? NaN
           ).curve(curve)(series.datums) ?? undefined
 
         const linePath =
           line<Datum<TDatum>>(
-            datum => getX(datum, primaryAxis, secondaryAxis) ?? NaN,
-            datum => getY(datum, primaryAxis, secondaryAxis) ?? NaN
+            datum => getPrimary(datum, primaryAxis) ?? NaN,
+            datum => getSecondary(datum, secondaryAxis) ?? NaN
           ).curve(curve)(series.datums) ?? undefined
 
         return (

src/seriesTypes/Bar.tsx

@@ -4,10 +4,8 @@ import { Axis, Series } from '../types'
 import {
   getHeight,
   getWidth,
-  getX,
-  getXStart,
-  getY,
-  getYStart,
+  getRectX,
+  getRectY,
   translate,
 } from '../utils/Utils'
 import useChartContext from '../utils/chartContext'
@@ -46,22 +44,29 @@ export default function BarComponent<TDatum>({
             {series.datums.map((datum, i) => {
               const dataStyle = getDatumStatusStyle(datum, focusedDatum)
 
+              const x = getRectX(datum, primaryAxis, secondaryAxis) ?? NaN
+              const y = getRectY(datum, primaryAxis, secondaryAxis) ?? NaN
+              const width = getWidth(datum, primaryAxis, secondaryAxis) ?? NaN
+              const height = getHeight(datum, primaryAxis, secondaryAxis) ?? NaN
+
               return (
                 <rect
-                  ref={el => {
-                    datum.element = el
-                  }}
-                  key={i}
-                  x={getXStart(datum, primaryAxis, secondaryAxis) ?? NaN}
-                  y={getYStart(datum, primaryAxis, secondaryAxis) ?? NaN}
-                  width={getWidth(datum, primaryAxis, secondaryAxis) ?? NaN}
-                  height={getHeight(datum, primaryAxis, secondaryAxis) ?? NaN}
-                  style={{
-                    strokeWidth: 0,
-                    ...style,
-                    ...style.rectangle,
-                    ...dataStyle,
-                    ...dataStyle.rectangle,
+                  {...{
+                    ref: el => {
+                      datum.element = el
+                    },
+                    key: i,
+                    x,
+                    y,
+                    width,
+                    height,
+                    style: {
+                      strokeWidth: 0,
+                      ...style,
+                      ...style.rectangle,
+                      ...dataStyle,
+                      ...dataStyle.rectangle,
+                    },
                   }}
                 />
               )

src/types.ts

@@ -237,6 +237,7 @@ export type AxisOptionsBase = {
   outerBandPadding?: number
   minBandSize?: number
   maxBandSize?: number
+  minDomainLength?: number
   showGrid?: boolean
   // showTicks?: boolean
   // filterTicks?: <T extends string>(ticks: T[]) => T[]

src/utils/Utils.ts

@@ -96,11 +96,7 @@ export function getSecondaryStart<TDatum>(
   secondaryAxis: Axis<TDatum>
 ): number {
   if (secondaryAxis.stacked) {
-    return (
-      secondaryAxis.scale(
-        datum.stackData?.[!secondaryAxis.isVertical ? 0 : 1] ?? NaN
-      ) ?? NaN
-    )
+    return secondaryAxis.scale(datum.stackData?.[0] ?? NaN) ?? NaN
   }
 
   return secondaryAxis.scale(0) ?? NaN
@@ -111,11 +107,7 @@ export function getSecondary<TDatum>(
   secondaryAxis: Axis<TDatum>
 ): number {
   if (secondaryAxis.stacked) {
-    return (
-      secondaryAxis.scale(
-        datum.stackData?.[!secondaryAxis.isVertical ? 1 : 0] ?? NaN
-      ) ?? NaN
-    )
+    return secondaryAxis.scale(datum.stackData?.[1] ?? NaN) ?? NaN
   }
 
   return secondaryAxis.scale(secondaryAxis.getValue(datum.originalDatum)) ?? NaN
@@ -128,9 +120,7 @@ export function getPrimary<TDatum>(
   let primary: number
 
   if (primaryAxis.stacked) {
-    primary =
-      primaryAxis.scale(datum.stackData?.[primaryAxis.invert ? 1 : 0] ?? NaN) ??
-      NaN
+    primary = primaryAxis.scale(datum.stackData?.[1] ?? NaN) ?? NaN
   } else {
     primary =
       primaryAxis.scale(primaryAxis.getValue(datum.originalDatum)) ?? NaN
@@ -217,6 +207,26 @@ export function getYStart<TDatum>(
     : getSecondaryStart(datum, secondaryAxis)
 }
 
+export function getRectX<TDatum>(
+  datum: Datum<TDatum>,
+  primaryAxis: Axis<TDatum>,
+  secondaryAxis: Axis<TDatum>
+): number {
+  return primaryAxis.isVertical
+    ? getSecondaryStart(datum, secondaryAxis)
+    : getPrimaryStart(datum, primaryAxis)
+}
+
+export function getRectY<TDatum>(
+  datum: Datum<TDatum>,
+  primaryAxis: Axis<TDatum>,
+  secondaryAxis: Axis<TDatum>
+): number {
+  return primaryAxis.isVertical
+    ? getPrimaryStart(datum, primaryAxis)
+    : getSecondary(datum, secondaryAxis)
+}
+
 export function getWidth<TDatum>(
   datum: Datum<TDatum>,
   primaryAxis: Axis<TDatum>,

src/utils/buildAxis.linear.ts

@@ -1,4 +1,4 @@
-import { extent, max, min, range as d3Range } from 'd3-array'
+import { extent, max, median, min, range as d3Range } from 'd3-array'
 import {
   scaleLinear,
   scaleLog,
@@ -251,6 +251,17 @@ function buildLinearAxis<TDatum>(
     shouldNice = false
   }
 
+  if (
+    typeof options.minDomainLength === 'number' &&
+    !(minValue === undefined || maxValue === undefined)
+  ) {
+    const mid = median([minValue, maxValue])!
+    const top = mid + options.minDomainLength / 2
+    const bottom = mid - options.minDomainLength / 2
+    maxValue = Math.max(top, maxValue)
+    minValue = Math.min(bottom, minValue)
+  }
+
   if (typeof options.hardMin === 'number') {
     minValue = options.hardMin
     shouldNice = false