@juspay/svelte-ui-components 2.103.0 → 2.105.0

package/dist/SankeyChart/SankeyChart.svelte

@@ -36,7 +36,10 @@
     nodeColorResolver,
     minLinkWidth = 1,
     dataLabelOffsetX = 0,
-    disableDimOnHover = false
+    disableDimOnHover = false,
+    firstColumnLabelSide = 'left',
+    lastColumnLabelSide = 'right',
+    marginX = 40
   }: SankeyChartProperties = $props();
 
   // ── State ──────────────────────────────────────────────────────
@@ -54,28 +57,55 @@
   let format = $derived(valueFormat ?? formatNumber);
   let isEmpty = $derived(nodes.length === 0);
   const MARGIN = 40;
-  // 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;
 
   // 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).
+  // Weight and family are part of the spec: a 700-weight label is measurably
+  // wider than a 400 one, and the app's rendered font rarely matches the
+  // measurement default — budgets must be computed at the rendered style or
+  // borderline labels truncate (or overflow) for no visible reason.
+  // Family only enters the spec once the document's fonts have loaded: measuring
+  // a not-yet-loaded webfont silently measures its fallback (usually wider) and
+  // the width cache would pin that stale value under the loaded font's key.
+  // Until then the measurement default applies — same behaviour as before.
+  // One-shot promise subscription at init (browser only) — nothing to tear
+  // down, and the $state write re-derives every measurement consumer.
+  let fontsLoaded = $state(typeof document !== 'undefined' && document.fonts?.status === 'loaded');
+  if (typeof document !== 'undefined' && document.fonts?.status !== 'loaded') {
+    document.fonts?.ready.then(() => {
+      fontsLoaded = true;
+    });
+  }
+  let chartFontFamily = $derived(
+    fontsLoaded && containerEl ? getComputedStyle(containerEl).fontFamily : null
+  );
   let labelFont = $derived({
-    size: containerEl ? readCssVarPx(containerEl, '--sankey-label-font-size', 12) : 12
+    size: containerEl ? readCssVarPx(containerEl, '--sankey-label-font-size', 12) : 12,
+    weight: containerEl ? readCssVarPx(containerEl, '--sankey-label-font-weight', 400) : 400,
+    family: chartFontFamily
   });
   let colLabelFont = $derived({
-    size: containerEl ? readCssVarPx(containerEl, '--sankey-col-label-font-size', 11) : 11
+    size: containerEl ? readCssVarPx(containerEl, '--sankey-col-label-font-size', 11) : 11,
+    weight: containerEl ? readCssVarPx(containerEl, '--sankey-col-label-font-weight', 400) : 400,
+    family: chartFontFamily
   });
+  // A label's rendered line box measures ≈1.33em across common font stacks;
+  // two label centres closer than this overlap visibly. Derived from the
+  // tokened size so consumers that scale labels keep honest de-collision.
+  let labelLinePx = $derived(Math.ceil(labelFont.size * 1.33));
 
   // 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
   // used to run past the svg edge and clip. Reserve a capped gutter sized from the
   // sink-node labels (sinks are what land in the final column) and lay the diagram
   // out in the remaining width instead.
+  // With `lastColumnLabelSide: 'left'` sink labels render inside the plot over
+  // the incoming ribbons (mirroring the first column's 'right' mode), so no
+  // right gutter is reserved and the diagram runs to the right edge.
   let lastColumnLabelGutter = $derived.by(() => {
-    if (!showLabels || nodes.length === 0 || chartWidth <= 0) {
+    if (lastColumnLabelSide === 'left' || !showLabels || nodes.length === 0 || chartWidth <= 0) {
       return 0;
     }
     const sourceIds = new Set(links.map((link) => link.source));
@@ -101,8 +131,11 @@
   // the room falls below an ellipsis, vanish entirely. Mirror the sink gutter:
   // reserve a capped left gutter sized from the source-node labels (sources are what
   // land in the first column) and shift the diagram right by it.
+  // With `firstColumnLabelSide: 'right'` the labels render over the outgoing
+  // ribbons like every other column, so no gutter is reserved at all and the
+  // diagram gains that width.
   let firstColumnLabelGutter = $derived.by(() => {
-    if (!showLabels || nodes.length === 0 || chartWidth <= 0) {
+    if (firstColumnLabelSide === 'right' || !showLabels || nodes.length === 0 || chartWidth <= 0) {
       return 0;
     }
     const targetIds = new Set(links.map((link) => link.target));
@@ -122,7 +155,7 @@
   });
 
   let plotWidth = $derived(
-    Math.max(0, chartWidth - MARGIN * 2 - firstColumnLabelGutter - lastColumnLabelGutter)
+    Math.max(0, chartWidth - marginX * 2 - firstColumnLabelGutter - lastColumnLabelGutter)
   );
   let layout = $derived(
     computeSankeyLayout(
@@ -174,6 +207,29 @@
     return truncateToWidth(text, Math.max(0, colWidth - 6), colLabelFont);
   };
 
+  // Column headers centre on their column's bar; at tight horizontal margins an
+  // edge header (e.g. a long last-column title) would otherwise paint past the
+  // svg boundary. Clamp each header's centre so its rendered text stays on the
+  // canvas — a no-op at the default margins.
+  const columnLabelX = (columnIndex: number, label: string): number => {
+    const center = columnIndex * colWidth + nodeWidth / 2;
+    const textWidth = measureText(truncateColumnLabel(label), colLabelFont).width;
+    const canvasLeft = -(marginX + firstColumnLabelGutter) + 2;
+    const canvasRight = plotWidth + lastColumnLabelGutter + marginX - 2;
+    const min = canvasLeft + textWidth / 2;
+    const max = canvasRight - textWidth / 2;
+    // Text wider than the whole canvas keeps its centre; the colWidth-based
+    // truncation budget makes that unreachable in practice.
+    return max < min ? center : Math.min(Math.max(center, min), max);
+  };
+
+  // Which side of its bar a node's label renders on. First and last columns are
+  // configurable (`firstColumnLabelSide` / `lastColumnLabelSide`); in a
+  // single-column chart the first-column setting wins.
+  const labelOnLeft = (column: number): boolean =>
+    (column === 0 && firstColumnLabelSide === 'left') ||
+    (column === columnCount - 1 && column !== 0 && lastColumnLabelSide === 'left');
+
   const truncateLabel = (text: string, column: number): string => {
     // Middle columns must budget for dataLabelOffsetX too: the label starts at
     // node.x + nodeWidth + 6 + dataLabelOffsetX, so the room before the next
@@ -184,10 +240,10 @@
     // SVG's left edge is that gutter plus the base margin, minus the inset —
     // symmetric with the last column's sink-gutter budget below.
     const available =
-      column === 0
-        ? Math.max(0, firstColumnLabelGutter + MARGIN - 6 - dataLabelOffsetX)
-        : column === columnCount - 1
-          ? Math.max(0, lastColumnLabelGutter + MARGIN - 6 - dataLabelOffsetX)
+      column === 0 && firstColumnLabelSide === 'left'
+        ? Math.max(0, firstColumnLabelGutter + marginX - 6 - dataLabelOffsetX)
+        : column === columnCount - 1 && lastColumnLabelSide === 'right'
+          ? Math.max(0, lastColumnLabelGutter + marginX - 6 - dataLabelOffsetX)
           : 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.
@@ -222,7 +278,7 @@
           continue;
         }
         const centerGap = node.y + node.height / 2 - (lastKept.y + lastKept.height / 2);
-        if (centerGap < LABEL_LINE_PX) {
+        if (centerGap < labelLinePx) {
           if (node.value > lastKept.value) {
             hidden.add(lastKept.id);
             lastKept = node;
@@ -425,12 +481,12 @@
     <div class="chart-empty">{@render empty()}</div>
   {:else}
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio} {maxHeight}>
-      <g transform="translate({MARGIN + firstColumnLabelGutter}, {MARGIN})">
+      <g transform="translate({marginX + firstColumnLabelGutter}, {MARGIN})">
         {#if columnLabels != null && columnLabels.length > 0}
           {#each columnLabels.slice(0, columnCount) as label, ci (ci)}
             <text
               class="sankey-col-label"
-              x={ci * colWidth + nodeWidth / 2}
+              x={columnLabelX(ci, label)}
               y={-8}
               text-anchor="middle"
               dominant-baseline="auto">{truncateColumnLabel(label)}<title>{label}</title></text
@@ -490,11 +546,11 @@
               <text
                 class="sankey-label"
                 class:node-dimmed={dimmed}
-                x={node.column === 0
+                x={labelOnLeft(node.column)
                   ? node.x - 6 - dataLabelOffsetX
                   : node.x + node.width + 6 + dataLabelOffsetX}
                 y={node.y + node.height / 2}
-                text-anchor={node.column === 0 ? 'end' : 'start'}
+                text-anchor={labelOnLeft(node.column) ? 'end' : 'start'}
                 dominant-baseline="middle"
                 >{truncateLabel(
                   showValues ? `${node.label} (${format(node.value)})` : node.label,
@@ -537,13 +593,22 @@
   .sankey-label {
     fill: var(--sankey-label-color, #333);
     font-size: var(--sankey-label-font-size, 12px);
+    font-weight: var(--sankey-label-font-weight, 400);
     font-family: var(--chart-font-family, inherit);
+    /* Highcharts-style text outline: node labels render over link ribbons, so
+       a halo in the chart's background colour keeps them legible at any flow
+       density. Off (transparent / 0) by default. */
+    paint-order: stroke;
+    stroke: var(--sankey-label-halo-color, transparent);
+    stroke-width: var(--sankey-label-halo-width, 0);
+    stroke-linejoin: round;
     pointer-events: none;
     transition: opacity var(--chart-transition-duration, 0.2s) ease;
   }
   .sankey-col-label {
     fill: var(--sankey-col-label-color, #666);
     font-size: var(--sankey-col-label-font-size, 11px);
+    font-weight: var(--sankey-col-label-font-weight, 400);
     font-family: var(--chart-font-family, inherit);
     pointer-events: none;
   }

package/dist/SankeyChart/properties.d.ts

@@ -84,6 +84,29 @@ export type OptionalSankeyChartProperties = {
      * to read the overall structure. Defaults to `false` (standard dim-on-hover behaviour).
      */
     disableDimOnHover?: boolean;
+    /**
+     * Which side of a first-column node its label renders on. `'left'` (default) anchors the
+     * label into a reserved left gutter outside the diagram. `'right'` renders it like every
+     * other column — to the right of the bar, over the outgoing ribbons (pair with the
+     * `--sankey-label-halo-*` tokens for legibility); no left gutter is reserved, so the
+     * diagram gains that width.
+     */
+    firstColumnLabelSide?: 'left' | 'right';
+    /**
+     * Which side of a last-column (sink) node its label renders on. `'right'` (default)
+     * anchors the label into a reserved right gutter outside the diagram. `'left'` renders it
+     * inside the plot — left of the bar, over the incoming ribbons (pair with the
+     * `--sankey-label-halo-*` tokens); no right gutter is reserved, so the diagram runs to the
+     * right edge. In a single-column chart `firstColumnLabelSide` wins.
+     */
+    lastColumnLabelSide?: 'left' | 'right';
+    /**
+     * Horizontal inset in pixels between the svg edges and the diagram (plus any label
+     * gutters). Defaults to `40`, matching the fixed vertical margin. Lower it for
+     * edge-to-edge funnels when both first/last column labels render inside the plot;
+     * column headers clamp to the canvas so they never paint past the svg.
+     */
+    marginX?: number;
 };
 export type SankeyChartEventProperties = {
     onnodeclick?: (event: {

package/dist/_chart/measure.d.ts

@@ -1,7 +1,7 @@
 export type FontSpec = {
     /** Font size in px. */
     size: number;
-    family?: string;
+    family?: string | null;
     weight?: number | string;
 };
 export declare function measureText(text: string, font: FontSpec): {

package/package.json

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