@empoweredvote/ev-ui 0.10.1 → 0.11.0

package/dist/index.js

@@ -125,6 +125,15 @@ function useTheme() {
 }
 
 // src/RadarChartCore.jsx
+var SPRING_CONFIG = { tension: 300, friction: 30 };
+function AnimatedPolygon({ points, immediate, style }) {
+  const spring = (0, import_web.useSpring)({
+    to: { points },
+    immediate,
+    config: SPRING_CONFIG
+  });
+  return /* @__PURE__ */ import_react2.default.createElement(import_web.animated.polygon, { points: spring.points, style });
+}
 function RadarChartCore({
   topics,
   data,
@@ -150,11 +159,11 @@ function RadarChartCore({
   const centerY = size / 2;
   const spokes = Object.entries(data);
   const numSpokes = Math.max(spokes.length, 1);
-  const prevCountRef = (0, import_react3.useRef)(numSpokes);
-  const countChanged = numSpokes !== prevCountRef.current;
+  const prevCountRef = (0, import_react3.useRef)(spokes.length);
+  const countChanged = spokes.length !== prevCountRef.current;
   (0, import_react3.useEffect)(() => {
-    prevCountRef.current = numSpokes;
-  }, [numSpokes]);
+    prevCountRef.current = spokes.length;
+  }, [spokes.length]);
   const pointsArr = spokes.map(([shortTitle, value], index) => {
     var _a;
     const topic = topics.find((t) => t.short_title === shortTitle);
@@ -168,14 +177,7 @@ function RadarChartCore({
     return [x, y];
   });
   const targetPoints = pointsArr.map((p) => p.join(",")).join(" ");
-  const spring = (0, import_web.useSpring)({
-    to: { points: targetPoints },
-    immediate: countChanged,
-    reset: countChanged,
-    config: { tension: 300, friction: 30 }
-  });
   const hasCompareData = Object.keys(compareData).length > 0;
-  const centerPoints = spokes.map(() => `${centerX},${centerY}`).join(" ");
   let comparePoints = null;
   let compareCoords = null;
   if (hasCompareData) {
@@ -200,12 +202,7 @@ function RadarChartCore({
   (0, import_react3.useEffect)(() => {
     hadCompareDataRef.current = hasCompareData;
   }, [hasCompareData]);
-  const compareSpring = (0, import_web.useSpring)({
-    to: { points: comparePoints || centerPoints || `${centerX},${centerY}` },
-    immediate: countChanged || compareJustAppeared,
-    reset: countChanged || compareJustAppeared,
-    config: { tension: 300, friction: 30 }
-  });
+  const compareImmediate = countChanged || compareJustAppeared;
   const labelMeta = spokes.map(([shortTitle], i) => {
     const angle = 2 * Math.PI * i / numSpokes;
     const sinA = Math.sin(angle);
@@ -338,22 +335,12 @@ function RadarChartCore({
         lines.map((ln, idx) => /* @__PURE__ */ import_react2.default.createElement("tspan", { key: idx, x: labelX, dy: idx === 0 ? "0" : `${lineHeight}` }, ln))
       );
     }),
-    countChanged ? /* @__PURE__ */ import_react2.default.createElement(
-      "polygon",
+    spokes.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
+      AnimatedPolygon,
       {
-        key: "user-static",
+        key: `user-${spokes.length}`,
         points: targetPoints,
-        style: {
-          fill: "rgba(124, 107, 158, 0.4)",
-          stroke: "#7C6B9E",
-          strokeWidth: 3
-        }
-      }
-    ) : /* @__PURE__ */ import_react2.default.createElement(
-      import_web.animated.polygon,
-      {
-        key: "user-animated",
-        points: spring.points,
+        immediate: countChanged,
         style: {
           fill: "rgba(124, 107, 158, 0.4)",
           stroke: "#7C6B9E",
@@ -380,22 +367,12 @@ function RadarChartCore({
         }
       );
     }),
-    hasCompareData && comparePoints ? countChanged || compareJustAppeared ? /* @__PURE__ */ import_react2.default.createElement(
-      "polygon",
+    hasCompareData && comparePoints ? /* @__PURE__ */ import_react2.default.createElement(
+      AnimatedPolygon,
       {
-        key: "compare-static",
+        key: `compare-${spokes.length}`,
         points: comparePoints,
-        style: {
-          fill: "rgba(90, 154, 110, 0.3)",
-          stroke: "#5A9A6E",
-          strokeWidth: 2
-        }
-      }
-    ) : /* @__PURE__ */ import_react2.default.createElement(
-      import_web.animated.polygon,
-      {
-        key: "compare-animated",
-        points: compareSpring.points,
+        immediate: compareImmediate,
         style: {
           fill: "rgba(90, 154, 110, 0.3)",
           stroke: "#5A9A6E",