@juspay/svelte-ui-components 2.106.2 → 2.107.1

package/dist/BarChart/BarChart.svelte

@@ -78,6 +78,7 @@
     stackNormalize = false,
     scrollable = false,
     minBandWidth = 48,
+    marginX,
     tooltipSnippet,
     empty,
     renderOverlay,
@@ -309,7 +310,19 @@
       base: { top: 20, left: showYAxis ? 50 : 28, right: 28, bottom: showXAxis ? 40 : 8 }
     });
   });
-  let dims = $derived(layout);
+  let dims = $derived.by(() => {
+    if (marginX == null) {
+      return layout;
+    }
+    // Fixed horizontal inset: overrides the auto layout's tick-label padding
+    // so the plot (and its edge bars) runs to the requested inset.
+    const inset = Math.max(0, marginX);
+    return {
+      ...layout,
+      margin: { ...layout.margin, left: inset, right: inset },
+      innerWidth: Math.max(0, chartWidth - inset * 2)
+    };
+  });
 
   let catScale = $derived(
     createBandScale(labels, isVertical ? [0, dims.innerWidth] : [0, dims.innerHeight], barPadding)
@@ -610,6 +623,38 @@
     }
   }
 
+  // Grouped/single bars round only their value end (design-system bar spec):
+  // a vertical bar rounds its top (bottom when the value is negative), a
+  // horizontal bar its right (left when negative). The old all-corner rect
+  // rounding let the backdrop/track behind a bar peek through the notches at
+  // its baseline corners. Floating [low, high] range bars round both ends.
+  function valueEndBarPath(bar: BarRect): string {
+    if (barRadius <= 0) {
+      return roundedRectPath(bar.x, bar.y, bar.width, bar.height, 0, 0, 0, 0);
+    }
+    if (bar.isFloating) {
+      return roundedRectPath(
+        bar.x,
+        bar.y,
+        bar.width,
+        bar.height,
+        barRadius,
+        barRadius,
+        barRadius,
+        barRadius
+      );
+    }
+    const isNegative = (bar.dataPoint.value ?? 0) < 0;
+    if (isVertical) {
+      return isNegative
+        ? roundedRectPath(bar.x, bar.y, bar.width, bar.height, 0, 0, barRadius, barRadius)
+        : roundedRectPath(bar.x, bar.y, bar.width, bar.height, barRadius, barRadius, 0, 0);
+    }
+    return isNegative
+      ? roundedRectPath(bar.x, bar.y, bar.width, bar.height, barRadius, 0, 0, barRadius)
+      : roundedRectPath(bar.x, bar.y, bar.width, bar.height, 0, barRadius, barRadius, 0);
+  }
+
   // ── Fill attribute helper ──────────────────────────────────────
 
   function barFillAttr(bar: BarRect): string {
@@ -918,7 +963,7 @@
                       onclick={() => handleClick(bar)}
                     />
                   {:else}
-                    <rect
+                    <path
                       class="bar"
                       class:hovered={hovered?.si === bar.si && hovered?.pi === bar.pi}
                       class:highlighted={effectiveHighlightedIndex !== null &&
@@ -927,12 +972,7 @@
                         (hovered.si !== bar.si || hovered.pi !== bar.pi)) ||
                         (effectiveHighlightedIndex !== null &&
                           effectiveHighlightedIndex !== bar.pi)}
-                      x={bar.x}
-                      y={bar.y}
-                      width={bar.width}
-                      height={bar.height}
-                      rx={barRadius}
-                      ry={barRadius}
+                      d={valueEndBarPath(bar)}
                       fill={barFillAttr(bar)}
                       data-pw={`bar-${i}`}
                       tabindex="0"

package/dist/BarChart/properties.d.ts

@@ -161,6 +161,14 @@ export type OptionalBarChartProperties = {
      * is `false`. Default is `48`.
      */
     minBandWidth?: number;
+    /**
+     * Fixed horizontal inset (px) between the svg edges and the plot, overriding
+     * the auto-computed left/right margins. Use for edge-to-edge funnels where
+     * the auto layout's tick-label padding leaves dead space beside the first and
+     * last bars. Category tick labels near the edges may clip if they are wider
+     * than their band, so pair small values with short labels.
+     */
+    marginX?: number;
     tooltipSnippet?: Snippet<[BarChartDataPoint, number]>;
     empty?: Snippet;
     /**

package/dist/_chart/geometry.js

@@ -145,30 +145,49 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
     }
     const colWidth = maxCol === 0 ? 0 : (width - nodeWidth) / maxCol;
     const columnPadding = new Map();
-    // Initialize y positions
+    // Global px-per-value scale (d3-sankey's `ky`): the tightest column — least
+    // height left after node gaps — sets one scale for the whole diagram, so a
+    // given value renders the same height in every column. The previous layout
+    // stretched every column to fill the full plot height, which gave each
+    // column its own scale; link widths (sized at the source column's scale)
+    // then overflowed target nodes laid out at a smaller scale, and the ribbon
+    // stacks spilled below the bottom node row.
+    let pxPerValue = Number.POSITIVE_INFINITY;
+    for (const ids of columnGroups.values()) {
+        const totalValue = ids.reduce((s, id) => s + (nodeValues.get(id) ?? 0), 0);
+        const availableHeight = height - (ids.length - 1) * nodePadding;
+        if (totalValue > 0 && availableHeight > 0) {
+            pxPerValue = Math.min(pxPerValue, availableHeight / totalValue);
+        }
+    }
+    if (!Number.isFinite(pxPerValue)) {
+        // All-zero data: nothing carries volume, every bar collapses to the minimum.
+        pxPerValue = 0;
+    }
+    const linkRenderWidth = (value) => Math.max(minLinkWidth, value * pxPerValue);
+    // Initialize y positions. A node must be at least as tall as its thicker
+    // side's rendered link stack: every ribbon is clamped to minLinkWidth, so a
+    // node fanning into many near-zero links would otherwise be shorter than the
+    // inflated stack attached to it.
     const nodeY = new Map();
     const nodeH = new Map();
     for (const [col, ids] of columnGroups) {
-        const totalValue = ids.reduce((s, id) => s + (nodeValues.get(id) ?? 0), 0);
         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;
-            return Math.max(minLinkWidth, h);
+            const outStack = (outgoing.get(id) ?? []).reduce((s, link) => s + linkRenderWidth(link.value), 0);
+            const inStack = (incoming.get(id) ?? []).reduce((s, link) => s + linkRenderWidth(link.value), 0);
+            return Math.max(minLinkWidth, (nodeValues.get(id) ?? 0) * pxPerValue, outStack, inStack);
         });
         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 + effectivePadding;
+            nodeH.set(id, renderedHeights[index]);
+            y += renderedHeights[index] + effectivePadding;
         }
     }
     // Iterative relaxation (upstream pass)
@@ -245,11 +264,11 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
     }));
     const nodeById = new Map(computedNodes.map((n) => [n.id, n]));
     const linkKey = (l) => `${l.source}${l.target}`;
+    // Link widths use the same global scale as node heights, so each node's link
+    // stack fills its bar exactly and never runs past its bottom edge.
     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));
+        linkWidths.set(linkKey(l), linkRenderWidth(l.value));
     }
     const linkSy = new Map();
     const linkTy = new Map();

package/package.json

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