@juspay/svelte-ui-components 2.106.1 → 2.107.0

package/dist/BarChart/BarChart.svelte

@@ -78,6 +78,7 @@
     stackNormalize = false,
     scrollable = false,
     minBandWidth = 48,
+    marginX,
     tooltipSnippet,
     empty,
     renderOverlay,
@@ -309,7 +310,19 @@
       base: { top: 20, left: showYAxis ? 50 : 28, right: 28, bottom: showXAxis ? 40 : 8 }
     });
   });
-  let dims = $derived(layout);
+  let dims = $derived.by(() => {
+    if (marginX == null) {
+      return layout;
+    }
+    // Fixed horizontal inset: overrides the auto layout's tick-label padding
+    // so the plot (and its edge bars) runs to the requested inset.
+    const inset = Math.max(0, marginX);
+    return {
+      ...layout,
+      margin: { ...layout.margin, left: inset, right: inset },
+      innerWidth: Math.max(0, chartWidth - inset * 2)
+    };
+  });
 
   let catScale = $derived(
     createBandScale(labels, isVertical ? [0, dims.innerWidth] : [0, dims.innerHeight], barPadding)
@@ -610,6 +623,38 @@
     }
   }
 
+  // Grouped/single bars round only their value end (design-system bar spec):
+  // a vertical bar rounds its top (bottom when the value is negative), a
+  // horizontal bar its right (left when negative). The old all-corner rect
+  // rounding let the backdrop/track behind a bar peek through the notches at
+  // its baseline corners. Floating [low, high] range bars round both ends.
+  function valueEndBarPath(bar: BarRect): string {
+    if (barRadius <= 0) {
+      return roundedRectPath(bar.x, bar.y, bar.width, bar.height, 0, 0, 0, 0);
+    }
+    if (bar.isFloating) {
+      return roundedRectPath(
+        bar.x,
+        bar.y,
+        bar.width,
+        bar.height,
+        barRadius,
+        barRadius,
+        barRadius,
+        barRadius
+      );
+    }
+    const isNegative = (bar.dataPoint.value ?? 0) < 0;
+    if (isVertical) {
+      return isNegative
+        ? roundedRectPath(bar.x, bar.y, bar.width, bar.height, 0, 0, barRadius, barRadius)
+        : roundedRectPath(bar.x, bar.y, bar.width, bar.height, barRadius, barRadius, 0, 0);
+    }
+    return isNegative
+      ? roundedRectPath(bar.x, bar.y, bar.width, bar.height, barRadius, 0, 0, barRadius)
+      : roundedRectPath(bar.x, bar.y, bar.width, bar.height, 0, barRadius, barRadius, 0);
+  }
+
   // ── Fill attribute helper ──────────────────────────────────────
 
   function barFillAttr(bar: BarRect): string {
@@ -918,7 +963,7 @@
                       onclick={() => handleClick(bar)}
                     />
                   {:else}
-                    <rect
+                    <path
                       class="bar"
                       class:hovered={hovered?.si === bar.si && hovered?.pi === bar.pi}
                       class:highlighted={effectiveHighlightedIndex !== null &&
@@ -927,12 +972,7 @@
                         (hovered.si !== bar.si || hovered.pi !== bar.pi)) ||
                         (effectiveHighlightedIndex !== null &&
                           effectiveHighlightedIndex !== bar.pi)}
-                      x={bar.x}
-                      y={bar.y}
-                      width={bar.width}
-                      height={bar.height}
-                      rx={barRadius}
-                      ry={barRadius}
+                      d={valueEndBarPath(bar)}
                       fill={barFillAttr(bar)}
                       data-pw={`bar-${i}`}
                       tabindex="0"

package/dist/BarChart/properties.d.ts

@@ -161,6 +161,14 @@ export type OptionalBarChartProperties = {
      * is `false`. Default is `48`.
      */
     minBandWidth?: number;
+    /**
+     * Fixed horizontal inset (px) between the svg edges and the plot, overriding
+     * the auto-computed left/right margins. Use for edge-to-edge funnels where
+     * the auto layout's tick-label padding leaves dead space beside the first and
+     * last bars. Category tick labels near the edges may clip if they are wider
+     * than their band, so pair small values with short labels.
+     */
+    marginX?: number;
     tooltipSnippet?: Snippet<[BarChartDataPoint, number]>;
     empty?: Snippet;
     /**

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.1",
+  "version": "2.107.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",