@papernote/ui 1.11.2 → 1.11.4

package/dist/components/FunnelChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FunnelChart.d.ts","sourceRoot":"","sources":["../../src/components/FunnelChart.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAY,EACZ,cAAqB,EACrB,YAAY,EACZ,SAAc,GACf,EAAE,gBAAgB,kDAoGlB"}
+{"version":3,"file":"FunnelChart.d.ts","sourceRoot":"","sources":["../../src/components/FunnelChart.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gCAAgC;IAChC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAY,EACZ,cAAqB,EACrB,YAAY,EACZ,SAAc,GACf,EAAE,gBAAgB,kDAwGlB"}

package/dist/index.esm.js

@@ -12310,16 +12310,18 @@ function FunnelChart({ stages, height = 300, showConversion = true, onStageClick
         return null;
     const maxCount = Math.max(...stages.map(s => s.count), 1);
     const stageHeight = height / stages.length;
-    const svgWidth = 400;
+    const svgWidth = 450;
     const padding = 20;
-    const funnelWidth = svgWidth - padding * 2 - 160; // Leave room for labels
+    const leftLabelSpace = 50; // Space for conversion rate labels on left
+    const rightLabelSpace = 160; // Space for stage name + value labels on right
+    const funnelWidth = svgWidth - padding * 2 - leftLabelSpace - rightLabelSpace;
     return (jsx("div", { className: className, children: jsx("svg", { width: "100%", viewBox: `0 0 ${svgWidth} ${height}`, preserveAspectRatio: "xMidYMid meet", children: stages.map((stage, idx) => {
                 const ratio = stage.count / maxCount;
                 const nextRatio = idx < stages.length - 1 ? stages[idx + 1].count / maxCount : ratio;
                 const y = idx * stageHeight;
                 const topWidth = funnelWidth * ratio;
                 const bottomWidth = funnelWidth * nextRatio;
-                const centerX = padding + funnelWidth / 2;
+                const centerX = padding + leftLabelSpace + funnelWidth / 2;
                 const color = stage.color || defaultColors[idx % defaultColors.length];
                 // Conversion rate
                 const conversionRate = idx > 0 && stages[idx - 1].count > 0
@@ -12333,7 +12335,7 @@ function FunnelChart({ stages, height = 300, showConversion = true, onStageClick
             L ${centerX - bottomWidth / 2} ${y + stageHeight - 2}
             Z
           `;
-                return (jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsx("text", { x: centerX, y: y + stageHeight / 2 + 1, textAnchor: "middle", dominantBaseline: "middle", className: "fill-white text-xs font-bold", style: { fontSize: '12px' }, children: stage.count.toLocaleString() }), jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 6, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: '11px', fontWeight: 500 }, children: stage.name }), stage.value && (jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 8, className: "fill-ink-400", style: { fontSize: '10px' }, children: stage.value })), showConversion && conversionRate !== null && (jsxs("text", { x: centerX - funnelWidth / 2 - 8, y: y + 4, textAnchor: "end", className: "fill-ink-400", style: { fontSize: '10px' }, children: [conversionRate, "%"] }))] }, stage.name));
+                return (jsxs("g", { onClick: () => onStageClick?.(stage.name), style: onStageClick ? { cursor: 'pointer' } : undefined, role: onStageClick ? 'button' : undefined, children: [jsx("path", { d: path, fill: color, opacity: 0.85, className: "transition-opacity hover:opacity-100" }), jsx("text", { x: centerX, y: y + stageHeight / 2 + 1, textAnchor: "middle", dominantBaseline: "middle", className: "fill-white text-xs font-bold", style: { fontSize: '12px' }, children: stage.count.toLocaleString() }), jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 - 6, className: "fill-ink-700 dark:fill-ink-300", style: { fontSize: '11px', fontWeight: 500 }, children: stage.name }), stage.value && (jsx("text", { x: centerX + funnelWidth / 2 + 12, y: y + stageHeight / 2 + 8, className: "fill-ink-400", style: { fontSize: '10px' }, children: stage.value })), showConversion && conversionRate !== null && (jsx("g", { children: jsxs("text", { x: centerX - funnelWidth / 2 - 16, y: y + 4, textAnchor: "end", className: "fill-ink-500", style: { fontSize: '10px', fontWeight: 500 }, children: ["\u2193 ", conversionRate, "%"] }) }))] }, stage.name));
             }) }) }));
 }