feat(radial-bar): generate icon and screenshots

conf/base.yaml

@@ -108,6 +108,10 @@ capture:
       #   selector: '#chart'
       #   output: ./packages/radar/doc/radar.png
 
+      # - path: /radial-bar
+      #   selector: '#chart'
+      #   output: ./packages/radial-bar/doc/radial-bar.png
+
       # - path: /sankey
       #   selector: '#chart'
       #   output: ./packages/sankey/doc/sankey.png
@@ -517,15 +521,28 @@ capture:
       #   selector: '#marimekko-darkColored'
       #   output: ./website/src/assets/icons/marimekko-dark-colored.png
 
+      # - path: /internal/icons/
+      #   selector: '#time-range-lightNeutral'
+      #   output: ./website/src/assets/icons/time-range-light-neutral.png
+      # - path: /internal/icons/
+      #   selector: '#time-range-lightColored'
+      #   output: ./website/src/assets/icons/time-range-light-colored.png
+      # - path: /internal/icons/
+      #   selector: '#time-range-darkNeutral'
+      #   output: ./website/src/assets/icons/time-range-dark-neutral.png
+      # - path: /internal/icons/
+      #   selector: '#time-range-darkColored'
+      #   output: ./website/src/assets/icons/time-range-dark-colored.png
+
       - path: /internal/icons/
-        selector: '#time-range-lightNeutral'
-        output: ./website/src/assets/icons/time-range-light-neutral.png
+        selector: '#radial-bar-lightNeutral'
+        output: ./website/src/assets/icons/radial-bar-light-neutral.png
       - path: /internal/icons/
-        selector: '#time-range-lightColored'
-        output: ./website/src/assets/icons/time-range-light-colored.png
+        selector: '#radial-bar-lightColored'
+        output: ./website/src/assets/icons/radial-bar-light-colored.png
       - path: /internal/icons/
-        selector: '#time-range-darkNeutral'
-        output: ./website/src/assets/icons/time-range-dark-neutral.png
+        selector: '#radial-bar-darkNeutral'
+        output: ./website/src/assets/icons/radial-bar-dark-neutral.png
       - path: /internal/icons/
-        selector: '#time-range-darkColored'
-        output: ./website/src/assets/icons/time-range-dark-colored.png
+        selector: '#radial-bar-darkColored'
+        output: ./website/src/assets/icons/radial-bar-dark-colored.png

packages/radial-bar/stories/radialBar.stories.tsx

@@ -235,6 +235,16 @@ const demoPhases: {
             circularAxisInner: {},
         },
     },
+    {
+        description: 'Labels',
+        props: {
+            ...commonProperties,
+            startAngle: 90,
+            endAngle: 360,
+            innerRadius: 0.3,
+            enableLabels: true,
+        },
+    },
 ]
 
 const demoTheme: Theme = {
@@ -256,6 +266,12 @@ const demoTheme: Theme = {
             },
         },
     },
+    labels: {
+        text: {
+            fontWeight: 800,
+            fill: '#000000',
+        },
+    },
     grid: {
         line: {
             stroke: '#666666',
@@ -273,7 +289,7 @@ const RadialBarDemo = () => {
                 if (currentPhaseIndex < demoPhases.length - 1) return currentPhaseIndex + 1
                 return 0
             })
-        }, 1000)
+        }, 1400)
         return () => clearTimeout(timer)
     }, [phaseIndex, setPhaseIndex])
 
@@ -284,12 +300,18 @@ const RadialBarDemo = () => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 background: '#222',
+                width: '400px',
             }}
         >
             <div style={{ padding: '24px 0', color: '#eeeeee', fontSize: '16px' }}>
                 {phase.description}
             </div>
-            <RadialBar {...phase.props} theme={demoTheme} motionConfig="slow" />
+            <RadialBar
+                {...phase.props}
+                tracksColor="rgba(0, 0, 0, .5)"
+                theme={demoTheme}
+                motionConfig="slow"
+            />
         </div>
     )
 }

website/src/components/icons/Icons.js

@@ -18,6 +18,7 @@ import MarimekkoIcon from './MarimekkoIcon'
 import NetworkIcon from './NetworkIcon'
 import PieIcon from './PieIcon'
 import RadarIcon from './RadarIcon'
+import { RadialBarIcon } from './RadialBarIcon'
 import SankeyIcon from './SankeyIcon'
 import ScatterPlotIcon from './ScatterPlotIcon'
 import StreamIcon from './StreamIcon'
@@ -61,6 +62,7 @@ const Icons = () => (
         <ColorsDemo type="lightColored" />
         <ColorsDemo type="darkNeutral" />
         <ColorsDemo type="darkColored" />
+        <RadialBarIcon />
         <MarimekkoIcon />
         <AreaBumpIcon />
         <BumpIcon />

website/src/components/icons/RadialBarIcon.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { RadialBar, RadialBarSvgProps } from '@nivo/radial-bar'
+import imgLightNeutralImg from '../../assets/icons/radial-bar-light-neutral.png'
+import imgLightColoredImg from '../../assets/icons/radial-bar-light-colored.png'
+import imgDarkNeutralImg from '../../assets/icons/radial-bar-dark-neutral.png'
+import imgDarkColoredImg from '../../assets/icons/radial-bar-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+import { IconType } from './types'
+
+const data: RadialBarSvgProps['data'] = [
+    {
+        id: 'A',
+        data: [{ x: 'A', y: 10 }],
+    },
+    {
+        id: 'B',
+        data: [{ x: 'A', y: 20 }],
+    },
+    {
+        id: 'C',
+        data: [{ x: 'A', y: 30 }],
+    },
+]
+
+const RadialBarIconItem = ({ type }: { type: IconType }) => (
+    <Icon id={`radial-bar-${type}`} type={type}>
+        <RadialBar
+            data={data}
+            height={ICON_SIZE}
+            width={ICON_SIZE}
+            innerRadius={.25}
+            padding={.3}
+            colors={colors[type].colors[3]}
+            tracksColor={colors[type].colors[0]}
+            enableRadialGrid={false}
+            enableCircularGrid={false}
+            radialAxisStart={null}
+            circularAxisOuter={null}
+            animate={false}
+        />
+    </Icon>
+)
+
+export const RadialBarIcon = () => (
+    <>
+        <RadialBarIconItem type="lightNeutral" />
+        <IconImg url={imgLightNeutralImg} />
+        <RadialBarIconItem type="lightColored" />
+        <IconImg url={imgLightColoredImg} />
+        <RadialBarIconItem type="darkNeutral" />
+        <IconImg url={imgDarkNeutralImg} />
+        <RadialBarIconItem type="darkColored" />
+        <IconImg url={imgDarkColoredImg} />
+    </>
+)

website/src/components/icons/styled.js → website/src/components/icons/styled.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import theme from '../../theming/theme'
+import { IconType } from './types'
 
 export const ICON_SIZE = 104
 
@@ -39,7 +40,9 @@ export const colors = {
     },
 }
 
-export const Icon = styled.div`
+export const Icon = styled.div<{
+    type?: IconType
+}>`
     width: ${ICON_SIZE + 20}px;
     height: ${ICON_SIZE + 20}px;
     padding: 10px;
@@ -64,7 +67,7 @@ export const Colors = styled.div`
     padding: 10px;
 `
 
-export const IconImg = ({ url }) => (
+export const IconImg = ({ url }: { url: string }) => (
     <Icon
         style={{
             backgroundImage: `url(${url})`,

website/src/components/icons/types.ts

@@ -0,0 +1 @@
+export type IconType = 'lightNeutral' | 'lightColored' | 'darkNeutral' | 'darkColored'

website/src/data/nav.js

@@ -133,7 +133,7 @@ export const components = [
     {
         label: 'RadialBar',
         path: '/radial-bar/',
-        icon: 'radar',
+        icon: 'radial-bar',
         tags: radialBar.RadialBar.tags,
     },
     {

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

@@ -136,7 +136,7 @@ const RadialBar = () => (
     <ComponentTemplate<UnmappedRadarProps, MappedRadarProps, any>
         name="RadialBar"
         meta={meta.RadialBar}
-        icon="radar"
+        icon="radial-bar"
         flavors={meta.flavors}
         currentFlavor="svg"
         properties={groups}