feat(radial-bar): add the ability to specify a static max value

Author: plouc

packages/radial-bar/src/RadialBar.tsx

@@ -17,6 +17,7 @@ type InnerRadialBarProps<D extends RadialBarDatum = RadialBarDatum> = Omit<
 
 const InnerRadialBar = <D extends RadialBarDatum>({
     data,
+    maxValue = svgDefaultProps.maxValue,
     valueFormat,
     startAngle: originalStartAngle = svgDefaultProps.startAngle,
     endAngle: originalEndAngle = svgDefaultProps.endAngle,
@@ -79,6 +80,7 @@ const InnerRadialBar = <D extends RadialBarDatum>({
         customLayerProps,
     } = useRadialBar<D>({
         data,
+        maxValue,
         valueFormat,
         startAngle,
         endAngle,

packages/radial-bar/src/hooks.ts

@@ -4,7 +4,7 @@ import { arc as d3Arc } from 'd3-shape'
 import { degreesToRadians, useValueFormatter } from '@nivo/core'
 import { Arc } from '@nivo/arcs'
 import { useOrdinalColorScale } from '@nivo/colors'
-import { commonDefaultProps } from './props'
+import { commonDefaultProps, svgDefaultProps } from './props'
 import {
     ComputedBar,
     RadialBarCommonProps,
@@ -22,6 +22,7 @@ interface RadialBarGroup<D extends RadialBarDatum> {
 
 export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
     data,
+    maxValue: maxValueDirective = svgDefaultProps.maxValue,
     valueFormat,
     startAngle = commonDefaultProps.startAngle,
     endAngle = commonDefaultProps.endAngle,
@@ -35,6 +36,7 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
     tracksColor = commonDefaultProps.tracksColor,
 }: {
     data: RadialBarDataProps<D>['data']
+    maxValue: RadialBarCommonProps<D>['maxValue']
     valueFormat?: RadialBarCommonProps<D>['valueFormat']
     startAngle: RadialBarCommonProps<D>['startAngle']
     innerRadiusRatio: RadialBarCommonProps<D>['innerRadius']
@@ -91,10 +93,14 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
             })
         })
 
-        result.maxValue = Math.max(...result.groups.map(group => group.total))
+        if (maxValueDirective === 'auto') {
+            result.maxValue = Math.max(...result.groups.map(group => group.total))
+        } else {
+            result.maxValue = maxValueDirective
+        }
 
         return result
-    }, [data])
+    }, [data, maxValueDirective])
 
     const valueScale = useMemo(
         () => scaleLinear<number, number>().domain([0, maxValue]).range([startAngle, endAngle]),

packages/radial-bar/src/props.ts

@@ -3,6 +3,8 @@ import { ComputedBar, RadialBarLayerId } from './types'
 import { RadialBarTooltip } from './RadialBarTooltip'
 
 export const commonDefaultProps = {
+    maxValue: 'auto' as const,
+
     layers: ['grid', 'tracks', 'bars', 'labels', 'legends'] as RadialBarLayerId[],
 
     startAngle: 0,

packages/radial-bar/src/types.ts

@@ -64,6 +64,7 @@ export interface RadialBarTrackDatum {
 }
 
 export type RadialBarCommonProps<D extends RadialBarDatum = RadialBarDatum> = {
+    maxValue: 'auto' | number
     valueFormat: ValueFormat<number>
 
     margin: Box

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

@@ -71,6 +71,15 @@ const props: ChartProperty[] = [
         `,
         flavors: ['svg'],
     },
+    {
+        key: 'maxValue',
+        group: 'Base',
+        type: `'auto' | number`,
+        required: false,
+        help: `If 'auto', the max value is derived from the data, otherwise use a static value.`,
+        flavors: ['svg'],
+        defaultValue: svgDefaultProps.maxValue,
+    },
     {
         key: 'valueFormat',
         group: 'Base',