@juspay/svelte-ui-components 2.107.0 → 2.108.1

package/dist/LineChart/LineChart.svelte

@@ -48,6 +48,7 @@
     xAxisCategories,
     xTickFormat,
     yTickFormat,
+    yIntegerTicks = false,
     aspectRatio = 16 / 9,
     minHeight = 0,
     maxHeight = DEFAULT_CHART_MAX_HEIGHT,
@@ -581,6 +582,7 @@
               orientation="left"
               scale={yScale}
               tickCount={yTickCount}
+              integerTicks={yIntegerTicks}
               {showGridlines}
               gridlineLength={dims.innerWidth}
               label={yAxisLabel}

package/dist/LineChart/properties.d.ts

@@ -93,6 +93,13 @@ export type OptionalLineChartProperties = {
     xTickFormat?: (value: number | string) => string;
     /** Formatter for Y axis tick labels. */
     yTickFormat?: (value: number | string) => string;
+    /**
+     * Snap Y-axis ticks to whole numbers (mirrors the X axis' category
+     * behaviour). Use for count-style series (orders, items) where a small
+     * domain would otherwise produce fractional ticks (0, 0.5, 1, 1.5, 2) —
+     * `yTickFormat` only changes label text, not tick placement.
+     */
+    yIntegerTicks?: boolean;
     /** Width-to-height ratio for the chart. */
     aspectRatio?: number;
     /** Minimum chart height in pixels, regardless of computed aspect-ratio height. */

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.107.0",
+  "version": "2.108.1",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",