fix: mixed element voronoi

Author: tannerlinsley

examples/simple/src/ResizableBox.js

@@ -5,7 +5,7 @@ import "react-resizable/css/styles.css";
 
 export default function ResizableBox({
   children,
-  width = 500,
+  width = 600,
   height = 300,
   resizable = true,
   style = {},

examples/simple/src/components/MultipleAxes.tsx

@@ -5,12 +5,12 @@ import { AxisOptions, Chart } from "react-charts";
 
 export default function MultipleAxes() {
   const { data, randomizeData } = useDemoConfig({
-    series: 10,
+    series: 6,
     dataType: "time",
   });
 
   // @ts-ignore
-  data.forEach((d, i) => (d.secondaryAxisId = i % 3 === 0 ? "2" : undefined));
+  data.forEach((d, i) => (d.secondaryAxisId = i > 2 ? "2" : undefined));
 
   const primaryAxis = React.useMemo<
     AxisOptions<typeof data[number]["data"][number]>

src/components/Chart.tsx

@@ -380,6 +380,8 @@ function ChartInner<TDatum>({
   const series = React.useMemo(() => {
     const series: Series<TDatum>[] = []
 
+    const indicesByAxisId: Record<string, number> = {}
+
     for (
       let seriesIndex = 0;
       seriesIndex < options.data.length;
@@ -392,6 +394,12 @@ function ChartInner<TDatum>({
       const originalDatums = originalSeries.data
       const datums = []
 
+      indicesByAxisId[`${secondaryAxisId}`] =
+        indicesByAxisId[`${secondaryAxisId}`] ?? 0
+      const seriesIndexPerAxis = indicesByAxisId[`${secondaryAxisId}`]
+
+      indicesByAxisId[`${secondaryAxisId}`]++
+
       for (
         let datumIndex = 0;
         datumIndex < originalDatums.length;
@@ -401,6 +409,7 @@ function ChartInner<TDatum>({
         datums[datumIndex] = {
           originalSeries,
           seriesIndex,
+          seriesIndexPerAxis,
           seriesId,
           seriesLabel,
           secondaryAxisId,
@@ -414,6 +423,7 @@ function ChartInner<TDatum>({
         index: seriesIndex,
         id: seriesId,
         label: seriesLabel,
+        indexPerAxis: seriesIndexPerAxis,
         secondaryAxisId,
         datums,
       }
@@ -528,6 +538,7 @@ function ChartInner<TDatum>({
   }, [
     allDatums,
     options.interactionMode,
+    primaryAxis,
     secondaryAxes,
     tooltipOptions.groupingMode,
   ])

src/components/Voronoi.tsx

@@ -69,6 +69,10 @@ function PrimaryVoronoi<TDatum>({
 
   const stackedVoronoi = secondaryAxes.length === 1 && secondaryAxes[0].stacked
 
+  const useBarPx = secondaryAxes.every(
+    d => d.elementType === 'bar' && !d.stacked
+  )
+
   return React.useMemo(() => {
     let preColumns = Array.from(datumsByInteractionGroup.entries())
       .map(([_, datums]) => datums)
@@ -86,8 +90,8 @@ function PrimaryVoronoi<TDatum>({
         const aAxis = secondaryAxes.find(d => d.id === a[0].secondaryAxisId)!
         const bAxis = secondaryAxes.find(d => d.id === b[0].secondaryAxisId)!
 
-        const aPx = getPrimary(a[0], primaryAxis, aAxis)
-        const bPx = getPrimary(b[0], primaryAxis, bAxis)
+        const aPx = getPrimary(a[0], primaryAxis, aAxis, useBarPx)
+        const bPx = getPrimary(b[0], primaryAxis, bAxis, useBarPx)
 
         return aPx - bPx
       })
@@ -105,7 +109,7 @@ function PrimaryVoronoi<TDatum>({
       const secondaryAxis = secondaryAxes.find(
         d => d.id === datum.secondaryAxisId
       )!
-      const primaryPx = getPrimary(datum, primaryAxis, secondaryAxis)
+      const primaryPx = getPrimary(datum, primaryAxis, secondaryAxis, useBarPx)
 
       let range = primaryAxis?.scale.range() ?? [0, 0]
 
@@ -115,15 +119,15 @@ function PrimaryVoronoi<TDatum>({
         const secondaryAxis = secondaryAxes.find(
           d => d.id === prev[0].secondaryAxisId
         )!
-        const prevPx = getPrimary(prev[0], primaryAxis, secondaryAxis)
+        const prevPx = getPrimary(prev[0], primaryAxis, secondaryAxis, useBarPx)
         primaryStart = primaryPx - (primaryPx - prevPx) / 2
       }
 
       if (next) {
         const secondaryAxis = secondaryAxes.find(
           d => d.id === next[0].secondaryAxisId
         )!
-        const nextPx = getPrimary(next[0], primaryAxis, secondaryAxis)
+        const nextPx = getPrimary(next[0], primaryAxis, secondaryAxis, useBarPx)
         primaryEnd = primaryPx + (nextPx - primaryPx) / 2
       }
 
@@ -283,10 +287,11 @@ function PrimaryVoronoi<TDatum>({
     )
   }, [
     datumsByInteractionGroup,
+    primaryAxis,
     gridDimensions.left,
     gridDimensions.top,
     secondaryAxes,
-    primaryAxis,
+    useBarPx,
     stackedVoronoi,
     handleFocus,
     getOptions,
@@ -313,6 +318,10 @@ function SingleVoronoi<TDatum>({
 
   const voronoiData: { x: number; y: number; datum: Datum<TDatum> }[] = []
 
+  const useBarPx = secondaryAxes.every(
+    d => d.elementType === 'bar' && !d.stacked
+  )
+
   series.forEach(serie => {
     serie.datums
       .filter(datum => {
@@ -329,8 +338,8 @@ function SingleVoronoi<TDatum>({
         const secondaryAxis = secondaryAxes.find(
           d => d.id === datum.secondaryAxisId
         )
-        const x = getX(datum, primaryAxis, secondaryAxis!)
-        const y = getY(datum, primaryAxis, secondaryAxis!)
+        const x = getX(datum, primaryAxis, secondaryAxis!, useBarPx)
+        const y = getY(datum, primaryAxis, secondaryAxis!, useBarPx)
 
         if (
           typeof x !== 'number' ||
@@ -403,31 +412,34 @@ function SingleVoronoi<TDatum>({
 function getX<TDatum>(
   datum: Datum<TDatum>,
   primaryAxis: Axis<TDatum>,
-  secondaryAxis: Axis<TDatum>
+  secondaryAxis: Axis<TDatum>,
+  useBarPx: boolean
 ): number {
   return primaryAxis.isVertical
     ? getSecondary(datum, secondaryAxis)
-    : getPrimary(datum, primaryAxis, secondaryAxis)
+    : getPrimary(datum, primaryAxis, secondaryAxis, useBarPx)
 }
 
 function getY<TDatum>(
   datum: Datum<TDatum>,
   primaryAxis: Axis<TDatum>,
-  secondaryAxis: Axis<TDatum>
+  secondaryAxis: Axis<TDatum>,
+  useBarPx: boolean
 ): number {
   return primaryAxis.isVertical
-    ? getPrimary(datum, primaryAxis, secondaryAxis)
+    ? getPrimary(datum, primaryAxis, secondaryAxis, useBarPx)
     : getSecondary(datum, secondaryAxis)
 }
 
 function getPrimary<TDatum>(
   datum: Datum<TDatum>,
   primaryAxis: Axis<TDatum>,
-  secondaryAxis: Axis<TDatum>
+  secondaryAxis: Axis<TDatum>,
+  useBarPx: boolean
 ): number {
   let primary = primaryAxis.scale(datum.primaryValue) ?? NaN
 
-  if (secondaryAxis.elementType === 'bar') {
+  if (useBarPx && secondaryAxis.elementType === 'bar') {
     if (!secondaryAxis.stacked) {
       primary += primaryAxis.seriesBandScale!(datum.seriesIndex) ?? NaN
       primary += getPrimaryLength(datum, primaryAxis, secondaryAxis) / 2

src/types.ts

@@ -436,6 +436,7 @@ export type UserSerie<TDatum> = {
 export type Series<TDatum> = {
   originalSeries: UserSerie<TDatum>
   index: number
+  indexPerAxis: number
   id: string
   label: string
   secondaryAxisId?: string
@@ -451,6 +452,7 @@ export type Datum<TDatum> = {
   index: number
   originalDatum: TDatum
   secondaryAxisId?: string
+  seriesIndexPerAxis: number
   primaryValue?: any
   secondaryValue?: any
   stackData?: StackDatum<TDatum>

src/utils/buildAxis.linear.ts

@@ -359,6 +359,8 @@ function buildBandAxis<TDatum>(
   range: [number, number],
   outerRange: [number, number]
 ): AxisBand<TDatum> {
+  series = series.filter(d => d.secondaryAxisId === options.id)
+
   const domain = Array.from(
     new Set(
       series
@@ -524,7 +526,9 @@ function buildSeriesBandScale<TDatum>(
   primaryBandScale: ScaleBand<number>,
   series: Series<TDatum>[]
 ) {
-  const bandDomain = d3Range(series.length)
+  const bandDomain = d3Range(
+    series.filter(d => d.secondaryAxisId === options.id).length
+  )
 
   const seriesBandScale = scaleBand(bandDomain, [
     0,
@@ -540,5 +544,8 @@ function buildSeriesBandScale<TDatum>(
         (options.innerBandPadding ? options.innerBandPadding / 2 : 0)
     )
 
-  return seriesBandScale
+  const scale = (seriesIndex: number) =>
+    seriesBandScale(series.find(d => d.index === seriesIndex)!?.indexPerAxis)
+
+  return Object.assign(scale, seriesBandScale)
 }