@empoweredvote/ev-ui 0.8.1 → 0.8.2

package/dist/index.mjs

@@ -12,7 +12,9 @@ function RadarChartCore({
   onReplaceTopic = () => {
   },
   size = 400,
+  labelFontSize = 13,
   padding = 80,
+  labelOffset = 32,
   tightFit = false,
   activeSpoke = null,
   writeIns = {}
@@ -86,9 +88,25 @@ function RadarChartCore({
     acc[shortTitle] = userAdj > 10 || cmpAdj > 10;
     return acc;
   }, {});
-  const sidePadding = 20;
-  let tightTop = -sidePadding;
-  let tightHeight = size + sidePadding * 2;
+  const labelMeta = spokes.map(([shortTitle], i) => {
+    const angle = 2 * Math.PI * i / numSpokes;
+    const lines = wrapLabel(shortTitle, 12);
+    const longestLineLen = lines.reduce((m, ln) => ln.length > m ? ln.length : m, 0);
+    const estimatedWidth = longestLineLen * labelFontSize * 0.55;
+    const sinA = Math.sin(angle);
+    const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
+    return { estimatedWidth, side };
+  });
+  const leftLabelWidths = labelMeta.filter((m) => m.side === "left").map((m) => m.estimatedWidth);
+  const rightLabelWidths = labelMeta.filter((m) => m.side === "right").map((m) => m.estimatedWidth);
+  const minPadding = 40;
+  const maxPadding = padding * 2;
+  const rawLeft = Math.min(Math.max(leftLabelWidths.length ? Math.max(...leftLabelWidths) + labelOffset : 0, minPadding), maxPadding);
+  const rawRight = Math.min(Math.max(rightLabelWidths.length ? Math.max(...rightLabelWidths) + labelOffset : 0, minPadding), maxPadding);
+  const sidePadding = Math.max(rawLeft, rawRight);
+  const verticalPadding = padding;
+  let tightTop = -verticalPadding;
+  let tightHeight = size + verticalPadding * 2;
   if (tightFit && numSpokes > 0) {
     let yMin = Infinity, yMax = -Infinity;
     for (let i = 0; i < numSpokes; i++) {
@@ -98,8 +116,9 @@ function RadarChartCore({
       if (y < yMin) yMin = y;
       if (y > yMax) yMax = y;
     }
-    tightTop = yMin - sidePadding;
-    tightHeight = yMax + sidePadding - tightTop;
+    const labelMargin = labelOffset + labelFontSize * 2.5;
+    tightTop = yMin - labelMargin;
+    tightHeight = yMax + labelMargin - tightTop;
   }
   const guidePolygons = [];
   for (let level = 1; level <= 5; level++) {
@@ -164,6 +183,39 @@ function RadarChartCore({
         }
       ));
     }),
+    spokes.map(([shortTitle], i) => {
+      const angle = 2 * Math.PI * i / numSpokes;
+      const cosA = Math.cos(angle);
+      const isBottom = cosA < -0.5;
+      const isTop = cosA > 0.5;
+      const lines = wrapLabel(shortTitle, 12);
+      const longestLine = lines.reduce((m, ln) => ln.length > m ? ln.length : m, 0);
+      const lineHeight = labelFontSize * 1.2;
+      const dynamicOffset = lines.length > 1 ? labelOffset + 6 : labelOffset;
+      const offset2 = radius + dynamicOffset;
+      const labelX = centerX + offset2 * Math.sin(angle);
+      let labelY = centerY - offset2 * Math.cos(angle);
+      if (isTop && lines.length > 1) labelY -= (lines.length - 1) * lineHeight;
+      const isActive = shortTitle === activeSpoke;
+      const isUnansweredLabel = !!unansweredSpokes[shortTitle];
+      const fSize = isActive ? labelFontSize * 1.2 : labelFontSize;
+      return /* @__PURE__ */ React.createElement(
+        "text",
+        {
+          key: `label-${shortTitle}`,
+          x: labelX,
+          y: labelY,
+          textAnchor: "middle",
+          dominantBaseline: isBottom ? "hanging" : "auto",
+          onClick: () => onReplaceTopic(shortTitle),
+          fill: isActive ? "#E85D26" : isUnansweredLabel ? "#9ca3af" : "#555",
+          fontWeight: isActive ? "bold" : "normal",
+          style: { cursor: "pointer", userSelect: "none", fontSize: fSize, fontFamily: "sans-serif" }
+        },
+        isUnansweredLabel && /* @__PURE__ */ React.createElement("title", null, "No stance on file for this topic."),
+        lines.map((ln, idx) => /* @__PURE__ */ React.createElement("tspan", { key: idx, x: labelX, dy: idx === 0 ? "0" : `${lineHeight}` }, ln))
+      );
+    }),
     countChanged ? /* @__PURE__ */ React.createElement(
       "polygon",
       {
@@ -296,6 +348,37 @@ function RadarChartCore({
     })()
   );
 }
+function wrapLabel(label, maxChars = 12) {
+  const str = String(label);
+  let rawWords;
+  if (str.includes("/")) {
+    rawWords = str.split("/").reduce((acc, segment, idx, arr) => {
+      const part = idx < arr.length - 1 ? segment + "/" : segment;
+      if (part.trim()) acc.push(part.trim());
+      return acc;
+    }, []);
+  } else {
+    rawWords = str.split(/\s+/);
+  }
+  const lines = [];
+  let line = "";
+  for (const word of rawWords) {
+    if (line === "") {
+      line = word;
+    } else if ((line + " " + word).length <= maxChars) {
+      line += " " + word;
+    } else {
+      lines.push(line);
+      line = word;
+    }
+  }
+  if (line) lines.push(line);
+  if (lines.length > 2) {
+    const overflow = lines.splice(2).join(" ");
+    lines[1] = lines[1] + " " + overflow;
+  }
+  return lines;
+}
 
 // src/Header.jsx
 import React2, { useState as useState3, useRef as useRef2, useEffect as useEffect3 } from "react";