@juspay/svelte-ui-components 2.59.0 → 2.61.0

package/dist/PieChart/PieChart.svelte

@@ -6,7 +6,7 @@
   import { arcPath } from '../_chart/paths';
   import { computePieLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
-  import { formatNumber, formatPercent } from '../_chart/format';
+  import { formatNumber } from '../_chart/format';
   import type { LegendItem } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
@@ -20,7 +20,7 @@
     labelPosition = 'outside',
     showLegend = false,
     startAngle = -Math.PI / 2,
-    aspectRatio = 1,
+    aspectRatio,
     valueFormat,
     tooltipSnippet,
     center,
@@ -28,7 +28,10 @@
     onsliceclick,
     onslicehover,
     testId,
-    classes
+    classes,
+    semiCircle = false,
+    legendShowValues = false,
+    percentDecimals = 0
   }: PieChartProperties = $props();
 
   // ── State ──────────────────────────────────────────────────────
@@ -40,32 +43,93 @@
   let mouseX = $state(0);
   let mouseY = $state(0);
 
+  // Aspect ratio read from --piechart-semi-aspect-ratio CSS variable.
+  // Uses $effect so it re-reads whenever containerEl binds or semiCircle changes
+  // (e.g. media-query theme switch), not just on initial mount.
+  let semiAspectRatioCssVar = $state(2);
+
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    // Track semiCircle and containerEl so the effect re-runs when either changes.
+    void semiCircle;
+    void containerEl;
+    if (typeof window === 'undefined' || containerEl === null) {
+      return;
+    }
+    const rawValue = getComputedStyle(containerEl)
+      .getPropertyValue('--piechart-semi-aspect-ratio')
+      .trim();
+    const parsed = parseFloat(rawValue);
+    if (!Number.isNaN(parsed) && parsed > 0) {
+      semiAspectRatioCssVar = parsed;
+    }
+  });
+
   // ── Layout ─────────────────────────────────────────────────────
 
   let format = $derived(valueFormat ?? formatNumber);
   let total = $derived(data.reduce((sum, d) => sum + Math.max(0, d.value), 0));
+  let pctFormat = $derived.by(
+    () =>
+      (v: number): string =>
+        total === 0 ? '0%' : ((v / total) * 100).toFixed(percentDecimals) + '%'
+  );
   let isEmpty = $derived(data.length === 0 || total === 0);
 
+  // When semiCircle is true the effective aspect ratio is driven by:
+  // 1. The explicit `aspectRatio` prop (highest priority — always wins).
+  // 2. The `--piechart-semi-aspect-ratio` CSS variable (consumer CSS override).
+  // 3. The hardcoded default of 2 (width:height = 2:1).
+  // For a full circle the caller-provided `aspectRatio` or a square (1:1) default is used.
+  let effectiveAspectRatio = $derived(aspectRatio ?? (semiCircle ? semiAspectRatioCssVar : 1));
+
   let cx = $derived(chartWidth / 2);
-  let cy = $derived(chartHeight / 2);
+  // For a half-donut the SVG origin sits at the bottom of the drawing area so
+  // arcs radiate upward into the top half of the viewBox.
+  let cy = $derived(semiCircle ? chartHeight : chartHeight / 2);
   let outerR = $derived(
-    Math.max(10, Math.min(cx, cy) - (showLabels && labelPosition === 'outside' ? 40 : 10))
+    semiCircle
+      ? Math.max(10, chartWidth / 2 - (showLabels && labelPosition === 'outside' ? 40 : 10))
+      : Math.max(10, Math.min(cx, cy) - (showLabels && labelPosition === 'outside' ? 40 : 10))
   );
   let innerR = $derived(innerRadius > 0 ? outerR * Math.min(0.95, innerRadius) : 0);
 
-  let slices = $derived(
-    computePieLayout(data, startAngle, padAngle).map((s) => {
+  let slices = $derived.by(() => {
+    // For a full circle layout start at the caller-provided startAngle.
+    // For semi-circle: compute a full-circle layout anchored at -PI/2, then
+    // remap each angle so the entire sweep is compressed into PI radians
+    // (the top-half arc from -PI/2 to PI/2).
+    const layoutStartAngle = semiCircle ? -Math.PI / 2 : startAngle;
+    const rawSlices = computePieLayout(data, layoutStartAngle, padAngle);
+
+    return rawSlices.map((s) => {
+      let mappedStart = s.startAngle;
+      let mappedEnd = s.endAngle;
+      let mappedMid = s.midAngle;
+
+      if (semiCircle) {
+        // The raw layout spans [-PI/2, -PI/2 + 2*PI]. We compress it to
+        // [-PI/2, PI/2] by halving the angular distance from -PI/2.
+        const origin = -Math.PI / 2;
+        mappedStart = origin + (s.startAngle - origin) / 2;
+        mappedEnd = origin + (s.endAngle - origin) / 2;
+        mappedMid = origin + (s.midAngle - origin) / 2;
+      }
+
       const color = s.color ?? data[s.index]?.color ?? getColor(s.index);
       const labelR = labelPosition === 'outside' ? outerR + 16 : (innerR + outerR) / 2;
       return {
         ...s,
+        startAngle: mappedStart,
+        endAngle: mappedEnd,
+        midAngle: mappedMid,
         color,
-        path: arcPath(0, 0, innerR, outerR, s.startAngle, s.endAngle),
-        labelX: labelR * Math.cos(s.midAngle),
-        labelY: labelR * Math.sin(s.midAngle)
+        path: arcPath(0, 0, innerR, outerR, mappedStart, mappedEnd),
+        labelX: labelR * Math.cos(mappedMid),
+        labelY: labelR * Math.sin(mappedMid)
       };
-    })
-  );
+    });
+  });
 
   let legendItems = $derived<LegendItem[]>(
     data.map((d, i) => ({ label: d.label, color: d.color ?? getColor(i) }))
@@ -73,6 +137,13 @@
 
   let centerBoxSize = $derived(innerR > 0 ? Math.max(0, innerR * 1.3) : 0);
 
+  // The foreignObject for the center snippet is positioned relative to the <g>
+  // origin (which is at cx, cy in SVG space). The box is always centred on
+  // the translated origin: for a full circle that is the geometric centre, and
+  // for a semiCircle the <g> origin sits at the chord line (bottom of the arc),
+  // so the snippet is centred on the chord as specified.
+  let centerFOY = $derived(-centerBoxSize / 2);
+
   // ── Tooltip ────────────────────────────────────────────────────
 
   let tooltipData = $derived.by(() => {
@@ -85,7 +156,7 @@
       items: [
         {
           label: s.label,
-          value: `${format(s.value)} (${formatPercent(s.value, total)})`,
+          value: `${format(s.value)} (${pctFormat(s.value)})`,
           color: s.color
         }
       ]
@@ -123,11 +194,15 @@
   {#if isEmpty && typeof empty === 'function'}
     <div class="chart-empty">{@render empty()}</div>
   {:else}
-    {#if showLegend}
+    {#if showLegend && !legendShowValues}
       <Legend items={legendItems} position="top" />
     {/if}
 
-    <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
+    <ChartContainer
+      bind:width={chartWidth}
+      bind:height={chartHeight}
+      aspectRatio={effectiveAspectRatio}
+    >
       <g transform="translate({cx}, {cy})">
         {#each slices as slice (slice.index)}
           <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -155,7 +230,7 @@
             >
               {#if showLabels}{slice.label}{/if}
               {#if showValues}
-                {formatPercent(slice.value, total)}{/if}
+                {pctFormat(slice.value)}{/if}
             </text>
           {/if}
         {/each}
@@ -163,7 +238,7 @@
         {#if innerR > 0 && typeof center === 'function' && centerBoxSize > 0}
           <foreignObject
             x={-centerBoxSize / 2}
-            y={-centerBoxSize / 2}
+            y={centerFOY}
             width={centerBoxSize}
             height={centerBoxSize}
           >
@@ -175,6 +250,20 @@
       </g>
     </ChartContainer>
 
+    {#if showLegend && legendShowValues}
+      <ul class="pie-legend-values">
+        {#each data as d, i (i)}
+          <li class="pie-legend-row">
+            <span class="pie-legend-swatch" style="background: {d.color ?? getColor(i)}"></span>
+            <span class="pie-legend-label">{d.label}</span>
+            <span class="pie-legend-value">
+              {format(d.value)}&nbsp;{pctFormat(d.value)}
+            </span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
     {#if typeof tooltipSnippet === 'function' && hoveredIndex !== null && data[hoveredIndex]}
       <div class="chart-tooltip-slot" style="left: {mouseX + 12}px; top: {mouseY - 12}px;">
         {@render tooltipSnippet(data[hoveredIndex], hoveredIndex)}
@@ -233,4 +322,37 @@
     color: var(--chart-empty-color, #9ca3af);
     text-align: center;
   }
+  .pie-legend-values {
+    display: flex;
+    flex-direction: column;
+    gap: var(--piechart-legend-gap, 8px);
+    padding: var(--piechart-legend-padding, 12px 0 0 0);
+    font-family: var(--chart-font-family, inherit);
+    list-style: none;
+    margin: 0;
+  }
+  .pie-legend-row {
+    display: flex;
+    align-items: center;
+    gap: var(--piechart-legend-row-gap, 6px);
+  }
+  .pie-legend-swatch {
+    display: inline-block;
+    width: var(--chart-legend-swatch-size, 12px);
+    height: var(--chart-legend-swatch-size, 12px);
+    border-radius: var(--piechart-legend-swatch-radius, 2px);
+    flex-shrink: 0;
+  }
+  .pie-legend-label {
+    font-size: var(--chart-legend-font-size, 12px);
+    color: var(--chart-legend-color, #333);
+    min-width: var(--piechart-legend-label-min-width, 120px);
+  }
+  .pie-legend-value {
+    margin-left: auto;
+    font-size: var(--piechart-legend-value-font-size, 12px);
+    color: var(--piechart-legend-value-color, #333);
+    min-width: var(--piechart-legend-value-min-width, 60px);
+    text-align: right;
+  }
 </style>

package/dist/PieChart/properties.d.ts

@@ -23,6 +23,9 @@ export type OptionalPieChartProperties = {
     empty?: Snippet;
     testId?: string;
     classes?: string;
+    semiCircle?: boolean;
+    legendShowValues?: boolean;
+    percentDecimals?: number;
 };
 export type PieChartEventProperties = {
     onsliceclick?: (event: {

package/dist/_chart/ChartContainer.svelte

@@ -13,22 +13,36 @@
   }: ChartContainerProperties = $props();
 
   let containerEl: HTMLDivElement | null = $state(null);
+  let isMounted = false;
 
-  onMount(() => {
+  function measure() {
     if (containerEl === null) {
       return;
     }
+    const rect = containerEl.getBoundingClientRect();
+    const w = Math.round(rect.width);
+    width = w;
+    height = Math.max(minHeight, Math.round(w / aspectRatio));
+  }
+
+  // Re-measure whenever aspectRatio changes at runtime (e.g. semiCircle toggled).
+  // isMounted guards against running after the onMount cleanup has disconnected
+  // the ResizeObserver and the component is being torn down.
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    // Reading aspectRatio here makes this effect re-run whenever it changes.
+    void aspectRatio;
+    if (isMounted) {
+      measure();
+    }
+  });
 
-    function measure() {
-      if (containerEl === null) {
-        return;
-      }
-      const rect = containerEl.getBoundingClientRect();
-      const w = Math.round(rect.width);
-      width = w;
-      height = Math.max(minHeight, Math.round(w / aspectRatio));
+  onMount(() => {
+    if (containerEl === null) {
+      return;
     }
 
+    isMounted = true;
     measure();
 
     // Coalesce bursts of resize events into a single measure per frame, always
@@ -41,6 +55,7 @@
     observer.observe(containerEl);
 
     return () => {
+      isMounted = false;
       cancelAnimationFrame(frame);
       observer.disconnect();
     };

package/dist/_chart/format.d.ts

@@ -1,3 +1,4 @@
 export declare function formatNumber(value: number): string;
 export declare function formatPercent(value: number, total: number): string;
 export declare function defaultTickFormat(value: number | string): string;
+export declare function formatNumberIndian(value: number): string;

package/dist/_chart/format.js

@@ -26,3 +26,16 @@ export function defaultTickFormat(value) {
     }
     return formatNumber(value);
 }
+export function formatNumberIndian(value) {
+    const abs = Math.abs(value);
+    if (abs >= 1e7) {
+        return (value / 1e7).toFixed(2).replace(/\.?0+$/, '') + 'Cr';
+    }
+    if (abs >= 1e5) {
+        return (value / 1e5).toFixed(2).replace(/\.?0+$/, '') + 'L';
+    }
+    if (abs >= 1e3) {
+        return (value / 1e3).toFixed(2).replace(/\.?0+$/, '') + 'K';
+    }
+    return value.toLocaleString('en-IN');
+}

package/dist/index.d.ts

@@ -126,3 +126,4 @@ export type * from './BarChart/properties';
 export type * from './PieChart/properties';
 export type * from './SankeyChart/properties';
 export { validateInput } from './utils';
+export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -65,3 +65,4 @@ export { default as BarChart } from './BarChart/BarChart.svelte';
 export { default as PieChart } from './PieChart/PieChart.svelte';
 export { default as SankeyChart } from './SankeyChart/SankeyChart.svelte';
 export { validateInput } from './utils';
+export { formatNumberIndian } from './_chart/format';

package/package.json

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