feat(radial-bar): add tracks

packages/radial-bar/src/RadialBar.tsx

@@ -7,6 +7,7 @@ import { useRadialBar } from './hooks'
 import { RadialBarArcs } from './RadialBarArcs'
 import { PolarGrid } from './polar_grid'
 import { BoxLegendSvg } from '@nivo/legends'
+import { RadialBarTracks } from './RadialBarTracks'
 
 type InnerRadialBarProps = Omit<
     RadialBarSvgProps,
@@ -23,6 +24,8 @@ const InnerRadialBar = ({
     height,
     margin: partialMargin,
     layers = svgDefaultProps.layers,
+    enableTracks = svgDefaultProps.enableTracks,
+    tracksColor = svgDefaultProps.tracksColor,
     enableGridAngles = svgDefaultProps.enableGridAngles,
     enableGridRadii = svgDefaultProps.enableGridRadii,
     colors = svgDefaultProps.colors,
@@ -59,6 +62,7 @@ const InnerRadialBar = ({
         arcGenerator,
         radiusScale,
         valueScale,
+        tracks,
         legendData,
         customLayerProps,
     } = useRadialBar({
@@ -71,10 +75,12 @@ const InnerRadialBar = ({
         height: innerHeight,
         colors,
         cornerRadius,
+        tracksColor,
     })
 
     const layerById: Record<RadialBarLayerId, ReactNode> = {
         grid: null,
+        tracks: null,
         bars: null,
         labels: null,
         legends: null,
@@ -93,6 +99,18 @@ const InnerRadialBar = ({
         )
     }
 
+    if (layers.includes('tracks') && enableTracks) {
+        layerById.tracks = (
+            <RadialBarTracks
+                key="tracks"
+                center={center}
+                tracks={tracks}
+                arcGenerator={arcGenerator}
+                transitionMode={transitionMode}
+            />
+        )
+    }
+
     if (layers.includes('bars')) {
         layerById.bars = (
             <RadialBarArcs

packages/radial-bar/src/RadialBarTracks.tsx

@@ -0,0 +1,27 @@
+import { ArcGenerator, ArcsLayer, ArcTransitionMode } from '@nivo/arcs'
+import { RadialBarTrackDatum } from './types'
+
+interface RadialBarTracksProps {
+    center: [number, number]
+    tracks: RadialBarTrackDatum[]
+    arcGenerator: ArcGenerator
+    transitionMode: ArcTransitionMode
+}
+
+export const RadialBarTracks = ({
+    center,
+    tracks,
+    arcGenerator,
+    transitionMode,
+}: RadialBarTracksProps) => {
+    return (
+        <ArcsLayer<RadialBarTrackDatum>
+            center={center}
+            data={tracks}
+            arcGenerator={arcGenerator}
+            borderWidth={0}
+            borderColor="none"
+            transitionMode={transitionMode}
+        />
+    )
+}

packages/radial-bar/src/hooks.ts

@@ -11,6 +11,7 @@ import {
     RadialBarDataProps,
     RadialBarSerie,
     RadialBarCustomLayerProps,
+    RadialBarTrackDatum,
 } from './types'
 
 interface RadialBarGroup {
@@ -29,6 +30,7 @@ export const useRadialBar = ({
     height,
     colors = commonDefaultProps.colors,
     cornerRadius = commonDefaultProps.cornerRadius,
+    tracksColor = commonDefaultProps.tracksColor,
 }: {
     data: RadialBarDataProps['data']
     valueFormat?: RadialBarCommonProps['valueFormat']
@@ -39,6 +41,7 @@ export const useRadialBar = ({
     height: number
     colors: RadialBarCommonProps['colors']
     cornerRadius: RadialBarCommonProps['cornerRadius']
+    tracksColor: RadialBarCommonProps['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
@@ -154,6 +157,28 @@ export const useRadialBar = ({
         return innerBars
     }, [groups, radiusScale, valueScale, getColor, formatValue])
 
+    const startAngleRadians = degreesToRadians(startAngle)
+    const endAngleRadians = degreesToRadians(endAngle)
+
+    const tracks: RadialBarTrackDatum[] = useMemo(
+        () =>
+            radiusScale.domain().map(value => {
+                const trackRadius = radiusScale(value) as number
+
+                return {
+                    id: value,
+                    color: tracksColor,
+                    arc: {
+                        startAngle: startAngleRadians,
+                        endAngle: endAngleRadians,
+                        innerRadius: trackRadius,
+                        outerRadius: trackRadius + radiusScale.bandwidth(),
+                    },
+                }
+            }),
+        [radiusScale, startAngleRadians, endAngleRadians, tracksColor]
+    )
+
     // Given the way categories are extracted, (please see the corresponding hook above),
     // legends order might be incorrect, also colors are extracted from bars, to avoid
     // duplicating the colors function, but if the color logic is custom for each bar,
@@ -193,6 +218,7 @@ export const useRadialBar = ({
         arcGenerator,
         radiusScale,
         valueScale,
+        tracks,
         legendData,
         customLayerProps,
     }

packages/radial-bar/src/props.ts

@@ -3,12 +3,15 @@ import { ComputedBar, RadialBarLayerId } from './types'
 import { RadialBarTooltip } from './RadialBarTooltip'
 
 export const commonDefaultProps = {
-    layers: ['grid', 'bars', 'labels', 'legends'] as RadialBarLayerId[],
+    layers: ['grid', 'tracks', 'bars', 'labels', 'legends'] as RadialBarLayerId[],
 
     startAngle: 0,
     endAngle: 270,
     padding: 0.2,
 
+    enableTracks: true,
+    tracksColor: 'rgba(0, 0, 0, .15)',
+
     enableGridAngles: true,
     enableGridRadii: true,
 

packages/radial-bar/src/types.ts

@@ -38,7 +38,7 @@ export interface RadialBarDataProps {
     data: RadialBarSerie[]
 }
 
-export type RadialBarLayerId = 'grid' | 'bars' | 'labels' | 'legends'
+export type RadialBarLayerId = 'grid' | 'tracks' | 'bars' | 'labels' | 'legends'
 
 export interface RadialBarCustomLayerProps {
     center: [number, number]
@@ -55,6 +55,12 @@ export interface RadialBarTooltipProps {
 }
 export type RadialBarTooltipComponent = FunctionComponent<RadialBarTooltipProps>
 
+export interface RadialBarTrackDatum {
+    id: string
+    color: string
+    arc: Arc
+}
+
 export type RadialBarCommonProps = {
     valueFormat: ValueFormat<number>
 
@@ -72,6 +78,9 @@ export type RadialBarCommonProps = {
     endAngle: number
     padding: number
 
+    enableTracks: boolean
+    tracksColor: string
+
     enableGridAngles: boolean
     enableGridRadii: boolean
 

website/src/data/components/radial-bar/props.ts

@@ -231,6 +231,26 @@ const props: ChartProperty[] = [
             step: 1,
         },
     },
+    {
+        key: 'enableTracks',
+        group: 'Tracks',
+        type: 'boolean',
+        required: false,
+        help: 'Enable/disable tracks.',
+        flavors: ['svg'],
+        defaultValue: svgDefaultProps.enableTracks,
+        controlType: 'switch',
+    },
+    {
+        key: 'tracksColor',
+        group: 'Tracks',
+        type: 'string',
+        required: false,
+        help: 'Define tracks color.',
+        flavors: ['svg'],
+        defaultValue: svgDefaultProps.tracksColor,
+        controlType: 'colorPicker',
+    },
     {
         key: 'enableGridAngles',
         group: 'Grid & Axes',

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

@@ -32,6 +32,9 @@ const initialProperties: UnmappedRadarProps = {
     borderColor: svgDefaultProps.borderColor,
     cornerRadius: 2,
 
+    enableTracks: svgDefaultProps.enableTracks,
+    tracksColor: svgDefaultProps.tracksColor,
+
     enableGridAngles: svgDefaultProps.enableGridAngles,
     enableGridRadii: svgDefaultProps.enableGridRadii,