@juspay/svelte-ui-components 2.101.0 → 2.103.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -246,6 +246,9 @@
|
|
|
246
246
|
let isStackedMode = $derived(isMulti && groupMode === 'stacked');
|
|
247
247
|
|
|
248
248
|
function getDisplayValue(bar: BarRect): string {
|
|
249
|
+
if (typeof bar.dataPoint.valueLabel === 'string' && bar.dataPoint.valueLabel.length > 0) {
|
|
250
|
+
return bar.dataPoint.valueLabel;
|
|
251
|
+
}
|
|
249
252
|
if (isNormalized && bar.normalizedValue != null) {
|
|
250
253
|
return normalizedFormat(bar.normalizedValue);
|
|
251
254
|
}
|
|
@@ -40,6 +40,12 @@ export type BarChartDataPoint = {
|
|
|
40
40
|
range?: [number, number];
|
|
41
41
|
/** Per-bar fill: plain color, pattern, or gradient. Overrides series color. */
|
|
42
42
|
color?: BarFill;
|
|
43
|
+
/**
|
|
44
|
+
* Custom text for this bar's value label, rendered verbatim instead of the
|
|
45
|
+
* `valueFormat(value)` output. Lets a caller label a single bar differently —
|
|
46
|
+
* e.g. a funnel baseline showing a raw count while the rest show a percentage.
|
|
47
|
+
*/
|
|
48
|
+
valueLabel?: string;
|
|
43
49
|
};
|
|
44
50
|
export type BarChartSeries = {
|
|
45
51
|
name: string;
|
|
@@ -288,6 +288,7 @@
|
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
.statcard-header {
|
|
291
|
+
order: var(--statcard-header-order, 0);
|
|
291
292
|
display: flex;
|
|
292
293
|
align-items: center;
|
|
293
294
|
justify-content: space-between;
|
|
@@ -362,6 +363,7 @@
|
|
|
362
363
|
}
|
|
363
364
|
|
|
364
365
|
.statcard-value-row {
|
|
366
|
+
order: var(--statcard-value-row-order, 0);
|
|
365
367
|
display: flex;
|
|
366
368
|
align-items: var(--statcard-value-row-align, baseline);
|
|
367
369
|
gap: var(--statcard-value-row-gap, 8px);
|
|
@@ -391,6 +393,7 @@
|
|
|
391
393
|
}
|
|
392
394
|
|
|
393
395
|
.statcard-subtitle {
|
|
396
|
+
order: var(--statcard-subtitle-order, 0);
|
|
394
397
|
font-size: var(--statcard-subtitle-font-size, 12px);
|
|
395
398
|
font-weight: var(--statcard-subtitle-font-weight, 400);
|
|
396
399
|
color: var(--statcard-subtitle-color, #9ca3af);
|
|
@@ -399,6 +402,7 @@
|
|
|
399
402
|
|
|
400
403
|
/* Multi-row layout */
|
|
401
404
|
.statcard-rows {
|
|
405
|
+
order: var(--statcard-rows-order, 0);
|
|
402
406
|
display: flex;
|
|
403
407
|
flex-direction: column;
|
|
404
408
|
gap: var(--statcard-rows-gap, 0px);
|
|
@@ -473,7 +477,7 @@
|
|
|
473
477
|
font-weight: var(--statcard-breakdown-heading-font-weight, 600);
|
|
474
478
|
color: var(--statcard-breakdown-heading-color, #6b7280);
|
|
475
479
|
letter-spacing: 0.04em;
|
|
476
|
-
text-transform: uppercase;
|
|
480
|
+
text-transform: var(--statcard-breakdown-heading-text-transform, uppercase);
|
|
477
481
|
margin-top: var(--statcard-breakdown-heading-margin-top, 6px);
|
|
478
482
|
}
|
|
479
483
|
|
|
@@ -486,7 +490,9 @@
|
|
|
486
490
|
|
|
487
491
|
.statcard-breakdown-item {
|
|
488
492
|
display: flex;
|
|
489
|
-
flex-direction: column;
|
|
493
|
+
flex-direction: var(--statcard-breakdown-item-flex-direction, column);
|
|
494
|
+
align-items: var(--statcard-breakdown-item-align-items, stretch);
|
|
495
|
+
flex-wrap: var(--statcard-breakdown-item-flex-wrap, nowrap);
|
|
490
496
|
gap: var(--statcard-breakdown-item-gap, 2px);
|
|
491
497
|
}
|
|
492
498
|
|
|
@@ -494,6 +500,7 @@
|
|
|
494
500
|
as the caption). Previously the delta was a third stacked child, so it
|
|
495
501
|
rendered on its own line beneath the number. */
|
|
496
502
|
.statcard-breakdown-value-line {
|
|
503
|
+
order: var(--statcard-breakdown-value-line-order, 0);
|
|
497
504
|
display: flex;
|
|
498
505
|
align-items: baseline;
|
|
499
506
|
gap: var(--statcard-breakdown-value-gap, 6px);
|