@juspay/svelte-ui-components 2.81.1 → 2.81.3

package/dist/BarChart/BarChart.svelte

@@ -13,7 +13,11 @@
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import Legend from '../_chart/Legend.svelte';
   import { createBandScale, createLinearScale, niceLinearDomain } from '../_chart/scales';
-  import { computeChartDimensions } from '../_chart/geometry';
+  import {
+    computeChartDimensions,
+    computeHorizontalCategoryGutter,
+    measureTextWidth
+  } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath } from '../_chart/paths';
@@ -110,17 +114,6 @@
 
   let format = $derived(valueFormat ?? formatNumber);
   let isVertical = $derived(orientation === 'vertical');
-  // When an axis is hidden its gutter (Y = 50px for tick labels, X = 40px) is dead
-  // space that squeezes the plot into the centre. Collapse the tick-label gutter but
-  // keep a symmetric breathing-room inset so the edge bars (and their value labels)
-  // don't sit flush against the container edges.
-  let dims = $derived(
-    computeChartDimensions(chartWidth, chartHeight, {
-      left: showYAxis ? 50 : 28,
-      right: 28,
-      bottom: showXAxis ? 40 : 8
-    })
-  );
 
   let isMulti = $derived(Array.isArray(series) && series.length > 0);
 
@@ -197,6 +190,58 @@
     return first.map((d) => d.label);
   });
 
+  /**
+   * Widest category label in the axis tick font, for the horizontal-orientation
+   * gutter below. Horizontal charts put category text (not short numeric ticks)
+   * on the Y axis, so the gutter must fit real words like "Submitted Address" —
+   * a fixed gutter clips them. Resolved from the mounted container so CSS-var
+   * theming (--chart-axis-font-size / --chart-axis-font-family) is honoured.
+   * Null when unmeasurable (SSR, no canvas) — the gutter then keeps its legacy
+   * fixed width.
+   */
+  let widestCategoryLabelWidth = $derived.by(() => {
+    if (isVertical || !showYAxis || labels.length === 0 || containerEl === null) {
+      return null;
+    }
+    const containerStyle = getComputedStyle(containerEl);
+    const axisFontSize = containerStyle.getPropertyValue('--chart-axis-font-size').trim() || '11px';
+    const axisFontFamilyToken = containerStyle.getPropertyValue('--chart-axis-font-family').trim();
+    const axisFontFamily =
+      axisFontFamilyToken === '' || axisFontFamilyToken === 'inherit'
+        ? containerStyle.fontFamily || 'sans-serif'
+        : axisFontFamilyToken;
+    const axisFont = `${axisFontSize} ${axisFontFamily}`;
+    let widest: number | null = null;
+    for (const label of labels) {
+      const labelWidth = measureTextWidth(label, axisFont);
+      if (labelWidth === null) {
+        return null;
+      }
+      if (widest === null || labelWidth > widest) {
+        widest = labelWidth;
+      }
+    }
+    return widest;
+  });
+
+  // When an axis is hidden its gutter (Y = 50px for tick labels, X = 40px) is dead
+  // space that squeezes the plot into the centre. Collapse the tick-label gutter but
+  // keep a symmetric breathing-room inset so the edge bars (and their value labels)
+  // don't sit flush against the container edges. In horizontal orientation the
+  // visible Y axis carries category text, so its gutter grows to fit the widest
+  // label (never shrinking below the legacy 50px, capped at 45% of the width).
+  let dims = $derived(
+    computeChartDimensions(chartWidth, chartHeight, {
+      left: showYAxis
+        ? isVertical
+          ? 50
+          : computeHorizontalCategoryGutter(widestCategoryLabelWidth, chartWidth)
+        : 28,
+      right: 28,
+      bottom: showXAxis ? 40 : 8
+    })
+  );
+
   // ── Effective highlighted index: merge declarative + imperative ─
 
   /**

package/dist/_chart/geometry.d.ts

@@ -1,5 +1,25 @@
 import type { Margin, ChartDimensions, PieSliceLayout, ComputedSankeyNode, ComputedSankeyLink, StackedPoint } from './types';
 export declare function computeChartDimensions(width: number, height: number, margin?: Partial<Margin>): ChartDimensions;
+/**
+ * Measures rendered text width via a shared offscreen canvas context.
+ * Returns null when measurement is unavailable (SSR, or the environment
+ * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
+ * a fixed layout instead of acting on a bogus 0.
+ */
+export declare function measureTextWidth(text: string, font: string): number | null;
+/**
+ * Left margin for a horizontal bar chart's category axis, sized to fit the
+ * widest category label. Category tick labels render right-aligned 10px left
+ * of the axis line (tick mark 6px + 4px gap), so any label wider than
+ * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
+ *
+ * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
+ *   labels already fit keep their exact current layout.
+ * - Caps at 45% of the chart width so one pathological label cannot crush the
+ *   plot area; past the cap the label bleeds as before, but the plot survives.
+ * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
+ */
+export declare function computeHorizontalCategoryGutter(widestLabelWidth: number | null, chartWidth: number, fallback?: number): number;
 export declare function computePieLayout(data: Array<{
     label: string;
     value: number;

package/dist/_chart/geometry.js

@@ -13,6 +13,51 @@ export function computeChartDimensions(width, height, margin = {}) {
         innerHeight: Math.max(0, height - m.top - m.bottom)
     };
 }
+// ── Text measurement ────────────────────────────────────────────
+let textMeasurementContext = null;
+/**
+ * Measures rendered text width via a shared offscreen canvas context.
+ * Returns null when measurement is unavailable (SSR, or the environment
+ * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
+ * a fixed layout instead of acting on a bogus 0.
+ */
+export function measureTextWidth(text, font) {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    if (textMeasurementContext === null) {
+        textMeasurementContext = document.createElement('canvas').getContext('2d');
+    }
+    if (textMeasurementContext === null) {
+        return null;
+    }
+    textMeasurementContext.font = font;
+    const width = textMeasurementContext.measureText(text).width;
+    // jsdom's canvas stub reports 0 for any text; treat that as "cannot measure".
+    return width > 0 ? width : null;
+}
+/**
+ * Left margin for a horizontal bar chart's category axis, sized to fit the
+ * widest category label. Category tick labels render right-aligned 10px left
+ * of the axis line (tick mark 6px + 4px gap), so any label wider than
+ * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
+ *
+ * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
+ *   labels already fit keep their exact current layout.
+ * - Caps at 45% of the chart width so one pathological label cannot crush the
+ *   plot area; past the cap the label bleeds as before, but the plot survives.
+ * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
+ */
+export function computeHorizontalCategoryGutter(widestLabelWidth, chartWidth, fallback = 50) {
+    if (widestLabelWidth === null) {
+        return fallback;
+    }
+    const tickLabelInset = 10;
+    const breathingPad = 4;
+    const cap = Math.max(fallback, chartWidth * 0.45);
+    const fitted = widestLabelWidth + tickLabelInset + breathingPad;
+    return Math.round(Math.min(Math.max(fallback, fitted), cap));
+}
 // ── Pie layout ──────────────────────────────────────────────────
 export function computePieLayout(data, startAngle = -Math.PI / 2, padAngle = 0) {
     const total = data.reduce((sum, d) => sum + Math.max(0, d.value), 0);
@@ -94,25 +139,37 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
         columnGroups.get(col).push(n.id);
     }
     const colWidth = maxCol === 0 ? 0 : (width - nodeWidth) / maxCol;
+    const columnPadding = new Map();
     // Initialize y positions
     const nodeY = new Map();
     const nodeH = new Map();
-    for (const [, ids] of columnGroups) {
+    for (const [col, ids] of columnGroups) {
         const totalValue = ids.reduce((s, id) => s + (nodeValues.get(id) ?? 0), 0);
-        const availableHeight = height - (ids.length - 1) * nodePadding;
-        let y = 0;
-        for (const id of ids) {
+        const gapCount = ids.length - 1;
+        const availableHeight = height - gapCount * nodePadding;
+        const renderedHeights = ids.map((id) => {
             const val = nodeValues.get(id) ?? 0;
             const h = totalValue > 0 ? (val / totalValue) * availableHeight : availableHeight / ids.length;
-            const renderedH = Math.max(minLinkWidth, h);
+            return Math.max(minLinkWidth, h);
+        });
+        const sumRendered = renderedHeights.reduce((s, h) => s + h, 0);
+        const paddingBudget = gapCount > 0 ? (height - sumRendered) / gapCount : 0;
+        const effectivePadding = Math.max(0, Math.min(nodePadding, paddingBudget));
+        const scale = sumRendered > height && sumRendered > 0 ? height / sumRendered : 1;
+        columnPadding.set(col, effectivePadding);
+        let y = 0;
+        for (let index = 0; index < ids.length; index++) {
+            const id = ids[index];
+            const renderedH = renderedHeights[index] * scale;
             nodeY.set(id, y);
             nodeH.set(id, renderedH);
-            y += renderedH + nodePadding;
+            y += renderedH + effectivePadding;
         }
     }
     // Iterative relaxation (upstream pass)
     for (let iter = 0; iter < iterations; iter++) {
-        for (const [, ids] of columnGroups) {
+        for (const [col, ids] of columnGroups) {
+            const padding = columnPadding.get(col) ?? nodePadding;
             for (const id of ids) {
                 const deps = incoming.get(id) ?? [];
                 const totalDepValue = deps.reduce((s, d) => s + d.value, 0);
@@ -128,15 +185,13 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
                     nodeY.set(id, Math.max(0, weightedY - (nodeH.get(id) ?? 0) / 2));
                 }
             }
-            // Resolve overlaps: push down from the top.
-            ids.sort((a, b) => (nodeY.get(a) ?? 0) - (nodeY.get(b) ?? 0));
             let y = 0;
             for (const id of ids) {
                 const cy = nodeY.get(id) ?? 0;
                 if (cy < y) {
                     nodeY.set(id, y);
                 }
-                y = (nodeY.get(id) ?? 0) + (nodeH.get(id) ?? 0) + nodePadding;
+                y = (nodeY.get(id) ?? 0) + (nodeH.get(id) ?? 0) + padding;
             }
             // Resolve overlaps: pull back up from the bottom. The push-down pass
             // above only ever grows a column's block downward, so a fan-out whose
@@ -151,7 +206,7 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
                 if (nodeBottom > bottomBoundary) {
                     nodeY.set(id, bottomBoundary - (nodeH.get(id) ?? 0));
                 }
-                bottomBoundary = (nodeY.get(id) ?? 0) - nodePadding;
+                bottomBoundary = (nodeY.get(id) ?? 0) - padding;
             }
             // Re-centre the column's node group within [0, height]: once overlaps
             // are resolved, anchor the block at the midpoint of its remaining
@@ -184,25 +239,53 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
         column: columns.get(n.id) ?? 0
     }));
     const nodeById = new Map(computedNodes.map((n) => [n.id, n]));
-    // Build computed links with Bezier paths
-    const sourceOffsets = new Map();
-    const targetOffsets = new Map();
-    for (const n of nodes) {
-        sourceOffsets.set(n.id, nodeY.get(n.id) ?? 0);
-        targetOffsets.set(n.id, nodeY.get(n.id) ?? 0);
+    const linkKey = (l) => `${l.source}${l.target}`;
+    const linkWidths = new Map();
+    for (const l of links) {
+        const sVal = nodeValues.get(l.source) ?? 1;
+        const sourceH = nodeH.get(l.source) ?? 0;
+        linkWidths.set(linkKey(l), Math.max(minLinkWidth, (l.value / Math.max(sVal, 1)) * sourceH));
+    }
+    const linkSy = new Map();
+    const linkTy = new Map();
+    const bySource = new Map();
+    const byTarget = new Map();
+    for (const l of links) {
+        if (!bySource.has(l.source)) {
+            bySource.set(l.source, []);
+        }
+        bySource.get(l.source).push(l);
+        if (!byTarget.has(l.target)) {
+            byTarget.set(l.target, []);
+        }
+        byTarget.get(l.target).push(l);
+    }
+    for (const [source, group] of bySource) {
+        group.sort((a, b) => (nodeY.get(a.target) ?? 0) - (nodeY.get(b.target) ?? 0));
+        let offset = nodeY.get(source) ?? 0;
+        for (const l of group) {
+            const w = linkWidths.get(linkKey(l)) ?? 0;
+            linkSy.set(linkKey(l), offset + w / 2);
+            offset += w;
+        }
+    }
+    for (const [target, group] of byTarget) {
+        group.sort((a, b) => (nodeY.get(a.source) ?? 0) - (nodeY.get(b.source) ?? 0));
+        let offset = nodeY.get(target) ?? 0;
+        for (const l of group) {
+            const w = linkWidths.get(linkKey(l)) ?? 0;
+            linkTy.set(linkKey(l), offset + w / 2);
+            offset += w;
+        }
     }
     const computedLinks = links.map((l) => {
         const sourceNode = nodeById.get(l.source);
         const targetNode = nodeById.get(l.target);
-        const sVal = nodeValues.get(l.source) ?? 1;
-        const sourceH = nodeH.get(l.source) ?? 0;
-        const linkWidth = Math.max(minLinkWidth, (l.value / Math.max(sVal, 1)) * sourceH);
+        const linkWidth = linkWidths.get(linkKey(l)) ?? minLinkWidth;
         const sx = (sourceNode?.x ?? 0) + nodeWidth;
-        const sy = (sourceOffsets.get(l.source) ?? 0) + linkWidth / 2;
+        const sy = linkSy.get(linkKey(l)) ?? 0;
         const tx = targetNode?.x ?? 0;
-        const ty = (targetOffsets.get(l.target) ?? 0) + linkWidth / 2;
-        sourceOffsets.set(l.source, (sourceOffsets.get(l.source) ?? 0) + linkWidth);
-        targetOffsets.set(l.target, (targetOffsets.get(l.target) ?? 0) + linkWidth);
+        const ty = linkTy.get(linkKey(l)) ?? 0;
         const midX = (sx + tx) / 2;
         const path = `M ${sx} ${sy} C ${midX} ${sy}, ${midX} ${ty}, ${tx} ${ty}`;
         return {

package/package.json

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