@juspay/svelte-ui-components 2.100.2 → 2.102.0

package/dist/BarChart/BarChart.svelte

@@ -246,6 +246,9 @@
   let isStackedMode = $derived(isMulti && groupMode === 'stacked');
 
   function getDisplayValue(bar: BarRect): string {
+    if (typeof bar.dataPoint.valueLabel === 'string' && bar.dataPoint.valueLabel.length > 0) {
+      return bar.dataPoint.valueLabel;
+    }
     if (isNormalized && bar.normalizedValue != null) {
       return normalizedFormat(bar.normalizedValue);
     }
@@ -641,7 +644,25 @@
       right: dims.margin.right,
       bottom: dims.margin.bottom,
       left: dims.margin.left
-    }
+    },
+    bars: bars.map((bar, index) => {
+      // barLabels is index-aligned with bars (both derive from the same list);
+      // fall back to the bar's top-centre when value labels are hidden.
+      const barLabel = barLabels[index];
+      return {
+        index,
+        seriesIndex: bar.si,
+        pointIndex: bar.pi,
+        x: bar.x,
+        y: bar.y,
+        width: bar.width,
+        height: bar.height,
+        value: bar.dataPoint.value,
+        label: bar.dataPoint.label ?? '',
+        labelX: barLabel ? barLabel.p.x : bar.x + bar.width / 2,
+        labelY: barLabel ? barLabel.p.y : bar.y
+      };
+    })
   });
 
   // ── Interactions ───────────────────────────────────────────────

package/dist/BarChart/properties.d.ts

@@ -40,6 +40,12 @@ export type BarChartDataPoint = {
     range?: [number, number];
     /** Per-bar fill: plain color, pattern, or gradient. Overrides series color. */
     color?: BarFill;
+    /**
+     * Custom text for this bar's value label, rendered verbatim instead of the
+     * `valueFormat(value)` output. Lets a caller label a single bar differently —
+     * e.g. a funnel baseline showing a raw count while the rest show a percentage.
+     */
+    valueLabel?: string;
 };
 export type BarChartSeries = {
     name: string;
@@ -47,6 +53,36 @@ export type BarChartSeries = {
     /** Series-level fill: plain color, pattern, or gradient. */
     color?: BarFill;
 };
+/**
+ * Geometry for a single rendered bar, in inner (post-margin) coordinates — the
+ * same space the overlay `<g>` draws in, so values map 1:1 without re-applying
+ * the margin. `labelX`/`labelY` are the value-label anchor when `showValues` is
+ * on, otherwise the bar's top-centre.
+ */
+export type BarChartBarPosition = {
+    /** Zero-based index in render order. */
+    index: number;
+    /** Series index (0-based). */
+    seriesIndex: number;
+    /** Category / point index (0-based). */
+    pointIndex: number;
+    /** Bar rectangle x (left edge). */
+    x: number;
+    /** Bar rectangle y (top edge). */
+    y: number;
+    /** Bar rectangle width. */
+    width: number;
+    /** Bar rectangle height. */
+    height: number;
+    /** The datum's numeric value. */
+    value: number;
+    /** The datum's category label. */
+    label: string;
+    /** Value-label anchor x. */
+    labelX: number;
+    /** Value-label anchor y. */
+    labelY: number;
+};
 export type BarChartRenderContext = {
     /** Inner drawing width (pixels) */
     innerWidth: number;
@@ -65,6 +101,12 @@ export type BarChartRenderContext = {
         bottom: number;
         left: number;
     };
+    /**
+     * Per-bar geometry in render order. Lets an overlay anchor annotations
+     * (e.g. an icon above the first funnel step's value) to a specific bar
+     * without re-deriving the band scale from innerWidth.
+     */
+    bars: BarChartBarPosition[];
 };
 export type BarChartProperties = OptionalBarChartProperties & BarChartEventProperties;
 export type OptionalBarChartProperties = {

package/package.json

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