fix(donut-chart): reset the active index when the items change

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 {

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
   );