@juspay/svelte-ui-components 4.21.0 → 4.23.0

package/dist/AreaChart/AreaChart.svelte

@@ -13,6 +13,7 @@
   import { measureText } from '../_chart/measure';
   import { resolvePointLabels } from '../_chart/labels';
   import { pointerPositionIn, dismissOnOutsidePointerDown } from '../_chart/interactions';
+  import { formatSeriesAggregate } from '../_chart/aggregate';
   import type { LegendItem, Point } from '../_chart/types';
   import { DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
 
@@ -171,7 +172,15 @@
   });
 
   let legendItems = $derived<LegendItem[]>(
-    series.map((s, i) => ({ label: s.name, color: s.color ?? getColor(i) }))
+    series.map((s, i) => ({
+      label: s.name,
+      color: s.color ?? getColor(i),
+      aggregateLabel: formatSeriesAggregate(
+        s.data.map((d) => d.y),
+        s.aggregate ?? 'none',
+        s.aggregateFormat ?? yTickFormat ?? formatNumber
+      )
+    }))
   );
 
   // ── Tooltip ────────────────────────────────────────────────────

package/dist/AreaChart/properties.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { CurveType } from '../_chart/types';
+import type { SeriesAggregate } from '../_chart/aggregate';
 export type AreaChartDataPoint = {
     x: number;
     y: number;
@@ -9,6 +10,20 @@ export type AreaChartSeries = {
     name: string;
     data: AreaChartDataPoint[];
     color?: string;
+    /**
+     * Shows an aggregate of this series' `y` values beside its legend label
+     * (e.g. "Revenue  $128K"). Aggregates that series' own values only -- when
+     * `stacked` is true this is never the per-category stack total, which is a
+     * separate, existing computation. Omit (or `'none'`, the default) to show
+     * no aggregate; every chart renders unchanged without it.
+     */
+    aggregate?: SeriesAggregate;
+    /**
+     * Formatter for this series' legend aggregate. Defaults to the chart's own
+     * `yTickFormat` (or the built-in number formatter) -- set this only when
+     * the aggregate needs a different unit than the axis.
+     */
+    aggregateFormat?: (value: number) => string;
 };
 export type AreaChartTooltipContext = {
     x: number;

package/dist/BarChart/BarChart.svelte

@@ -29,6 +29,7 @@
     placedLabelRect,
     dropOverlapping
   } from '../_chart/labels';
+  import { formatSeriesAggregate } from '../_chart/aggregate';
   import type { LegendItem, BarRect } from '../_chart/types';
   import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import type { TooltipAnchor } from '../_chart/types';
@@ -583,10 +584,22 @@
 
   let legendItems = $derived<LegendItem[]>(
     isMulti
-      ? resolvedSeries.map((s, i) => ({
+      ? rawSeries.map((s, i) => ({
           label: s.name,
           color: fallbackColor(s.color ?? getColor(i), i),
-          hidden: hiddenSeries.has(i)
+          hidden: hiddenSeries.has(i),
+          // Aggregates this series' own raw `value`s, from `rawSeries` rather
+          // than `resolvedSeries`: the latter may hold normaliseToFirstPoint
+          // percentages or topN-clipped/overflow values, neither of which is
+          // the series' real data (never the cross-series stack total either,
+          // which is an unrelated existing computation). Defaults to the
+          // chart's own `valueFormat`/number formatter, matching the "reuse
+          // the axis/tooltip formatting mechanism" rule.
+          aggregateLabel: formatSeriesAggregate(
+            s.data.map((d) => d.value),
+            s.aggregate ?? 'none',
+            s.aggregateFormat ?? format
+          )
         }))
       : []
   );

package/dist/BarChart/properties.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { ChartHighlightAPI } from '../_chart/highlight';
+import type { SeriesAggregate } from '../_chart/aggregate';
 export type BarFillPattern = {
     pattern: {
         /** SVG pattern element type: 'lines' | 'dots' | 'crosshatch' */
@@ -52,6 +53,21 @@ export type BarChartSeries = {
     data: BarChartDataPoint[];
     /** Series-level fill: plain color, pattern, or gradient. */
     color?: BarFill;
+    /**
+     * Shows an aggregate of this series' `value`s beside its legend label (e.g.
+     * "Revenue  $128K"). Aggregates that series' own values only -- in
+     * `groupMode="stacked"` this is never the per-category stack total, which
+     * is a separate, existing computation. Omit (or `'none'`, the default) to
+     * show no aggregate; every chart renders unchanged without it.
+     */
+    aggregate?: SeriesAggregate;
+    /**
+     * Formatter for this series' legend aggregate. Defaults to the chart's own
+     * `valueFormat` (or the built-in number formatter) -- set this only when
+     * the aggregate needs a different unit than the axis, e.g. a percentage
+     * average alongside a currency-formatted axis.
+     */
+    aggregateFormat?: (value: number) => string;
 };
 /**
  * Geometry for a single rendered bar, in inner (post-margin) coordinates — the

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -18,6 +18,7 @@
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
   import { roundedRectPath, linePath } from '../_chart/paths';
+  import { formatSeriesAggregate } from '../_chart/aggregate';
   import type {
     LegendItem,
     TooltipData,
@@ -280,7 +281,17 @@
     series.map((s, si) => ({
       label: s.name,
       color: resolvedColor(s, si),
-      hidden: hiddenSeries.has(si)
+      hidden: hiddenSeries.has(si),
+      // Defaults to the same per-axis formatter (leftFormat/rightFormat, used
+      // for ticks/tooltip above) as whichever axis this series is plotted
+      // against, so a left-axis currency series and a right-axis percentage
+      // series each get a sensible default without either specifying
+      // `aggregateFormat`.
+      aggregateLabel: formatSeriesAggregate(
+        s.data,
+        s.aggregate ?? 'none',
+        s.aggregateFormat ?? (s.yAxisIndex === 0 ? leftFormat : rightFormat)
+      )
     }))
   );
 

package/dist/DualAxisBarChart/properties.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { SeriesAggregate } from '../_chart/aggregate';
 /**
  * Configuration for one of the two independent Y-axes.
  */
@@ -37,6 +38,20 @@ export type DualAxisSeries = {
      * `'line'`   — line with optional dots drawn over the column layer.
      */
     type?: 'column' | 'line';
+    /**
+     * Shows an aggregate of this series' values beside its legend label (e.g.
+     * "Revenue  $128K"). Omit (or `'none'`, the default) to show no aggregate;
+     * every chart renders unchanged without it.
+     */
+    aggregate?: SeriesAggregate;
+    /**
+     * Formatter for this series' legend aggregate. Defaults to the `valueFormat`
+     * of whichever axis (`leftAxis`/`rightAxis`) this series' `yAxisIndex`
+     * points at -- reusing the same per-axis formatting the chart already has,
+     * rather than a parallel mechanism. Set this only when the aggregate needs
+     * a different unit than its axis.
+     */
+    aggregateFormat?: (value: number) => string;
 };
 /**
  * Data passed to `tooltipSnippet` when the user hovers a category.

package/dist/LineChart/LineChart.svelte

@@ -14,6 +14,7 @@
   import { formatNumber, defaultTickFormat } from '../_chart/format';
   import { measureText } from '../_chart/measure';
   import { resolvePointLabels } from '../_chart/labels';
+  import { formatSeriesAggregate } from '../_chart/aggregate';
   import type { LegendItem, Point, TooltipAnchor } from '../_chart/types';
   import { pointerPositionIn, dismissOnOutsidePointerDown } from '../_chart/interactions';
   import { SvelteSet } from 'svelte/reactivity';
@@ -236,7 +237,12 @@
     series.map((s, i) => ({
       label: s.name,
       color: s.color ?? getColor(i),
-      hidden: hiddenSeries.has(i)
+      hidden: hiddenSeries.has(i),
+      aggregateLabel: formatSeriesAggregate(
+        s.data.map((d) => d.y),
+        s.aggregate ?? 'none',
+        s.aggregateFormat ?? yTickFormat ?? formatNumber
+      )
     }))
   );
 

package/dist/LineChart/properties.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { CurveType } from '../_chart/types';
 import type { ChartHighlightAPI } from '../_chart/highlight';
+import type { SeriesAggregate } from '../_chart/aggregate';
 export type LineChartDataPoint = {
     x: number;
     y: number;
@@ -16,6 +17,19 @@ export type LineChartSeries = {
      * custom SVG `stroke-dasharray`. Omit for a solid line.
      */
     dash?: boolean | string;
+    /**
+     * Shows an aggregate of this series' `y` values beside its legend label
+     * (e.g. "Revenue  $128K"). Omit (or `'none'`, the default) to show no
+     * aggregate; every chart renders unchanged without it.
+     */
+    aggregate?: SeriesAggregate;
+    /**
+     * Formatter for this series' legend aggregate. Defaults to the chart's own
+     * `yTickFormat` (or the built-in number formatter) -- set this only when
+     * the aggregate needs a different unit than the axis, e.g. a percentage
+     * average alongside a count-formatted axis.
+     */
+    aggregateFormat?: (value: number) => string;
 };
 export type LineChartTooltipContext = {
     x: number;

package/dist/Table/Table.svelte

@@ -1188,11 +1188,18 @@
   }
 
   /* ── Container ──────────────────────────────────────────────────────────── */
+  /* `hidden` is the default because it is what clips the table's corners to
+     this element's border-radius; without it the first and last cells square
+     off over the rounded border. A consumer who needs the container itself to
+     scroll sideways sets this to `auto` and accepts that trade. Note the
+     scrollable variant below sets `overflow-y`, and per the CSS overflow spec
+     a `visible` on one axis computes to `auto` when the other is not visible,
+     so `visible` here does not survive on a scrollable table. */
   .table-container {
     border: var(--table-border, 1px solid #e5e7eb);
     border-radius: var(--table-border-radius, var(--radius, 4px));
     width: var(--table-container-width, 100%);
-    overflow: hidden;
+    overflow: var(--table-container-overflow, hidden);
   }
 
   .scrollable-table {

package/dist/_chart/Legend.svelte

@@ -11,22 +11,38 @@
     {:else}
       {#each items as item, i (i)}
         {#if typeof onToggle === 'function'}
-          <button
-            type="button"
-            class="legend-item legend-toggle"
-            class:legend-hidden={item.hidden}
-            aria-pressed={!item.hidden}
-            onclick={() => onToggle(i)}
-            data-pw={`legend-toggle-${i}`}
-            testID={`legend-toggle-${i}`}
-          >
-            <span class="legend-swatch" style="background: {item.color}"></span>
-            <span class="legend-label">{item.label}</span>
-          </button>
+          <!-- The aggregate sits OUTSIDE the button deliberately. Every bit of
+               text inside a button becomes part of its accessible name, so an
+               aggregate inside it would make the control's name change whenever
+               the data does -- "Revenue $6,500" today, something else tomorrow.
+               A name that moves breaks voice-control targeting and any consumer
+               test matching it exactly, and announces a figure as the control's
+               identity rather than as information about the series. It also
+               stops a number being a click target for toggling a series, which
+               it never should have been. -->
+          <div class="legend-item" class:legend-hidden={item.hidden}>
+            <button
+              type="button"
+              class="legend-toggle"
+              aria-pressed={!item.hidden}
+              onclick={() => onToggle(i)}
+              data-pw={`legend-toggle-${i}`}
+              testID={`legend-toggle-${i}`}
+            >
+              <span class="legend-swatch" style="background: {item.color}"></span>
+              <span class="legend-label">{item.label}</span>
+            </button>
+            {#if item.aggregateLabel}
+              <span class="legend-aggregate">{item.aggregateLabel}</span>
+            {/if}
+          </div>
         {:else}
           <div class="legend-item">
             <span class="legend-swatch" style="background: {item.color}"></span>
             <span class="legend-label">{item.label}</span>
+            {#if item.aggregateLabel}
+              <span class="legend-aggregate">{item.aggregateLabel}</span>
+            {/if}
           </div>
         {/if}
       {/each}
@@ -72,7 +88,18 @@
     color: var(--chart-legend-color, light-dark(#333, #e5e7eb));
   }
 
+  .legend-aggregate {
+    font-size: var(--chart-legend-font-size, 12px);
+    font-weight: 600;
+    color: var(--chart-legend-aggregate-color, light-dark(#111, #f5f5f5));
+  }
+
   .legend-toggle {
+    /* The button no longer IS the row -- it holds the swatch and label, and the
+       aggregate is its sibling -- so it carries its own flex layout. */
+    display: flex;
+    align-items: center;
+    gap: 6px;
     background: none;
     border: none;
     padding: 0;
@@ -85,7 +112,8 @@
     opacity: 0.25;
   }
 
-  .legend-hidden .legend-label {
+  .legend-hidden .legend-label,
+  .legend-hidden .legend-aggregate {
     color: var(--chart-legend-hidden-color, light-dark(#bbb, #555));
   }
 </style>

package/dist/_chart/aggregate.d.ts

@@ -0,0 +1,35 @@
+/**
+ * How a chart legend summarises a series' values into one number shown
+ * beside its label. `'none'` (the default for every series that doesn't set
+ * this) shows nothing -- the feature is purely additive.
+ */
+export type SeriesAggregate = 'sum' | 'average' | 'min' | 'max' | 'none';
+/**
+ * Reduces a series' values to a single number for its legend entry.
+ *
+ * Null and non-finite entries (a missing point, or `NaN`/`Infinity` slipping
+ * through past the `number` type at runtime) are treated as ABSENT rather
+ * than as zero -- they are skipped entirely, not summed/counted as 0. This
+ * only changes the result for `average` (skipping shrinks the denominator)
+ * and `min`/`max` (an absent point can never set an extreme); `sum` is
+ * identical either way since 0 is the additive identity.
+ *
+ * Zero remaining values after skipping -- an empty series, or one whose
+ * points are all absent -- resolves to `null` for EVERY kind, `sum`
+ * included: a "total" of 0 for a series with no real data would be a
+ * fabricated number, not an observed one, so the legend renders nothing
+ * rather than a misleading 0.
+ *
+ * Aggregation is always over one series' own values, never across a stack --
+ * a stacked bar/area chart's per-category stack total is an unrelated,
+ * existing computation (the y-domain sum) that this function does not touch.
+ */
+export declare function computeSeriesAggregate(values: ReadonlyArray<number | null>, aggregate: SeriesAggregate): number | null;
+/**
+ * Computes and formats a series aggregate for legend display in one step,
+ * reusing the chart's own value formatter (the same one driving its
+ * axis/tooltip) rather than a parallel formatting path. Returns `null` --
+ * render nothing -- whenever there is no aggregate to show, so the formatter
+ * is never handed `NaN` and a caller never needs its own null guard.
+ */
+export declare function formatSeriesAggregate(values: ReadonlyArray<number | null>, aggregate: SeriesAggregate, format: (value: number) => string): string | null;

package/dist/_chart/aggregate.js

@@ -0,0 +1,68 @@
+/**
+ * Reduces a series' values to a single number for its legend entry.
+ *
+ * Null and non-finite entries (a missing point, or `NaN`/`Infinity` slipping
+ * through past the `number` type at runtime) are treated as ABSENT rather
+ * than as zero -- they are skipped entirely, not summed/counted as 0. This
+ * only changes the result for `average` (skipping shrinks the denominator)
+ * and `min`/`max` (an absent point can never set an extreme); `sum` is
+ * identical either way since 0 is the additive identity.
+ *
+ * Zero remaining values after skipping -- an empty series, or one whose
+ * points are all absent -- resolves to `null` for EVERY kind, `sum`
+ * included: a "total" of 0 for a series with no real data would be a
+ * fabricated number, not an observed one, so the legend renders nothing
+ * rather than a misleading 0.
+ *
+ * Aggregation is always over one series' own values, never across a stack --
+ * a stacked bar/area chart's per-category stack total is an unrelated,
+ * existing computation (the y-domain sum) that this function does not touch.
+ */
+export function computeSeriesAggregate(values, aggregate) {
+    if (aggregate === 'none') {
+        return null;
+    }
+    let sum = 0;
+    let count = 0;
+    let min = Infinity;
+    let max = -Infinity;
+    for (const value of values) {
+        if (value === null || !Number.isFinite(value)) {
+            continue;
+        }
+        sum += value;
+        count += 1;
+        if (value < min) {
+            min = value;
+        }
+        if (value > max) {
+            max = value;
+        }
+    }
+    if (count === 0) {
+        return null;
+    }
+    switch (aggregate) {
+        case 'sum':
+            return sum;
+        case 'average':
+            return sum / count;
+        case 'min':
+            return min;
+        case 'max':
+            return max;
+        default:
+            return null;
+    }
+}
+/**
+ * Computes and formats a series aggregate for legend display in one step,
+ * reusing the chart's own value formatter (the same one driving its
+ * axis/tooltip) rather than a parallel formatting path. Returns `null` --
+ * render nothing -- whenever there is no aggregate to show, so the formatter
+ * is never handed `NaN` and a caller never needs its own null guard.
+ */
+export function formatSeriesAggregate(values, aggregate, format) {
+    const value = computeSeriesAggregate(values, aggregate);
+    return value === null ? null : format(value);
+}

package/dist/_chart/types.d.ts

@@ -126,6 +126,14 @@ export type LegendItem = {
     color: string;
     /** True when the series is toggled off via an interactive legend. */
     hidden?: boolean;
+    /**
+     * Formatted per-series aggregate (e.g. `"$1.2K"`, `"45%"`) shown beside the
+     * label. `null`/omitted renders nothing -- both the "no `aggregate` was
+     * configured for this series" and "the series had no data to aggregate"
+     * cases resolve here, via `computeSeriesAggregate`/`formatSeriesAggregate`
+     * in `_chart/aggregate.ts`.
+     */
+    aggregateLabel?: string | null;
 };
 /** Data-space anchor for point/category-anchored tooltips (coords are container px). */
 export type TooltipAnchor = {