feat(radial-bar): support custom datum via generic

Author: plouc

packages/radial-bar/src/RadialBar.tsx

@@ -2,20 +2,20 @@ import { createElement, Fragment, ReactNode } from 'react'
 import { Container, useDimensions, SvgWrapper, clampArc } from '@nivo/core'
 import { ArcLabelsLayer } from '@nivo/arcs'
 import { BoxLegendSvg } from '@nivo/legends'
-import { RadialBarLayerId, RadialBarSvgProps, ComputedBar } from './types'
+import { RadialBarLayerId, RadialBarSvgProps, ComputedBar, RadialBarDatum } from './types'
 import { svgDefaultProps } from './props'
 import { useRadialBar } from './hooks'
 import { RadialBarArcs } from './RadialBarArcs'
 import { PolarGrid } from './polar_grid'
 import { RadialBarTracks } from './RadialBarTracks'
 import { RadialAxis } from './radial_axis'
 
-type InnerRadialBarProps = Omit<
-    RadialBarSvgProps,
+type InnerRadialBarProps<D extends RadialBarDatum = RadialBarDatum> = Omit<
+    RadialBarSvgProps<D>,
     'animate' | 'motionConfig' | 'renderWrapper' | 'theme'
 >
 
-const InnerRadialBar = ({
+const InnerRadialBar = <D extends RadialBarDatum>({
     data,
     valueFormat,
     startAngle: originalStartAngle = svgDefaultProps.startAngle,
@@ -53,7 +53,7 @@ const InnerRadialBar = ({
     ariaLabel,
     ariaLabelledBy,
     ariaDescribedBy,
-}: InnerRadialBarProps) => {
+}: InnerRadialBarProps<D>) => {
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
         width,
         height,
@@ -71,7 +71,7 @@ const InnerRadialBar = ({
         tracks,
         legendData,
         customLayerProps,
-    } = useRadialBar({
+    } = useRadialBar<D>({
         data,
         valueFormat,
         startAngle,
@@ -141,7 +141,7 @@ const InnerRadialBar = ({
 
     if (layers.includes('bars')) {
         layerById.bars = (
-            <RadialBarArcs
+            <RadialBarArcs<D>
                 key="bars"
                 center={center}
                 bars={bars}
@@ -161,7 +161,7 @@ const InnerRadialBar = ({
 
     if (layers.includes('labels') && enableLabels) {
         layerById.labels = (
-            <ArcLabelsLayer<ComputedBar>
+            <ArcLabelsLayer<ComputedBar<D>>
                 key="labels"
                 center={center}
                 data={bars}
@@ -211,14 +211,14 @@ const InnerRadialBar = ({
     )
 }
 
-export const RadialBar = ({
+export const RadialBar = <D extends RadialBarDatum = RadialBarDatum>({
     isInteractive = svgDefaultProps.isInteractive,
     animate = svgDefaultProps.animate,
     motionConfig = svgDefaultProps.motionConfig,
     theme,
     renderWrapper,
     ...otherProps
-}: RadialBarSvgProps) => (
+}: RadialBarSvgProps<D>) => (
     <Container
         {...{
             animate,
@@ -228,6 +228,6 @@ export const RadialBar = ({
             theme,
         }}
     >
-        <InnerRadialBar isInteractive={isInteractive} {...otherProps} />
+        <InnerRadialBar<D> isInteractive={isInteractive} {...otherProps} />
     </Container>
 )

packages/radial-bar/src/RadialBarArcs.tsx

@@ -1,24 +1,24 @@
 import { createElement, MouseEvent, useCallback } from 'react'
 import { ArcsLayer, ArcGenerator } from '@nivo/arcs'
 import { useTooltip } from '@nivo/tooltip'
-import { ComputedBar, RadialBarCommonProps } from './types'
+import { ComputedBar, RadialBarCommonProps, RadialBarDatum } from './types'
 
-interface RadialBarArcsProps {
+interface RadialBarArcsProps<D extends RadialBarDatum> {
     center: [number, number]
-    bars: ComputedBar[]
-    borderWidth: RadialBarCommonProps['borderWidth']
-    borderColor: RadialBarCommonProps['borderColor']
+    bars: ComputedBar<D>[]
+    borderWidth: RadialBarCommonProps<D>['borderWidth']
+    borderColor: RadialBarCommonProps<D>['borderColor']
     arcGenerator: ArcGenerator
-    isInteractive: RadialBarCommonProps['isInteractive']
-    tooltip: RadialBarCommonProps['tooltip']
-    onClick?: RadialBarCommonProps['onClick']
-    onMouseEnter?: RadialBarCommonProps['onMouseEnter']
-    onMouseMove?: RadialBarCommonProps['onMouseMove']
-    onMouseLeave?: RadialBarCommonProps['onMouseLeave']
-    transitionMode: RadialBarCommonProps['transitionMode']
+    isInteractive: RadialBarCommonProps<D>['isInteractive']
+    tooltip: RadialBarCommonProps<D>['tooltip']
+    onClick?: RadialBarCommonProps<D>['onClick']
+    onMouseEnter?: RadialBarCommonProps<D>['onMouseEnter']
+    onMouseMove?: RadialBarCommonProps<D>['onMouseMove']
+    onMouseLeave?: RadialBarCommonProps<D>['onMouseLeave']
+    transitionMode: RadialBarCommonProps<D>['transitionMode']
 }
 
-export const RadialBarArcs = ({
+export const RadialBarArcs = <D extends RadialBarDatum>({
     center,
     bars,
     borderWidth,
@@ -31,42 +31,42 @@ export const RadialBarArcs = ({
     onMouseMove,
     onMouseLeave,
     transitionMode,
-}: RadialBarArcsProps) => {
+}: RadialBarArcsProps<D>) => {
     const { showTooltipFromEvent, hideTooltip } = useTooltip()
 
     const handleClick = useCallback(
-        (bar: ComputedBar, event: MouseEvent) => {
+        (bar: ComputedBar<D>, event: MouseEvent) => {
             onClick?.(bar, event)
         },
         [onClick]
     )
 
     const handleMouseEnter = useCallback(
-        (bar: ComputedBar, event: MouseEvent) => {
+        (bar: ComputedBar<D>, event: MouseEvent) => {
             showTooltipFromEvent(createElement(tooltip, { bar }), event)
             onMouseEnter?.(bar, event)
         },
         [showTooltipFromEvent, tooltip, onMouseEnter]
     )
 
     const handleMouseMove = useCallback(
-        (bar: ComputedBar, event: MouseEvent) => {
+        (bar: ComputedBar<D>, event: MouseEvent) => {
             showTooltipFromEvent(createElement(tooltip, { bar }), event)
             onMouseMove?.(bar, event)
         },
         [showTooltipFromEvent, tooltip, onMouseMove]
     )
 
     const handleMouseLeave = useCallback(
-        (bar: ComputedBar, event: MouseEvent) => {
+        (bar: ComputedBar<D>, event: MouseEvent) => {
             hideTooltip()
             onMouseLeave?.(bar, event)
         },
         [hideTooltip, onMouseLeave]
     )
 
     return (
-        <ArcsLayer<ComputedBar>
+        <ArcsLayer<ComputedBar<D>>
             center={center}
             data={bars}
             arcGenerator={arcGenerator}

packages/radial-bar/src/RadialBarTooltip.tsx

@@ -1,7 +1,7 @@
 import { BasicTooltip } from '@nivo/tooltip'
-import { RadialBarTooltipProps } from './types'
+import { RadialBarDatum, RadialBarTooltipProps } from './types'
 
-export const RadialBarTooltip = ({ bar }: RadialBarTooltipProps) => {
+export const RadialBarTooltip = <D extends RadialBarDatum>({ bar }: RadialBarTooltipProps<D>) => {
     return (
         <BasicTooltip
             enableChip

packages/radial-bar/src/ResponsiveRadialBar.tsx

@@ -1,9 +1,11 @@
 import { ResponsiveWrapper } from '@nivo/core'
-import { RadialBarSvgProps } from './types'
+import { RadialBarDatum, RadialBarSvgProps } from './types'
 import { RadialBar } from './RadialBar'
 
-export const ResponsiveRadialBar = (props: Omit<RadialBarSvgProps, 'height' | 'width'>) => (
+export const ResponsiveRadialBar = <D extends RadialBarDatum = RadialBarDatum>(
+    props: Omit<RadialBarSvgProps<D>, 'height' | 'width'>
+) => (
     <ResponsiveWrapper>
-        {({ width, height }) => <RadialBar width={width} height={height} {...props} />}
+        {({ width, height }) => <RadialBar<D> width={width} height={height} {...props} />}
     </ResponsiveWrapper>
 )

packages/radial-bar/src/hooks.ts

@@ -9,18 +9,18 @@ import {
     ComputedBar,
     RadialBarCommonProps,
     RadialBarDataProps,
-    RadialBarSerie,
     RadialBarCustomLayerProps,
     RadialBarTrackDatum,
+    RadialBarDatum,
 } from './types'
 
-interface RadialBarGroup {
+interface RadialBarGroup<D extends RadialBarDatum> {
     id: string
     total: number
-    data: RadialBarSerie['data']
+    data: D[]
 }
 
-export const useRadialBar = ({
+export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
     data,
     valueFormat,
     startAngle = commonDefaultProps.startAngle,
@@ -33,25 +33,25 @@ export const useRadialBar = ({
     colors = commonDefaultProps.colors,
     tracksColor = commonDefaultProps.tracksColor,
 }: {
-    data: RadialBarDataProps['data']
-    valueFormat?: RadialBarCommonProps['valueFormat']
-    startAngle: RadialBarCommonProps['startAngle']
-    padding: RadialBarCommonProps['padding']
-    padAngle: RadialBarCommonProps['padAngle']
-    cornerRadius: RadialBarCommonProps['cornerRadius']
-    endAngle: RadialBarCommonProps['endAngle']
+    data: RadialBarDataProps<D>['data']
+    valueFormat?: RadialBarCommonProps<D>['valueFormat']
+    startAngle: RadialBarCommonProps<D>['startAngle']
+    padding: RadialBarCommonProps<D>['padding']
+    padAngle: RadialBarCommonProps<D>['padAngle']
+    cornerRadius: RadialBarCommonProps<D>['cornerRadius']
+    endAngle: RadialBarCommonProps<D>['endAngle']
     width: number
     height: number
-    colors: RadialBarCommonProps['colors']
-    tracksColor: RadialBarCommonProps['tracksColor']
+    colors: RadialBarCommonProps<D>['colors']
+    tracksColor: RadialBarCommonProps<D>['tracksColor']
 }) => {
     // using a hook, not because it's costly to compute, but because this is used as
     // a dependency for other hooks, and otherwise a new array would be created all
     // the time, forcing recomputing everything.
     const center: [number, number] = useMemo(() => [width / 2, height / 2], [width, height])
     const outerRadius = Math.min(...center)
 
-    const getColor = useOrdinalColorScale<ComputedBar>(colors, 'category')
+    const getColor = useOrdinalColorScale<ComputedBar<D>>(colors, 'category')
 
     // the way categories are being extracted is a bit fragile, because it's extracted from the data,
     // so if the first group doesn't contain the first expected category for example, then the order
@@ -61,7 +61,7 @@ export const useRadialBar = ({
         const result: {
             serieIds: string[]
             categories: string[]
-            groups: RadialBarGroup[]
+            groups: RadialBarGroup<D>[]
             maxValue: number
         } = {
             serieIds: [],
@@ -122,7 +122,7 @@ export const useRadialBar = ({
     const formatValue = useValueFormatter<number>(valueFormat)
 
     const bars = useMemo(() => {
-        const innerBars: ComputedBar[] = []
+        const innerBars: ComputedBar<D>[] = []
 
         groups.forEach(group => {
             let currentValue = 0
@@ -132,7 +132,7 @@ export const useRadialBar = ({
             group.data.forEach(datum => {
                 const stackedValue = currentValue + datum.y
 
-                const computedDatum: ComputedBar = {
+                const computedDatum: ComputedBar<D> = {
                     id: `${group.id}.${datum.x}`,
                     data: datum,
                     groupId: group.id,

packages/radial-bar/src/polar_grid/RadialGrid.tsx

@@ -5,6 +5,7 @@ import { useMotionConfig, useTheme } from '@nivo/core'
 
 interface PolarGridProps {
     scale: ScaleLinear<number, number>
+    ticks?: number | number[]
     innerRadius: number
     outerRadius: number
 }

packages/radial-bar/src/types.ts

@@ -18,14 +18,14 @@ export interface RadialBarDatum {
     y: number
 }
 
-export interface RadialBarSerie {
+export interface RadialBarSerie<D extends RadialBarDatum = RadialBarDatum> {
     id: string
-    data: RadialBarDatum[]
+    data: D[]
 }
 
-export interface ComputedBar {
+export interface ComputedBar<D extends RadialBarDatum = RadialBarDatum> {
     id: string
-    data: RadialBarDatum
+    data: D
     groupId: string
     category: string
     value: number
@@ -35,24 +35,24 @@ export interface ComputedBar {
     arc: Arc
 }
 
-export interface RadialBarDataProps {
-    data: RadialBarSerie[]
+export interface RadialBarDataProps<D extends RadialBarDatum = RadialBarDatum> {
+    data: RadialBarSerie<D>[]
 }
 
 export type RadialBarLayerId = 'grid' | 'tracks' | 'bars' | 'labels' | 'legends'
 
-export interface RadialBarCustomLayerProps {
+export interface RadialBarCustomLayerProps<D extends RadialBarDatum = RadialBarDatum> {
     center: [number, number]
     outerRadius: number
-    bars: ComputedBar[]
+    bars: ComputedBar<D>[]
     arcGenerator: ArcGenerator
     radiusScale: ScaleBand<string>
     valueScale: ScaleLinear<number, number>
 }
 export type RadialBarCustomLayer = FunctionComponent<RadialBarCustomLayerProps>
 
-export interface RadialBarTooltipProps {
-    bar: ComputedBar
+export interface RadialBarTooltipProps<D extends RadialBarDatum = RadialBarDatum> {
+    bar: ComputedBar<D>
 }
 export type RadialBarTooltipComponent = FunctionComponent<RadialBarTooltipProps>
 
@@ -62,15 +62,15 @@ export interface RadialBarTrackDatum {
     arc: Arc
 }
 
-export type RadialBarCommonProps = {
+export type RadialBarCommonProps<D extends RadialBarDatum = RadialBarDatum> = {
     valueFormat: ValueFormat<number>
 
     margin: Box
 
     theme: Theme
-    colors: OrdinalColorScaleConfig<Omit<ComputedBar, 'color'>>
+    colors: OrdinalColorScaleConfig<Omit<ComputedBar<D>, 'color'>>
     borderWidth: number
-    borderColor: InheritedColorConfig<ComputedBar>
+    borderColor: InheritedColorConfig<ComputedBar<D>>
     padAngle: number
     cornerRadius: number
 
@@ -90,17 +90,17 @@ export type RadialBarCommonProps = {
     radialAxisEnd: RadialAxisConfig | null
 
     enableLabels: boolean
-    label: PropertyAccessor<ComputedBar, string>
-    labelsSkipAngle: ArcLabelsProps<ComputedBar>['arcLabelsSkipAngle']
-    labelsRadiusOffset: ArcLabelsProps<ComputedBar>['arcLabelsRadiusOffset']
-    labelsTextColor: ArcLabelsProps<ComputedBar>['arcLabelsTextColor']
+    label: PropertyAccessor<ComputedBar<D>, string>
+    labelsSkipAngle: ArcLabelsProps<ComputedBar<D>>['arcLabelsSkipAngle']
+    labelsRadiusOffset: ArcLabelsProps<ComputedBar<D>>['arcLabelsRadiusOffset']
+    labelsTextColor: ArcLabelsProps<ComputedBar<D>>['arcLabelsTextColor']
 
     isInteractive: boolean
     tooltip: RadialBarTooltipComponent
-    onClick: (bar: ComputedBar, event: MouseEvent) => void
-    onMouseEnter: (bar: ComputedBar, event: MouseEvent) => void
-    onMouseMove: (bar: ComputedBar, event: MouseEvent) => void
-    onMouseLeave: (bar: ComputedBar, event: MouseEvent) => void
+    onClick: (bar: ComputedBar<D>, event: MouseEvent) => void
+    onMouseEnter: (bar: ComputedBar<D>, event: MouseEvent) => void
+    onMouseMove: (bar: ComputedBar<D>, event: MouseEvent) => void
+    onMouseLeave: (bar: ComputedBar<D>, event: MouseEvent) => void
 
     legends: LegendProps[]
 
@@ -114,7 +114,9 @@ export type RadialBarCommonProps = {
     ariaDescribedBy: AriaAttributes['aria-describedby']
 }
 
-export type RadialBarSvgProps = Partial<RadialBarCommonProps> &
-    RadialBarDataProps &
+export type RadialBarSvgProps<D extends RadialBarDatum = RadialBarDatum> = Partial<
+    RadialBarCommonProps<D>
+> &
+    RadialBarDataProps<D> &
     Dimensions &
     ModernMotionProps

website/src/pages/radial-bar/index.tsx

@@ -6,7 +6,7 @@ import mapper from '../../data/components/radar/mapper'
 import { groups } from '../../data/components/radial-bar/props'
 
 type MappedRadarProps = Omit<RadialBarSvgProps, 'data' | 'width' | 'height'>
-type UnmappedRadarProps = Omit<RadialBarSvgProps, 'valueFormat'> & {
+type UnmappedRadarProps = Omit<MappedRadarProps, 'valueFormat'> & {
     valueFormat: {
         format: string
         enabled: boolean
@@ -18,7 +18,7 @@ const initialProperties: UnmappedRadarProps = {
 
     startAngle: svgDefaultProps.startAngle,
     endAngle: svgDefaultProps.endAngle,
-    padding: svgDefaultProps.padding,
+    padding: 0.4,
     padAngle: svgDefaultProps.padAngle,
     cornerRadius: 2,