@empoweredvote/ev-ui 0.8.0 → 0.8.1

package/dist/index.mjs

@@ -12,9 +12,7 @@ function RadarChartCore({
   onReplaceTopic = () => {
   },
   size = 400,
-  labelFontSize = 18,
   padding = 80,
-  labelOffset = 20,
   tightFit = false,
   activeSpoke = null,
   writeIns = {}
@@ -82,40 +80,15 @@ function RadarChartCore({
   };
   if (countChanged || compareJustAppeared) compareSpringBase.from = compareSpringBase.to;
   const compareSpring = useSpring(compareSpringBase);
-  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 fSize = adaptiveFontSize(longestLineLen, labelFontSize);
-    const estimatedWidth = longestLineLen * fSize * 0.6;
-    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 rawLeftPadding = Math.min(
-    Math.max(leftLabelWidths.length ? Math.max(...leftLabelWidths) + labelOffset : 0, minPadding),
-    maxPadding
-  );
-  const rawRightPadding = Math.min(
-    Math.max(rightLabelWidths.length ? Math.max(...rightLabelWidths) + labelOffset : 0, minPadding),
-    maxPadding
-  );
-  const symmetricPadding = Math.max(rawLeftPadding, rawRightPadding);
-  const leftPadding = symmetricPadding;
-  const rightPadding = symmetricPadding;
-  const verticalPadding = padding;
   const spokeExtension = spokes.reduce((acc, [shortTitle]) => {
     const userAdj = calcAdjusted(data[shortTitle], shortTitle);
     const cmpAdj = hasCompareData && compareData[shortTitle] ? calcAdjusted(compareData[shortTitle], shortTitle) : 0;
     acc[shortTitle] = userAdj > 10 || cmpAdj > 10;
     return acc;
   }, {});
-  let tightTop = -verticalPadding;
-  let tightHeight = size + verticalPadding * 2;
+  const sidePadding = 20;
+  let tightTop = -sidePadding;
+  let tightHeight = size + sidePadding * 2;
   if (tightFit && numSpokes > 0) {
     let yMin = Infinity, yMax = -Infinity;
     for (let i = 0; i < numSpokes; i++) {
@@ -125,9 +98,8 @@ function RadarChartCore({
       if (y < yMin) yMin = y;
       if (y > yMax) yMax = y;
     }
-    const labelMargin = labelOffset + labelFontSize * 1.4 + labelFontSize * 1.1;
-    tightTop = yMin - labelMargin;
-    tightHeight = yMax + labelMargin - tightTop;
+    tightTop = yMin - sidePadding;
+    tightHeight = yMax + sidePadding - tightTop;
   }
   const guidePolygons = [];
   for (let level = 1; level <= 5; level++) {
@@ -155,7 +127,7 @@ function RadarChartCore({
     "svg",
     {
       className: "w-full h-auto max-h-full",
-      viewBox: `-${leftPadding} ${tightTop} ${size + leftPadding + rightPadding} ${tightHeight}`,
+      viewBox: `-${sidePadding} ${tightTop} ${size + sidePadding * 2} ${tightHeight}`,
       preserveAspectRatio: "xMidYMid meet",
       onMouseLeave: () => setTooltip(null)
     },
@@ -175,7 +147,7 @@ function RadarChartCore({
           y1: centerY,
           x2: endX,
           y2: endY,
-          stroke: isUnanswered ? "#9ca3af" : "black",
+          stroke: isUnanswered ? "#9ca3af" : "#aaa",
           strokeDasharray: isUnanswered ? "4 3" : void 0,
           opacity: isUnanswered ? 0.6 : 1
         }
@@ -186,48 +158,12 @@ function RadarChartCore({
           y1: endY,
           x2: extX,
           y2: extY,
-          stroke: "black",
+          stroke: "#aaa",
           strokeDasharray: "4 4",
           opacity: 0.4
         }
       ));
     }),
-    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 fSize = adaptiveFontSize(longestLine, labelFontSize);
-      const lineHeight = fSize * 1.1;
-      const dynamicLabelOffset = lines.length > 1 ? labelOffset + 8 : labelOffset;
-      const offset2 = radius + dynamicLabelOffset;
-      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 activeFSize = fSize * 1.5;
-      const displayFSize = isActive ? activeFSize : fSize;
-      return /* @__PURE__ */ React.createElement(
-        "text",
-        {
-          key: `label-${shortTitle}`,
-          x: labelX,
-          y: labelY,
-          textAnchor: "middle",
-          dominantBaseline: isBottom ? "hanging" : "auto",
-          onClick: () => onReplaceTopic(shortTitle),
-          className: "text-xl font-medium mb-1 md:text-base md:font-normal",
-          fill: isActive ? "#E85D26" : isUnansweredLabel ? "#9ca3af" : void 0,
-          fontWeight: isActive ? "bold" : void 0,
-          style: { cursor: "pointer", userSelect: "none", fontSize: displayFSize }
-        },
-        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",
       {
@@ -325,8 +261,8 @@ function RadarChartCore({
     tooltip && (() => {
       const tipW = 190;
       const tipH = 70;
-      const svgW = size + leftPadding + rightPadding;
-      const tx = tooltip.x + leftPadding + 12 > svgW - tipW ? tooltip.x - tipW - 12 : tooltip.x + 12;
+      const svgW = size + sidePadding * 2;
+      const tx = tooltip.x + sidePadding + 12 > svgW - tipW ? tooltip.x - tipW - 12 : tooltip.x + 12;
       const ty = tooltip.y - 10;
       return /* @__PURE__ */ React.createElement(
         "foreignObject",
@@ -360,40 +296,6 @@ function RadarChartCore({
     })()
   );
 }
-function adaptiveFontSize(longestLineLen, baseFSize) {
-  return Math.max(baseFSize, 10);
-}
-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";