@juspay/svelte-ui-components 2.31.0 → 2.32.0

package/dist/_chart/Legend.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { LegendProperties } from './types';
+
+  let { items, position = 'bottom', customSnippet, classes }: LegendProperties = $props();
+</script>
+
+{#if items.length > 0}
+  <div class="chart-legend position-{position} {classes ?? ''}">
+    {#if typeof customSnippet === 'function'}
+      {@render customSnippet(items)}
+    {:else}
+      {#each items as item, i (i)}
+        <div class="legend-item">
+          <span class="legend-swatch" style="background: {item.color}"></span>
+          <span class="legend-label">{item.label}</span>
+        </div>
+      {/each}
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--chart-legend-gap, 16px);
+    font-family: var(--chart-font-family, inherit);
+    padding: 8px 0;
+  }
+
+  .position-top {
+    padding-bottom: 12px;
+  }
+
+  .position-bottom {
+    padding-top: 12px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .legend-swatch {
+    display: inline-block;
+    width: var(--chart-legend-swatch-size, 12px);
+    height: var(--chart-legend-swatch-size, 12px);
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  .legend-label {
+    font-size: var(--chart-legend-font-size, 12px);
+    color: var(--chart-legend-color, #333);
+  }
+</style>

package/dist/_chart/Legend.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { LegendProperties } from './types';
+declare const Legend: import("svelte").Component<LegendProperties, {}, "">;
+type Legend = ReturnType<typeof Legend>;
+export default Legend;

package/dist/_chart/colors.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_PALETTE: string[];
+export declare function getColor(index: number, palette?: string[]): string;
+export declare function generatePalette(baseColor: string, count: number): string[];
+export declare function getContrastColor(hex: string): string;

package/dist/_chart/colors.js

@@ -0,0 +1,36 @@
+import { hexToRgb, hexToHsv, hsvToHex } from '../utils';
+export const DEFAULT_PALETTE = [
+    '#4e79a7',
+    '#f28e2b',
+    '#e15759',
+    '#76b7b2',
+    '#59a14f',
+    '#edc948',
+    '#b07aa1',
+    '#ff9da7',
+    '#9c755f',
+    '#bab0ac'
+];
+export function getColor(index, palette = DEFAULT_PALETTE) {
+    return palette[index % palette.length];
+}
+export function generatePalette(baseColor, count) {
+    const hsv = hexToHsv(baseColor);
+    if (hsv === null) {
+        return DEFAULT_PALETTE.slice(0, count);
+    }
+    const colors = [];
+    for (let i = 0; i < count; i++) {
+        const h = (hsv.h + i / count) % 1;
+        colors.push(hsvToHex(h, hsv.s, hsv.v));
+    }
+    return colors;
+}
+export function getContrastColor(hex) {
+    const rgb = hexToRgb(hex);
+    if (rgb === null) {
+        return '#000000';
+    }
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+}

package/dist/_chart/format.d.ts

@@ -0,0 +1,3 @@
+export declare function formatNumber(value: number): string;
+export declare function formatPercent(value: number, total: number): string;
+export declare function defaultTickFormat(value: number | string): string;

package/dist/_chart/format.js

@@ -0,0 +1,28 @@
+export function formatNumber(value) {
+    const abs = Math.abs(value);
+    if (abs >= 1e9) {
+        return (value / 1e9).toFixed(1).replace(/\.0$/, '') + 'B';
+    }
+    if (abs >= 1e6) {
+        return (value / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
+    }
+    if (abs >= 1e3) {
+        return (value / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
+    }
+    if (Number.isInteger(value)) {
+        return value.toString();
+    }
+    return value.toFixed(1);
+}
+export function formatPercent(value, total) {
+    if (total === 0) {
+        return '0%';
+    }
+    return Math.round((value / total) * 100) + '%';
+}
+export function defaultTickFormat(value) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    return formatNumber(value);
+}

package/dist/_chart/geometry.d.ts

@@ -0,0 +1,24 @@
+import type { Margin, ChartDimensions, PieSliceLayout, ComputedSankeyNode, ComputedSankeyLink, StackedPoint } from './types';
+export declare function computeChartDimensions(width: number, height: number, margin?: Partial<Margin>): ChartDimensions;
+export declare function computePieLayout(data: Array<{
+    label: string;
+    value: number;
+    color?: string;
+}>, startAngle?: number, padAngle?: number): PieSliceLayout[];
+export declare function computeSankeyLayout(nodes: Array<{
+    id: string;
+    label?: string;
+    color?: string;
+}>, links: Array<{
+    source: string;
+    target: string;
+    value: number;
+    color?: string;
+}>, width: number, height: number, nodeWidth?: number, nodePadding?: number, iterations?: number): {
+    nodes: ComputedSankeyNode[];
+    links: ComputedSankeyLink[];
+};
+export declare function computeStackedValues(seriesData: Array<Array<{
+    x: number;
+    y: number;
+}>>): StackedPoint[][];

package/dist/_chart/geometry.js

@@ -0,0 +1,204 @@
+export function computeChartDimensions(width, height, margin = {}) {
+    const m = {
+        top: margin.top ?? 20,
+        right: margin.right ?? 20,
+        bottom: margin.bottom ?? 40,
+        left: margin.left ?? 50
+    };
+    return {
+        width,
+        height,
+        margin: m,
+        innerWidth: Math.max(0, width - m.left - m.right),
+        innerHeight: Math.max(0, height - m.top - m.bottom)
+    };
+}
+// ── 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);
+    if (total === 0) {
+        return [];
+    }
+    const slices = [];
+    let angle = startAngle;
+    for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        const val = Math.max(0, d.value);
+        const sliceAngle = (val / total) * Math.PI * 2;
+        const start = angle + padAngle / 2;
+        const end = angle + sliceAngle - padAngle / 2;
+        slices.push({
+            index: i,
+            startAngle: start,
+            endAngle: end,
+            midAngle: (start + end) / 2,
+            value: val,
+            percentage: (val / total) * 100,
+            label: d.label,
+            color: d.color
+        });
+        angle += sliceAngle;
+    }
+    return slices;
+}
+// ── Sankey layout ───────────────────────────────────────────────
+export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16, nodePadding = 8, iterations = 6) {
+    if (nodes.length === 0) {
+        return { nodes: [], links: [] };
+    }
+    // Build adjacency
+    const outgoing = new Map();
+    const incoming = new Map();
+    for (const n of nodes) {
+        outgoing.set(n.id, []);
+        incoming.set(n.id, []);
+    }
+    for (const l of links) {
+        outgoing.get(l.source)?.push({ target: l.target, value: l.value });
+        incoming.get(l.target)?.push({ source: l.source, value: l.value });
+    }
+    // Assign columns via topological ordering
+    const columns = new Map();
+    const visited = new Set();
+    function assignColumn(id) {
+        if (columns.has(id)) {
+            return columns.get(id);
+        }
+        if (visited.has(id)) {
+            return 0;
+        }
+        visited.add(id);
+        const deps = incoming.get(id) ?? [];
+        const col = deps.length === 0 ? 0 : Math.max(...deps.map((d) => assignColumn(d.source) + 1));
+        columns.set(id, col);
+        return col;
+    }
+    for (const n of nodes) {
+        assignColumn(n.id);
+    }
+    const maxCol = Math.max(0, ...columns.values());
+    // Compute node values (max of incoming/outgoing)
+    const nodeValues = new Map();
+    for (const n of nodes) {
+        const outVal = (outgoing.get(n.id) ?? []).reduce((s, l) => s + l.value, 0);
+        const inVal = (incoming.get(n.id) ?? []).reduce((s, l) => s + l.value, 0);
+        nodeValues.set(n.id, Math.max(outVal, inVal));
+    }
+    // Group nodes by column
+    const columnGroups = new Map();
+    for (const n of nodes) {
+        const col = columns.get(n.id) ?? 0;
+        if (!columnGroups.has(col)) {
+            columnGroups.set(col, []);
+        }
+        columnGroups.get(col).push(n.id);
+    }
+    const colWidth = maxCol === 0 ? 0 : (width - nodeWidth) / maxCol;
+    // Initialize y positions
+    const nodeY = new Map();
+    const nodeH = new Map();
+    for (const [, 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 val = nodeValues.get(id) ?? 0;
+            const h = totalValue > 0 ? (val / totalValue) * availableHeight : availableHeight / ids.length;
+            nodeY.set(id, y);
+            nodeH.set(id, Math.max(1, h));
+            y += h + nodePadding;
+        }
+    }
+    // Iterative relaxation (upstream pass)
+    for (let iter = 0; iter < iterations; iter++) {
+        for (const [, ids] of columnGroups) {
+            for (const id of ids) {
+                const deps = incoming.get(id) ?? [];
+                if (deps.length > 0) {
+                    const weightedY = deps.reduce((s, d) => {
+                        const sy = nodeY.get(d.source) ?? 0;
+                        const sh = nodeH.get(d.source) ?? 0;
+                        return s + (sy + sh / 2) * d.value;
+                    }, 0) / deps.reduce((s, d) => s + d.value, 0);
+                    nodeY.set(id, Math.max(0, weightedY - (nodeH.get(id) ?? 0) / 2));
+                }
+            }
+            // Resolve overlaps
+            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;
+            }
+        }
+    }
+    // Build computed nodes
+    const computedNodes = nodes.map((n) => ({
+        id: n.id,
+        label: n.label ?? n.id,
+        x: (columns.get(n.id) ?? 0) * colWidth,
+        y: nodeY.get(n.id) ?? 0,
+        width: nodeWidth,
+        height: nodeH.get(n.id) ?? 0,
+        value: nodeValues.get(n.id) ?? 0,
+        color: n.color,
+        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 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(1, (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;
+        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 midX = (sx + tx) / 2;
+        const path = `M ${sx} ${sy} C ${midX} ${sy}, ${midX} ${ty}, ${tx} ${ty}`;
+        return {
+            source: l.source,
+            target: l.target,
+            value: l.value,
+            color: l.color,
+            sourceX: sx,
+            sourceY: sy,
+            targetX: tx,
+            targetY: ty,
+            width: linkWidth,
+            path
+        };
+    });
+    return { nodes: computedNodes, links: computedLinks };
+}
+// ── Stacked values ──────────────────────────────────────────────
+export function computeStackedValues(seriesData) {
+    if (seriesData.length === 0) {
+        return [];
+    }
+    const stacked = [];
+    const baselines = new Map();
+    for (const series of seriesData) {
+        const stackedSeries = [];
+        for (const point of series) {
+            const base = baselines.get(point.x) ?? 0;
+            stackedSeries.push({ x: point.x, y0: base, y1: base + point.y });
+            baselines.set(point.x, base + point.y);
+        }
+        stacked.push(stackedSeries);
+    }
+    return stacked;
+}

package/dist/_chart/paths.d.ts

@@ -0,0 +1,4 @@
+import type { Point, CurveType } from './types';
+export declare function arcPath(cx: number, cy: number, innerR: number, outerR: number, startAngle: number, endAngle: number): string;
+export declare function linePath(points: Point[], curve?: CurveType): string;
+export declare function areaPath(points: Point[], baseline: number, curve?: CurveType): string;

package/dist/_chart/paths.js

@@ -0,0 +1,138 @@
+export function arcPath(cx, cy, innerR, outerR, startAngle, endAngle) {
+    const fullCircle = Math.abs(endAngle - startAngle) >= Math.PI * 2 - 0.001;
+    if (fullCircle) {
+        if (innerR > 0) {
+            return (`M ${cx + outerR} ${cy}` +
+                `A ${outerR} ${outerR} 0 1 1 ${cx - outerR} ${cy}` +
+                `A ${outerR} ${outerR} 0 1 1 ${cx + outerR} ${cy}` +
+                `M ${cx + innerR} ${cy}` +
+                `A ${innerR} ${innerR} 0 1 0 ${cx - innerR} ${cy}` +
+                `A ${innerR} ${innerR} 0 1 0 ${cx + innerR} ${cy}Z`);
+        }
+        return (`M ${cx + outerR} ${cy}` +
+            `A ${outerR} ${outerR} 0 1 1 ${cx - outerR} ${cy}` +
+            `A ${outerR} ${outerR} 0 1 1 ${cx + outerR} ${cy}Z`);
+    }
+    const x1 = cx + outerR * Math.cos(startAngle);
+    const y1 = cy + outerR * Math.sin(startAngle);
+    const x2 = cx + outerR * Math.cos(endAngle);
+    const y2 = cy + outerR * Math.sin(endAngle);
+    const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+    if (innerR > 0) {
+        const x3 = cx + innerR * Math.cos(endAngle);
+        const y3 = cy + innerR * Math.sin(endAngle);
+        const x4 = cx + innerR * Math.cos(startAngle);
+        const y4 = cy + innerR * Math.sin(startAngle);
+        return (`M ${x1} ${y1}` +
+            `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}` +
+            `L ${x3} ${y3}` +
+            `A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4}Z`);
+    }
+    return `M ${cx} ${cy}` + `L ${x1} ${y1}` + `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}Z`;
+}
+function linearPath(points) {
+    if (points.length === 0) {
+        return '';
+    }
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        d += ` L ${points[i].x} ${points[i].y}`;
+    }
+    return d;
+}
+function stepPath(points) {
+    if (points.length === 0) {
+        return '';
+    }
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length; i++) {
+        const midX = (points[i - 1].x + points[i].x) / 2;
+        d += ` L ${midX} ${points[i - 1].y} L ${midX} ${points[i].y}`;
+    }
+    if (points.length > 1) {
+        d += ` L ${points[points.length - 1].x} ${points[points.length - 1].y}`;
+    }
+    return d;
+}
+function monotoneTangents(points) {
+    const n = points.length;
+    const slopes = [];
+    const tangents = new Array(n);
+    for (let i = 0; i < n - 1; i++) {
+        const dx = points[i + 1].x - points[i].x;
+        slopes.push(dx === 0 ? 0 : (points[i + 1].y - points[i].y) / dx);
+    }
+    tangents[0] = slopes[0] ?? 0;
+    tangents[n - 1] = slopes[n - 2] ?? 0;
+    for (let i = 1; i < n - 1; i++) {
+        if (slopes[i - 1] * slopes[i] <= 0) {
+            tangents[i] = 0;
+        }
+        else {
+            tangents[i] = (slopes[i - 1] + slopes[i]) / 2;
+        }
+    }
+    // Fritsch-Carlson: ensure monotonicity
+    for (let i = 0; i < n - 1; i++) {
+        if (Math.abs(slopes[i]) < 1e-10) {
+            tangents[i] = 0;
+            tangents[i + 1] = 0;
+        }
+        else {
+            const alpha = tangents[i] / slopes[i];
+            const beta = tangents[i + 1] / slopes[i];
+            const s = alpha * alpha + beta * beta;
+            if (s > 9) {
+                const t = 3 / Math.sqrt(s);
+                tangents[i] = t * alpha * slopes[i];
+                tangents[i + 1] = t * beta * slopes[i];
+            }
+        }
+    }
+    return tangents;
+}
+function monotonePath(points) {
+    if (points.length === 0) {
+        return '';
+    }
+    if (points.length === 1) {
+        return `M ${points[0].x} ${points[0].y}`;
+    }
+    if (points.length === 2) {
+        return linearPath(points);
+    }
+    const tangents = monotoneTangents(points);
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 0; i < points.length - 1; i++) {
+        const dx = (points[i + 1].x - points[i].x) / 3;
+        const cp1x = points[i].x + dx;
+        const cp1y = points[i].y + dx * tangents[i];
+        const cp2x = points[i + 1].x - dx;
+        const cp2y = points[i + 1].y - dx * tangents[i + 1];
+        d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${points[i + 1].x} ${points[i + 1].y}`;
+    }
+    return d;
+}
+export function linePath(points, curve = 'linear') {
+    if (points.length < 2) {
+        return points.length === 1 ? `M ${points[0].x} ${points[0].y}` : '';
+    }
+    switch (curve) {
+        case 'monotone':
+        case 'natural':
+            return monotonePath(points);
+        case 'step':
+            return stepPath(points);
+        default:
+            return linearPath(points);
+    }
+}
+export function areaPath(points, baseline, curve = 'linear') {
+    if (points.length === 0) {
+        return '';
+    }
+    const topPath = linePath(points, curve);
+    const lastPoint = points[points.length - 1];
+    const firstPoint = points[0];
+    return topPath + ` L ${lastPoint.x} ${baseline} L ${firstPoint.x} ${baseline} Z`;
+}

package/dist/_chart/scales.d.ts

@@ -0,0 +1,5 @@
+import type { LinearScale, BandScale } from './types';
+export declare function niceLinearDomain(min: number, max: number): [number, number];
+export declare function computeLinearTicks(domain: [number, number], count?: number): number[];
+export declare function createLinearScale(domain: [number, number], range: [number, number]): LinearScale;
+export declare function createBandScale(domain: string[], range: [number, number], padding?: number): BandScale;

package/dist/_chart/scales.js

@@ -0,0 +1,77 @@
+export function niceLinearDomain(min, max) {
+    if (min === max) {
+        return min === 0 ? [0, 1] : [min > 0 ? 0 : min * 2, max > 0 ? max * 2 : 0];
+    }
+    const range = max - min;
+    const exp = Math.floor(Math.log10(range));
+    const step = Math.pow(10, exp);
+    const niceMin = Math.floor(min / step) * step;
+    const niceMax = Math.ceil(max / step) * step;
+    return [niceMin, niceMax];
+}
+export function computeLinearTicks(domain, count = 5) {
+    const [min, max] = domain;
+    if (min === max) {
+        return [min];
+    }
+    const rawStep = (max - min) / count;
+    const exp = Math.floor(Math.log10(rawStep));
+    const base = Math.pow(10, exp);
+    let step;
+    const ratio = rawStep / base;
+    if (ratio <= 1.5) {
+        step = base;
+    }
+    else if (ratio <= 3) {
+        step = base * 2;
+    }
+    else if (ratio <= 7) {
+        step = base * 5;
+    }
+    else {
+        step = base * 10;
+    }
+    const ticks = [];
+    let tick = Math.ceil(min / step) * step;
+    while (tick <= max + step * 0.001) {
+        ticks.push(Math.round(tick * 1e10) / 1e10);
+        tick += step;
+    }
+    return ticks;
+}
+export function createLinearScale(domain, range) {
+    const [d0, d1] = domain;
+    const [r0, r1] = range;
+    const dSpan = d1 - d0 || 1;
+    const rSpan = r1 - r0;
+    const fn = (value) => r0 + ((value - d0) / dSpan) * rSpan;
+    return Object.assign(fn, {
+        domain,
+        range,
+        ticks: (count) => computeLinearTicks(domain, count),
+        invert: (pixel) => d0 + ((pixel - r0) / rSpan) * dSpan
+    });
+}
+export function createBandScale(domain, range, padding = 0.1) {
+    const [r0, r1] = range;
+    const n = domain.length || 1;
+    const totalRange = r1 - r0;
+    // d3-scale band formula (paddingOuter = 0): step = range / (n - padding)
+    // Derivation: n*bandwidth + (n-1)*gap = totalRange,
+    //   with bandwidth = step*(1-padding) and gap = step*padding
+    //   → step*(n - padding) = totalRange
+    const step = totalRange / Math.max(1, n - padding);
+    const bandwidth = step * (1 - padding);
+    const indexMap = new Map();
+    domain.forEach((label, i) => indexMap.set(label, i));
+    const fn = (label) => {
+        const idx = indexMap.get(label) ?? 0;
+        return r0 + idx * step;
+    };
+    return Object.assign(fn, {
+        domain,
+        range,
+        bandwidth,
+        step
+    });
+}