@juspay/svelte-ui-components 2.86.0 → 2.87.0

package/dist/LineChart/properties.d.ts

@@ -103,6 +103,15 @@ export type OptionalLineChartProperties = {
     tooltipSnippet?: Snippet<[LineChartTooltipContext]>;
     /** Content rendered when all series are empty. */
     empty?: Snippet;
+    /** One tooltip listing every series at the hovered x (Highcharts shared tooltip).
+     *  Defaults to true for multi-series charts; single-series behavior is unchanged. */
+    sharedTooltip?: boolean;
+    /** Legend items become click/keyboard toggles for series visibility. */
+    interactiveLegend?: boolean;
+    /** Hide the legend when the measured chart width is below this px value; 0 disables. */
+    hideLegendBelow?: number;
+    /** Render the tooltip into document.body so scroll/overflow ancestors never clip it. */
+    tooltipPortal?: boolean;
     /** Value for the data-pw attribute on the chart container. */
     testId?: string;
     /** CSS class string applied to the top-level element. */

package/dist/_chart/Axis.svelte

@@ -10,6 +10,10 @@
     showGridlines = false,
     gridlineLength = 0,
     label,
+    rotateTicks = false,
+    tickEvery = 1,
+    labelOffset = 36,
+    integerTicks = false,
     classes
   }: AxisProperties = $props();
 
@@ -19,7 +23,7 @@
 
   let tickValues = $derived.by(() => {
     if ('ticks' in scale && typeof scale.ticks === 'function') {
-      return scale.ticks(tickCount);
+      return scale.ticks(tickCount, integerTicks);
     }
     if ('domain' in scale && Array.isArray(scale.domain)) {
       return scale.domain;
@@ -47,14 +51,27 @@
       {@const x = positionTick(tick)}
       <g class="tick" transform="translate({x}, 0)">
         <line class="tick-mark" y2={orientation === 'bottom' ? TICK_SIZE : -TICK_SIZE} />
-        <text
-          class="tick-label"
-          y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
-          text-anchor="middle"
-          dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
-        >
-          {format(tick)}
-        </text>
+        {#if i % tickEvery === 0}
+          {#if rotateTicks && orientation === 'bottom'}
+            <text
+              class="tick-label"
+              transform="translate(0, {TICK_SIZE + 4}) rotate(-45)"
+              text-anchor="end"
+              dominant-baseline="auto"
+            >
+              {format(tick)}
+            </text>
+          {:else}
+            <text
+              class="tick-label"
+              y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
+              text-anchor="middle"
+              dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
+            >
+              {format(tick)}
+            </text>
+          {/if}
+        {/if}
         {#if showGridlines && gridlineLength > 0}
           <line
             class="gridline"
@@ -68,7 +85,7 @@
       <text
         class="axis-label"
         x={(scale.range[0] + scale.range[1]) / 2}
-        y={orientation === 'bottom' ? 36 : -30}
+        y={orientation === 'bottom' ? labelOffset : -30}
         text-anchor="middle"
       >
         {label}
@@ -113,30 +130,30 @@
 
 <style>
   .axis-line {
-    stroke: var(--chart-axis-color, #666);
+    stroke: var(--chart-axis-color, light-dark(#666, #9ca3af));
     stroke-width: var(--chart-axis-stroke-width, 1);
   }
 
   .tick-mark {
-    stroke: var(--chart-axis-color, #666);
+    stroke: var(--chart-axis-color, light-dark(#666, #9ca3af));
     stroke-width: var(--chart-axis-stroke-width, 1);
   }
 
   .tick-label {
-    fill: var(--chart-axis-color, #666);
+    fill: var(--chart-axis-color, light-dark(#666, #9ca3af));
     font-size: var(--chart-axis-font-size, 11px);
     font-family: var(--chart-axis-font-family, inherit);
   }
 
   .axis-label {
-    fill: var(--chart-axis-label-color, #333);
+    fill: var(--chart-axis-label-color, light-dark(#333, #e5e7eb));
     font-size: var(--chart-axis-label-font-size, 12px);
     font-family: var(--chart-axis-font-family, inherit);
     font-weight: 500;
   }
 
   .gridline {
-    stroke: var(--chart-gridline-color, #e0e0e0);
+    stroke: var(--chart-gridline-color, light-dark(#e0e0e0, #374151));
     stroke-opacity: var(--chart-gridline-opacity, 0.5);
     stroke-dasharray: var(--chart-gridline-dash, 4 4);
   }

package/dist/_chart/ChartTooltip.svelte

@@ -1,83 +1,161 @@
 <script lang="ts">
-  import type { ChartTooltipProperties } from './types';
+  import type { ChartTooltipProperties, TooltipData } from './types';
+  import { computeTooltipPosition } from './tooltipPosition';
 
-  let { data, mouseX = 0, mouseY = 0, customSnippet, classes }: ChartTooltipProperties = $props();
-
-  const OFFSET = 12;
+  let {
+    data,
+    mouseX = 0,
+    mouseY = 0,
+    anchor = null,
+    portal = false,
+    originEl = null,
+    unstyled = false,
+    content,
+    customSnippet,
+    classes
+  }: ChartTooltipProperties = $props();
 
   let tooltipEl = $state<HTMLDivElement | null>(null);
   let tooltipWidth = $state(0);
   let tooltipHeight = $state(0);
+  // Portal position depends on untracked DOM reads (originEl rect, viewport
+  // size); bump a tick on scroll/resize so the $derived re-runs while open.
+  let portalTick = $state(0);
 
-  // Clamp against the positioned chart container so the tooltip never spills past
-  // (and gets clipped by) an overflow:hidden edge. Re-read on each measure/move.
-  const containerWidth = $derived(tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY);
-  const containerHeight = $derived(
-    tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
-  );
-
-  // Horizontal: flip to the left of the cursor when it would overflow the right edge.
-  const left = $derived.by(() => {
-    let value = mouseX + OFFSET;
-    if (value + tooltipWidth > containerWidth) {
-      value = mouseX - tooltipWidth - OFFSET;
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    if (!portal || data === null || typeof window === 'undefined') {
+      return;
     }
-    return Math.max(0, value);
+    const bump = () => {
+      portalTick += 1;
+    };
+    window.addEventListener('scroll', bump, { capture: true, passive: true });
+    window.addEventListener('resize', bump);
+    return () => {
+      window.removeEventListener('scroll', bump, { capture: true });
+      window.removeEventListener('resize', bump);
+    };
   });
 
-  // Vertical: keep the tooltip within the container's top and bottom edges.
-  const top = $derived.by(() => {
-    let value = mouseY - OFFSET;
-    if (value + tooltipHeight > containerHeight) {
-      value = containerHeight - tooltipHeight;
+  /**
+   * Svelte action: relocates the tooltip to document.body so a position:fixed
+   * tooltip is never clipped by an overflow/scroll ancestor. `use:` actions
+   * never run during SSR.
+   */
+  const portalToBody = (node: HTMLElement) => {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+  };
+
+  const pos = $derived.by(() => {
+    const tooltip = { width: tooltipWidth, height: tooltipHeight };
+    if (portal) {
+      void portalTick;
+      // Convert container coords to viewport coords and clamp to the viewport.
+      const rect = originEl?.getBoundingClientRect();
+      const dx = rect?.left ?? 0;
+      const dy = rect?.top ?? 0;
+      const container =
+        typeof window === 'undefined'
+          ? { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY }
+          : { width: window.innerWidth, height: window.innerHeight };
+      return computeTooltipPosition({
+        mouseX: mouseX + dx,
+        mouseY: mouseY + dy,
+        anchor: anchor === null ? null : { ...anchor, x: anchor.x + dx, y: anchor.y + dy },
+        tooltip,
+        container
+      });
     }
-    return Math.max(0, value);
+    const container = {
+      width: tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY,
+      height: tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
+    };
+    return computeTooltipPosition({ mouseX, mouseY, anchor, tooltip, container });
   });
 </script>
 
-{#if data !== null}
-  <div
-    bind:this={tooltipEl}
-    bind:clientWidth={tooltipWidth}
-    bind:clientHeight={tooltipHeight}
-    class="chart-tooltip {classes ?? ''}"
-    style="left: {left}px; top: {top}px;"
-  >
-    {#if typeof customSnippet === 'function'}
-      {@render customSnippet(data)}
-    {:else}
-      {#if data.title}
-        <div class="tooltip-title">{data.title}</div>
-      {/if}
-      {#each data.items as item, i (i)}
-        <div class="tooltip-item">
-          {#if item.color}
-            <span class="tooltip-swatch" style="background: {item.color}"></span>
-          {/if}
-          <span class="tooltip-label">{item.label}</span>
-          <span class="tooltip-value">{item.value}</span>
-        </div>
-      {/each}
+{#snippet inner(tooltipData: TooltipData)}
+  {#if content}
+    {@render content()}
+  {:else if typeof customSnippet === 'function'}
+    {@render customSnippet(tooltipData)}
+  {:else}
+    {#if tooltipData.title}
+      <div class="tooltip-title">{tooltipData.title}</div>
     {/if}
-  </div>
+    {#each tooltipData.items as item, i (i)}
+      <div class="tooltip-item">
+        {#if item.color}
+          <span class="tooltip-swatch" style="background: {item.color}"></span>
+        {/if}
+        <span class="tooltip-label">{item.label}</span>
+        <span class="tooltip-value">{item.value}</span>
+      </div>
+    {/each}
+  {/if}
+{/snippet}
+
+{#if data !== null}
+  {#if portal}
+    <div
+      bind:this={tooltipEl}
+      bind:clientWidth={tooltipWidth}
+      bind:clientHeight={tooltipHeight}
+      class="chart-tooltip portal {unstyled ? 'unstyled' : ''} {classes ?? ''}"
+      style="left: {pos.left}px; top: {pos.top}px;"
+      use:portalToBody
+    >
+      {@render inner(data)}
+    </div>
+  {:else}
+    <div
+      bind:this={tooltipEl}
+      bind:clientWidth={tooltipWidth}
+      bind:clientHeight={tooltipHeight}
+      class="chart-tooltip {unstyled ? 'unstyled' : ''} {classes ?? ''}"
+      style="left: {pos.left}px; top: {pos.top}px;"
+    >
+      {@render inner(data)}
+    </div>
+  {/if}
 {/if}
 
 <style>
   .chart-tooltip {
     position: absolute;
     z-index: var(--chart-tooltip-z-index, 10);
-    background: var(--chart-tooltip-background, rgba(0, 0, 0, 0.85));
-    color: var(--chart-tooltip-color, #fff);
+    background: var(--chart-tooltip-background, light-dark(rgba(0, 0, 0, 0.85), #1f2937));
+    color: var(--chart-tooltip-color, light-dark(#fff, #f3f4f6));
     font-size: var(--chart-tooltip-font-size, 12px);
     font-family: var(--chart-font-family, inherit);
     padding: var(--chart-tooltip-padding, 8px 12px);
     border-radius: var(--chart-tooltip-border-radius, var(--radius, 4px));
     box-shadow: var(--chart-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
+    border: 1px solid
+      var(
+        --chart-tooltip-border-color,
+        light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.08))
+      );
     pointer-events: none;
     max-width: var(--chart-tooltip-max-width, 280px);
     width: fit-content;
   }
 
+  .chart-tooltip.portal {
+    position: fixed;
+  }
+
+  .chart-tooltip.unstyled {
+    background: none;
+    padding: 0;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    max-width: none;
+  }
+
   .tooltip-title {
     font-weight: 600;
     margin-bottom: 4px;

package/dist/_chart/Legend.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { LegendProperties } from './types';
 
-  let { items, position = 'bottom', customSnippet, classes }: LegendProperties = $props();
+  let { items, position = 'bottom', onToggle, customSnippet, classes }: LegendProperties = $props();
 </script>
 
 {#if items.length > 0}
@@ -10,10 +10,23 @@
       {@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>
+        {#if typeof onToggle === 'function'}
+          <button
+            type="button"
+            class="legend-item legend-toggle"
+            class:legend-hidden={item.hidden}
+            aria-pressed={!item.hidden}
+            onclick={() => onToggle(i)}
+          >
+            <span class="legend-swatch" style="background: {item.color}"></span>
+            <span class="legend-label">{item.label}</span>
+          </button>
+        {:else}
+          <div class="legend-item">
+            <span class="legend-swatch" style="background: {item.color}"></span>
+            <span class="legend-label">{item.label}</span>
+          </div>
+        {/if}
       {/each}
     {/if}
   </div>
@@ -54,6 +67,23 @@
 
   .legend-label {
     font-size: var(--chart-legend-font-size, 12px);
-    color: var(--chart-legend-color, #333);
+    color: var(--chart-legend-color, light-dark(#333, #e5e7eb));
+  }
+
+  .legend-toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .legend-hidden .legend-swatch {
+    opacity: 0.25;
+  }
+
+  .legend-hidden .legend-label {
+    color: var(--chart-legend-hidden-color, light-dark(#bbb, #555));
   }
 </style>

package/dist/_chart/geometry.d.ts

@@ -1,25 +1,35 @@
 import type { Margin, ChartDimensions, PieSliceLayout, ComputedSankeyNode, ComputedSankeyLink, StackedPoint } from './types';
+import { type FontSpec } from './measure';
 export declare function computeChartDimensions(width: number, height: number, margin?: Partial<Margin>): ChartDimensions;
+export type AutoLayoutInput = {
+    width: number;
+    height: number;
+    yTickLabels: string[];
+    xTickLabels: string[];
+    y2TickLabels?: string[];
+    font?: FontSpec;
+    hasXAxisLabel?: boolean;
+    hasYAxisLabel?: boolean;
+    hasY2AxisLabel?: boolean;
+    base?: Partial<Margin>;
+};
+export type AutoLayout = ChartDimensions & {
+    xRotate: boolean;
+    xEvery: number;
+    /**
+     * Baseline y for the bottom-axis title, already inside the reserved title
+     * band — pass straight to Axis.labelOffset, no extra padding needed.
+     */
+    xLabelOffset: number;
+};
 /**
- * Measures rendered text width via a shared offscreen canvas context.
- * Returns null when measurement is unavailable (SSR, or the environment
- * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
- * a fixed layout instead of acting on a bogus 0.
- */
-export declare function measureTextWidth(text: string, font: string): number | null;
-/**
- * Left margin for a horizontal bar chart's category axis, sized to fit the
- * widest category label. Category tick labels render right-aligned 10px left
- * of the axis line (tick mark 6px + 4px gap), so any label wider than
- * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
- *
- * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
- *   labels already fit keep their exact current layout.
- * - Caps at 45% of the chart width so one pathological label cannot crush the
- *   plot area; past the cap the label bleeds as before, but the plot survives.
- * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
+ * Measured, Highcharts-style margins: gutters grow to fit formatted tick labels
+ * (instead of clipping) and the bottom axis rotates/thins its labels when the
+ * per-category step is too narrow. Order matters to avoid feedback loops:
+ * left/right derive from label text only, then innerWidth decides x rotation,
+ * then bottom derives from the rotation outcome.
  */
-export declare function computeHorizontalCategoryGutter(widestLabelWidth: number | null, chartWidth: number, fallback?: number): number;
+export declare function computeAutoLayout(input: AutoLayoutInput): AutoLayout;
 export declare function computePieLayout(data: Array<{
     label: string;
     value: number;

package/dist/_chart/geometry.js

@@ -1,3 +1,5 @@
+import { measureText } from './measure';
+import { thinTicks } from './labels';
 export function computeChartDimensions(width, height, margin = {}) {
     const m = {
         top: margin.top ?? 20,
@@ -13,50 +15,53 @@ export function computeChartDimensions(width, height, margin = {}) {
         innerHeight: Math.max(0, height - m.top - m.bottom)
     };
 }
-// ── Text measurement ────────────────────────────────────────────
-let textMeasurementContext = null;
+// Offset from the axis line to the tick-label text (Axis.svelte TICK_SIZE + 4).
+const TICK_PAD = 10;
+// Vertical space reserved for a rotated/horizontal axis title.
+const TITLE_BAND = 18;
+// Cap on how deep rotated x labels may grow the bottom margin (long labels crop).
+const MAX_ROTATED_DEPTH = 72;
 /**
- * Measures rendered text width via a shared offscreen canvas context.
- * Returns null when measurement is unavailable (SSR, or the environment
- * provides no working 2D canvas — e.g. jsdom) so callers can fall back to
- * a fixed layout instead of acting on a bogus 0.
+ * Measured, Highcharts-style margins: gutters grow to fit formatted tick labels
+ * (instead of clipping) and the bottom axis rotates/thins its labels when the
+ * per-category step is too narrow. Order matters to avoid feedback loops:
+ * left/right derive from label text only, then innerWidth decides x rotation,
+ * then bottom derives from the rotation outcome.
  */
-export function measureTextWidth(text, font) {
-    if (typeof document === 'undefined') {
-        return null;
-    }
-    if (textMeasurementContext === null) {
-        textMeasurementContext = document.createElement('canvas').getContext('2d');
-    }
-    if (textMeasurementContext === null) {
-        return null;
-    }
-    textMeasurementContext.font = font;
-    const width = textMeasurementContext.measureText(text).width;
-    // jsdom's canvas stub reports 0 for any text; treat that as "cannot measure".
-    return width > 0 ? width : null;
-}
-/**
- * Left margin for a horizontal bar chart's category axis, sized to fit the
- * widest category label. Category tick labels render right-aligned 10px left
- * of the axis line (tick mark 6px + 4px gap), so any label wider than
- * `margin.left - 10` bleeds out of the SVG and gets clipped by the page.
- *
- * - Never shrinks below `fallback` (the legacy fixed gutter), so charts whose
- *   labels already fit keep their exact current layout.
- * - Caps at 45% of the chart width so one pathological label cannot crush the
- *   plot area; past the cap the label bleeds as before, but the plot survives.
- * - `widestLabelWidth === null` (SSR / unmeasurable) keeps the legacy gutter.
- */
-export function computeHorizontalCategoryGutter(widestLabelWidth, chartWidth, fallback = 50) {
-    if (widestLabelWidth === null) {
-        return fallback;
-    }
-    const tickLabelInset = 10;
-    const breathingPad = 4;
-    const cap = Math.max(fallback, chartWidth * 0.45);
-    const fitted = widestLabelWidth + tickLabelInset + breathingPad;
-    return Math.round(Math.min(Math.max(fallback, fitted), cap));
+export function computeAutoLayout(input) {
+    const font = input.font ?? { size: 11 };
+    const labelHeight = font.size * 1.2;
+    const widthOf = (labels) => labels.reduce((max, t) => Math.max(max, measureText(t, font).width), 0);
+    const left = Math.max(input.base?.left ?? 0, input.yTickLabels.length > 0
+        ? Math.ceil(widthOf(input.yTickLabels)) +
+            TICK_PAD +
+            6 +
+            (input.hasYAxisLabel ? TITLE_BAND : 0)
+        : 0);
+    const xWidths = input.xTickLabels.map((t) => measureText(t, font).width);
+    const maxXWidth = xWidths.reduce((m, w) => Math.max(m, w), 0);
+    const y2Width = typeof input.y2TickLabels !== 'undefined' && input.y2TickLabels.length > 0
+        ? Math.ceil(widthOf(input.y2TickLabels)) +
+            TICK_PAD +
+            6 +
+            (input.hasY2AxisLabel ? TITLE_BAND : 0)
+        : 0;
+    // Right gutter: the right axis when present, else half the last x label so
+    // edge labels don't clip.
+    const right = Math.max(input.base?.right ?? 0, y2Width, Math.ceil(maxXWidth / 2) + 8);
+    const innerWidth = Math.max(0, input.width - left - right);
+    const step = input.xTickLabels.length > 0 ? innerWidth / input.xTickLabels.length : innerWidth;
+    const { rotate, every } = input.xTickLabels.length > 0
+        ? thinTicks({ labelWidths: xWidths, labelHeight, step })
+        : { rotate: false, every: 1 };
+    const rotatedDepth = rotate
+        ? Math.min(MAX_ROTATED_DEPTH, Math.ceil(maxXWidth * Math.SQRT1_2))
+        : 0;
+    const xLabelDepth = input.xTickLabels.length > 0 ? TICK_PAD + (rotate ? rotatedDepth : Math.ceil(labelHeight)) : 0;
+    const bottom = Math.max(input.base?.bottom ?? 0, xLabelDepth + 6 + (input.hasXAxisLabel ? TITLE_BAND : 0));
+    const top = Math.max(input.base?.top ?? 0, Math.ceil(labelHeight / 2) + 8);
+    const dims = computeChartDimensions(input.width, input.height, { top, right, bottom, left });
+    return { ...dims, xRotate: rotate, xEvery: every, xLabelOffset: xLabelDepth + TITLE_BAND };
 }
 // ── Pie layout ──────────────────────────────────────────────────
 export function computePieLayout(data, startAngle = -Math.PI / 2, padAngle = 0) {

package/dist/_chart/interactions.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Shared pointer-interaction helpers used by the chart components.
+ */
+export type RelativePointerPosition = {
+    x: number;
+    y: number;
+};
+/**
+ * Pointer position relative to the top-left corner of `el`, or null when the
+ * element is not mounted yet.
+ */
+export declare function pointerPositionIn(el: HTMLElement | null, event: PointerEvent): RelativePointerPosition | null;
+/**
+ * Touch taps never fire pointerleave, so a tap-opened tooltip would otherwise
+ * stay stuck: dismiss when a pointerdown lands outside `containerEl`.
+ *
+ * Attaches a window listener and returns its cleanup, making it directly
+ * usable as an `$effect` body's return value. No-op during SSR.
+ */
+export declare function dismissOnOutsidePointerDown(containerEl: HTMLElement | null, onDismiss: () => void): () => void;

package/dist/_chart/interactions.js

@@ -0,0 +1,34 @@
+/**
+ * Shared pointer-interaction helpers used by the chart components.
+ */
+/**
+ * Pointer position relative to the top-left corner of `el`, or null when the
+ * element is not mounted yet.
+ */
+export function pointerPositionIn(el, event) {
+    if (el === null) {
+        return null;
+    }
+    const rect = el.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+}
+/**
+ * Touch taps never fire pointerleave, so a tap-opened tooltip would otherwise
+ * stay stuck: dismiss when a pointerdown lands outside `containerEl`.
+ *
+ * Attaches a window listener and returns its cleanup, making it directly
+ * usable as an `$effect` body's return value. No-op during SSR.
+ */
+export function dismissOnOutsidePointerDown(containerEl, onDismiss) {
+    if (typeof window === 'undefined') {
+        return () => { };
+    }
+    const dismiss = (event) => {
+        const target = event.target;
+        if (containerEl !== null && !(target instanceof Node && containerEl.contains(target))) {
+            onDismiss();
+        }
+    };
+    window.addEventListener('pointerdown', dismiss);
+    return () => window.removeEventListener('pointerdown', dismiss);
+}