From 2f9ddaf775993d462fa1c654ef9d01bd2479e46b Mon Sep 17 00:00:00 2001
From: Assaf Aviram <assaf.aviram@gmail.com>
Date: Wed, 6 Nov 2024 13:55:22 -0500
Subject: [PATCH 1/2] Update pie/hooks.ts

- pie: support an array of ids in the `activeId` prop
- render all given active slices as active
---
 packages/pie/src/hooks.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/pie/src/hooks.ts b/packages/pie/src/hooks.ts
index 5fdb669cd..27c8254b0 100644
--- a/packages/pie/src/hooks.ts
+++ b/packages/pie/src/hooks.ts
@@ -20,6 +20,9 @@ import {
     CommonPieProps,
 } from './types'
 
+const idIsActive = (id, activeId) =>
+    Array.isArray(activeId) ? activeId.indexOf(id) > -1 : activeId === id
+
 /**
  * Format data so that we get a consistent data structure.
  * It will also add the `formattedValue` and `color` property.
@@ -138,12 +141,10 @@ export const usePieArcs = <RawDatum>({
                         index: arc.index,
                         startAngle: arc.startAngle,
                         endAngle: arc.endAngle,
-                        innerRadius:
-                            activeId === arc.data.id
+                        innerRadius: idIsActive(arc.data.id, activeId)
                                 ? innerRadius - activeInnerRadiusOffset
                                 : innerRadius,
-                        outerRadius:
-                            activeId === arc.data.id
+                        outerRadius: idIsActive(arc.data.id, activeId)
                                 ? outerRadius + activeOuterRadiusOffset
                                 : outerRadius,
                         thickness: outerRadius - innerRadius,

From 8cdda12663ea1c89fe20e0ced07a93a05a6e0a71 Mon Sep 17 00:00:00 2001
From: Assaf Aviram <assaf.aviram@gmail.com>
Date: Wed, 6 Nov 2024 13:57:36 -0500
Subject: [PATCH 2/2] Update Pie.stories.tsx

add story for Pie with controlled, multiple active IDs
---
 storybook/stories/pie/Pie.stories.tsx | 70 +++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/storybook/stories/pie/Pie.stories.tsx b/storybook/stories/pie/Pie.stories.tsx
index ee38ddc9e..43b458e11 100644
--- a/storybook/stories/pie/Pie.stories.tsx
+++ b/storybook/stories/pie/Pie.stories.tsx
@@ -282,6 +282,76 @@ export const ControlledActiveId: Story = {
     render: () => <ControlledPies />,
 }
 
+const ControlledPiesMultipleActiveIds = () => {
+    const [activeId, setActiveId] = useState<string>(commonProperties.data[1].id)
+    const [additionalActiveIds, setAdditionalActiveIds] = useState<string>([])
+    function addActiveId(id) {
+        setAdditionalActiveIds(additionalActiveIds.concat(id))
+    }
+    function removeActiveId(id) {
+        setAdditionalActiveIds(additionalActiveIds.filter(x => x !== id))
+    }
+    function handleCheckboxChange(id, checked) {
+        if (checked) addActiveId(id)
+        if (!checked) removeActiveId(id)
+    }
+    function handlePieClick(id) {
+        if (additionalActiveIds.indexOf(id) > -1) {
+            removeActiveId(id)
+        } else {
+            addActiveId(id)
+        }
+    }
+    const allActiveIds = [activeId, ...additionalActiveIds]
+    return (
+        <div>
+            <div
+                style={{
+                    marginBottom: '10px',
+                }}
+            >
+                <h3>Active IDs:</h3>
+                {commonProperties.data.map(x => (
+                    <div key={x.id}>
+                        <label>
+                            <input
+                                type="checkbox"
+                                checked={additionalActiveIds.indexOf(x.id) > -1}
+                                onChange={evt => handleCheckboxChange(x.id, evt.target.checked)}
+                            />
+                            {x.id}
+                        </label>
+                    </div>
+                ))}
+            </div>
+            <div
+                style={{
+                    width: '800px',
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(2, 1fr)',
+                }}
+            >
+                <Pie
+                    {...controlledPieProps}
+                    activeId={allActiveIds}
+                    onActiveIdChange={setActiveId}
+                    onClick={slice => handlePieClick(slice.id)}
+                />
+                <Pie
+                    {...controlledPieProps}
+                    activeId={allActiveIds}
+                    onActiveIdChange={setActiveId}
+                    onClick={slice => handlePieClick(slice.id)}
+                />
+            </div>
+        </div>
+    )
+}
+
+export const ControlledMultipleActiveIds: Story = {
+    render: () => <ControlledPiesMultipleActiveIds />,
+}
+
 const PieWithCustomLegend = () => {
     const [customLegends, setCustomLegends] = useState<LegendDatum<SampleDatum>[]>([])