@empoweredvote/ev-ui 0.8.0 → 0.8.2

package/dist/index.mjs

@@ -12,9 +12,9 @@ function RadarChartCore({
   onReplaceTopic = () => {
   },
   size = 400,
-  labelFontSize = 18,
+  labelFontSize = 13,
   padding = 80,
-  labelOffset = 20,
+  labelOffset = 32,
   tightFit = false,
   activeSpoke = null,
   writeIns = {}
@@ -82,12 +82,17 @@ function RadarChartCore({
   };
   if (countChanged || compareJustAppeared) compareSpringBase.from = compareSpringBase.to;
   const compareSpring = useSpring(compareSpringBase);
+  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;
+  }, {});
   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 estimatedWidth = longestLineLen * labelFontSize * 0.55;
     const sinA = Math.sin(angle);
     const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
     return { estimatedWidth, side };
@@ -96,24 +101,10 @@ function RadarChartCore({
   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 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;
-  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;
   if (tightFit && numSpokes > 0) {
@@ -125,7 +116,7 @@ function RadarChartCore({
       if (y < yMin) yMin = y;
       if (y > yMax) yMax = y;
     }
-    const labelMargin = labelOffset + labelFontSize * 1.4 + labelFontSize * 1.1;
+    const labelMargin = labelOffset + labelFontSize * 2.5;
     tightTop = yMin - labelMargin;
     tightHeight = yMax + labelMargin - tightTop;
   }
@@ -155,7 +146,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 +166,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,7 +177,7 @@ function RadarChartCore({
           y1: endY,
           x2: extX,
           y2: extY,
-          stroke: "black",
+          stroke: "#aaa",
           strokeDasharray: "4 4",
           opacity: 0.4
         }
@@ -199,17 +190,15 @@ function RadarChartCore({
       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 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 activeFSize = fSize * 1.5;
-      const displayFSize = isActive ? activeFSize : fSize;
+      const fSize = isActive ? labelFontSize * 1.2 : labelFontSize;
       return /* @__PURE__ */ React.createElement(
         "text",
         {
@@ -219,10 +208,9 @@ function RadarChartCore({
           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 }
+          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))
@@ -325,8 +313,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,9 +348,6 @@ function RadarChartCore({
     })()
   );
 }
-function adaptiveFontSize(longestLineLen, baseFSize) {
-  return Math.max(baseFSize, 10);
-}
 function wrapLabel(label, maxChars = 12) {
   const str = String(label);
   let rawWords;