@empoweredvote/ev-ui 0.10.0 → 0.10.2

package/dist/index.mjs

@@ -29,6 +29,15 @@ function useTheme() {
 }
 
 // src/RadarChartCore.jsx
+var SPRING_CONFIG = { tension: 300, friction: 30 };
+function AnimatedPolygon({ points, immediate, style }) {
+  const spring = useSpring({
+    to: { points },
+    immediate,
+    config: SPRING_CONFIG
+  });
+  return /* @__PURE__ */ React.createElement(animated.polygon, { points: spring.points, style });
+}
 function RadarChartCore({
   topics,
   data,
@@ -54,32 +63,25 @@ function RadarChartCore({
   const centerY = size / 2;
   const spokes = Object.entries(data);
   const numSpokes = Math.max(spokes.length, 1);
-  const prevCountRef = useRef(numSpokes);
-  const countChanged = numSpokes !== prevCountRef.current;
+  const prevCountRef = useRef(spokes.length);
+  const countChanged = spokes.length !== prevCountRef.current;
   useEffect2(() => {
-    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);
     const max = ((_a = topic == null ? void 0 : topic.stances) == null ? void 0 : _a.length) || 10;
     const pct = Math.min(value / max * 10, 10);
     const angle = 2 * Math.PI * index / numSpokes;
-    const adjusted = value === 0 ? 0 : invertedSpokes[shortTitle] ? 11 - pct : pct;
+    const adjusted = value === 0 ? 0 : invertedSpokes[shortTitle] ? (max + 1) * 10 / max - pct : pct;
     const r = adjusted / 10 * radius;
     const x = centerX + r * Math.sin(angle);
     const y = centerY - r * Math.cos(angle);
     return [x, y];
   });
   const targetPoints = pointsArr.map((p) => p.join(",")).join(" ");
-  const spring = 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) {
@@ -90,7 +92,7 @@ function RadarChartCore({
       const max = ((_b = topic == null ? void 0 : topic.stances) == null ? void 0 : _b.length) || 10;
       const pct = Math.min(value / max * 10, 10);
       const angle = 2 * Math.PI * index / numSpokes;
-      const adjusted = value === 0 ? 0 : invertedSpokes[shortTitle] ? 11 - pct : pct;
+      const adjusted = value === 0 ? 0 : invertedSpokes[shortTitle] ? (max + 1) * 10 / max - pct : pct;
       const r = adjusted / 10 * radius;
       const x = centerX + r * Math.sin(angle);
       const y = centerY - r * Math.cos(angle);
@@ -104,12 +106,7 @@ function RadarChartCore({
   useEffect2(() => {
     hadCompareDataRef.current = hasCompareData;
   }, [hasCompareData]);
-  const compareSpring = 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);
@@ -242,22 +239,12 @@ function RadarChartCore({
         lines.map((ln, idx) => /* @__PURE__ */ React.createElement("tspan", { key: idx, x: labelX, dy: idx === 0 ? "0" : `${lineHeight}` }, ln))
       );
     }),
-    countChanged ? /* @__PURE__ */ React.createElement(
-      "polygon",
+    spokes.length > 0 && /* @__PURE__ */ React.createElement(
+      AnimatedPolygon,
       {
-        key: "user-static",
+        key: `user-${spokes.length}`,
         points: targetPoints,
-        style: {
-          fill: "rgba(124, 107, 158, 0.4)",
-          stroke: "#7C6B9E",
-          strokeWidth: 3
-        }
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      animated.polygon,
-      {
-        key: "user-animated",
-        points: spring.points,
+        immediate: countChanged,
         style: {
           fill: "rgba(124, 107, 158, 0.4)",
           stroke: "#7C6B9E",
@@ -284,22 +271,12 @@ function RadarChartCore({
         }
       );
     }),
-    hasCompareData && comparePoints ? countChanged || compareJustAppeared ? /* @__PURE__ */ React.createElement(
-      "polygon",
+    hasCompareData && comparePoints ? /* @__PURE__ */ React.createElement(
+      AnimatedPolygon,
       {
-        key: "compare-static",
+        key: `compare-${spokes.length}`,
         points: comparePoints,
-        style: {
-          fill: "rgba(90, 154, 110, 0.3)",
-          stroke: "#5A9A6E",
-          strokeWidth: 2
-        }
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      animated.polygon,
-      {
-        key: "compare-animated",
-        points: compareSpring.points,
+        immediate: compareImmediate,
         style: {
           fill: "rgba(90, 154, 110, 0.3)",
           stroke: "#5A9A6E",