feat(bump): allow extra props for Bump data series

plouc · Dec 29, 2021 · ba2fca2 · ba2fca2
1 parent 90006b6
commit ba2fca2
Show file tree

Hide file tree

Showing 14 changed files with 368 additions and 266 deletions.
diff --git a/packages/bump/src/bump/Bump.tsx b/packages/bump/src/bump/Bump.tsx
@@ -1,19 +1,25 @@
 import { createElement, useMemo, Fragment, ReactNode } from 'react'
 import { Container, useDimensions, SvgWrapper } from '@nivo/core'
 import { Grid, Axes } from '@nivo/axes'
-import { BumpDatum, BumpLayerId, BumpSvgProps, DefaultBumpDatum } from './types'
+import {
+    BumpDatum,
+    BumpLayerId,
+    BumpSerieExtraProps,
+    BumpSvgProps,
+    DefaultBumpDatum,
+} from './types'
 import { useBump } from './hooks'
 import { bumpSvgDefaultProps } from './defaults'
 import { Line } from './Line'
 import { LinesLabels } from './LinesLabels'
 import { Points } from './Points'
 
-type InnerBumpProps<D extends BumpDatum> = Omit<
-    BumpSvgProps<D>,
+type InnerBumpProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> = Omit<
+    BumpSvgProps<Datum, ExtraProps>,
     'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
 >
 
-const InnerBump = <D extends BumpDatum>({
+const InnerBump = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps>({
     data,
 
     width,
@@ -67,15 +73,15 @@ const InnerBump = <D extends BumpDatum>({
     onClick,
     tooltip = bumpSvgDefaultProps.tooltip,
     role = bumpSvgDefaultProps.role,
-}: InnerBumpProps<D>) => {
+}: InnerBumpProps<Datum, ExtraProps>) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
         height,
         partialMargin
     )
 
     const { series, points, xScale, yScale, lineGenerator, activeSerieIds, setActiveSerieIds } =
-        useBump<D>({
+        useBump<Datum, ExtraProps>({
             width: innerWidth,
             height: innerHeight,
             data,
@@ -142,7 +148,7 @@ const InnerBump = <D extends BumpDatum>({
         layerById.lines = (
             <Fragment key="lines">
                 {series.map(serie => (
-                    <Line<D>
+                    <Line<Datum, ExtraProps>
                         key={serie.id}
                         serie={serie}
                         setActiveSerieIds={setActiveSerieIds}
@@ -162,15 +168,19 @@ const InnerBump = <D extends BumpDatum>({
 
     if (layers.includes('points')) {
         layerById.points = (
-            <Points<D> key="points" pointComponent={pointComponent} points={points} />
+            <Points<Datum, ExtraProps>
+                key="points"
+                pointComponent={pointComponent}
+                points={points}
+            />
         )
     }
 
     if (layers.includes('labels')) {
         layerById.labels = (
             <Fragment key="legends">
                 {startLabel !== false && (
-                    <LinesLabels<D>
+                    <LinesLabels<Datum, ExtraProps>
                         series={series}
                         getLabel={startLabel}
                         position="start"
@@ -179,7 +189,7 @@ const InnerBump = <D extends BumpDatum>({
                     />
                 )}
                 {endLabel !== false && (
-                    <LinesLabels<D>
+                    <LinesLabels<Datum, ExtraProps>
                         series={series}
                         getLabel={endLabel}
                         position="end"
@@ -229,14 +239,17 @@ const InnerBump = <D extends BumpDatum>({
     )
 }
 
-export const Bump = <D extends BumpDatum = DefaultBumpDatum>({
+export const Bump = <
+    Datum extends BumpDatum = DefaultBumpDatum,
+    ExtraProps extends BumpSerieExtraProps = {}
+>({
     isInteractive = bumpSvgDefaultProps.isInteractive,
     animate = bumpSvgDefaultProps.animate,
     motionConfig = bumpSvgDefaultProps.motionConfig,
     theme,
     renderWrapper,
     ...otherProps
-}: BumpSvgProps<D>) => (
+}: BumpSvgProps<Datum, ExtraProps>) => (
     <Container
         {...{
             animate,
@@ -246,6 +259,6 @@ export const Bump = <D extends BumpDatum = DefaultBumpDatum>({
             theme,
         }}
     >
-        <InnerBump<D> isInteractive={isInteractive} {...otherProps} />
+        <InnerBump<Datum, ExtraProps> isInteractive={isInteractive} {...otherProps} />
     </Container>
 )
diff --git a/packages/bump/src/bump/Line.tsx b/packages/bump/src/bump/Line.tsx
@@ -1,23 +1,23 @@
 import { useSpring, animated } from '@react-spring/web'
 import { Line as D3Line } from 'd3-shape'
 import { useAnimatedPath, useMotionConfig } from '@nivo/core'
-import { BumpCommonProps, BumpComputedSerie, BumpDatum } from './types'
+import { BumpCommonProps, BumpComputedSerie, BumpDatum, BumpSerieExtraProps } from './types'
 import { useBumpSerieHandlers } from './hooks'
 
-interface LineProps<D extends BumpDatum> {
-    serie: BumpComputedSerie<D>
+interface LineProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> {
+    serie: BumpComputedSerie<Datum, ExtraProps>
     lineGenerator: D3Line<[number, number | null]>
     yStep: number
-    isInteractive: BumpCommonProps<D>['isInteractive']
-    onMouseEnter?: BumpCommonProps<D>['onMouseEnter']
-    onMouseMove?: BumpCommonProps<D>['onMouseMove']
-    onMouseLeave?: BumpCommonProps<D>['onMouseLeave']
-    onClick?: BumpCommonProps<D>['onClick']
+    isInteractive: BumpCommonProps<Datum, ExtraProps>['isInteractive']
+    onMouseEnter?: BumpCommonProps<Datum, ExtraProps>['onMouseEnter']
+    onMouseMove?: BumpCommonProps<Datum, ExtraProps>['onMouseMove']
+    onMouseLeave?: BumpCommonProps<Datum, ExtraProps>['onMouseLeave']
+    onClick?: BumpCommonProps<Datum, ExtraProps>['onClick']
     setActiveSerieIds: (serieIds: string[]) => void
-    tooltip: BumpCommonProps<D>['tooltip']
+    tooltip: BumpCommonProps<Datum, ExtraProps>['tooltip']
 }
 
-export const Line = <D extends BumpDatum>({
+export const Line = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps>({
     serie,
     lineGenerator,
     yStep,
@@ -28,8 +28,8 @@ export const Line = <D extends BumpDatum>({
     onClick,
     setActiveSerieIds,
     tooltip,
-}: LineProps<D>) => {
-    const handlers = useBumpSerieHandlers<D>({
+}: LineProps<Datum, ExtraProps>) => {
+    const handlers = useBumpSerieHandlers<Datum, ExtraProps>({
         serie,
         isInteractive,
         onMouseEnter,
@@ -51,8 +51,8 @@ export const Line = <D extends BumpDatum>({
         lineWidth: number
     }>({
         color: serie.color,
-        opacity: serie.style.opacity,
-        lineWidth: serie.style.lineWidth,
+        opacity: serie.opacity,
+        lineWidth: serie.lineWidth,
         config: springConfig,
         immediate: !animate,
     })

diff --git a/packages/bump/src/bump/LineTooltip.tsx b/packages/bump/src/bump/LineTooltip.tsx
@@ -1,14 +1,16 @@
 import { BasicTooltip } from '@nivo/tooltip'
-import { BumpComputedSerie, BumpDatum } from './types'
+import { BumpComputedSerie, BumpDatum, BumpSerieExtraProps } from './types'
 
-interface LineTooltipProps<D extends BumpDatum> {
-    serie: BumpComputedSerie<D>
+interface LineTooltipProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> {
+    serie: BumpComputedSerie<Datum, ExtraProps>
 }
 
-export const LineTooltip = <D extends BumpDatum>({ serie }: LineTooltipProps<D>) => (
+export const LineTooltip = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps>({
+    serie,
+}: LineTooltipProps<Datum, ExtraProps>) => (
     <BasicTooltip
-        data-testid={`tooltip.${serie.id}`}
-        id={serie.id}
+        data-testid={`tooltip.${serie.data.id}`}
+        id={serie.data.id}
         enableChip={true}
         color={serie.color}
     />

diff --git a/packages/bump/src/bump/LinesLabels.tsx b/packages/bump/src/bump/LinesLabels.tsx
@@ -1,28 +1,28 @@
 import { useSprings, animated } from '@react-spring/web'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { InheritedColorConfig } from '@nivo/colors'
-import { BumpComputedSerie, BumpDatum, BumpLabel } from './types'
+import { BumpComputedSerie, BumpDatum, BumpLabel, BumpSerieExtraProps } from './types'
 import { useBumpSeriesLabels } from './hooks'
 
-interface LineLabelsProps<D extends BumpDatum> {
-    series: BumpComputedSerie<D>[]
-    getLabel: BumpLabel<D>
+interface LineLabelsProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> {
+    series: BumpComputedSerie<Datum, ExtraProps>[]
+    getLabel: BumpLabel<Datum, ExtraProps>
     position: 'start' | 'end'
     padding: number
-    color: InheritedColorConfig<BumpComputedSerie<D>>
+    color: InheritedColorConfig<BumpComputedSerie<Datum, ExtraProps>>
 }
 
-export const LinesLabels = <D extends BumpDatum>({
+export const LinesLabels = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps>({
     series,
     getLabel,
     position,
     padding,
     color,
-}: LineLabelsProps<D>) => {
+}: LineLabelsProps<Datum, ExtraProps>) => {
     const theme = useTheme()
     const { animate, config: springConfig } = useMotionConfig()
 
-    const labels = useBumpSeriesLabels<D>({
+    const labels = useBumpSeriesLabels<Datum, ExtraProps>({
         series,
         getLabel,
         position,

diff --git a/packages/bump/src/bump/Point.tsx b/packages/bump/src/bump/Point.tsx
@@ -1,15 +1,17 @@
 import { SVGAttributes } from 'react'
 import { useSpring, animated, to } from '@react-spring/web'
 import { useMotionConfig } from '@nivo/core'
-import { BumpDatum, BumpPoint } from './types'
+import { BumpDatum, BumpPoint, BumpSerieExtraProps } from './types'
 
 const pointStyle: SVGAttributes<SVGCircleElement>['style'] = { pointerEvents: 'none' }
 
-interface PointProps<D extends BumpDatum> {
-    point: BumpPoint<D>
+interface PointProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> {
+    point: BumpPoint<Datum, ExtraProps>
 }
 
-export const Point = <D extends BumpDatum>({ point }: PointProps<D>) => {
+export const Point = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps>({
+    point,
+}: PointProps<Datum, ExtraProps>) => {
     const { animate, config: springConfig } = useMotionConfig()
 
     const animatedProps = useSpring<{
@@ -21,9 +23,9 @@ export const Point = <D extends BumpDatum>({ point }: PointProps<D>) => {
     }>({
         x: point.x,
         y: point.y,
-        radius: point.style.size / 2,
+        radius: point.size / 2,
         color: point.color,
-        borderWidth: point.style.borderWidth,
+        borderWidth: point.borderWidth,
         config: springConfig,
         immediate: !animate,
     })

diff --git a/packages/bump/src/bump/Points.tsx b/packages/bump/src/bump/Points.tsx
@@ -1,20 +1,21 @@
 import { createElement } from 'react'
-import { BumpDatum, BumpPoint, BumpPointComponent } from './types'
+import { BumpDatum, BumpPoint, BumpPointComponent, BumpSerieExtraProps } from './types'
 
-interface PointsProps<D extends BumpDatum> {
-    points: BumpPoint<D>[]
-    pointComponent: BumpPointComponent<D>
+interface PointsProps<Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps> {
+    points: BumpPoint<Datum, ExtraProps>[]
+    pointComponent: BumpPointComponent<Datum, ExtraProps>
 }
 
-export const Points = <D extends BumpDatum>({ points, pointComponent }: PointsProps<D>) => {
-    return (
-        <>
-            {points.map(point =>
-                createElement(pointComponent, {
-                    key: point.id,
-                    point,
-                })
-            )}
-        </>
-    )
-}
+export const Points = <Datum extends BumpDatum, ExtraProps extends BumpSerieExtraProps>({
+    points,
+    pointComponent,
+}: PointsProps<Datum, ExtraProps>) => (
+    <>
+        {points.map(point =>
+            createElement(pointComponent, {
+                key: point.id,
+                point,
+            })
+        )}
+    </>
+)
diff --git a/packages/bump/src/bump/ResponsiveBump.tsx b/packages/bump/src/bump/ResponsiveBump.tsx
@@ -1,11 +1,16 @@
 import { ResponsiveWrapper } from '@nivo/core'
-import { BumpDatum, BumpSvgProps, DefaultBumpDatum } from './types'
+import { BumpDatum, BumpSerieExtraProps, BumpSvgProps, DefaultBumpDatum } from './types'
 import { Bump } from './Bump'
 
-export const ResponsiveBump = <D extends BumpDatum = DefaultBumpDatum>(
-    props: Omit<BumpSvgProps<D>, 'width' | 'height'>
+export const ResponsiveBump = <
+    Datum extends BumpDatum = DefaultBumpDatum,
+    ExtraProps extends BumpSerieExtraProps = {}
+>(
+    props: Omit<BumpSvgProps<Datum, ExtraProps>, 'width' | 'height'>
 ) => (
     <ResponsiveWrapper>
-        {({ width, height }) => <Bump<D> width={width} height={height} {...props} />}
+        {({ width, height }) => (
+            <Bump<Datum, ExtraProps> width={width} height={height} {...props} />
+        )}
     </ResponsiveWrapper>
 )