@empoweredvote/ev-ui 0.8.1 → 0.8.3

package/dist/index.mjs

@@ -12,10 +12,13 @@ function RadarChartCore({
   onReplaceTopic = () => {
   },
   size = 400,
+  labelFontSize = 13,
   padding = 80,
+  labelOffset = 52,
   tightFit = false,
   activeSpoke = null,
-  writeIns = {}
+  writeIns = {},
+  darkMode = false
 }) {
   var _a;
   const radius = size / 2 - 40;
@@ -86,9 +89,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 +117,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++) {
@@ -110,7 +130,7 @@ function RadarChartCore({
       ring.push(`${centerX + radius * scale * Math.sin(angle)},${centerY - radius * scale * Math.cos(angle)}`);
     }
     guidePolygons.push(
-      /* @__PURE__ */ React.createElement("polygon", { key: level, points: ring.join(" "), fill: "none", stroke: "#ccc" })
+      /* @__PURE__ */ React.createElement("polygon", { key: level, points: ring.join(" "), fill: "none", stroke: darkMode ? "#555" : "#ccc" })
     );
   }
   const getStanceText = (shortTitle, value) => {
@@ -147,7 +167,7 @@ function RadarChartCore({
           y1: centerY,
           x2: endX,
           y2: endY,
-          stroke: isUnanswered ? "#9ca3af" : "#aaa",
+          stroke: isUnanswered ? "#9ca3af" : darkMode ? "#bbb" : "#888",
           strokeDasharray: isUnanswered ? "4 3" : void 0,
           opacity: isUnanswered ? 0.6 : 1
         }
@@ -164,6 +184,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 = 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" : darkMode ? "#D3D7DE" : "#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",
       {
@@ -278,14 +331,14 @@ function RadarChartCore({
           {
             xmlns: "http://www.w3.org/1999/xhtml",
             style: {
-              background: "white",
-              border: "1px solid #d1d5db",
-              borderRadius: 6,
-              padding: "6px 10px",
-              fontSize: 11,
+              background: darkMode ? "#2F3237" : "#ffffff",
+              border: darkMode ? "1px solid #59B0C4" : "1px solid #d1d5db",
+              borderRadius: 8,
+              padding: "7px 11px",
+              fontSize: 12,
               lineHeight: 1.4,
-              color: "#111",
-              boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
+              color: darkMode ? "#EBEDEF" : "#111",
+              boxShadow: darkMode ? "0 2px 12px rgba(0,0,0,0.4)" : "0 2px 8px rgba(0,0,0,0.12)",
               width: tipW + "px",
               wordWrap: "break-word"
             }
@@ -296,6 +349,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";