feat(pie): add story to showcase custom arc label component

plouc · Dec 18, 2020 · 37cb3d1 · 37cb3d1
1 parent 4ca47ac
commit 37cb3d1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/packages/pie/stories/pie.stories.tsx b/packages/pie/stories/pie.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, boolean } from '@storybook/addon-knobs'
+import { animated } from 'react-spring'
 import { generateProgrammingLanguageStats } from '@nivo/generators'
 import { Pie } from '../src'
 
@@ -192,3 +193,37 @@ stories.add('enter/leave (check console)', () => (
         }}
     />
 ))
+
+stories.add('custom arc label component', () => (
+    <Pie
+        {...commonProperties}
+        innerRadius={0.2}
+        cornerRadius={3}
+        arcLabelsSkipAngle={20}
+        arcLabelsRadiusOffset={0.55}
+        arcLabelsTextColor={{
+            from: 'color',
+            modifiers: [['darker', 0.6]],
+        }}
+        arcLinkLabelsOffset={2}
+        arcLinkLabelsColor={{ from: 'color' }}
+        arcLinkLabelsThickness={3}
+        arcLabelComponent={({ datum, label, style }) => (
+            <animated.g transform={style.transform} style={{ pointerEvents: 'none' }}>
+                <circle fill={style.textColor} cy={6} r={15} />
+                <circle fill="#ffffff" stroke={datum.color} strokeWidth={2} r={16} />
+                <text
+                    textAnchor="middle"
+                    dominantBaseline="central"
+                    fill={style.textColor}
+                    style={{
+                        fontSize: 10,
+                        fontWeight: 800,
+                    }}
+                >
+                    {label}
+                </text>
+            </animated.g>
+        )}
+    />
+))
diff --git a/website/src/data/components/pie/meta.yml b/website/src/data/components/pie/meta.yml
@@ -17,6 +17,8 @@ Pie:
       link: pie--using-colors-from-data
     - label: Adding a metric in the center using a custom layer
       link: pie--adding-a-metric-in-the-center-using-a-custom-layer
+    - label: Custom arc label component
+      link: pie--custom-arc-label-component
   description: |
     Generates a pie chart from an array of data, each datum must have an
     id and a value property.