From b6bbf13421defe03e312e36fcb5e2f2f59015c5a Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sun, 19 Nov 2023 12:06:21 +0900
Subject: [PATCH] feat(pie): document new properties for controlling the
 activeId

---
 website/src/data/components/pie/meta.yml |  2 +
 website/src/data/components/pie/props.ts | 54 ++++++++++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/website/src/data/components/pie/meta.yml b/website/src/data/components/pie/meta.yml
index c04f5f0b1..b7d68a9d6 100644
--- a/website/src/data/components/pie/meta.yml
+++ b/website/src/data/components/pie/meta.yml
@@ -17,6 +17,8 @@ Pie:
       link: pie--adding-a-metric-in-the-center-using-a-custom-layer
     - label: Custom arc label component
       link: pie--custom-arc-label-component
+    - label: Sync activeId between two pies
+      link: pie--controlled-active-id
   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.ts b/website/src/data/components/pie/props.ts
index 909e4f0b7..23b6cd4ae 100644
--- a/website/src/data/components/pie/props.ts
+++ b/website/src/data/components/pie/props.ts
@@ -508,6 +508,60 @@ 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.
+            - You want to change the default behavior and highlight arcs depending on clicks
+              rather than \`mouseEnter\`.
+        `,
+        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.
+            - You want to change the default behavior and highlight arcs depending on clicks
+              rather than \`mouseEnter\`.
+        `,
+        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'],