updated website with onClick props : onClick added as property and cl…

…icking on the chart display an action log
plouc · Jul 4, 2024 · 0c3767a · 0c3767a
1 parent bf04ea2
commit 0c3767a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/website/src/data/components/radar/props.ts b/website/src/data/components/radar/props.ts
@@ -387,6 +387,14 @@ const props: ChartProperty[] = [
         help: 'Override default slice tooltip.',
         flavors: ['svg'],
     },
+    {
+        key: 'onClick',
+        flavors: ['svg', 'canvas'],
+        group: 'Interactivity',
+        help: 'onClick handler, it receives target node data and mouse event.',
+        type: '(node, event) => void',
+        required: false,
+    },
     ...motionProperties(['svg'], svgDefaultProps),
 ]
 

diff --git a/website/src/pages/radar/index.tsx b/website/src/pages/radar/index.tsx
@@ -114,13 +114,23 @@ const Radar = () => {
             getTabData={data => data.data}
             image={image}
         >
-            {(properties, data, theme) => {
+            {(properties, data, theme, logAction) => {
                 return (
                     <ResponsiveRadar
                         data={data.data}
                         keys={data.keys}
                         {...properties}
                         theme={theme}
+                        onClick={slice =>
+                            logAction({
+                                type: 'click',
+                                label: `[slice] {${Object.entries(slice)
+                                    .map(([key, value]) => `${key}: ${value}`)
+                                    .join(', ')}}`,
+                                color: slice.color,
+                                data: slice,
+                            })
+                        }
                     />
                 )
             }}