@juspay/svelte-ui-components 2.31.0 → 2.32.0

package/dist/LineChart/LineChart.svelte

@@ -0,0 +1,361 @@
+<script lang="ts">
+  import type { LineChartProperties, LineChartTooltipContext } from './properties';
+  import ChartContainer from '../_chart/ChartContainer.svelte';
+  import Axis from '../_chart/Axis.svelte';
+  import ChartTooltip from '../_chart/ChartTooltip.svelte';
+  import Legend from '../_chart/Legend.svelte';
+  import { createLinearScale, niceLinearDomain } from '../_chart/scales';
+  import { computeChartDimensions } from '../_chart/geometry';
+  import { linePath } from '../_chart/paths';
+  import { getColor } from '../_chart/colors';
+  import { formatNumber } from '../_chart/format';
+  import type { LegendItem, Point } from '../_chart/types';
+
+  // ── Props ──────────────────────────────────────────────────────
+
+  let {
+    series,
+    curve = 'monotone',
+    showDots = true,
+    showValues = false,
+    dotRadius = 4,
+    strokeWidth = 2,
+    showGridlines = true,
+    showXAxis = true,
+    showYAxis = true,
+    showLegend = false,
+    xDomain,
+    yDomain,
+    xAxisLabel,
+    yAxisLabel,
+    xTickFormat,
+    yTickFormat,
+    aspectRatio = 16 / 9,
+    tooltipSnippet,
+    empty,
+    onpointclick,
+    onpointhover,
+    testId,
+    classes
+  }: LineChartProperties = $props();
+
+  // ── State ──────────────────────────────────────────────────────
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let chartWidth = $state(0);
+  let chartHeight = $state(0);
+  let hovered = $state<{ si: number; pi: number } | null>(null);
+  let mouseX = $state(0);
+  let mouseY = $state(0);
+
+  // ── Layout ─────────────────────────────────────────────────────
+
+  let dims = $derived(computeChartDimensions(chartWidth, chartHeight));
+
+  let isEmpty = $derived(series.length === 0 || series.every((s) => s.data.length === 0));
+
+  let xExtent = $derived.by<[number, number]>(() => {
+    if (xDomain) {
+      return xDomain;
+    }
+    const allX = series.flatMap((s) => s.data.map((d) => d.x));
+    if (allX.length === 0) {
+      return [0, 1];
+    }
+    return niceLinearDomain(Math.min(...allX), Math.max(...allX));
+  });
+  let yExtent = $derived.by<[number, number]>(() => {
+    if (yDomain) {
+      return yDomain;
+    }
+    const allY = series.flatMap((s) => s.data.map((d) => d.y));
+    if (allY.length === 0) {
+      return [0, 1];
+    }
+    return niceLinearDomain(Math.min(0, ...allY), Math.max(...allY));
+  });
+
+  let xScale = $derived(createLinearScale(xExtent, [0, dims.innerWidth]));
+  let yScale = $derived(createLinearScale(yExtent, [dims.innerHeight, 0]));
+
+  let lines = $derived(
+    series.map((s, si) => {
+      const color = s.color ?? getColor(si);
+      const points: Point[] = s.data.map((d) => ({ x: xScale(d.x), y: yScale(d.y) }));
+      return { color, points, path: linePath(points, curve) };
+    })
+  );
+
+  let legendItems = $derived<LegendItem[]>(
+    series.map((s, i) => ({ label: s.name, color: s.color ?? getColor(i) }))
+  );
+
+  // ── Tooltip ────────────────────────────────────────────────────
+
+  let hoveredPoint = $derived(
+    hovered === null ? null : (series[hovered.si]?.data[hovered.pi] ?? null)
+  );
+
+  let hoverLineX = $derived(
+    hovered === null ? null : (lines[hovered.si]?.points[hovered.pi]?.x ?? null)
+  );
+
+  let tooltipContext = $derived.by<LineChartTooltipContext | null>(() => {
+    if (hovered === null || hoveredPoint === null) {
+      return null;
+    }
+    return {
+      x: hoveredPoint.x,
+      points: series.map((s, si) => {
+        const p = s.data[hovered!.pi];
+        return {
+          name: s.name,
+          y: p?.y ?? 0,
+          color: s.color ?? getColor(si),
+          label: p?.label
+        };
+      })
+    };
+  });
+
+  let tooltipData = $derived.by(() => {
+    if (tooltipContext === null) {
+      return null;
+    }
+    return {
+      title: `x: ${formatNumber(tooltipContext.x)}`,
+      items: tooltipContext.points.map((p) => ({
+        label: p.name,
+        value: formatNumber(p.y),
+        color: p.color
+      }))
+    };
+  });
+
+  // ── Interactions ───────────────────────────────────────────────
+
+  function trackMouse(e: MouseEvent) {
+    if (containerEl === null) {
+      return;
+    }
+    const rect = containerEl.getBoundingClientRect();
+    mouseX = e.clientX - rect.left;
+    mouseY = e.clientY - rect.top;
+  }
+
+  function findNearest(plotX: number, plotY: number): { si: number; pi: number } | null {
+    if (series.length === 0) {
+      return null;
+    }
+    // Use the longest series as the index reference so hover still works when
+    // the first series is empty or shorter than the others.
+    const reference = series.reduce((a, b) => (b.data.length > a.data.length ? b : a)).data;
+    if (reference.length === 0) {
+      return null;
+    }
+    let nearestPi = 0;
+    let nearestXDist = Infinity;
+    for (let i = 0; i < reference.length; i++) {
+      const px = xScale(reference[i].x);
+      const dist = Math.abs(px - plotX);
+      if (dist < nearestXDist) {
+        nearestXDist = dist;
+        nearestPi = i;
+      }
+    }
+    let nearestSi = 0;
+    let nearestYDist = Infinity;
+    for (let si = 0; si < series.length; si++) {
+      const p = series[si].data[nearestPi];
+      if (!p) {
+        continue;
+      }
+      const py = yScale(p.y);
+      const dist = Math.abs(py - plotY);
+      if (dist < nearestYDist) {
+        nearestYDist = dist;
+        nearestSi = si;
+      }
+    }
+    return { si: nearestSi, pi: nearestPi };
+  }
+
+  function handleOverlayMove(e: MouseEvent) {
+    trackMouse(e);
+    const plotX = mouseX - dims.margin.left;
+    const plotY = mouseY - dims.margin.top;
+    const next = findNearest(plotX, plotY);
+    if (next === null) {
+      hovered = null;
+      return;
+    }
+    if (hovered === null || hovered.si !== next.si || hovered.pi !== next.pi) {
+      hovered = next;
+      const point = series[next.si].data[next.pi];
+      onpointhover?.({ seriesIndex: next.si, pointIndex: next.pi, point });
+    }
+  }
+
+  function handleLeave() {
+    if (hovered !== null) {
+      hovered = null;
+      onpointhover?.(null);
+    }
+  }
+
+  function handleClick() {
+    if (hovered === null) {
+      return;
+    }
+    const point = series[hovered.si]?.data[hovered.pi];
+    if (point) {
+      onpointclick?.({ seriesIndex: hovered.si, pointIndex: hovered.pi, point });
+    }
+  }
+</script>
+
+<div
+  class="line-chart {classes ?? ''}"
+  bind:this={containerEl}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  {#if isEmpty && typeof empty === 'function'}
+    <div class="chart-empty">{@render empty()}</div>
+  {:else}
+    {#if showLegend && series.length > 1}
+      <Legend items={legendItems} position="top" />
+    {/if}
+
+    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+      <g transform="translate({dims.margin.left}, {dims.margin.top})">
+        {#if showYAxis}
+          <Axis
+            orientation="left"
+            scale={yScale}
+            {showGridlines}
+            gridlineLength={dims.innerWidth}
+            label={yAxisLabel}
+            tickFormat={yTickFormat}
+          />
+        {/if}
+        {#if showXAxis}
+          <g transform="translate(0, {dims.innerHeight})">
+            <Axis orientation="bottom" scale={xScale} label={xAxisLabel} tickFormat={xTickFormat} />
+          </g>
+        {/if}
+
+        {#each lines as line, si (si)}
+          <path
+            class="line-path"
+            class:dimmed={hovered !== null && hovered.si !== si}
+            d={line.path}
+            stroke={line.color}
+            stroke-width={strokeWidth}
+            fill="none"
+          />
+          {#if showDots}
+            {#each line.points as point, pi (pi)}
+              <circle
+                class="dot"
+                class:dimmed={hovered !== null && hovered.si !== si}
+                cx={point.x}
+                cy={point.y}
+                r={hovered?.si === si && hovered?.pi === pi ? dotRadius * 1.5 : dotRadius}
+                fill={line.color}
+              />
+            {/each}
+          {/if}
+          {#if showValues}
+            {#each line.points as point, pi (pi)}
+              <text
+                class="point-value"
+                x={point.x}
+                y={point.y - 8}
+                text-anchor="middle"
+                dominant-baseline="auto">{formatNumber(series[si].data[pi].y)}</text
+              >
+            {/each}
+          {/if}
+        {/each}
+
+        {#if hoverLineX !== null}
+          <line class="hover-line" x1={hoverLineX} x2={hoverLineX} y1={0} y2={dims.innerHeight} />
+        {/if}
+
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <rect
+          class="hover-overlay"
+          x={0}
+          y={0}
+          width={dims.innerWidth}
+          height={dims.innerHeight}
+          fill="transparent"
+          onmousemove={handleOverlayMove}
+          onmouseleave={handleLeave}
+          onclick={handleClick}
+        />
+      </g>
+    </ChartContainer>
+
+    {#if typeof tooltipSnippet === 'function' && tooltipContext !== null}
+      <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
+        {@render tooltipSnippet(tooltipContext)}
+      </div>
+    {:else}
+      <ChartTooltip data={tooltipData} {mouseX} {mouseY} />
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .line-chart {
+    width: 100%;
+    position: relative;
+  }
+  .line-path {
+    transition: opacity var(--chart-transition-duration, 0.2s) ease;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    pointer-events: none;
+  }
+  .line-path.dimmed {
+    opacity: var(--linechart-dimmed-opacity, 0.2);
+  }
+  .dot {
+    transition:
+      r var(--chart-transition-duration, 0.2s) ease,
+      opacity var(--chart-transition-duration, 0.2s) ease;
+    stroke: var(--chart-background, #fff);
+    stroke-width: 2;
+    pointer-events: none;
+  }
+  .dot.dimmed {
+    opacity: var(--linechart-dimmed-opacity, 0.2);
+  }
+  .point-value {
+    fill: var(--linechart-value-color, #333);
+    font-size: var(--linechart-value-font-size, 11px);
+    font-family: var(--chart-font-family, inherit);
+    pointer-events: none;
+  }
+  .hover-line {
+    stroke: var(--linechart-hover-line-color, #ccc);
+    stroke-width: 1;
+    stroke-dasharray: var(--linechart-hover-line-dash, 4 4);
+    pointer-events: none;
+  }
+  .hover-overlay {
+    cursor: crosshair;
+  }
+  .chart-tooltip-slot {
+    position: absolute;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .chart-empty {
+    padding: var(--chart-empty-padding, 32px 24px);
+    color: var(--chart-empty-color, #9ca3af);
+    text-align: center;
+  }
+</style>

package/dist/LineChart/LineChart.svelte.d.ts

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

package/dist/LineChart/properties.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+import type { CurveType } from '../_chart/types';
+export type LineChartDataPoint = {
+    x: number;
+    y: number;
+    label?: string;
+};
+export type LineChartSeries = {
+    name: string;
+    data: LineChartDataPoint[];
+    color?: string;
+};
+export type LineChartTooltipContext = {
+    x: number;
+    points: Array<{
+        name: string;
+        y: number;
+        color: string;
+        label?: string;
+    }>;
+};
+export type LineChartProperties = MandatoryLineChartProperties & OptionalLineChartProperties & LineChartEventProperties;
+export type MandatoryLineChartProperties = {
+    series: LineChartSeries[];
+};
+export type OptionalLineChartProperties = {
+    curve?: CurveType;
+    showDots?: boolean;
+    showValues?: boolean;
+    dotRadius?: number;
+    strokeWidth?: number;
+    showGridlines?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showLegend?: boolean;
+    xDomain?: [number, number];
+    yDomain?: [number, number];
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    xTickFormat?: (value: number | string) => string;
+    yTickFormat?: (value: number | string) => string;
+    aspectRatio?: number;
+    tooltipSnippet?: Snippet<[LineChartTooltipContext]>;
+    empty?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type LineChartEventProperties = {
+    onpointclick?: (event: {
+        seriesIndex: number;
+        pointIndex: number;
+        point: LineChartDataPoint;
+    }) => void;
+    onpointhover?: (event: {
+        seriesIndex: number;
+        pointIndex: number;
+        point: LineChartDataPoint;
+    } | null) => void;
+};

package/dist/LineChart/properties.js

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

package/dist/PieChart/PieChart.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  import type { PieChartProperties } from './properties';
+  import ChartContainer from '../_chart/ChartContainer.svelte';
+  import ChartTooltip from '../_chart/ChartTooltip.svelte';
+  import Legend from '../_chart/Legend.svelte';
+  import { arcPath } from '../_chart/paths';
+  import { computePieLayout } from '../_chart/geometry';
+  import { getColor } from '../_chart/colors';
+  import { formatNumber, formatPercent } from '../_chart/format';
+  import type { LegendItem } from '../_chart/types';
+
+  // ── Props ──────────────────────────────────────────────────────
+
+  let {
+    data,
+    innerRadius = 0,
+    padAngle = 0.02,
+    showLabels = false,
+    showValues = false,
+    labelPosition = 'outside',
+    showLegend = false,
+    startAngle = -Math.PI / 2,
+    aspectRatio = 1,
+    valueFormat,
+    tooltipSnippet,
+    center,
+    empty,
+    onsliceclick,
+    onslicehover,
+    testId,
+    classes
+  }: PieChartProperties = $props();
+
+  // ── State ──────────────────────────────────────────────────────
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let chartWidth = $state(0);
+  let chartHeight = $state(0);
+  let hoveredIndex = $state<number | null>(null);
+  let mouseX = $state(0);
+  let mouseY = $state(0);
+
+  // ── Layout ─────────────────────────────────────────────────────
+
+  let format = $derived(valueFormat ?? formatNumber);
+  let total = $derived(data.reduce((sum, d) => sum + Math.max(0, d.value), 0));
+  let isEmpty = $derived(data.length === 0 || total === 0);
+
+  let cx = $derived(chartWidth / 2);
+  let cy = $derived(chartHeight / 2);
+  let outerR = $derived(
+    Math.max(10, Math.min(cx, cy) - (showLabels && labelPosition === 'outside' ? 40 : 10))
+  );
+  let innerR = $derived(innerRadius > 0 ? outerR * Math.min(0.95, innerRadius) : 0);
+
+  let slices = $derived(
+    computePieLayout(data, startAngle, padAngle).map((s) => {
+      const color = s.color ?? data[s.index]?.color ?? getColor(s.index);
+      const labelR = labelPosition === 'outside' ? outerR + 16 : (innerR + outerR) / 2;
+      return {
+        ...s,
+        color,
+        path: arcPath(0, 0, innerR, outerR, s.startAngle, s.endAngle),
+        labelX: labelR * Math.cos(s.midAngle),
+        labelY: labelR * Math.sin(s.midAngle)
+      };
+    })
+  );
+
+  let legendItems = $derived<LegendItem[]>(
+    data.map((d, i) => ({ label: d.label, color: d.color ?? getColor(i) }))
+  );
+
+  let centerBoxSize = $derived(innerR > 0 ? Math.max(0, innerR * 1.3) : 0);
+
+  // ── Tooltip ────────────────────────────────────────────────────
+
+  let tooltipData = $derived.by(() => {
+    if (hoveredIndex === null || !slices[hoveredIndex]) {
+      return null;
+    }
+    const s = slices[hoveredIndex];
+    return {
+      title: s.label,
+      items: [
+        {
+          label: s.label,
+          value: `${format(s.value)} (${formatPercent(s.value, total)})`,
+          color: s.color
+        }
+      ]
+    };
+  });
+
+  // ── Interactions ───────────────────────────────────────────────
+
+  function trackMouse(e: MouseEvent) {
+    if (containerEl === null) {
+      return;
+    }
+    const rect = containerEl.getBoundingClientRect();
+    mouseX = e.clientX - rect.left;
+    mouseY = e.clientY - rect.top;
+  }
+
+  function handleEnter(e: MouseEvent, i: number) {
+    hoveredIndex = i;
+    trackMouse(e);
+    onslicehover?.({ index: i, slice: data[i] });
+  }
+
+  function handleLeave() {
+    hoveredIndex = null;
+    onslicehover?.(null);
+  }
+</script>
+
+<div
+  class="pie-chart {classes ?? ''}"
+  bind:this={containerEl}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  {#if isEmpty && typeof empty === 'function'}
+    <div class="chart-empty">{@render empty()}</div>
+  {:else}
+    {#if showLegend}
+      <Legend items={legendItems} position="top" />
+    {/if}
+
+    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+      <g transform="translate({cx}, {cy})">
+        {#each slices as slice (slice.index)}
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <path
+            class="slice"
+            class:hovered={hoveredIndex === slice.index}
+            class:dimmed={hoveredIndex !== null && hoveredIndex !== slice.index}
+            d={slice.path}
+            fill={slice.color}
+            aria-label="{slice.label}: {format(slice.value)}"
+            onmouseenter={(e) => handleEnter(e, slice.index)}
+            onmousemove={trackMouse}
+            onmouseleave={handleLeave}
+            onclick={() => onsliceclick?.({ index: slice.index, slice: data[slice.index] })}
+          />
+          {#if showLabels || showValues}
+            <text
+              class="slice-label"
+              class:label-outside={labelPosition === 'outside'}
+              x={slice.labelX}
+              y={slice.labelY}
+              text-anchor="middle"
+              dominant-baseline="middle"
+            >
+              {#if showLabels}{slice.label}{/if}
+              {#if showValues}
+                {formatPercent(slice.value, total)}{/if}
+            </text>
+          {/if}
+        {/each}
+
+        {#if innerR > 0 && typeof center === 'function' && centerBoxSize > 0}
+          <foreignObject
+            x={-centerBoxSize / 2}
+            y={-centerBoxSize / 2}
+            width={centerBoxSize}
+            height={centerBoxSize}
+          >
+            <div class="pie-center-content" xmlns="http://www.w3.org/1999/xhtml">
+              {@render center()}
+            </div>
+          </foreignObject>
+        {/if}
+      </g>
+    </ChartContainer>
+
+    {#if typeof tooltipSnippet === 'function' && hoveredIndex !== null && data[hoveredIndex]}
+      <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
+        {@render tooltipSnippet(data[hoveredIndex], hoveredIndex)}
+      </div>
+    {:else}
+      <ChartTooltip data={tooltipData} {mouseX} {mouseY} />
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .pie-chart {
+    width: 100%;
+    position: relative;
+  }
+  .slice {
+    stroke: var(--piechart-stroke-color, #fff);
+    stroke-width: var(--piechart-stroke-width, 2);
+    transition:
+      transform var(--chart-transition-duration, 0.2s) ease,
+      opacity var(--chart-transition-duration, 0.2s) ease;
+    transform-origin: 0 0;
+    cursor: pointer;
+  }
+  .slice.hovered {
+    transform: scale(var(--piechart-hover-scale, 1.05));
+    opacity: 1;
+  }
+  .slice.dimmed {
+    opacity: var(--piechart-dimmed-opacity, 0.3);
+  }
+  .slice-label {
+    fill: var(--piechart-label-color, #333);
+    font-size: var(--piechart-label-font-size, 12px);
+    font-family: var(--chart-font-family, inherit);
+    pointer-events: none;
+  }
+  .slice-label.label-outside {
+    fill: var(--piechart-label-color, #555);
+  }
+  .pie-center-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+  .chart-tooltip-slot {
+    position: absolute;
+    z-index: 10;
+    pointer-events: none;
+  }
+  .chart-empty {
+    padding: var(--chart-empty-padding, 32px 24px);
+    color: var(--chart-empty-color, #9ca3af);
+    text-align: center;
+  }
+</style>

package/dist/PieChart/PieChart.svelte.d.ts

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

package/dist/PieChart/properties.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+export type PieChartSlice = {
+    label: string;
+    value: number;
+    color?: string;
+};
+export type PieChartProperties = MandatoryPieChartProperties & OptionalPieChartProperties & PieChartEventProperties;
+export type MandatoryPieChartProperties = {
+    data: PieChartSlice[];
+};
+export type OptionalPieChartProperties = {
+    innerRadius?: number;
+    padAngle?: number;
+    showLabels?: boolean;
+    showValues?: boolean;
+    labelPosition?: 'inside' | 'outside';
+    showLegend?: boolean;
+    startAngle?: number;
+    aspectRatio?: number;
+    valueFormat?: (value: number) => string;
+    tooltipSnippet?: Snippet<[PieChartSlice, number]>;
+    center?: Snippet;
+    empty?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type PieChartEventProperties = {
+    onsliceclick?: (event: {
+        index: number;
+        slice: PieChartSlice;
+    }) => void;
+    onslicehover?: (event: {
+        index: number;
+        slice: PieChartSlice;
+    } | null) => void;
+};