feat(radial-bar): add support for padAngle

Author: plouc

packages/radial-bar/src/RadialBar.tsx

@@ -20,6 +20,8 @@ const InnerRadialBar = ({
     startAngle = svgDefaultProps.startAngle,
     endAngle = svgDefaultProps.endAngle,
     padding = svgDefaultProps.padding,
+    padAngle = svgDefaultProps.padAngle,
+    cornerRadius = svgDefaultProps.cornerRadius,
     width,
     height,
     margin: partialMargin,
@@ -31,7 +33,6 @@ const InnerRadialBar = ({
     colors = svgDefaultProps.colors,
     borderWidth = svgDefaultProps.borderWidth,
     borderColor = svgDefaultProps.borderColor,
-    cornerRadius = svgDefaultProps.cornerRadius,
     enableLabels = svgDefaultProps.enableLabels,
     label = svgDefaultProps.label,
     labelsSkipAngle = svgDefaultProps.labelsSkipAngle,
@@ -71,10 +72,11 @@ const InnerRadialBar = ({
         startAngle,
         endAngle,
         padding,
+        padAngle,
+        cornerRadius,
         width: innerWidth,
         height: innerHeight,
         colors,
-        cornerRadius,
         tracksColor,
     })
 

packages/radial-bar/src/hooks.ts

@@ -26,21 +26,23 @@ export const useRadialBar = ({
     startAngle = commonDefaultProps.startAngle,
     endAngle = commonDefaultProps.endAngle,
     padding = commonDefaultProps.padding,
+    padAngle = commonDefaultProps.padAngle,
+    cornerRadius = commonDefaultProps.cornerRadius,
     width,
     height,
     colors = commonDefaultProps.colors,
-    cornerRadius = commonDefaultProps.cornerRadius,
     tracksColor = commonDefaultProps.tracksColor,
 }: {
     data: RadialBarDataProps['data']
     valueFormat?: RadialBarCommonProps['valueFormat']
     startAngle: RadialBarCommonProps['startAngle']
     padding: RadialBarCommonProps['padding']
+    padAngle: RadialBarCommonProps['padAngle']
+    cornerRadius: RadialBarCommonProps['cornerRadius']
     endAngle: RadialBarCommonProps['endAngle']
     width: number
     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
@@ -112,8 +114,9 @@ export const useRadialBar = ({
                 .endAngle(d => d.endAngle)
                 .innerRadius(d => d.innerRadius)
                 .outerRadius(d => d.outerRadius)
-                .cornerRadius(cornerRadius),
-        [cornerRadius]
+                .cornerRadius(cornerRadius)
+                .padAngle(degreesToRadians(padAngle)),
+        [cornerRadius, padAngle]
     )
 
     const formatValue = useValueFormatter<number>(valueFormat)

packages/radial-bar/src/props.ts

@@ -8,6 +8,8 @@ export const commonDefaultProps = {
     startAngle: 0,
     endAngle: 270,
     padding: 0.2,
+    padAngle: 0,
+    cornerRadius: 0,
 
     enableTracks: true,
     tracksColor: 'rgba(0, 0, 0, .15)',
@@ -16,7 +18,6 @@ export const commonDefaultProps = {
     enableGridRadii: true,
 
     colors: { scheme: 'nivo' as const },
-    cornerRadius: 0,
     borderWidth: 0,
     borderColor: { from: 'color', modifiers: [['darker', 1]] } as InheritedColorConfig<ComputedBar>,
 

packages/radial-bar/src/types.ts

@@ -70,6 +70,7 @@ export type RadialBarCommonProps = {
     colors: OrdinalColorScaleConfig<Omit<ComputedBar, 'color'>>
     borderWidth: number
     borderColor: InheritedColorConfig<ComputedBar>
+    padAngle: number
     cornerRadius: number
 
     layers: (RadialBarLayerId | RadialBarCustomLayer)[]

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

@@ -180,6 +180,38 @@ const props: ChartProperty[] = [
             step: 0.05,
         },
     },
+    {
+        key: 'padAngle',
+        group: 'Base',
+        type: 'number',
+        required: false,
+        help: 'Padding between each bar.',
+        flavors: ['svg'],
+        defaultValue: svgDefaultProps.padAngle,
+        controlType: 'range',
+        controlOptions: {
+            unit: '°',
+            min: 0,
+            max: 45,
+            step: 1,
+        },
+    },
+    {
+        key: 'cornerRadius',
+        group: 'Base',
+        type: 'number',
+        required: false,
+        help: 'Rounded corners.',
+        flavors: ['svg'],
+        defaultValue: svgDefaultProps.cornerRadius,
+        controlType: 'range',
+        controlOptions: {
+            unit: 'px',
+            min: 0,
+            max: 45,
+            step: 1,
+        },
+    },
     themeProperty(['svg']),
     {
         key: 'colors',
@@ -215,22 +247,6 @@ const props: ChartProperty[] = [
         defaultValue: svgDefaultProps.borderColor,
         controlType: 'inheritedColor',
     },
-    {
-        key: 'cornerRadius',
-        group: 'Style',
-        type: 'number',
-        required: false,
-        help: 'Rounded corners.',
-        flavors: ['svg'],
-        defaultValue: svgDefaultProps.cornerRadius,
-        controlType: 'range',
-        controlOptions: {
-            unit: 'px',
-            min: 0,
-            max: 45,
-            step: 1,
-        },
-    },
     {
         key: 'enableTracks',
         group: 'Tracks',

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

@@ -19,6 +19,8 @@ const initialProperties: UnmappedRadarProps = {
     startAngle: svgDefaultProps.startAngle,
     endAngle: svgDefaultProps.endAngle,
     padding: svgDefaultProps.padding,
+    padAngle: svgDefaultProps.padAngle,
+    cornerRadius: 2,
 
     margin: {
         top: 20,
@@ -30,7 +32,6 @@ const initialProperties: UnmappedRadarProps = {
     colors: svgDefaultProps.colors,
     borderWidth: svgDefaultProps.borderWidth,
     borderColor: svgDefaultProps.borderColor,
-    cornerRadius: 2,
 
     enableTracks: svgDefaultProps.enableTracks,
     tracksColor: svgDefaultProps.tracksColor,