feat(pie): document new properties for controlling the activeId

plouc · Nov 19, 2023 · 44d7b3f · 44d7b3f
1 parent c87658e
commit 44d7b3f
Showing 1 changed file with 50 additions and 0 deletions.
diff --git a/website/src/data/components/pie/props.ts b/website/src/data/components/pie/props.ts
@@ -508,6 +508,56 @@ const props: ChartProperty[] = [
             max: 50,
         },
     },
+    {
+        key: 'activeId',
+        flavors: ['svg'],
+        help: `Programmatically control the \`activeId\`.`,
+        description: `
+            This property should be used with \`onActiveIdChange\`,
+            allowing you to fully control which arc should be highlighted.
+            
+            You might want to use this in case:
+            
+            - You want to synchronize the \`activeId\` with other UI elements defined
+              outside of nivo, or other nivo charts.
+            - You're creating some kind of *story-telling* app where you want to highlight
+              certain arcs based on external input.
+        `,
+        type: 'string | number | null',
+        required: false,
+        group: 'Interactivity',
+    },
+    {
+        key: 'onActiveIdChange',
+        flavors: ['svg'],
+        help: `Programmatically control the \`activeId\`.`,
+        description: `
+            This property should be used with \`activeId\`,
+            allowing you to fully control which arc should be highlighted.
+            
+            You might want to use this in case:
+            
+            - You want to synchronize the \`activeId\` with other UI elements defined
+              outside of nivo, or other nivo charts.
+            - You're creating some kind of *story-telling* app where you want to highlight
+              certain arcs based on external input.
+        `,
+        type: 'string | number | null',
+        required: false,
+        group: 'Interactivity',
+    },
+    {
+        key: 'defaultActiveId',
+        flavors: ['svg'],
+        help: `Default \`activeId\`.`,
+        description: `
+            You can use this property in case you want to define a default \`activeId\`,
+            but still don't want to control it by yourself (using \`activeId\` & \`onActiveIdChange\`).
+        `,
+        type: 'string | number | null',
+        required: false,
+        group: 'Interactivity',
+    },
     {
         key: 'onMouseEnter',
         flavors: ['svg'],