@juspay/svelte-ui-components 2.75.0 → 2.76.0

package/dist/SankeyChart/SankeyChart.svelte

@@ -28,7 +28,10 @@
     testId,
     classes,
     columnLabels,
-    nodeColorResolver
+    nodeColorResolver,
+    minLinkWidth = 1,
+    dataLabelOffsetX = 0,
+    disableDimOnHover = false
   }: SankeyChartProperties = $props();
 
   // ── State ──────────────────────────────────────────────────────
@@ -54,7 +57,8 @@
       Math.max(0, chartHeight - MARGIN * 2),
       nodeWidth,
       nodePadding,
-      iterations
+      iterations,
+      minLinkWidth
     )
   );
 
@@ -98,6 +102,9 @@
   };
 
   let connectedNodes = $derived.by(() => {
+    if (disableDimOnHover) {
+      return null;
+    }
     if (hoveredNode !== null) {
       const connected = new SvelteSet<string>([hoveredNode]);
       for (const l of links) {
@@ -285,7 +292,8 @@
 
         {#each layout.links as link, i (i)}
           {@const highlighted = isLinkHighlighted(link.source, link.target)}
-          {@const dimmed = (hoveredNode !== null || hoveredLink !== null) && !highlighted}
+          {@const dimmed =
+            !disableDimOnHover && (hoveredNode !== null || hoveredLink !== null) && !highlighted}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <path
@@ -293,7 +301,7 @@
             d={link.path}
             fill="none"
             stroke={link.color ?? nodeColorMap.get(link.source) ?? getColor(0)}
-            stroke-width={Math.max(1, link.width)}
+            stroke-width={Math.max(minLinkWidth, link.width)}
             stroke-opacity={highlighted ? 0.7 : dimmed ? 0.08 : 0.4}
             onmouseenter={(e) => handleLinkEnter(e, link.source, link.target)}
             onmousemove={trackMouse}
@@ -326,7 +334,9 @@
             <text
               class="sankey-label"
               class:node-dimmed={dimmed}
-              x={node.column === 0 ? node.x - 6 : node.x + node.width + 6}
+              x={node.column === 0
+                ? node.x - 6 - dataLabelOffsetX
+                : node.x + node.width + 6 + dataLabelOffsetX}
               y={node.y + node.height / 2}
               text-anchor={node.column === 0 ? 'end' : 'start'}
               dominant-baseline="middle"

package/dist/SankeyChart/properties.d.ts

@@ -57,6 +57,25 @@ export type OptionalSankeyChartProperties = {
      * through to the default palette colour.
      */
     nodeColorResolver?: (id: string, label: string | null) => string | null;
+    /**
+     * Minimum rendered thickness (px) for any link or node bar. Tiny flows that would otherwise
+     * collapse to sub-pixel widths remain at this thickness so they stay visually discoverable.
+     * Defaults to `1`. Lighthouse uses `2` for dense payment-flow diagrams.
+     */
+    minLinkWidth?: number;
+    /**
+     * Horizontal offset in pixels applied to every node data-label, relative to the default
+     * position (left of first-column nodes, right of all other nodes). Positive values push
+     * the label further away from the node; negative values pull it closer. Lighthouse uses
+     * `30` to create breathing room between the node bar and its label.
+     */
+    dataLabelOffsetX?: number;
+    /**
+     * When `true`, hovering a node does **not** dim unrelated nodes — all nodes and links
+     * remain at full opacity. Useful for dense diagrams where the dimming effect makes it hard
+     * to read the overall structure. Defaults to `false` (standard dim-on-hover behaviour).
+     */
+    disableDimOnHover?: boolean;
 };
 export type SankeyChartEventProperties = {
     onnodeclick?: (event: {

package/dist/_chart/geometry.d.ts

@@ -14,7 +14,7 @@ export declare function computeSankeyLayout(nodes: Array<{
     target: string;
     value: number;
     color?: string;
-}>, width: number, height: number, nodeWidth?: number, nodePadding?: number, iterations?: number): {
+}>, width: number, height: number, nodeWidth?: number, nodePadding?: number, iterations?: number, minLinkWidth?: number): {
     nodes: ComputedSankeyNode[];
     links: ComputedSankeyLink[];
 };

package/dist/_chart/geometry.js

@@ -42,7 +42,7 @@ export function computePieLayout(data, startAngle = -Math.PI / 2, padAngle = 0)
     return slices;
 }
 // ── Sankey layout ───────────────────────────────────────────────
-export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16, nodePadding = 8, iterations = 6) {
+export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16, nodePadding = 8, iterations = 6, minLinkWidth = 1) {
     if (nodes.length === 0) {
         return { nodes: [], links: [] };
     }
@@ -104,9 +104,10 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
         for (const id of ids) {
             const val = nodeValues.get(id) ?? 0;
             const h = totalValue > 0 ? (val / totalValue) * availableHeight : availableHeight / ids.length;
+            const renderedH = Math.max(minLinkWidth, h);
             nodeY.set(id, y);
-            nodeH.set(id, Math.max(1, h));
-            y += h + nodePadding;
+            nodeH.set(id, renderedH);
+            y += renderedH + nodePadding;
         }
     }
     // Iterative relaxation (upstream pass)
@@ -160,7 +161,7 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
         const targetNode = nodeById.get(l.target);
         const sVal = nodeValues.get(l.source) ?? 1;
         const sourceH = nodeH.get(l.source) ?? 0;
-        const linkWidth = Math.max(1, (l.value / Math.max(sVal, 1)) * sourceH);
+        const linkWidth = Math.max(minLinkWidth, (l.value / Math.max(sVal, 1)) * sourceH);
         const sx = (sourceNode?.x ?? 0) + nodeWidth;
         const sy = (sourceOffsets.get(l.source) ?? 0) + linkWidth / 2;
         const tx = targetNode?.x ?? 0;

package/dist/_chart/highlight.d.ts

@@ -0,0 +1,15 @@
+export type ChartHighlightType = 'bar-chart' | 'line-chart' | 'donut-chart';
+/**
+ * The imperative interface a chart hands back through `onChartReady`, so an
+ * external orchestrator (e.g. voice narration sync) can drive point highlighting
+ * without knowing the chart's internal rendering. Replaces the legacy pattern of
+ * reaching into a charting-library instance stored on the DOM node.
+ */
+export type ChartHighlightAPI = {
+    /** Highlight the data point at this zero-based index; pass `null` to clear. */
+    highlight: (index: number | null) => void;
+    /** The ordered category labels for this chart, for name-based lookup. */
+    getCategories: () => string[];
+    /** The chart kind, for consumers maintaining a registry of charts. */
+    type: ChartHighlightType;
+};

package/dist/_chart/highlight.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -68,6 +68,9 @@ export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
 export { default as LottiePlayer } from './LottiePlayer/LottiePlayer.svelte';
 export { default as StatCard } from './StatCard/StatCard.svelte';
+export { default as DeltaIndicator } from './DeltaIndicator/DeltaIndicator.svelte';
+export { default as DualAxisBarChart } from './DualAxisBarChart/DualAxisBarChart.svelte';
+export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -132,5 +135,9 @@ export type * from './PieChart/properties';
 export type * from './SankeyChart/properties';
 export type * from './LottiePlayer/properties';
 export type * from './StatCard/properties';
+export type * from './DeltaIndicator/properties';
+export type * from './DualAxisBarChart/properties';
+export type * from './FunnelChart/properties';
+export type * from './_chart/highlight';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -68,5 +68,8 @@ export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
 export { default as LottiePlayer } from './LottiePlayer/LottiePlayer.svelte';
 export { default as StatCard } from './StatCard/StatCard.svelte';
+export { default as DeltaIndicator } from './DeltaIndicator/DeltaIndicator.svelte';
+export { default as DualAxisBarChart } from './DualAxisBarChart/DualAxisBarChart.svelte';
+export { default as FunnelChart } from './FunnelChart/FunnelChart.svelte';
 export { validateInput } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/package.json

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