@empoweredvote/ev-ui 0.9.1 → 0.9.3

package/dist/index.mjs

@@ -44,7 +44,9 @@ function RadarChartCore({
   padding = 80,
   labelOffset = 20,
   tightFit = false,
-  maxLabelLines = 2
+  maxLabelLines = 2,
+  showLabels = true,
+  dotRadius = 5
 }) {
   const { isDark } = useTheme();
   const radius = size / 2 - 40;
@@ -110,6 +112,9 @@ function RadarChartCore({
   });
   const labelMeta = spokes.map(([shortTitle], i) => {
     const angle = 2 * Math.PI * i / numSpokes;
+    const sinA = Math.sin(angle);
+    const side = sinA < -0.1 ? "left" : sinA > 0.1 ? "right" : "center";
+    if (!showLabels) return { estimatedWidth: 0, side };
     const baseFSize = labelFontSize;
     const lines = wrapLabel(shortTitle, 12, maxLabelLines);
     const longestLineLen = lines.reduce(
@@ -118,13 +123,11 @@ function RadarChartCore({
     );
     const fSize = adaptiveFontSize(longestLineLen, baseFSize);
     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 minPadding = showLabels ? 40 : 10;
   const maxPadding = padding * 2;
   const rawLeftPadding = Math.min(
     Math.max(
@@ -155,7 +158,7 @@ function RadarChartCore({
       if (y > yMax) yMax = y;
     }
     const effLabelFSize = adaptiveFontSize(12, labelFontSize);
-    const labelMargin = labelOffset + effLabelFSize * 1.1 * maxLabelLines;
+    const labelMargin = showLabels ? labelOffset + effLabelFSize * 1.1 * maxLabelLines : 8;
     tightTop = yMin - labelMargin;
     tightHeight = yMax + labelMargin - tightTop;
   }
@@ -200,7 +203,7 @@ function RadarChartCore({
         }
       );
     }),
-    spokes.map(([shortTitle], i) => {
+    showLabels && spokes.map(([shortTitle], i) => {
       const angle = 2 * Math.PI * i / numSpokes;
       const anchor = angle > Math.PI ? "end" : angle < Math.PI && angle > 0 ? "start" : "middle";
       const cosA = Math.cos(angle);
@@ -274,7 +277,7 @@ function RadarChartCore({
           key: `user-dot-${i}`,
           cx,
           cy,
-          r: matches ? 8 : 7,
+          r: matches ? dotRadius * (8 / 7) : dotRadius,
           fill: matches ? "#fed12e" : "#7C6B9E",
           stroke: "#FFFFFF",
           strokeWidth: 3
@@ -316,7 +319,7 @@ function RadarChartCore({
           key: `compare-dot-${i}`,
           cx,
           cy,
-          r: matches ? 8 : 7,
+          r: matches ? dotRadius * (8 / 7) : dotRadius,
           fill: matches ? "#fed12e" : "#5A9A6E",
           stroke: "#FFFFFF",
           strokeWidth: 3
@@ -1871,9 +1874,12 @@ function PoliticianCard({
   badge,
   imageFocalPoint,
   footer,
-  imageWidth = "90px"
+  imageWidth = "90px",
+  contentStyle = {}
 }) {
   const isHorizontal = variant === "horizontal";
+  const imageWidthPx = parseInt(imageWidth, 10) || 90;
+  const imageMinHeight = isHorizontal ? Math.ceil(imageWidthPx * 4 / 3) : void 0;
   const handleCardClick = (e) => {
     if (e.target.closest(".ev-compass-button")) return;
     onClick == null ? void 0 : onClick();
@@ -1894,15 +1900,14 @@ function PoliticianCard({
       cursor: onClick ? "pointer" : "default",
       transition: "box-shadow 0.2s ease, transform 0.2s ease",
       position: "relative",
-      minHeight: isHorizontal ? "130px" : void 0,
+      minHeight: imageMinHeight,
       height: "100%",
       ...style
     },
     imageWrapper: {
-      // Horizontal: relative box whose height comes from the card (flex stretch),
-      // so the photo fills the card height instead of dictating it. Absolutely
-      // positioned children below mean a wider photo can't inflate the card.
-      position: isHorizontal ? "relative" : void 0,
+      // Horizontal: fixed width with 3:4 aspect ratio so portrait photos look
+      // consistent regardless of card content height.
+      position: "relative",
       width: isHorizontal ? imageWidth : "100%",
       height: isHorizontal ? "100%" : "auto",
       aspectRatio: isHorizontal ? void 0 : "4/5",
@@ -1935,7 +1940,8 @@ function PoliticianCard({
       padding: isHorizontal ? `${spacing[2]} ${spacing[3]}` : spacing[3],
       minWidth: 0,
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      ...contentStyle
     },
     name: {
       fontFamily: fonts.primary,