@juspay/svelte-ui-components 2.106.0 → 2.106.2

package/dist/LineChart/LineChart.svelte

@@ -131,9 +131,12 @@
     if (xDomain) {
       return xDomain;
     }
+    // Non-finite coordinates mark gap points in sparse series; they must not
+    // poison the auto-domain (Math.min/max propagate NaN).
     const allX = series
       .filter((_, si) => !hiddenSeries.has(si))
-      .flatMap((s) => s.data.map((d) => d.x));
+      .flatMap((s) => s.data.map((d) => d.x))
+      .filter((x) => Number.isFinite(x));
     if (allX.length === 0) {
       return [0, 1];
     }
@@ -145,7 +148,8 @@
     }
     const allY = series
       .filter((_, si) => !hiddenSeries.has(si))
-      .flatMap((s) => s.data.map((d) => d.y));
+      .flatMap((s) => s.data.map((d) => d.y))
+      .filter((y) => Number.isFinite(y));
     if (allY.length === 0) {
       return [0, 1];
     }
@@ -170,7 +174,8 @@
   });
 
   let yTickCount = $derived(Math.max(2, Math.min(6, Math.floor(chartHeight / 70))));
-  let xTickCount = $derived(Math.max(2, Math.min(8, Math.floor(chartWidth / 90))));
+  // Capped at 6 per the design-system line-chart spec ("Max no. of ticks should be 6").
+  let xTickCount = $derived(Math.max(2, Math.min(6, Math.floor(chartWidth / 90))));
   // Category positions are whole numbers — fractional tick steps would repeat labels.
   let xIntegerTicks = $derived(Boolean(xAxisCategories && xAxisCategories.length > 0));
 
@@ -222,9 +227,14 @@
     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 hoverLineX = $derived.by<number | null>(() => {
+    if (hovered === null) {
+      return null;
+    }
+    const x = lines[hovered.si]?.points[hovered.pi]?.x ?? null;
+    // A gap point (non-finite) anchors no crosshair.
+    return x !== null && Number.isFinite(x) ? x : null;
+  });
 
   // When a highlight index is active (imperative or prop), show the vertical
   // crosshair at that point even without a mouse hover.
@@ -238,7 +248,7 @@
         continue;
       }
       const point = line.points[effectiveHighlight];
-      if (point) {
+      if (point && Number.isFinite(point.x)) {
         return point.x;
       }
     }
@@ -280,7 +290,9 @@
           ({ si }) =>
             !hiddenSeries.has(si) &&
             (shared || si === hovered?.si) &&
-            series[si]?.data[hovered!.pi] != null
+            series[si]?.data[hovered!.pi] != null &&
+            // A gap point (non-finite y) has nothing to report in the tooltip.
+            Number.isFinite(series[si].data[hovered!.pi].y)
         )
         .map(({ p }) => ({ label: p.name, value: formatNumber(p.y), color: p.color }))
     };
@@ -296,7 +308,10 @@
         return [];
       }
       const p = line.points[hovered!.pi];
-      return p ? [{ x: p.x, y: p.y, color: line.color }] : [];
+      // A gap point (non-finite) has no marker, so it gets no halo either.
+      return p && Number.isFinite(p.x) && Number.isFinite(p.y)
+        ? [{ x: p.x, y: p.y, color: line.color }]
+        : [];
     });
   });
 
@@ -408,6 +423,11 @@
     let nearestPi = 0;
     let nearestXDist = Infinity;
     for (let i = 0; i < reference.length; i++) {
+      // Gap points (non-finite) are not hoverable — NaN distances would never
+      // win the comparison, but skipping keeps nearestPi from defaulting to one.
+      if (!Number.isFinite(reference[i].x) || !Number.isFinite(reference[i].y)) {
+        continue;
+      }
       const px = xScale(reference[i].x);
       const dist = Math.abs(px - plotX);
       if (dist < nearestXDist) {
@@ -619,7 +639,7 @@
                 stroke-width={strokeWidth}
                 fill="none"
               />
-              {#if line.points.length === 1 && !showDots}
+              {#if line.points.length === 1 && !showDots && Number.isFinite(line.points[0].x) && Number.isFinite(line.points[0].y)}
                 <circle
                   class="single-point"
                   class:dimmed={isLineDimmed(si)}
@@ -631,21 +651,24 @@
               {/if}
               {#if showDots}
                 {#each line.points as point, pi (pi)}
-                  <circle
-                    class="dot"
-                    class:dimmed={isDotDimmed(si, pi)}
-                    class:highlighted={isHighlightedDot(si, pi)}
-                    cx={point.x}
-                    cy={point.y}
-                    r={isHighlightedDot(si, pi) ? dotRadius * 1.5 : dotRadius}
-                    fill={line.color}
-                  />
+                  <!-- Gap points (non-finite) render no marker. -->
+                  {#if Number.isFinite(point.x) && Number.isFinite(point.y)}
+                    <circle
+                      class="dot"
+                      class:dimmed={isDotDimmed(si, pi)}
+                      class:highlighted={isHighlightedDot(si, pi)}
+                      cx={point.x}
+                      cy={point.y}
+                      r={isHighlightedDot(si, pi) ? dotRadius * 1.5 : dotRadius}
+                      fill={line.color}
+                    />
+                  {/if}
                 {/each}
               {/if}
               {#if showValues && pointLabelPlacements[si]}
                 {#each line.points as _point, pi (pi)}
                   {@const pl = pointLabelPlacements[si][pi]}
-                  {#if pl?.visible}
+                  {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
                     <text
                       class="point-value"
                       x={pl.x}

package/dist/_chart/paths.js

@@ -30,6 +30,31 @@ export function arcPath(cx, cy, innerR, outerR, startAngle, endAngle) {
     }
     return `M ${cx} ${cy}` + `L ${x1} ${y1}` + `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}Z`;
 }
+/**
+ * Splits a point run into finite sub-runs. A non-finite coordinate (NaN /
+ * Infinity — typically a missing value in a sparse series) acts as a break:
+ * the line renders as separate segments with a gap at the missing point
+ * instead of one poisoned path — a single NaN coordinate in `d` makes the
+ * browser drop everything from that command onward, visually cutting the
+ * line mid-chart.
+ */
+function finiteSegments(points) {
+    const segments = [];
+    let current = [];
+    for (const point of points) {
+        if (Number.isFinite(point.x) && Number.isFinite(point.y)) {
+            current.push(point);
+        }
+        else if (current.length > 0) {
+            segments.push(current);
+            current = [];
+        }
+    }
+    if (current.length > 0) {
+        segments.push(current);
+    }
+    return segments;
+}
 function linearPath(points) {
     if (points.length === 0) {
         return '';
@@ -113,7 +138,7 @@ function monotonePath(points) {
     }
     return d;
 }
-export function linePath(points, curve = 'linear') {
+function linePathSegment(points, curve) {
     if (points.length < 2) {
         return points.length === 1 ? `M ${points[0].x} ${points[0].y}` : '';
     }
@@ -128,15 +153,27 @@ export function linePath(points, curve = 'linear') {
             return linearPath(points);
     }
 }
-export function areaPath(points, baseline, curve = 'linear') {
+export function linePath(points, curve = 'linear') {
+    return finiteSegments(points)
+        .map((segment) => linePathSegment(segment, curve))
+        .filter((d) => d !== '')
+        .join(' ');
+}
+function areaPathSegment(points, baseline, curve) {
     if (points.length === 0) {
         return '';
     }
-    const topPath = linePath(points, curve);
+    const topPath = linePathSegment(points, curve);
     const lastPoint = points[points.length - 1];
     const firstPoint = points[0];
     return topPath + ` L ${lastPoint.x} ${baseline} L ${firstPoint.x} ${baseline} Z`;
 }
+export function areaPath(points, baseline, curve = 'linear') {
+    return finiteSegments(points)
+        .map((segment) => areaPathSegment(segment, baseline, curve))
+        .filter((d) => d !== '')
+        .join(' ');
+}
 /**
  * Builds an SVG path string for a rectangle with independently-controlled
  * corner radii. Each radius is clamped to Math.min(r, w/2, h/2) so the

package/dist/_chart/scales.js

@@ -36,11 +36,39 @@ export function computeLinearTicks(domain, count = 5, integer = false) {
     if (integer && step < 1) {
         step = 1;
     }
-    const ticks = [];
-    let tick = Math.ceil(min / step) * step;
-    while (tick <= max + step * 0.001) {
-        ticks.push(Math.round(tick * 1e10) / 1e10);
-        tick += step;
+    const buildTicks = (tickStep) => {
+        const ticks = [];
+        let tick = Math.ceil(min / tickStep) * tickStep;
+        while (tick <= max + tickStep * 0.001) {
+            ticks.push(Math.round(tick * 1e10) / 1e10);
+            tick += tickStep;
+        }
+        return ticks;
+    };
+    // The next rung up the 1-2-5-10 ladder, e.g. 0.2 → 0.5, 2 → 5, 5 → 10.
+    const nextNiceStep = (current) => {
+        const stepExp = Math.floor(Math.log10(current) + 1e-10);
+        const stepBase = Math.pow(10, stepExp);
+        const mantissa = current / stepBase;
+        if (mantissa < 1.5) {
+            return stepBase * 2;
+        }
+        if (mantissa < 3.5) {
+            return stepBase * 5;
+        }
+        return stepBase * 10;
+    };
+    // `count` is a hard maximum (design-system chart spec: "max 6 ticks"), not a
+    // hint — the nice-step ladder can overshoot it (range 14 at count 6 picks
+    // step 2 → 7 ticks). Escalate the step until the ticks fit: category axes
+    // step through whole numbers (any integer stride is a valid category step,
+    // so 15 days at max 6 lands on the natural every-3rd-day), numeric axes
+    // climb the ladder so tick values stay round.
+    let ticks = buildTicks(step);
+    const maxTicks = Math.max(2, count);
+    while (ticks.length > maxTicks) {
+        step = integer ? Math.floor(step) + 1 : nextNiceStep(step);
+        ticks = buildTicks(step);
     }
     return ticks;
 }

package/package.json

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