feat(radial-bar): add the ability to customize inner radius

plouc · Sep 11, 2021 · 3fb0567 · 3fb0567
1 parent 26a27ba
commit 3fb0567
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 12 deletions.
diff --git a/packages/radial-bar/src/RadialBar.tsx b/packages/radial-bar/src/RadialBar.tsx
@@ -9,6 +9,7 @@ import { RadialBarArcs } from './RadialBarArcs'
 import { PolarGrid } from './polar_grid'
 import { RadialBarTracks } from './RadialBarTracks'
 import { RadialAxis } from './radial_axis'
+import { defaultProps } from '@nivo/pie'
 
 type InnerRadialBarProps<D extends RadialBarDatum = RadialBarDatum> = Omit<
     RadialBarSvgProps<D>,
@@ -20,6 +21,7 @@ const InnerRadialBar = <D extends RadialBarDatum>({
     valueFormat,
     startAngle: originalStartAngle = svgDefaultProps.startAngle,
     endAngle: originalEndAngle = svgDefaultProps.endAngle,
+    innerRadius: innerRadiusRatio = defaultProps.innerRadius,
     padding = svgDefaultProps.padding,
     padAngle = svgDefaultProps.padAngle,
     cornerRadius = svgDefaultProps.cornerRadius,
@@ -76,6 +78,7 @@ const InnerRadialBar = <D extends RadialBarDatum>({
         valueFormat,
         startAngle,
         endAngle,
+        innerRadiusRatio,
         padding,
         padAngle,
         cornerRadius,

diff --git a/packages/radial-bar/src/hooks.ts b/packages/radial-bar/src/hooks.ts
@@ -25,6 +25,7 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
     valueFormat,
     startAngle = commonDefaultProps.startAngle,
     endAngle = commonDefaultProps.endAngle,
+    innerRadiusRatio = commonDefaultProps.innerRadius,
     padding = commonDefaultProps.padding,
     padAngle = commonDefaultProps.padAngle,
     cornerRadius = commonDefaultProps.cornerRadius,
@@ -36,6 +37,7 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
     data: RadialBarDataProps<D>['data']
     valueFormat?: RadialBarCommonProps<D>['valueFormat']
     startAngle: RadialBarCommonProps<D>['startAngle']
+    innerRadiusRatio: RadialBarCommonProps<D>['innerRadius']
     padding: RadialBarCommonProps<D>['padding']
     padAngle: RadialBarCommonProps<D>['padAngle']
     cornerRadius: RadialBarCommonProps<D>['cornerRadius']
@@ -50,6 +52,7 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
     // the time, forcing recomputing everything.
     const center: [number, number] = useMemo(() => [width / 2, height / 2], [width, height])
     const outerRadius = Math.min(...center)
+    const innerRadius = outerRadius * Math.min(innerRadiusRatio, 1)
 
     const getColor = useOrdinalColorScale<ComputedBar<D>>(colors, 'category')
 
@@ -99,12 +102,8 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
     )
 
     const radiusScale = useMemo(
-        () =>
-            scaleBand()
-                .domain(serieIds)
-                .range([outerRadius - 100, outerRadius])
-                .padding(padding),
-        [serieIds, outerRadius, padding]
+        () => scaleBand().domain(serieIds).range([innerRadius, outerRadius]).padding(padding),
+        [serieIds, outerRadius, innerRadius, padding]
     )
 
     const arcGenerator = useMemo(
@@ -126,8 +125,8 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
 
         groups.forEach(group => {
             let currentValue = 0
-            const innerRadius = radiusScale(group.id) as number
-            const outerRadius = innerRadius + radiusScale.bandwidth()
+            const arcInnerRadius = radiusScale(group.id) as number
+            const arcOuterRadius = arcInnerRadius + radiusScale.bandwidth()
 
             group.data.forEach(datum => {
                 const stackedValue = currentValue + datum.y
@@ -144,8 +143,8 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
                     arc: {
                         startAngle: degreesToRadians(valueScale(currentValue)),
                         endAngle: degreesToRadians(valueScale(stackedValue)),
-                        innerRadius,
-                        outerRadius,
+                        innerRadius: arcInnerRadius,
+                        outerRadius: arcOuterRadius,
                     },
                 }
 
@@ -202,21 +201,23 @@ export const useRadialBar = <D extends RadialBarDatum = RadialBarDatum>({
         [categories, bars]
     )
 
-    const customLayerProps: RadialBarCustomLayerProps = useMemo(
+    const customLayerProps: RadialBarCustomLayerProps<D> = useMemo(
         () => ({
             center,
             outerRadius,
+            innerRadius,
             bars,
             arcGenerator,
             radiusScale,
             valueScale,
         }),
-        [center, outerRadius, bars, arcGenerator, radiusScale, valueScale]
+        [center, outerRadius, innerRadius, bars, arcGenerator, radiusScale, valueScale]
     )
 
     return {
         center,
         outerRadius,
+        innerRadius,
         bars,
         arcGenerator,
         radiusScale,

diff --git a/packages/radial-bar/src/props.ts b/packages/radial-bar/src/props.ts
@@ -7,6 +7,7 @@ export const commonDefaultProps = {
 
     startAngle: 0,
     endAngle: 270,
+    innerRadius: 0.3,
     padding: 0.2,
     padAngle: 0,
     cornerRadius: 0,

diff --git a/packages/radial-bar/src/types.ts b/packages/radial-bar/src/types.ts
@@ -44,6 +44,7 @@ export type RadialBarLayerId = 'grid' | 'tracks' | 'bars' | 'labels' | 'legends'
 export interface RadialBarCustomLayerProps<D extends RadialBarDatum = RadialBarDatum> {
     center: [number, number]
     outerRadius: number
+    innerRadius: number
     bars: ComputedBar<D>[]
     arcGenerator: ArcGenerator
     radiusScale: ScaleBand<string>
@@ -78,6 +79,7 @@ export type RadialBarCommonProps<D extends RadialBarDatum = RadialBarDatum> = {
 
     startAngle: number
     endAngle: number
+    innerRadius: number
     padding: number
 
     enableTracks: boolean

diff --git a/website/src/data/components/radial-bar/props.ts b/website/src/data/components/radial-bar/props.ts
@@ -7,6 +7,7 @@ import {
     getLegendsProps,
 } from '../../../lib/componentProperties'
 import { ChartProperty } from '../../../types'
+import { defaultProps } from '@nivo/pie'
 
 const props: ChartProperty[] = [
     {
@@ -165,6 +166,21 @@ const props: ChartProperty[] = [
             step: 5,
         },
     },
+    {
+        key: 'innerRadius',
+        group: 'Base',
+        help: `Donut if greater than 0. Value should be between 0~1 as it's a ratio from outer radius.`,
+        type: 'number',
+        required: false,
+        flavors: ['svg'],
+        defaultValue: svgDefaultProps.innerRadius,
+        controlType: 'range',
+        controlOptions: {
+            min: 0,
+            max: 0.95,
+            step: 0.05,
+        },
+    },
     {
         key: 'padding',
         group: 'Base',

diff --git a/website/src/pages/radial-bar/index.tsx b/website/src/pages/radial-bar/index.tsx
@@ -18,6 +18,7 @@ const initialProperties: UnmappedRadarProps = {
 
     startAngle: svgDefaultProps.startAngle,
     endAngle: svgDefaultProps.endAngle,
+    innerRadius: svgDefaultProps.innerRadius,
     padding: 0.4,
     padAngle: svgDefaultProps.padAngle,
     cornerRadius: 2,