@juspay/svelte-ui-components 2.70.0 → 2.72.0

package/dist/AreaChart/AreaChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { AreaChartProperties, AreaChartTooltipContext } from './properties';
+  import { onMount } from 'svelte';
   import ChartContainer from '../_chart/ChartContainer.svelte';
   import Axis from '../_chart/Axis.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
@@ -8,17 +9,24 @@
   import { computeChartDimensions, computeStackedValues } from '../_chart/geometry';
   import { linePath, areaPath } from '../_chart/paths';
   import { getColor } from '../_chart/colors';
-  import { formatNumber } from '../_chart/format';
+  import { formatNumber, formatPercent } from '../_chart/format';
   import type { LegendItem, Point } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
 
+  // Per-instance ID for SVG gradient <linearGradient id> references. Initialised
+  // inside onMount so the value is only ever generated on the client — avoids an
+  // SSR hydration mismatch that would occur if Math.random() ran on both server
+  // and client and produced different strings.
+  let uid = $state('');
+
   let {
     series,
     curve = 'monotone',
     stacked = false,
     stackNormalize = false,
     fillOpacity = 0.3,
+    gradientFill = false,
     showDots = false,
     showLine = true,
     showValues = false,
@@ -51,6 +59,10 @@
   let mouseX = $state(0);
   let mouseY = $state(0);
 
+  onMount(() => {
+    uid = Math.random().toString(36).slice(2, 9);
+  });
+
   // ── Layout ─────────────────────────────────────────────────────
 
   let dims = $derived(computeChartDimensions(chartWidth, chartHeight));
@@ -169,8 +181,23 @@
     if (tooltipContext === null) {
       return null;
     }
+    const title = xTickFormat
+      ? xTickFormat(tooltipContext.x)
+      : `x: ${formatNumber(tooltipContext.x)}`;
+    if (stackNormalize) {
+      const pi = hovered?.pi ?? 0;
+      const columnTotal = series.reduce((sum, s) => sum + Math.max(0, s.data[pi]?.y ?? 0), 0);
+      return {
+        title,
+        items: tooltipContext.points.map((p) => ({
+          label: p.name,
+          value: formatPercent(Math.max(0, p.y), columnTotal),
+          color: p.color
+        }))
+      };
+    }
     return {
-      title: `x: ${formatNumber(tooltipContext.x)}`,
+      title,
       items: tooltipContext.points.map((p) => ({
         label: p.name,
         value: formatNumber(p.y),
@@ -273,6 +300,37 @@
     {/if}
 
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+      {#if gradientFill}
+        <!-- <defs> must be a direct child of <svg> (SVG root), not inside a transformed <g>.
+             gradientUnits="userSpaceOnUse" with y1/y2 in the inner coordinate space (0..innerHeight)
+             correctly spans the full chart height regardless of how thin each band is. -->
+        <defs>
+          {#each areas as area, si (si)}
+            <linearGradient
+              id="area-grad-{uid}-{si}"
+              x1="0"
+              y1="0"
+              x2="0"
+              y2={dims.innerHeight}
+              gradientUnits="userSpaceOnUse"
+            >
+              <!-- The gradient top stop is fillOpacity + 0.3 (clamped to 1), giving a richer
+                   anchor at the top that fades to transparent at the bottom. This intentionally
+                   exceeds the base fillOpacity so that gradient-fill areas appear more vivid
+                   than their solid-fill counterparts (where fill-opacity equals fillOpacity). -->
+              <stop
+                offset="0%"
+                stop-color={area.color}
+                stop-opacity={Math.min(
+                  (hovered?.si === si ? fillOpacity + 0.2 : fillOpacity) + 0.3,
+                  1
+                )}
+              />
+              <stop offset="100%" stop-color={area.color} stop-opacity={0} />
+            </linearGradient>
+          {/each}
+        </defs>
+      {/if}
       <g transform="translate({dims.margin.left}, {dims.margin.top})">
         {#if showYAxis}
           <Axis
@@ -295,8 +353,8 @@
             class="area-fill"
             class:dimmed={hovered !== null && hovered.si !== si}
             d={area.areaD}
-            fill={area.color}
-            fill-opacity={hovered?.si === si ? fillOpacity + 0.2 : fillOpacity}
+            fill={gradientFill ? `url(#area-grad-${uid}-${si})` : area.color}
+            fill-opacity={gradientFill ? 1 : hovered?.si === si ? fillOpacity + 0.2 : fillOpacity}
           />
           {#if showLine}
             <path
@@ -308,6 +366,16 @@
               fill="none"
             />
           {/if}
+          {#if area.points.length === 1 && !showDots}
+            <circle
+              class="single-point"
+              class:dimmed={hovered !== null && hovered.si !== si}
+              cx={area.points[0].x}
+              cy={area.points[0].y}
+              r={6}
+              fill={area.color}
+            />
+          {/if}
           {#if showDots}
             {#each area.points as point, pi (pi)}
               <circle
@@ -385,6 +453,12 @@
   .area-line.dimmed {
     opacity: var(--areachart-dimmed-opacity, 0.1);
   }
+  .single-point {
+    pointer-events: none;
+  }
+  .single-point.dimmed {
+    opacity: var(--areachart-dimmed-opacity, 0.1);
+  }
   .dot {
     transition:
       r var(--chart-transition-duration, 0.2s) ease,
@@ -400,9 +474,9 @@
     pointer-events: none;
   }
   .hover-line {
-    stroke: var(--linechart-hover-line-color, #ccc);
+    stroke: var(--areachart-hover-line-color, var(--linechart-hover-line-color, #ccc));
     stroke-width: 1;
-    stroke-dasharray: 4 4;
+    stroke-dasharray: var(--areachart-hover-line-dash, var(--linechart-hover-line-dash, 4 4));
     pointer-events: none;
   }
   .hover-overlay {

package/dist/AreaChart/properties.d.ts

@@ -28,6 +28,7 @@ export type OptionalAreaChartProperties = {
     stacked?: boolean;
     stackNormalize?: boolean;
     fillOpacity?: number;
+    gradientFill?: boolean;
     showDots?: boolean;
     showLine?: boolean;
     showValues?: boolean;

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -30,6 +30,7 @@
     presetCheckmark = false,
     showDateInputs = false,
     showTimeSelection = false,
+    presetToggle = false,
     placeholder = 'Select date',
     dualMonth,
     timePicker,
@@ -388,6 +389,21 @@
   }
 
   function handlePreset(preset: DateRangePreset): void {
+    // presetToggle: clicking the already-selected preset deselects it and reverts the
+    // draft to the committed selection (mirrors openPicker). Lets a toggle-style preset
+    // such as "No Comparison" be switched back off without having to pick a calendar
+    // date, instead of being a one-way radio choice.
+    if (presetToggle && selectedPresetLabel === preset.label) {
+      draftStart = rangeStart;
+      draftEnd = rangeEnd;
+      draftValue = value;
+      selectedPresetLabel = committedPresetLabel;
+      const anchor = rangeStart !== null ? rangeStart : value !== null ? value : now;
+      leftYear = anchor.getFullYear();
+      leftMonth = anchor.getMonth();
+      calendarKey++;
+      return;
+    }
     // User explicitly picked a preset — clear the initial-preset display label
     activePresetLabel = null;
     const { start, end } = preset.getValue();

package/dist/DateRangePicker/properties.d.ts

@@ -52,6 +52,13 @@ export type OptionalDateRangePickerProperties = {
      * Opt-in. Default: false.
      */
     showTimeSelection?: boolean;
+    /**
+     * Make presets toggle instead of being one-way: clicking the already-selected
+     * preset deselects it and reverts the draft to the committed selection. Lets a
+     * toggle-style preset such as "No Comparison" be switched back off without having
+     * to pick a calendar date. Opt-in. Default: false.
+     */
+    presetToggle?: boolean;
     /** Placeholder shown when no range is selected. */
     placeholder?: string;
     /** Show two months side by side. Defaults to true for range mode, false for single. */

package/dist/LineChart/LineChart.svelte

@@ -1,21 +1,30 @@
 <script lang="ts">
   import type { LineChartProperties, LineChartTooltipContext } from './properties';
+  import { onMount } from 'svelte';
   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 { linePath, areaPath } from '../_chart/paths';
   import { getColor } from '../_chart/colors';
   import { formatNumber } from '../_chart/format';
   import type { LegendItem, Point } from '../_chart/types';
 
+  // Per-instance ID for SVG gradient <linearGradient id> references. Initialised
+  // inside onMount so the value is only ever generated on the client — avoids an
+  // SSR hydration mismatch that would occur if Math.random() ran on both server
+  // and client and produced different strings.
+  let uid = $state('');
+
   // ── Props ──────────────────────────────────────────────────────
 
   let {
     series,
     curve = 'monotone',
+    gradientFill = false,
+    fillOpacity = 0.3,
     showDots = true,
     showValues = false,
     dotRadius = 4,
@@ -48,6 +57,10 @@
   let mouseX = $state(0);
   let mouseY = $state(0);
 
+  onMount(() => {
+    uid = Math.random().toString(36).slice(2, 9);
+  });
+
   // ── Layout ─────────────────────────────────────────────────────
 
   let dims = $derived(computeChartDimensions(chartWidth, chartHeight));
@@ -82,7 +95,12 @@
     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) };
+      return {
+        color,
+        points,
+        path: linePath(points, curve),
+        areaD: areaPath(points, dims.innerHeight, curve)
+      };
     })
   );
 
@@ -123,7 +141,7 @@
       return null;
     }
     return {
-      title: `x: ${formatNumber(tooltipContext.x)}`,
+      title: xTickFormat ? xTickFormat(tooltipContext.x) : `x: ${formatNumber(tooltipContext.x)}`,
       items: tooltipContext.points.map((p) => ({
         label: p.name,
         value: formatNumber(p.y),
@@ -227,6 +245,34 @@
     {/if}
 
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+      {#if gradientFill}
+        <defs>
+          {#each lines as line, si (si)}
+            <linearGradient
+              id="line-grad-{uid}-{si}"
+              x1="0"
+              y1="0"
+              x2="0"
+              y2={dims.innerHeight}
+              gradientUnits="userSpaceOnUse"
+            >
+              <!-- The gradient top stop is fillOpacity + 0.3 (clamped to 1), giving a richer
+                   anchor at the top that fades to transparent at the bottom. This intentionally
+                   exceeds the base fillOpacity so that gradient-fill areas appear more vivid
+                   than a flat solid-fill at fillOpacity alone. -->
+              <stop
+                offset="0%"
+                stop-color={line.color}
+                stop-opacity={Math.min(
+                  (hovered?.si === si ? fillOpacity + 0.2 : fillOpacity) + 0.3,
+                  1
+                )}
+              />
+              <stop offset="100%" stop-color={line.color} stop-opacity={0} />
+            </linearGradient>
+          {/each}
+        </defs>
+      {/if}
       <g transform="translate({dims.margin.left}, {dims.margin.top})">
         {#if showYAxis}
           <Axis
@@ -245,6 +291,14 @@
         {/if}
 
         {#each lines as line, si (si)}
+          {#if gradientFill}
+            <path
+              class="line-area-fill"
+              class:dimmed={hovered !== null && hovered.si !== si}
+              d={line.areaD}
+              fill="url(#line-grad-{uid}-{si})"
+            />
+          {/if}
           <path
             class="line-path"
             class:dimmed={hovered !== null && hovered.si !== si}
@@ -253,6 +307,16 @@
             stroke-width={strokeWidth}
             fill="none"
           />
+          {#if line.points.length === 1 && !showDots}
+            <circle
+              class="single-point"
+              class:dimmed={hovered !== null && hovered.si !== si}
+              cx={line.points[0].x}
+              cy={line.points[0].y}
+              r={dotRadius * 1.5}
+              fill={line.color}
+            />
+          {/if}
           {#if showDots}
             {#each line.points as point, pi (pi)}
               <circle
@@ -313,6 +377,15 @@
     width: 100%;
     position: relative;
   }
+  .line-area-fill {
+    transition:
+      fill-opacity var(--chart-transition-duration, 0.2s) ease,
+      opacity var(--chart-transition-duration, 0.2s) ease;
+    pointer-events: none;
+  }
+  .line-area-fill.dimmed {
+    opacity: var(--linechart-dimmed-opacity, 0.2);
+  }
   .line-path {
     transition: opacity var(--chart-transition-duration, 0.2s) ease;
     stroke-linecap: round;
@@ -322,6 +395,12 @@
   .line-path.dimmed {
     opacity: var(--linechart-dimmed-opacity, 0.2);
   }
+  .single-point {
+    pointer-events: none;
+  }
+  .single-point.dimmed {
+    opacity: var(--linechart-dimmed-opacity, 0.2);
+  }
   .dot {
     transition:
       r var(--chart-transition-duration, 0.2s) ease,

package/dist/LineChart/properties.d.ts

@@ -25,6 +25,8 @@ export type MandatoryLineChartProperties = {
 };
 export type OptionalLineChartProperties = {
     curve?: CurveType;
+    gradientFill?: boolean;
+    fillOpacity?: number;
     showDots?: boolean;
     showValues?: boolean;
     dotRadius?: number;

package/dist/_chart/paths.js

@@ -118,6 +118,7 @@ export function linePath(points, curve = 'linear') {
         return points.length === 1 ? `M ${points[0].x} ${points[0].y}` : '';
     }
     switch (curve) {
+        case 'spline':
         case 'monotone':
         case 'natural':
             return monotonePath(points);

package/dist/_chart/types.d.ts

@@ -31,7 +31,7 @@ export type BandScale = {
     bandwidth: number;
     step: number;
 };
-export type CurveType = 'linear' | 'monotone' | 'step' | 'natural';
+export type CurveType = 'linear' | 'monotone' | 'spline' | 'step' | 'natural';
 export type AxisOrientation = 'top' | 'right' | 'bottom' | 'left';
 export type PieSliceLayout = {
     index: number;

package/package.json

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