feat: interactionMode + tooltip.groupingMode

Author: tannerlinsley

examples/simple/src/components/Bubble.tsx

@@ -41,7 +41,7 @@ export default function Bubble() {
             data,
             primaryAxis,
             secondaryAxes,
-            groupingMode: "single",
+            interactionMode: "closest",
             getSeriesStyle: () => ({ line: { opacity: 0 } }),
             getDatumStyle: (datum) =>
               ({

examples/simple/src/components/CustomStyles.tsx

@@ -40,11 +40,11 @@ function MyChart({
   activeSeriesIndex,
   setState,
 }: any) {
-  const { data, grouping, randomizeData } = useDemoConfig({
+  const { data, interactionMode, randomizeData } = useDemoConfig({
     series: 4,
-    grouping: "primary",
+    interactionMode: "primary",
     dataType: "ordinal",
-    show: ["elementType", "grouping"],
+    show: ["elementType", "interactionMode"],
   });
 
   const primaryAxis = React.useMemo<
@@ -77,7 +77,7 @@ function MyChart({
         <Chart
           options={{
             data,
-            groupingMode: grouping,
+            interactionMode,
             primaryAxis,
             secondaryAxes,
             getDatumStyle: (datum, status) =>

examples/simple/src/components/GroupingModes.tsx renamed to examples/simple/src/components/InteractionMode.tsx

@@ -10,12 +10,11 @@ export default function GroupingModes() {
     focused: null,
   });
 
-  const { data, grouping, elementType, randomizeData, Options } = useDemoConfig(
-    {
+  const { data, interactionMode, elementType, randomizeData, Options } =
+    useDemoConfig({
       series: 10,
-      show: ["elementType", "grouping"],
-    }
-  );
+      show: ["elementType", "interactionMode"],
+    });
 
   const primaryAxis = React.useMemo<
     AxisOptions<typeof data[number]["data"][number]>
@@ -49,7 +48,7 @@ export default function GroupingModes() {
         <Chart
           options={{
             data,
-            groupingMode: grouping,
+            interactionMode,
             primaryAxis,
             secondaryAxes,
 

examples/simple/src/index.tsx

@@ -1,20 +1,23 @@
+import "./styles.css";
+import useLagRadar from "./useLagRadar";
+import React from "react";
+import ReactDOM from "react-dom";
+
+//
+
 import Area from "./components/Area";
 import Band from "./components/Band";
 import Bar from "./components/Bar";
 import Bubble from "./components/Bubble";
 import CustomStyles from "./components/CustomStyles";
 import DarkMode from "./components/DarkMode";
 import DynamicContainer from "./components/DynamicContainer";
-import GroupingModes from "./components/GroupingModes";
+import InteractionMode from "./components/InteractionMode";
 import Line from "./components/Line";
 import MultipleAxes from "./components/MultipleAxes";
 import Steam from "./components/Steam";
 import BarHorizontal from "./components/BarHorizontal";
 import SparkChart from "./components/SparkChart";
-import "./styles.css";
-import useLagRadar from "./useLagRadar";
-import React from "react";
-import ReactDOM from "react-dom";
 import SyncedCursors from "./components/SyncedCursors";
 import StressTest from "./components/StressTest";
 
@@ -28,7 +31,7 @@ const components = [
   ["Steam", Steam],
   ["Spark Chart", SparkChart],
   ["Multiple Axes", MultipleAxes],
-  ["Grouping Modes", GroupingModes],
+  ["Interaction Modes", InteractionMode],
   ["Dark Mode", DarkMode],
   ["Dynamic / Overflow Container", DynamicContainer],
   ["Custom Styles", CustomStyles],

examples/simple/src/useDemoConfig.tsx

@@ -11,7 +11,8 @@ const options = {
   secondaryAxisStack: [true, false],
   primaryAxisShow: [true, false],
   secondaryAxisShow: [true, false],
-  grouping: ["single", "series", "primary", "secondary"],
+  interactionMode: ["primary", "closest"],
+  tooltipGroupingMode: ["single", "primary", "secondary", "series"],
   tooltipAnchor: [
     "closest",
     "top",
@@ -49,7 +50,8 @@ type PrimaryAxisPosition = typeof options["primaryAxisPosition"][number];
 type SecondaryAxisPosition = typeof options["secondaryAxisPosition"][number];
 type TooltipAnchor = typeof options["tooltipAnchor"][number];
 type TooltipAlign = typeof options["tooltipAlign"][number];
-type Grouping = typeof options["grouping"][number];
+type InteractionMode = typeof options["interactionMode"][number];
+type TooltipGroupingMode = typeof options["tooltipGroupingMode"][number];
 
 const optionKeys = Object.keys(options) as (keyof typeof options)[];
 
@@ -73,7 +75,8 @@ export default function useChartConfig({
   secondaryAxisShow = true,
   tooltipAnchor = "closest",
   tooltipAlign = "auto",
-  grouping = "primary",
+  interactionMode = "primary",
+  tooltipGroupingMode = "primary",
   snapCursor = true,
 }: {
   series: number;
@@ -95,7 +98,8 @@ export default function useChartConfig({
   secondaryAxisShow?: boolean;
   tooltipAnchor?: TooltipAnchor;
   tooltipAlign?: TooltipAlign;
-  grouping?: Grouping;
+  interactionMode?: InteractionMode;
+  tooltipGroupingMode?: TooltipGroupingMode;
   snapCursor?: boolean;
 }) {
   const [state, setState] = React.useState({
@@ -114,7 +118,8 @@ export default function useChartConfig({
     secondaryAxisShow,
     tooltipAnchor,
     tooltipAlign,
-    grouping,
+    interactionMode,
+    tooltipGroupingMode,
     snapCursor,
     datums,
     data: makeDataFrom(dataType, series, datums, useR),

package.json

@@ -79,6 +79,7 @@
     "@rollup/plugin-replace": "^2.3.3",
     "@svgr/rollup": "^5.4.0",
     "@testing-library/react": "^12.0.0",
+    "@types/d3-delaunay": "^6.0.0",
     "@types/jest": "^26.0.4",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
@@ -131,6 +132,7 @@
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
     "d3-array": "^2.12.1",
+    "d3-delaunay": "^6.0.2",
     "d3-scale": "^3.3.0",
     "d3-shape": "^2.1.0",
     "d3-time": "^2.1.1",

src/components/Chart.tsx

@@ -1,5 +1,4 @@
 import { groups, sort, sum } from 'd3-array'
-import { stack, stackOffsetNone } from 'd3-shape'
 import React, { ComponentPropsWithoutRef } from 'react'
 
 import useGetLatest from '../hooks/useGetLatest'
@@ -26,13 +25,14 @@ import {
   materializeStyles,
   getSeriesStatus,
   getDatumStatus,
+  sortDatums,
 } from '../utils/Utils'
 import buildAxisLinear from '../utils/buildAxis.linear'
 import { ChartContextProvider } from '../utils/chartContext'
 import AxisLinear from './AxisLinear'
 // import Brush from './Brush'
 import Cursors from './Cursors'
-import Tooltip from './Tooltip'
+import Tooltip, { defaultTooltip } from './Tooltip'
 import Voronoi from './Voronoi'
 
 //
@@ -69,13 +69,12 @@ function defaultChartOptions<TDatum>(
     initialHeight: options.initialHeight ?? 200,
     getSeriesOrder:
       options.getSeriesOrder ?? ((series: Series<TDatum>[]) => series),
-    groupingMode: options.groupingMode ?? 'primary',
+    interactionMode: options.interactionMode ?? 'primary',
     showVoronoi: options.showVoronoi ?? false,
     defaultColors: options.defaultColors ?? defaultColorScheme,
     useIntersectionObserver: options.useIntersectionObserver ?? true,
     intersectionObserverRootMargin:
       options.intersectionObserverRootMargin ?? '1000px',
-    tooltip: options.tooltip ?? true,
     primaryCursor: options.primaryCursor ?? true,
     secondaryCursor: options.secondaryCursor ?? true,
     padding: options.padding ?? defaultPadding,
@@ -275,8 +274,30 @@ function ChartInner<TDatum>({
     )
   }, [options.data, options.secondaryAxes, primaryAxisOptions])
 
+  // Resolve Tooltip Option
+  const tooltipOptions = React.useMemo(() => {
+    const tooltipOptions = defaultTooltip(options?.tooltip)
+    tooltipOptions.groupingMode =
+      tooltipOptions.groupingMode ??
+      (() => {
+        if (options.interactionMode === 'closest') {
+          return 'single'
+        }
+        return 'primary'
+      })()
+
+    return tooltipOptions
+  }, [options.interactionMode, options?.tooltip])
+
+  options = {
+    ...options,
+    tooltip: tooltipOptions,
+  }
+
+  //
+
   const svgRef = React.useRef<SVGSVGElement>(null)
-  const getOptions = useGetLatest(options)
+  const getOptions = useGetLatest({ ...options, tooltip: tooltipOptions })
 
   const axisDimensionsState = React.useState<AxisDimensions>({
     left: {},
@@ -400,99 +421,92 @@ function ChartInner<TDatum>({
       }
     }
 
-    if (secondaryAxesOptions.some(axisOptions => axisOptions.stacked)) {
-      secondaryAxesOptions
-        .filter(d => d.stacked)
-        .forEach(secondaryAxis => {
-          const axisSeries = series.filter(
-            s => s.secondaryAxisId === secondaryAxis.id
-          )
-          const seriesIndices = Object.keys(axisSeries)
-          const stacker = stack()
-            .keys(seriesIndices)
-            .value((_, seriesIndex, index) => {
-              const val = secondaryAxis.getValue(
-                axisSeries[Number(seriesIndex)].datums[index].originalDatum
-              )
-
-              if (typeof val === 'undefined' || val === null) {
-                return 0
-              }
-
-              return val
-            })
-            .offset(secondaryAxis.stackOffset ?? stackOffsetNone)
-
-          const stacked = stacker(
-            Array.from({
-              length: axisSeries.sort(
-                (a, b) => b.datums.length - a.datums.length
-              )[0].datums.length,
-            })
-          )
-
-          stacked.forEach((s, sIndex) => {
-            s.forEach((datum, i) => {
-              // @ts-ignore
-              datum.data = axisSeries[sIndex].datums[i]
-
-              axisSeries[sIndex].datums[i].stackData =
-                datum as unknown as StackDatum<TDatum>
-            })
-          })
-        })
-    }
-
     return series
-  }, [options.data, secondaryAxesOptions])
+  }, [options.data])
+
+  let allDatums = React.useMemo(() => {
+    return series.map(s => s.datums).flat(2)
+  }, [series])
 
   const primaryAxis = React.useMemo(() => {
     return buildAxisLinear<TDatum>(
       true,
       primaryAxisOptions,
       series,
+      allDatums,
       gridDimensions,
       width,
       height
     )
-  }, [gridDimensions, height, primaryAxisOptions, series, width])
+  }, [allDatums, gridDimensions, height, primaryAxisOptions, series, width])
 
   const secondaryAxes = React.useMemo(() => {
     return secondaryAxesOptions.map(secondaryAxis => {
       return buildAxisLinear<TDatum>(
         false,
         secondaryAxis,
         series,
+        allDatums,
         gridDimensions,
         width,
         height
       )
     })
-  }, [gridDimensions, height, secondaryAxesOptions, series, width])
+  }, [allDatums, gridDimensions, height, secondaryAxesOptions, series, width])
 
-  const groupedDatums = React.useMemo(() => {
-    const groupedDatums = new Map<any, Datum<TDatum>[]>()
+  const [datumsByInteractionGroup, datumsByTooltipGroup] = React.useMemo(() => {
+    const datumsByInteractionGroup = new Map<any, Datum<TDatum>[]>()
+    const datumsByTooltipGroup = new Map<any, Datum<TDatum>[]>()
 
-    const allDatums = series.map(s => s.datums).flat(2)
+    let getInteractionKey = (datum: Datum<TDatum>) => `${datum.primaryValue}`
+    let getTooltipKey = (datum: Datum<TDatum>) => `${datum.primaryValue}`
+
+    if (options.interactionMode === 'closest') {
+      getInteractionKey = datum =>
+        `${datum.primaryValue}_${datum.secondaryValue}`
+    }
+
+    if (tooltipOptions.groupingMode === 'single') {
+      getTooltipKey = datum => `${datum.primaryValue}_${datum.secondaryValue}`
+    } else if (tooltipOptions.groupingMode === 'secondary') {
+      getTooltipKey = datum => `${datum.secondaryValue}`
+    } else if (tooltipOptions.groupingMode === 'series') {
+      getTooltipKey = datum => `${datum.seriesIndex}`
+    }
 
     allDatums.forEach(datum => {
-      const primaryValue = `${primaryAxis.getValue(datum.originalDatum)}`
+      const interactionKey = (getInteractionKey as Function)(datum)
+      const tooltipKey = (getTooltipKey as Function)(datum)
+
+      if (!datumsByInteractionGroup.has(interactionKey)) {
+        datumsByInteractionGroup.set(interactionKey, [])
+      }
 
-      if (!groupedDatums.has(primaryValue)) {
-        groupedDatums.set(primaryValue, [])
+      if (!datumsByTooltipGroup.has(tooltipKey)) {
+        datumsByTooltipGroup.set(tooltipKey, [])
       }
 
-      groupedDatums.get(primaryValue)!.push(datum)
+      datumsByInteractionGroup.get(interactionKey)!.push(datum)
+      datumsByTooltipGroup.get(tooltipKey)!.push(datum)
     })
 
-    allDatums.forEach(datum => {
-      const primaryValue = `${primaryAxis.getValue(datum.originalDatum)}`
+    datumsByInteractionGroup.forEach((value, key) => {
+      datumsByInteractionGroup.set(key, sortDatums(value, secondaryAxes))
+    })
 
-      datum.group = groupedDatums.get(primaryValue)
+    datumsByTooltipGroup.forEach((value, key) => {
+      datumsByTooltipGroup.set(key, sortDatums(value, secondaryAxes))
+    })
+
+    allDatums.forEach(datum => {
+      const interactionKey = (getInteractionKey as Function)(datum)
+      const tooltipKey = (getTooltipKey as Function)(datum)
+      datum.interactiveGroup = datumsByInteractionGroup.get(interactionKey)
+      datum.tooltipGroup = datumsByTooltipGroup.get(tooltipKey)
     })
 
-    return groupedDatums
-  }, [primaryAxis, series])
+    return [datumsByInteractionGroup, datumsByTooltipGroup]
+  }, [allDatums, options.interactionMode, tooltipOptions.groupingMode])
 
   const getSeriesStatusStyle = React.useCallback(
     (series: Series<TDatum>, focusedDatum: Datum<TDatum> | null) => {
@@ -556,7 +570,8 @@ function ChartInner<TDatum>({
     secondaryAxes,
     series,
     orderedSeries,
-    groupedDatums,
+    datumsByInteractionGroup,
+    datumsByTooltipGroup,
     width,
     height,
     getSeriesStatusStyle,