From 70ec29dc4ed40a064a4e8ea712d18c4b1d0e30a3 Mon Sep 17 00:00:00 2001
From: Matt Yoder <mjyoder@psc.edu>
Date: Wed, 21 Aug 2024 15:05:47 -0400
Subject: [PATCH] fix(donut-chart): reset the active index when the items
 change

---
 src/donut-chart.css | 1 +
 src/donut-chart.jsx | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/donut-chart.css b/src/donut-chart.css
index d66d779..2db5f06 100644
--- a/src/donut-chart.css
+++ b/src/donut-chart.css
@@ -29,6 +29,7 @@
   display: flex;
   flex-direction: row;
   font-size: 1rem;
+  line-height: 1.2;
   margin-bottom: 5px;
 }
 .donut-chart .symbol {
diff --git a/src/donut-chart.jsx b/src/donut-chart.jsx
index 190d2ca..8a8a6ce 100644
--- a/src/donut-chart.jsx
+++ b/src/donut-chart.jsx
@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 const circleCoords = (pct, radius) =>
   `${Math.cos(2 * Math.PI * pct) * radius} ${
@@ -55,6 +55,10 @@ export default function DonutChart({
   topItemsHeading = null,
 }) {
   const [activeIdx, setActiveIdx] = useState(null);
+
+  // Reset the active index when the items change.
+  useEffect(() => setActiveIdx(null), [items]);
+
   const sortedItems = items.toSorted((a, b) =>
     a.count < b.count || (a.count == b.count && a.name < b.name) ? 1 : -1
   );