feat(radial-bar): add controls for radial & circular axes to the demo

packages/radial-bar/src/RadialBar.tsx

@@ -149,7 +149,7 @@ const InnerRadialBar = <D extends RadialBarDatum>({
                         startAngle={startAngle}
                         endAngle={endAngle}
                         scale={valueScale}
-                        {...circularAxisInner}
+                        {...circularAxisOuter}
                     />
                 )}
             </Fragment>

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

@@ -0,0 +1,13 @@
+import omit from 'lodash/omit'
+import { settingsMapper, mapFormat } from '../../../lib/settings'
+
+export const mapAxis = (key: string) => (value: any, settings: any) =>
+    settings[key].enable ? omit(value, ['enable']) : null
+
+export default settingsMapper({
+    valueFormat: mapFormat,
+    radialAxisStart: mapAxis('radialAxisStart'),
+    radialAxisEnd: mapAxis('radialAxisEnd'),
+    circularAxisInner: mapAxis('circularAxisInner'),
+    circularAxisOuter: mapAxis('circularAxisOuter'),
+})

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

@@ -5,6 +5,7 @@ import {
     motionProperties,
     groupProperties,
     getLegendsProps,
+    polarAxisProperty,
 } from '../../../lib/componentProperties'
 import { ChartProperty } from '../../../types'
 
@@ -302,6 +303,26 @@ const props: ChartProperty[] = [
         defaultValue: svgDefaultProps.enableCircularGrid,
         controlType: 'switch',
     },
+    polarAxisProperty({
+        key: 'radialAxisStart',
+        flavors: ['svg'],
+        tickComponent: 'RadialAxisTickComponent',
+    }),
+    polarAxisProperty({
+        key: 'radialAxisEnd',
+        flavors: ['svg'],
+        tickComponent: 'RadialAxisTickComponent',
+    }),
+    polarAxisProperty({
+        key: 'circularAxisInner',
+        flavors: ['svg'],
+        tickComponent: 'CircularAxisTickComponent',
+    }),
+    polarAxisProperty({
+        key: 'circularAxisOuter',
+        flavors: ['svg'],
+        tickComponent: 'CircularAxisTickComponent',
+    }),
     {
         key: 'enableLabels',
         group: 'Labels',

website/src/lib/componentProperties.ts

@@ -390,3 +390,82 @@ export const groupProperties = (
 
     return grouped
 }
+
+export const polarAxisProperty = ({
+    key,
+    flavors,
+    tickComponent,
+}: {
+    key: string
+    flavors: Flavor[]
+    tickComponent: string
+}): ChartProperty => {
+    return {
+        key,
+        group: 'Grid & Axes',
+        help: `${key} axis configuration.`,
+        type: 'object',
+        required: false,
+        flavors,
+        controlType: 'object',
+        controlOptions: {
+            props: [
+                {
+                    key: 'enable',
+                    type: 'boolean',
+                    required: false,
+                    help: `enable ${key} axis, it's not an actual prop (demo only).`,
+                    flavors,
+                    excludeFromDoc: true,
+                    controlType: 'switch',
+                },
+                {
+                    key: 'tickSize',
+                    type: 'number',
+                    required: false,
+                    help: `${key} axis tick size.`,
+                    flavors,
+                    controlType: 'range',
+                    controlOptions: {
+                        unit: 'px',
+                        min: 0,
+                        max: 20,
+                    },
+                },
+                {
+                    key: 'tickPadding',
+                    type: 'number',
+                    required: false,
+                    help: `${key} axis tick padding.`,
+                    flavors,
+                    controlType: 'range',
+                    controlOptions: {
+                        unit: 'px',
+                        min: 0,
+                        max: 20,
+                    },
+                },
+                {
+                    key: 'tickRotation',
+                    type: 'number',
+                    required: false,
+                    help: `${key} axis tick rotation.`,
+                    flavors,
+                    controlType: 'angle',
+                    controlOptions: {
+                        start: 90,
+                        min: -90,
+                        max: 90,
+                    },
+                },
+                {
+                    key: 'tickComponent',
+                    type: tickComponent,
+                    required: false,
+                    help: 'Override default tick component.',
+                    flavors,
+                },
+            ],
+        },
+    }
+}

website/src/lib/settings.js → website/src/lib/settings.ts

@@ -1,8 +1,11 @@
 import omit from 'lodash/omit'
 import upperFirst from 'lodash/upperFirst'
 
-export const settingsMapper = (mapping, { exclude = [] } = {}) => (settings, options = {}) => {
-    const overrides = {}
+export const settingsMapper = (mapping: any, { exclude = [] } = {}) => (
+    settings: any,
+    options: any = {}
+) => {
+    const overrides: any = {}
 
     Object.keys(settings).forEach(key => {
         if (mapping[key]) {
@@ -16,7 +19,8 @@ export const settingsMapper = (mapping, { exclude = [] } = {}) => (settings, opt
     }
 }
 
-export const mapAxis = type => (value, settings) =>
+export const mapAxis = (type: string) => (value: any, settings: any) =>
     settings[`axis${upperFirst(type)}`].enable ? omit(value, ['enable']) : null
 
-export const mapFormat = ({ format, enabled }) => (enabled === true ? format : undefined)
+export const mapFormat = ({ format, enabled }: { format: any; enabled: boolean }) =>
+    enabled ? format : undefined

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

@@ -2,15 +2,22 @@ import React from 'react'
 import { ResponsiveRadialBar, RadialBarSvgProps, svgDefaultProps } from '@nivo/radial-bar'
 import { ComponentTemplate } from '../../components/components/ComponentTemplate'
 import meta from '../../data/components/radial-bar/meta.yml'
-import mapper from '../../data/components/radar/mapper'
+import mapper from '../../data/components/radial-bar/mapper'
 import { groups } from '../../data/components/radial-bar/props'
 
 type MappedRadarProps = Omit<RadialBarSvgProps, 'data' | 'width' | 'height'>
-type UnmappedRadarProps = Omit<MappedRadarProps, 'valueFormat'> & {
+type UnmappedRadarProps = Omit<
+    MappedRadarProps,
+    'valueFormat' | 'radialAxisStart' | 'radialAxisEnd' | 'circularAxisInner' | 'circularAxisOuter'
+> & {
     valueFormat: {
         format: string
         enabled: boolean
     }
+    radialAxisStart: { enable: boolean } & RadialBarSvgProps['radialAxisStart']
+    radialAxisEnd: { enable: boolean } & RadialBarSvgProps['radialAxisEnd']
+    circularAxisInner: { enable: boolean } & RadialBarSvgProps['circularAxisInner']
+    circularAxisOuter: { enable: boolean } & RadialBarSvgProps['circularAxisOuter']
 }
 
 const initialProperties: UnmappedRadarProps = {
@@ -39,10 +46,30 @@ const initialProperties: UnmappedRadarProps = {
 
     enableRadialGrid: svgDefaultProps.enableRadialGrid,
     enableCircularGrid: svgDefaultProps.enableCircularGrid,
-    radialAxisStart: svgDefaultProps.radialAxisStart,
-    radialAxisEnd: svgDefaultProps.radialAxisEnd,
-    circularAxisInner: {}, // svgDefaultProps.circularAxisInner,
-    circularAxisOuter: svgDefaultProps.circularAxisOuter,
+    radialAxisStart: {
+        enable: true,
+        tickSize: 5,
+        tickPadding: 5,
+        tickRotation: 0,
+    },
+    radialAxisEnd: {
+        enable: false,
+        tickSize: 5,
+        tickPadding: 5,
+        tickRotation: 0,
+    },
+    circularAxisInner: {
+        enable: false,
+        tickSize: 5,
+        tickPadding: 12,
+        tickRotation: 0,
+    },
+    circularAxisOuter: {
+        enable: true,
+        tickSize: 5,
+        tickPadding: 12,
+        tickRotation: 0,
+    },
 
     enableLabels: svgDefaultProps.enableLabels,
     label: svgDefaultProps.label,

website/src/types.ts

@@ -134,14 +134,6 @@ export interface SwitchableRangeControlAttrs {
 }
 export type SwitchableRangeProperty = BaseChartProperty & SwitchableRangeControlAttrs
 
-export interface ObjectControlAttrs {
-    controlType: 'object'
-    controlOptions: {
-        props: Omit<ChartProperty, 'group'>[]
-    }
-}
-export type ObjectChartProperty = BaseChartProperty & ObjectControlAttrs
-
 export interface AngleControlAttrs {
     controlType: 'angle'
     controlOptions: {
@@ -153,6 +145,19 @@ export interface AngleControlAttrs {
 }
 export type AngleChartProperty = BaseChartProperty & AngleControlAttrs
 
+export interface ObjectControlAttrs {
+    controlType: 'object'
+    controlOptions: {
+        props: (
+            | Omit<BaseChartProperty, 'group'>
+            | Omit<SwitchProperty, 'group'>
+            | Omit<RangeProperty, 'group'>
+            | Omit<AngleChartProperty, 'group'>
+        )[]
+    }
+}
+export type ObjectChartProperty = BaseChartProperty & ObjectControlAttrs
+
 export interface BaseChartProperty {
     key: string
     group: string
@@ -170,6 +175,9 @@ export interface BaseChartProperty {
     flavors: Flavor[]
     // disable the control when the current chart flavor doesn't match
     enableControlForFlavors?: Flavor[]
+    // not used at the moment, indicate that a property is just used
+    // for the demo and not part of the component props.
+    excludeFromDoc?: boolean
 }
 
 export type ChartProperty =