feat(pie): pass datum to pie legend data

plouc · Nov 4, 2020 · 5292831 · 5292831
1 parent ea8332e
commit 5292831
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/packages/pie/src/Pie.js b/packages/pie/src/Pie.js
@@ -22,6 +22,7 @@ import PieRadialLabels from './PieRadialLabels'
 import PieSlicesLabels from './PieSlicesLabels'
 import PieLayout from './PieLayout'
 import PieLegends from './PieLegends'
+import { usePie } from './hooks'
 
 export default function Pie(props) {
     const {
@@ -66,7 +67,7 @@ export default function Pie(props) {
         slicesLabelsTextColor,
 
         // styling
-        theme: _theme,
+        theme: partialTheme,
         defs,
         fill,
 
@@ -82,7 +83,7 @@ export default function Pie(props) {
         role,
     } = props
 
-    const theme = usePartialTheme(_theme)
+    const theme = usePartialTheme(partialTheme)
 
     const { outerWidth, outerHeight, margin, innerWidth, innerHeight } = useDimensions(
         _width,

diff --git a/packages/pie/src/PieLegends.js b/packages/pie/src/PieLegends.js
@@ -17,12 +17,17 @@ export default function PieLegends(props) {
 
     const data = React.useMemo(
         () =>
-            arcs.map(({ color, data: { id, label }, fill }) => ({
-                id: id,
-                label: label || id,
-                color,
-                fill,
-            })),
+            arcs.map(({ color, data, fill }) => {
+                const { id, label } = data
+
+                return {
+                    id: id,
+                    label: label || id,
+                    color,
+                    fill,
+                    data,
+                }
+            }),
         [arcs]
     )
 

diff --git a/website/src/pages/pie/index.js b/website/src/pages/pie/index.js
@@ -113,18 +113,34 @@ const Pie = () => {
             generateData={generateData}
         >
             {(properties, data, theme, logAction) => {
+                const handleArcClick = (slice) => {
+                    logAction({
+                        type: 'click',
+                        label: `[arc] ${slice.label}: ${slice.value}`,
+                        color: slice.color,
+                        data: slice,
+                    })
+                }
+
+                const handleLegendClick = (legendItem) => {
+                    logAction({
+                        type: 'click',
+                        label: `[legend] ${legendItem.label}: ${legendItem.data.value}`,
+                        color: legendItem.color,
+                        data: legendItem,
+                    })
+                }
+
                 return (
                     <ResponsivePie
                         data={data}
                         {...properties}
                         theme={theme}
-                        onClick={slice => {
-                            logAction({
-                                type: 'click',
-                                label: `[arc] ${slice.label}: ${slice.value}`,
-                                data: slice,
-                            })
-                        }}
+                        onClick={handleArcClick}
+                        legends={properties.legends.map(legend => ({
+                            ...legend,
+                            onClick: handleLegendClick
+                        }))}
                     />
                 )
             }}