feat(pie): add story to showcase the ability to use colors defined in…

… dataset
plouc · Nov 4, 2020 · 92f19c2 · 92f19c2
1 parent ebaf86e
commit 92f19c2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/packages/pie/stories/pie.stories.js b/packages/pie/stories/pie.stories.js
@@ -52,9 +52,14 @@ stories.add('fancy slices', () => (
         innerRadius={0.6}
         padAngle={0.5}
         cornerRadius={5}
-        radialLabelsLinkColor="inherit"
+        radialLabelsLinkColor={{
+            from: 'color',
+        }}
         radialLabelsLinkStrokeWidth={3}
-        radialLabelsTextColor="inherit:darker(1.2)"
+        radialLabelsTextColor={{
+            from: 'color',
+            modifiers: [['darker', 1.2]],
+        }}
     />
 ))
 
@@ -65,13 +70,43 @@ stories.add('custom radial label', () => (
         padAngle={0.5}
         cornerRadius={5}
         radialLabel={d => `${d.id}: ${d.value}`}
-        radialLabelsLinkColor="inherit"
+        radialLabelsLinkColor={{
+            from: 'color',
+        }}
         radialLabelsLinkStrokeWidth={3}
-        radialLabelsTextColor="inherit:darker(1.2)"
-        enableSlicesLabels={false}
+        radialLabelsTextColor={{
+            from: 'color',
+            modifiers: [['darker', 1.2]],
+        }}
+        enableSliceLabels={false}
     />
 ))
 
+stories.add(
+    'using colors from data',
+    () => <Pie {...commonProperties} colors={{ datum: 'data.color' }} />,
+    {
+        info: {
+            text: `
+            It is possible to use colors coming from the provided dataset instead of using
+            a color scheme, to do so, you should pass:
+            
+            \`\`\`
+            colors={{ datum: 'data.color' }}
+            \`\`\`
+            
+            given that each data point you pass has a \`color\` property.
+            
+            It's also possible to pass a function if you want to handle more advanced computation:
+            
+            \`\`\`
+            colors={(datum) => datum.color }}
+            \`\`\`
+        `,
+        },
+    }
+)
+
 stories.add('formatted tooltip values', () => (
     <Pie
         {...commonProperties}

diff --git a/website/src/data/components/pie/meta.yml b/website/src/data/components/pie/meta.yml
@@ -12,7 +12,9 @@ Pie:
     - radial
     - svg
     - isomorphic
-  stories: []
+  stories:
+    - label: Using colors from data
+      link: pie--using-colors-from-data
   description: |
     Generates a pie chart from an array of data, each datum must have an
     id and a value property.

diff --git a/website/src/data/components/pie/props.js b/website/src/data/components/pie/props.js
@@ -46,7 +46,7 @@ const props = [
         `,
         type: 'string | (datum: any): string | number',
         required: false,
-        defaultValue: 'id',
+        defaultValue: defaults.id,
     },
     {
         key: 'value',
@@ -58,7 +58,7 @@ const props = [
         `,
         type: 'string | (datum: any): number',
         required: false,
-        defaultValue: 'value',
+        defaultValue: defaults.id,
     },
     {
         key: 'valueFormat',