feat(pie): add story to showcase custom layers

packages/pie/stories/pie.stories.js

@@ -107,6 +107,38 @@ stories.add(
     }
 )
 
+const CenteredMetric = ({ dataWithArc, centerX, centerY }) => {
+    let total = 0
+    dataWithArc.forEach(datum => {
+        total += datum.value
+    })
+
+    return (
+        <text
+            x={centerX}
+            y={centerY}
+            textAnchor="middle"
+            dominantBaseline="central"
+            style={{
+                fontSize: '52px',
+                fontWeight: '600',
+            }}
+        >
+            {total}
+        </text>
+    )
+}
+
+stories.add('adding a metric in the center using a custom layer', () => (
+    <Pie
+        {...commonProperties}
+        innerRadius={0.8}
+        enableSliceLabels={false}
+        radialLabel={d => `${d.id} (${d.formattedValue})`}
+        layers={['slices', 'sliceLabels', 'radialLabels', 'legends', CenteredMetric]}
+    />
+))
+
 stories.add('formatted tooltip values', () => (
     <Pie
         {...commonProperties}

website/src/data/components/pie/meta.yml

@@ -15,6 +15,8 @@ Pie:
   stories:
     - label: Using colors from data
       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
   description: |
     Generates a pie chart from an array of data, each datum must have an
     id and a value property.