@juspay/svelte-ui-components 2.86.0 → 2.87.0

package/dist/_chart/labels.d.ts

@@ -0,0 +1,76 @@
+import { type FontSpec } from './measure';
+export type LabelRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type LabelSize = {
+    width: number;
+    height: number;
+};
+export type LabelPlacement = {
+    x: number;
+    y: number;
+    placement: 'outside' | 'inside' | 'hidden';
+    textAnchor: 'start' | 'middle' | 'end';
+    dominantBaseline: 'auto' | 'middle' | 'hanging';
+};
+/**
+ * Highcharts-style end-of-bar label chain: place just past the bar's value end
+ * (outside) → justify back inside the bar end when the plot area would clip it →
+ * hide (crop) when the bar cannot fit the label either.
+ */
+export declare function resolveEndLabel(opts: {
+    bar: LabelRect;
+    plot: LabelSize;
+    label: LabelSize;
+    orientation: 'vertical' | 'horizontal';
+    negative?: boolean;
+    gap?: number;
+    padding?: number;
+}): LabelPlacement;
+/** Center a label inside a segment (stacked bars, funnel stages); hide when it cannot fit. */
+export declare function resolveInsideLabel(opts: {
+    bar: LabelRect;
+    label: LabelSize;
+    padding?: number;
+}): LabelPlacement;
+/** Line/area point-value labels: above the point, flipped below at the plot top, thinned by density. */
+export declare function resolvePointLabels(opts: {
+    points: Array<{
+        x: number;
+        y: number;
+    }>;
+    labels: LabelSize[];
+    plot: LabelSize;
+    gap?: number;
+}): Array<{
+    x: number;
+    y: number;
+    visible: boolean;
+    dominantBaseline: 'auto' | 'hanging';
+}>;
+/**
+ * Axis tick-label crowding chain: horizontal → rotate -45° → thin to every Nth,
+ * where N is the smallest integer such that rotated labels no longer overlap.
+ */
+export declare function thinTicks(opts: {
+    labelWidths: number[];
+    labelHeight: number;
+    step: number;
+    gap?: number;
+}): {
+    rotate: boolean;
+    every: number;
+};
+/** Measurement-based ellipsis truncation; empty string when fewer than 2 chars fit. */
+export declare function truncateToWidth(text: string, maxWidth: number, font: FontSpec): string;
+/** Convert an anchored SVG text placement into its bounding rect for collision checks. */
+export declare function placedLabelRect(p: Pick<LabelPlacement, 'x' | 'y' | 'textAnchor' | 'dominantBaseline'>, label: LabelSize): LabelRect;
+/**
+ * Highcharts `allowOverlap: false` equivalent: greedy first-come pass that hides
+ * any label whose rect intersects an already-kept label. `null` entries are
+ * pre-hidden labels and always return false.
+ */
+export declare function dropOverlapping(rects: Array<LabelRect | null>, gap?: number): boolean[];

package/dist/_chart/labels.js

@@ -0,0 +1,213 @@
+import { measureText } from './measure';
+/**
+ * Highcharts-style end-of-bar label chain: place just past the bar's value end
+ * (outside) → justify back inside the bar end when the plot area would clip it →
+ * hide (crop) when the bar cannot fit the label either.
+ */
+export function resolveEndLabel(opts) {
+    const { bar, plot, label, orientation } = opts;
+    const gap = opts.gap ?? 4;
+    const padding = opts.padding ?? 4;
+    const negative = opts.negative ?? false;
+    if (orientation === 'vertical') {
+        const x = bar.x + bar.width / 2;
+        const insideFits = bar.height >= label.height + 2 * padding;
+        if (!negative) {
+            if (bar.y - gap - label.height >= 0) {
+                return {
+                    x,
+                    y: bar.y - gap,
+                    placement: 'outside',
+                    textAnchor: 'middle',
+                    dominantBaseline: 'auto'
+                };
+            }
+            if (insideFits) {
+                return {
+                    x,
+                    y: bar.y + padding,
+                    placement: 'inside',
+                    textAnchor: 'middle',
+                    dominantBaseline: 'hanging'
+                };
+            }
+            return { x, y: 0, placement: 'hidden', textAnchor: 'middle', dominantBaseline: 'auto' };
+        }
+        const end = bar.y + bar.height;
+        if (end + gap + label.height <= plot.height) {
+            return {
+                x,
+                y: end + gap,
+                placement: 'outside',
+                textAnchor: 'middle',
+                dominantBaseline: 'hanging'
+            };
+        }
+        if (insideFits) {
+            return {
+                x,
+                y: end - padding,
+                placement: 'inside',
+                textAnchor: 'middle',
+                dominantBaseline: 'auto'
+            };
+        }
+        return { x, y: 0, placement: 'hidden', textAnchor: 'middle', dominantBaseline: 'auto' };
+    }
+    const y = bar.y + bar.height / 2;
+    // A sub-band thinner than the label height cannot host a legible label in
+    // either position (generalises the old `bar.height >= 13` special case).
+    if (bar.height < label.height) {
+        return { x: 0, y, placement: 'hidden', textAnchor: 'start', dominantBaseline: 'middle' };
+    }
+    const insideFits = bar.width >= label.width + 2 * padding;
+    if (!negative) {
+        const end = bar.x + bar.width;
+        if (end + gap + label.width <= plot.width) {
+            return {
+                x: end + gap,
+                y,
+                placement: 'outside',
+                textAnchor: 'start',
+                dominantBaseline: 'middle'
+            };
+        }
+        if (insideFits) {
+            return {
+                x: end - padding,
+                y,
+                placement: 'inside',
+                textAnchor: 'end',
+                dominantBaseline: 'middle'
+            };
+        }
+        return { x: 0, y, placement: 'hidden', textAnchor: 'start', dominantBaseline: 'middle' };
+    }
+    if (bar.x - gap - label.width >= 0) {
+        return {
+            x: bar.x - gap,
+            y,
+            placement: 'outside',
+            textAnchor: 'end',
+            dominantBaseline: 'middle'
+        };
+    }
+    if (insideFits) {
+        return {
+            x: bar.x + padding,
+            y,
+            placement: 'inside',
+            textAnchor: 'start',
+            dominantBaseline: 'middle'
+        };
+    }
+    return { x: 0, y, placement: 'hidden', textAnchor: 'start', dominantBaseline: 'middle' };
+}
+/** Center a label inside a segment (stacked bars, funnel stages); hide when it cannot fit. */
+export function resolveInsideLabel(opts) {
+    const { bar, label } = opts;
+    const padding = opts.padding ?? 4;
+    const fits = bar.width >= label.width + 2 * padding && bar.height >= label.height + 2 * padding;
+    return {
+        x: bar.x + bar.width / 2,
+        y: bar.y + bar.height / 2,
+        placement: fits ? 'inside' : 'hidden',
+        textAnchor: 'middle',
+        dominantBaseline: 'middle'
+    };
+}
+/** Line/area point-value labels: above the point, flipped below at the plot top, thinned by density. */
+export function resolvePointLabels(opts) {
+    const gap = opts.gap ?? 8;
+    const n = opts.points.length;
+    // Thinning cadence from the tightest real gap between consecutive points —
+    // non-uniform x data must thin for its densest run, not the average spread.
+    let step = Number.POSITIVE_INFINITY;
+    for (let i = 1; i < n; i++) {
+        step = Math.min(step, Math.abs(opts.points[i].x - opts.points[i - 1].x));
+    }
+    const maxWidth = opts.labels.reduce((m, l) => Math.max(m, l.width), 0);
+    const every = Math.max(1, Math.ceil((maxWidth + 4) / step));
+    return opts.points.map((point, i) => {
+        const label = opts.labels[i] ?? { width: 0, height: 0 };
+        const flip = point.y - gap - label.height < 0;
+        return {
+            x: point.x,
+            y: flip ? point.y + gap : point.y - gap,
+            visible: i % every === 0,
+            dominantBaseline: flip ? 'hanging' : 'auto'
+        };
+    });
+}
+/**
+ * Axis tick-label crowding chain: horizontal → rotate -45° → thin to every Nth,
+ * where N is the smallest integer such that rotated labels no longer overlap.
+ */
+export function thinTicks(opts) {
+    const gap = opts.gap ?? 8;
+    const maxWidth = opts.labelWidths.reduce((m, w) => Math.max(m, w), 0);
+    if (opts.step <= 0) {
+        return { rotate: false, every: 1 };
+    }
+    if (maxWidth + gap <= opts.step) {
+        return { rotate: false, every: 1 };
+    }
+    // A -45°-rotated label's horizontal footprint is governed by its line height
+    // projected onto the axis: height * √2.
+    const rotatedFootprint = opts.labelHeight * Math.SQRT2 + gap;
+    return { rotate: true, every: Math.max(1, Math.ceil(rotatedFootprint / opts.step)) };
+}
+/** Measurement-based ellipsis truncation; empty string when fewer than 2 chars fit. */
+export function truncateToWidth(text, maxWidth, font) {
+    if (measureText(text, font).width <= maxWidth) {
+        return text;
+    }
+    let lo = 0;
+    let hi = text.length;
+    while (lo < hi) {
+        const mid = Math.ceil((lo + hi) / 2);
+        if (measureText(text.slice(0, mid) + '…', font).width <= maxWidth) {
+            lo = mid;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    return lo >= 2 ? text.slice(0, lo) + '…' : '';
+}
+/** Convert an anchored SVG text placement into its bounding rect for collision checks. */
+export function placedLabelRect(p, label) {
+    const x = p.textAnchor === 'middle'
+        ? p.x - label.width / 2
+        : p.textAnchor === 'end'
+            ? p.x - label.width
+            : p.x;
+    const y = p.dominantBaseline === 'middle'
+        ? p.y - label.height / 2
+        : p.dominantBaseline === 'hanging'
+            ? p.y
+            : p.y - label.height;
+    return { x, y, width: label.width, height: label.height };
+}
+/**
+ * Highcharts `allowOverlap: false` equivalent: greedy first-come pass that hides
+ * any label whose rect intersects an already-kept label. `null` entries are
+ * pre-hidden labels and always return false.
+ */
+export function dropOverlapping(rects, gap = 2) {
+    const kept = [];
+    return rects.map((r) => {
+        if (r === null) {
+            return false;
+        }
+        const collides = kept.some((k) => r.x < k.x + k.width + gap &&
+            k.x < r.x + r.width + gap &&
+            r.y < k.y + k.height + gap &&
+            k.y < r.y + r.height + gap);
+        if (collides) {
+            return false;
+        }
+        kept.push(r);
+        return true;
+    });
+}

package/dist/_chart/measure.d.ts

@@ -0,0 +1,12 @@
+export type FontSpec = {
+    /** Font size in px. */
+    size: number;
+    family?: string;
+    weight?: number | string;
+};
+export declare function measureText(text: string, font: FontSpec): {
+    width: number;
+    height: number;
+};
+/** Reads a px-valued CSS custom property off an element, with an SSR-safe fallback. */
+export declare function readCssVarPx(el: Element | null, name: string, fallback: number): number;

package/dist/_chart/measure.js

@@ -0,0 +1,46 @@
+const DEFAULT_FAMILY = 'system-ui, -apple-system, sans-serif';
+// Average glyph width ≈ 0.6em for UI sans fonts — only used when canvas is
+// unavailable (SSR / unit tests); the client always re-measures after mount.
+const HEURISTIC_WIDTH_PER_CHAR = 0.6;
+const LINE_HEIGHT_FACTOR = 1.2;
+const CACHE_LIMIT = 4000;
+let ctx = null;
+const cache = new Map();
+function context() {
+    if (ctx !== null) {
+        return ctx;
+    }
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    ctx = document.createElement('canvas').getContext('2d');
+    return ctx;
+}
+export function measureText(text, font) {
+    const height = font.size * LINE_HEIGHT_FACTOR;
+    // NUL-delimited so free-form family/text strings (which may contain any
+    // printable character, e.g. "12,000 | 100%") can never collide across fields.
+    const key = [font.weight ?? 400, font.size, font.family ?? '', text].join('\u0000');
+    const cached = cache.get(key);
+    if (typeof cached !== 'undefined') {
+        return { width: cached, height };
+    }
+    const c = context();
+    const width = c === null
+        ? text.length * font.size * HEURISTIC_WIDTH_PER_CHAR
+        : ((c.font = `${font.weight ?? 400} ${font.size}px ${font.family ?? DEFAULT_FAMILY}`),
+            c.measureText(text).width);
+    if (cache.size >= CACHE_LIMIT) {
+        cache.clear();
+    }
+    cache.set(key, width);
+    return { width, height };
+}
+/** Reads a px-valued CSS custom property off an element, with an SSR-safe fallback. */
+export function readCssVarPx(el, name, fallback) {
+    if (typeof window === 'undefined' || el === null) {
+        return fallback;
+    }
+    const parsed = parseFloat(getComputedStyle(el).getPropertyValue(name));
+    return Number.isNaN(parsed) ? fallback : parsed;
+}

package/dist/_chart/scales.d.ts

@@ -1,5 +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 computeLinearTicks(domain: [number, number], count?: number, integer?: boolean): 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

@@ -9,7 +9,7 @@ export function niceLinearDomain(min, max) {
     const niceMax = Math.ceil(max / step) * step;
     return [niceMin, niceMax];
 }
-export function computeLinearTicks(domain, count = 5) {
+export function computeLinearTicks(domain, count = 5, integer = false) {
     const [min, max] = domain;
     if (min === max) {
         return [min];
@@ -31,6 +31,11 @@ export function computeLinearTicks(domain, count = 5) {
     else {
         step = base * 10;
     }
+    // Category axes (Highcharts semantics): ticks sit on whole category
+    // positions, so a fractional step would repeat labels — floor it to 1.
+    if (integer && step < 1) {
+        step = 1;
+    }
     const ticks = [];
     let tick = Math.ceil(min / step) * step;
     while (tick <= max + step * 0.001) {
@@ -48,7 +53,7 @@ export function createLinearScale(domain, range) {
     return Object.assign(fn, {
         domain,
         range,
-        ticks: (count) => computeLinearTicks(domain, count),
+        ticks: (count, integer) => computeLinearTicks(domain, count, integer),
         invert: (pixel) => d0 + ((pixel - r0) / rSpan) * dSpan
     });
 }

package/dist/_chart/tooltipPosition.d.ts

@@ -0,0 +1,22 @@
+import type { TooltipAnchor } from './types';
+type Size = {
+    width: number;
+    height: number;
+};
+/**
+ * Pure tooltip placement: anchor mode positions relative to a data point with
+ * side-flipping; cursor mode follows the pointer with flip-then-clamp on both
+ * axes. All coordinates are relative to the positioned container.
+ */
+export declare function computeTooltipPosition(opts: {
+    mouseX?: number;
+    mouseY?: number;
+    anchor?: TooltipAnchor | null;
+    tooltip: Size;
+    container: Size;
+    offset?: number;
+}): {
+    left: number;
+    top: number;
+};
+export {};

package/dist/_chart/tooltipPosition.js

@@ -0,0 +1,49 @@
+const clamp = (value, max) => Math.max(0, Number.isFinite(max) ? Math.min(value, max) : value);
+/**
+ * Pure tooltip placement: anchor mode positions relative to a data point with
+ * side-flipping; cursor mode follows the pointer with flip-then-clamp on both
+ * axes. All coordinates are relative to the positioned container.
+ */
+export function computeTooltipPosition(opts) {
+    const offset = opts.offset ?? 12;
+    const { tooltip, container } = opts;
+    const maxLeft = container.width - tooltip.width;
+    const maxTop = container.height - tooltip.height;
+    const a = opts.anchor ?? null;
+    if (a !== null) {
+        let left;
+        let top;
+        if (a.side === 'top' || a.side === 'bottom') {
+            left = a.x - tooltip.width / 2;
+            top = a.side === 'top' ? a.y - tooltip.height - offset : a.y + offset;
+            if (a.side === 'top' && top < 0) {
+                top = a.y + offset;
+            }
+            else if (a.side === 'bottom' && top > maxTop) {
+                top = a.y - tooltip.height - offset;
+            }
+        }
+        else {
+            top = a.y - tooltip.height / 2;
+            left = a.side === 'right' ? a.x + offset : a.x - tooltip.width - offset;
+            if (a.side === 'right' && left > maxLeft) {
+                left = a.x - tooltip.width - offset;
+            }
+            else if (a.side === 'left' && left < 0) {
+                left = a.x + offset;
+            }
+        }
+        return { left: clamp(left, maxLeft), top: clamp(top, maxTop) };
+    }
+    const mouseX = opts.mouseX ?? 0;
+    const mouseY = opts.mouseY ?? 0;
+    let left = mouseX + offset;
+    if (left + tooltip.width > container.width) {
+        left = mouseX - tooltip.width - offset;
+    }
+    let top = mouseY - offset;
+    if (top + tooltip.height > container.height) {
+        top = mouseY - tooltip.height - offset;
+    }
+    return { left: clamp(left, maxLeft), top: clamp(top, maxTop) };
+}

package/dist/_chart/types.d.ts

@@ -39,7 +39,7 @@ export type LinearScale = {
     (value: number): number;
     domain: [number, number];
     range: [number, number];
-    ticks: (count?: number) => number[];
+    ticks: (count?: number, integer?: boolean) => number[];
     invert: (pixel: number) => number;
 };
 export type BandScale = {
@@ -124,6 +124,14 @@ export type TooltipData = {
 export type LegendItem = {
     label: string;
     color: string;
+    /** True when the series is toggled off via an interactive legend. */
+    hidden?: boolean;
+};
+/** Data-space anchor for point/category-anchored tooltips (coords are container px). */
+export type TooltipAnchor = {
+    x: number;
+    y: number;
+    side: 'top' | 'right' | 'bottom' | 'left';
 };
 export type ChartContainerProperties = {
     width?: number;
@@ -143,18 +151,38 @@ export type AxisProperties = {
     showGridlines?: boolean;
     gridlineLength?: number;
     label?: string;
+    /** Rotate horizontal-axis tick labels -45° (crowding fallback). */
+    rotateTicks?: boolean;
+    /** Render every Nth tick label (tick marks always render). */
+    tickEvery?: number;
+    /** y-offset of the bottom axis title (grows when tick labels rotate). */
+    labelOffset?: number;
+    /** Clamp linear tick steps to whole numbers (category axes). */
+    integerTicks?: boolean;
     classes?: string;
 };
 export type ChartTooltipProperties = {
     data: TooltipData | null;
     mouseX?: number;
     mouseY?: number;
+    /** When set, the tooltip anchors to this point instead of following the cursor. */
+    anchor?: TooltipAnchor | null;
+    /** Render into document.body with position:fixed, clamped to the viewport. */
+    portal?: boolean;
+    /** The positioned chart wrapper; required to convert coords in portal mode. */
+    originEl?: HTMLElement | null;
+    /** Strip the tooltip card chrome (used when `content` supplies its own UI). */
+    unstyled?: boolean;
+    /** Custom content rendered inside the positioned (and clamped) wrapper. */
+    content?: Snippet;
     customSnippet?: Snippet<[TooltipData]>;
     classes?: string;
 };
 export type LegendProperties = {
     items: LegendItem[];
     position?: 'top' | 'bottom';
+    /** When provided, items render as toggle buttons and call back with their index. */
+    onToggle?: (index: number) => void;
     customSnippet?: Snippet<[LegendItem[]]>;
     classes?: string;
 };

package/package.json

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