@juspay/svelte-ui-components 2.30.0 → 2.32.0

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
+    });
+}

package/dist/_chart/types.d.ts

@@ -0,0 +1,128 @@
+import type { Snippet } from 'svelte';
+import type { BarChartDataPoint } from '../BarChart/properties';
+export type Margin = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type Point = {
+    x: number;
+    y: number;
+};
+export type ChartDimensions = {
+    width: number;
+    height: number;
+    margin: Margin;
+    innerWidth: number;
+    innerHeight: number;
+};
+export type LinearScale = {
+    (value: number): number;
+    domain: [number, number];
+    range: [number, number];
+    ticks: (count?: number) => number[];
+    invert: (pixel: number) => number;
+};
+export type BandScale = {
+    (label: string): number;
+    domain: string[];
+    range: [number, number];
+    bandwidth: number;
+    step: number;
+};
+export type CurveType = 'linear' | 'monotone' | 'step' | 'natural';
+export type AxisOrientation = 'top' | 'right' | 'bottom' | 'left';
+export type PieSliceLayout = {
+    index: number;
+    startAngle: number;
+    endAngle: number;
+    midAngle: number;
+    value: number;
+    percentage: number;
+    label: string;
+    color?: string;
+};
+export type ComputedSankeyNode = {
+    id: string;
+    label: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    value: number;
+    color?: string;
+    column: number;
+};
+export type ComputedSankeyLink = {
+    source: string;
+    target: string;
+    value: number;
+    color?: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    width: number;
+    path: string;
+};
+export type BarRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    si: number;
+    pi: number;
+    dataPoint: BarChartDataPoint;
+    seriesName: string;
+};
+export type StackedPoint = {
+    x: number;
+    y0: number;
+    y1: number;
+};
+export type TooltipData = {
+    title?: string;
+    items: Array<{
+        label: string;
+        value: string;
+        color?: string;
+    }>;
+};
+export type LegendItem = {
+    label: string;
+    color: string;
+};
+export type ChartContainerProperties = {
+    width?: number;
+    height?: number;
+    aspectRatio?: number;
+    minHeight?: number;
+    testId?: string;
+    classes?: string;
+    children: Snippet;
+};
+export type AxisProperties = {
+    orientation: AxisOrientation;
+    scale: LinearScale | BandScale;
+    tickCount?: number;
+    tickFormat?: (value: number | string) => string;
+    showGridlines?: boolean;
+    gridlineLength?: number;
+    label?: string;
+    classes?: string;
+};
+export type ChartTooltipProperties = {
+    data: TooltipData | null;
+    mouseX?: number;
+    mouseY?: number;
+    customSnippet?: Snippet<[TooltipData]>;
+    classes?: string;
+};
+export type LegendProperties = {
+    items: LegendItem[];
+    position?: 'top' | 'bottom';
+    customSnippet?: Snippet<[LegendItem[]]>;
+    classes?: string;
+};

package/dist/_chart/types.js

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

package/dist/index.d.ts

@@ -59,6 +59,11 @@ export { default as SplitInput } from './SplitInput/SplitInput.svelte';
 export { default as FileInput } from './FileInput/FileInput.svelte';
 export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.svelte';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
+export { default as LineChart } from './LineChart/LineChart.svelte';
+export { default as AreaChart } from './AreaChart/AreaChart.svelte';
+export { default as BarChart } from './BarChart/BarChart.svelte';
+export { default as PieChart } from './PieChart/PieChart.svelte';
+export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -114,4 +119,9 @@ export type * from './SplitInput/properties';
 export type * from './FileInput/properties';
 export type * from './DateRangePicker/properties';
 export type * from './Breadcrumb/properties';
+export type * from './LineChart/properties';
+export type * from './AreaChart/properties';
+export type * from './BarChart/properties';
+export type * from './PieChart/properties';
+export type * from './SankeyChart/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -59,4 +59,9 @@ export { default as SplitInput } from './SplitInput/SplitInput.svelte';
 export { default as FileInput } from './FileInput/FileInput.svelte';
 export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.svelte';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.svelte';
+export { default as LineChart } from './LineChart/LineChart.svelte';
+export { default as AreaChart } from './AreaChart/AreaChart.svelte';
+export { default as BarChart } from './BarChart/BarChart.svelte';
+export { default as PieChart } from './PieChart/PieChart.svelte';
+export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
 export { validateInput } from './utils';

package/package.json

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