@juspay/svelte-ui-components 2.90.0 → 2.90.1

package/dist/PieChart/PieChart.svelte

@@ -10,7 +10,11 @@
   import { computePieLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
+  import { measureText, readCssVarPx } from '../_chart/measure';
+  import { truncateToWidth, placedLabelRect, dropOverlapping } from '../_chart/labels';
+  import type { LabelRect } from '../_chart/labels';
   import type { LegendItem } from '../_chart/types';
+  import { SvelteMap } from 'svelte/reactivity';
 
   // ── Props ──────────────────────────────────────────────────────
 
@@ -153,6 +157,76 @@
     data.map((d, i) => ({ label: d.label, color: d.color ?? getColor(i) }))
   );
 
+  // ── Label engine ───────────────────────────────────────────────
+  // A crowded pie (many slices, long labels) used to render every label
+  // unconditionally at its mid-angle: stacked unreadable text that also ran
+  // past the chart box. Labels are now measured, truncated to the horizontal
+  // room the chart actually has, gated on the slice's arc length (inside
+  // position), and de-collided with larger slices winning. Dropped or
+  // truncated text stays available on the tooltip and aria-label.
+  let visibleSliceLabels = $derived.by(() => {
+    const visible = new SvelteMap<number, string>();
+    if ((!showLabels && !showValues) || chartWidth <= 0) {
+      return visible;
+    }
+    const font = {
+      size: containerEl ? readCssVarPx(containerEl, '--piechart-label-font-size', 12) : 12
+    };
+    const lineHeight = measureText('Ag', font).height;
+
+    type LabelCandidate = { index: number; value: number; text: string; rect: LabelRect };
+    const candidates: LabelCandidate[] = [];
+    for (const slice of slices) {
+      const parts: string[] = [];
+      if (showLabels) {
+        parts.push(slice.label);
+      }
+      if (showValues) {
+        parts.push(pctFormat(slice.value));
+      }
+      const raw = parts.join(' ').trim();
+      if (raw.length === 0) {
+        continue;
+      }
+      const absX = cx + slice.labelX;
+      const absY = cy + slice.labelY;
+      // text-anchor is middle, so the budget is twice the room to the nearer edge.
+      const budget = Math.max(0, Math.min(absX, chartWidth - absX) * 2 - 8);
+      const labelRadius = labelPosition === 'outside' ? outerR : (innerR + outerR) / 2;
+      const arcLength = (slice.endAngle - slice.startAngle) * labelRadius;
+      // An inside label sits ON its wedge — hide it when the wedge is thinner
+      // than one text line (outside labels rely on the collision pass instead).
+      if (labelPosition === 'inside' && arcLength < lineHeight) {
+        continue;
+      }
+      const text = truncateToWidth(raw, budget, font);
+      if (text === '') {
+        continue;
+      }
+      const size = measureText(text, font);
+      candidates.push({
+        index: slice.index,
+        value: slice.value,
+        text,
+        rect: placedLabelRect(
+          { x: absX, y: absY, textAnchor: 'middle', dominantBaseline: 'middle' },
+          size
+        )
+      });
+    }
+
+    // Feed the greedy first-come collision pass in value order so the larger
+    // slice keeps its label whenever two collide.
+    const ordered = [...candidates].sort((a, b) => b.value - a.value);
+    const keptFlags = dropOverlapping(ordered.map((candidate) => candidate.rect));
+    ordered.forEach((candidate, orderedIndex) => {
+      if (keptFlags[orderedIndex]) {
+        visible.set(candidate.index, candidate.text);
+      }
+    });
+    return visible;
+  });
+
   let centerBoxSize = $derived(innerR > 0 ? Math.max(0, innerR * 1.3) : 0);
 
   // The foreignObject for the center snippet is positioned relative to the <g>
@@ -243,19 +317,15 @@
             onmouseleave={handleLeave}
             onclick={() => onsliceclick?.({ index: slice.index, slice: data[slice.index] })}
           />
-          {#if showLabels || showValues}
+          {#if visibleSliceLabels.has(slice.index)}
             <text
               class="slice-label"
               class:label-outside={labelPosition === 'outside'}
               x={slice.labelX}
               y={slice.labelY}
               text-anchor="middle"
-              dominant-baseline="middle"
+              dominant-baseline="middle">{visibleSliceLabels.get(slice.index)}</text
             >
-              {#if showLabels}{slice.label}{/if}
-              {#if showValues}
-                {pctFormat(slice.value)}{/if}
-            </text>
           {/if}
         {/each}
 

package/dist/SankeyChart/SankeyChart.svelte

@@ -5,6 +5,8 @@
   import { computeSankeyLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
+  import { measureText, readCssVarPx } from '../_chart/measure';
+  import { truncateToWidth } from '../_chart/labels';
   import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
@@ -52,54 +54,20 @@
   let format = $derived(valueFormat ?? formatNumber);
   let isEmpty = $derived(nodes.length === 0);
   const MARGIN = 40;
-  const LABEL_CHAR_PX = 7.2; // ≈ 0.6em at the 12px default label size
   // A 12px label's rendered line box measures ~16px (≈1.33em) across common
   // font stacks; two label centres closer than this overlap visibly.
   const LABEL_LINE_PX = 16;
 
-  // Per-character width estimate at the 12px default label size. A flat
-  // 7.2px/char average underestimates uppercase-heavy labels ("OTP SKIPPED
-  // (1,234)" is ~8.2px/char), so "truncated" labels still overflowed their
-  // budget and slid under the next column's node bar.
-  const estimateCharWidth = (ch: string): number => {
-    if (/[mwMW@]/.test(ch)) {
-      return 10.6;
-    }
-    if (/[A-Z0-9_#%&]/.test(ch)) {
-      return 8.2;
-    }
-    if (/[iljtfr.,:;'’()[\]!|]/.test(ch)) {
-      return 3.6;
-    }
-    if (ch === ' ') {
-      return 3.8;
-    }
-    return 6.6;
-  };
-
-  const estimateTextWidth = (text: string): number => {
-    let width = 0;
-    for (const ch of text) {
-      width += estimateCharWidth(ch);
-    }
-    return width;
-  };
-
-  // Trim `text` (appending an ellipsis) until its estimated width fits
-  // `available` px. Returns '' when even 3 chars + ellipsis cannot fit —
-  // callers hide the label and rely on the <title> tooltip instead.
-  const fitTextToWidth = (text: string, available: number): string => {
-    if (estimateTextWidth(text) <= available) {
-      return text;
-    }
-    for (let keep = text.length - 1; keep >= 3; keep--) {
-      const candidate = text.slice(0, keep) + '…';
-      if (estimateTextWidth(candidate) <= available) {
-        return candidate;
-      }
-    }
-    return '';
-  };
+  // Real text measurement via the shared canvas-backed helper (exact on the
+  // client, 0.6em/char heuristic under SSR/tests). Character estimates used
+  // to both over-reserve the right label gutter (dead canvas) and under-budget
+  // uppercase-heavy labels (text sliding under the next column's bars).
+  let labelFont = $derived({
+    size: containerEl ? readCssVarPx(containerEl, '--sankey-label-font-size', 12) : 12
+  });
+  let colLabelFont = $derived({
+    size: containerEl ? readCssVarPx(containerEl, '--sankey-col-label-font-size', 11) : 11
+  });
 
   // Final-column labels render to the RIGHT of their node; the bare 40px margin is
   // nowhere near enough for real funnel labels ("PARTIALLY_FAILED (1,234)"), so they
@@ -118,8 +86,8 @@
       return 0;
     }
     const longestPx =
-      Math.max(...sinkLabels.map((label) => estimateTextWidth(label))) +
-      (showValues ? 9 * LABEL_CHAR_PX : 0);
+      Math.max(...sinkLabels.map((label) => measureText(label, labelFont).width)) +
+      (showValues ? measureText(' (999,999)', labelFont).width : 0);
     const wanted = longestPx + 10 + dataLabelOffsetX;
     // Cap the reservation so labels can never squeeze the diagram below 3/4 width,
     // and floor at 0 — a negative dataLabelOffsetX must not inflate the plot
@@ -175,7 +143,7 @@
   // column count grow; untruncated they collide into one unreadable run. Clip to
   // the column pitch with an ellipsis — the full text stays on the <title>.
   const truncateColumnLabel = (text: string): string => {
-    return fitTextToWidth(text, Math.max(0, colWidth - 6));
+    return truncateToWidth(text, Math.max(0, colWidth - 6), colLabelFont);
   };
 
   const truncateLabel = (text: string, column: number): string => {
@@ -194,7 +162,7 @@
           : Math.max(0, colWidth - nodeWidth - 12 - dataLabelOffsetX);
     // No usable room — hide the label rather than force text that would overflow;
     // the full text is still reachable via the node's <title> on hover.
-    return fitTextToWidth(text, available);
+    return truncateToWidth(text, available, labelFont);
   };
 
   // Vertical label de-collision: labels sit at each node's centre-y, so two

package/dist/Tooltip/tooltip-action.js

@@ -24,61 +24,23 @@ export const tooltip = (node, options) => {
     let delayTimer = null;
     const bubbleId = `sui-tooltip-${++tooltipIdCounter}`;
     const OFFSET = 8; // px — matches --tooltip-offset default
-    const computeCoords = (rect, pos) => {
-        const arrowSize = 5; // px — matches --tooltip-arrow-size default
-        const bg = 'var(--tooltip-arrow-color,var(--tooltip-background,#333333))';
-        const t = 'transparent';
-        if (pos === 'top') {
-            return {
-                top: rect.top - OFFSET,
-                left: rect.left + rect.width / 2,
-                transform: 'translate(-50%, -100%)',
-                arrowTop: '100%',
-                arrowLeft: '50%',
-                arrowRight: '',
-                arrowTransform: 'translateX(-50%)',
-                arrowBorderWidth: `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`,
-                arrowBorderColor: `${bg} ${t} ${t} ${t}`
-            };
-        }
-        if (pos === 'bottom') {
-            return {
-                top: rect.bottom + OFFSET,
-                left: rect.left + rect.width / 2,
-                transform: 'translate(-50%, 0)',
-                arrowTop: `-${arrowSize}px`,
-                arrowLeft: '50%',
-                arrowRight: '',
-                arrowTransform: 'translateX(-50%)',
-                arrowBorderWidth: `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`,
-                arrowBorderColor: `${t} ${t} ${bg} ${t}`
-            };
-        }
-        if (pos === 'left') {
-            return {
-                top: rect.top + rect.height / 2,
-                left: rect.left - OFFSET,
-                transform: 'translate(-100%, -50%)',
-                arrowTop: '50%',
-                arrowLeft: '100%',
-                arrowRight: '',
-                arrowTransform: 'translateY(-50%)',
-                arrowBorderWidth: `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`,
-                arrowBorderColor: `${t} ${t} ${t} ${bg}`
-            };
-        }
-        // right
-        return {
-            top: rect.top + rect.height / 2,
-            left: rect.right + OFFSET,
-            transform: 'translate(0, -50%)',
-            arrowTop: '50%',
-            arrowLeft: '',
-            arrowRight: `${arrowSize}px`,
-            arrowTransform: 'translateY(-50%)',
-            arrowBorderWidth: `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`,
-            arrowBorderColor: `${t} ${bg} ${t} ${t}`
-        };
+    const EDGE_MARGIN = 8; // px — minimum air between the bubble and the viewport edge
+    const ARROW_INSET = 9; // px — arrow centre never closer than this to a bubble corner
+    const oppositeOf = (side) => {
+        if (side === 'top') {
+            return 'bottom';
+        }
+        if (side === 'bottom') {
+            return 'top';
+        }
+        if (side === 'left') {
+            return 'right';
+        }
+        return 'left';
+    };
+    // min > max (bubble wider/taller than the viewport) degrades to the raw value.
+    const clampValue = (value, min, max) => {
+        return max < min ? value : Math.min(Math.max(value, min), max);
     };
     /**
      * Build the bubble and arrow elements and attach them to `document.body`.
@@ -127,25 +89,81 @@ export const tooltip = (node, options) => {
     /**
      * Compute and apply `top`/`left` fixed coordinates plus arrow styles based on the
      * current bounding rect of the host element and the active `position` option.
+     *
+     * The bubble is measured after mounting and then (1) FLIPPED to the opposite
+     * side when the preferred side has no room but the opposite side does, and
+     * (2) CLAMPED so it never crosses the viewport edge — a tooltip on a trigger
+     * near the screen edge used to spill off-screen or cover the nav beneath it.
+     * The arrow is positioned in bubble-local pixels anchored to the TRIGGER
+     * centre, so it keeps pointing at the trigger even when the bubble shifts.
      */
     const positionBubble = () => {
         if (bubbleEl === null || arrowEl === null) {
             return;
         }
         const rect = node.getBoundingClientRect();
-        const pos = currentOptions.position ?? 'top';
-        const coords = computeCoords(rect, pos);
-        bubbleEl.style.top = `${coords.top}px`;
-        bubbleEl.style.left = `${coords.left}px`;
-        bubbleEl.style.transform = coords.transform;
-        arrowEl.style.top = coords.arrowTop;
-        arrowEl.style.left = coords.arrowLeft;
-        if (coords.arrowRight !== '') {
-            arrowEl.style.right = coords.arrowRight;
-        }
-        arrowEl.style.transform = coords.arrowTransform;
-        arrowEl.style.borderWidth = coords.arrowBorderWidth;
-        arrowEl.style.borderColor = coords.arrowBorderColor;
+        const preferred = currentOptions.position ?? 'top';
+        const arrowSize = 5; // px — matches --tooltip-arrow-size default
+        const bg = 'var(--tooltip-arrow-color,var(--tooltip-background,#333333))';
+        const t = 'transparent';
+        // Stubbed DOMs (unit tests) report no dimensions; clamping then no-ops.
+        const bubbleWidth = bubbleEl.offsetWidth || 0;
+        const bubbleHeight = bubbleEl.offsetHeight || 0;
+        const viewportWidth = typeof window !== 'undefined' && window.innerWidth > 0
+            ? window.innerWidth
+            : Number.POSITIVE_INFINITY;
+        const viewportHeight = typeof window !== 'undefined' && window.innerHeight > 0
+            ? window.innerHeight
+            : Number.POSITIVE_INFINITY;
+        const fits = (side) => {
+            if (side === 'top') {
+                return rect.top - OFFSET - bubbleHeight >= EDGE_MARGIN;
+            }
+            if (side === 'bottom') {
+                return rect.bottom + OFFSET + bubbleHeight <= viewportHeight - EDGE_MARGIN;
+            }
+            if (side === 'left') {
+                return rect.left - OFFSET - bubbleWidth >= EDGE_MARGIN;
+            }
+            return rect.right + OFFSET + bubbleWidth <= viewportWidth - EDGE_MARGIN;
+        };
+        const side = !fits(preferred) && fits(oppositeOf(preferred)) ? oppositeOf(preferred) : preferred;
+        let top;
+        let left;
+        if (side === 'top' || side === 'bottom') {
+            top = side === 'top' ? rect.top - OFFSET - bubbleHeight : rect.bottom + OFFSET;
+            left = clampValue(rect.left + rect.width / 2 - bubbleWidth / 2, EDGE_MARGIN, viewportWidth - EDGE_MARGIN - bubbleWidth);
+        }
+        else {
+            left = side === 'left' ? rect.left - OFFSET - bubbleWidth : rect.right + OFFSET;
+            top = clampValue(rect.top + rect.height / 2 - bubbleHeight / 2, EDGE_MARGIN, viewportHeight - EDGE_MARGIN - bubbleHeight);
+        }
+        bubbleEl.style.top = `${top}px`;
+        bubbleEl.style.left = `${left}px`;
+        bubbleEl.style.transform = 'none';
+        arrowEl.style.right = '';
+        if (side === 'top' || side === 'bottom') {
+            const arrowLeft = clampValue(rect.left + rect.width / 2 - left, ARROW_INSET, Math.max(ARROW_INSET, bubbleWidth - ARROW_INSET));
+            arrowEl.style.left = `${arrowLeft}px`;
+            arrowEl.style.top = side === 'top' ? '100%' : `-${arrowSize}px`;
+            arrowEl.style.transform = 'translateX(-50%)';
+            arrowEl.style.borderWidth =
+                side === 'top'
+                    ? `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`
+                    : `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`;
+            arrowEl.style.borderColor = side === 'top' ? `${bg} ${t} ${t} ${t}` : `${t} ${t} ${bg} ${t}`;
+        }
+        else {
+            const arrowTop = clampValue(rect.top + rect.height / 2 - top, ARROW_INSET, Math.max(ARROW_INSET, bubbleHeight - ARROW_INSET));
+            arrowEl.style.top = `${arrowTop}px`;
+            arrowEl.style.left = side === 'left' ? '100%' : `-${arrowSize}px`;
+            arrowEl.style.transform = 'translateY(-50%)';
+            arrowEl.style.borderWidth =
+                side === 'left'
+                    ? `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`
+                    : `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`;
+            arrowEl.style.borderColor = side === 'left' ? `${t} ${t} ${t} ${bg}` : `${t} ${bg} ${t} ${t}`;
+        }
     };
     const show = () => {
         // Guard against overlapping events (e.g. mouseenter + focusin firing simultaneously,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.90.0",
+  "version": "2.90.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",