@flux-ui/statistics 3.1.9 → 3.2.0-beta.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.
- package/dist/index.css +40 -1
- package/dist/index.js +5150 -4927
- package/dist/index.js.map +1 -1
- package/package.json +10 -10
- package/src/component/FluxStatisticsDetailsTable.vue +7 -2
- package/src/component/FluxStatisticsDetailsTableRow.vue +9 -3
- package/src/component/FluxStatisticsLegend.vue +15 -3
- package/src/component/FluxStatisticsLegendItem.vue +6 -13
- package/src/component/FluxStatisticsPercentageBar.vue +18 -13
- package/src/css/Change.module.scss +1 -0
- package/src/css/Comparison.module.scss +2 -0
- package/src/css/DetailsTable.module.scss +1 -0
- package/src/css/Kpi.module.scss +1 -0
- package/src/css/Legend.module.scss +23 -1
- package/src/css/Meter.module.scss +1 -0
- package/src/css/Metric.module.scss +3 -0
package/dist/index.css
CHANGED
|
@@ -223,6 +223,7 @@
|
|
|
223
223
|
color: var(--color);
|
|
224
224
|
font-size: 12px;
|
|
225
225
|
font-weight: 500;
|
|
226
|
+
font-variant-numeric: tabular-nums;
|
|
226
227
|
}.statistics-chart-pane {
|
|
227
228
|
--aspect-ratio: unset;
|
|
228
229
|
container: chart-pane/inline-size;
|
|
@@ -293,6 +294,7 @@
|
|
|
293
294
|
color: var(--foreground-prominent);
|
|
294
295
|
font-size: 21px;
|
|
295
296
|
font-weight: 800;
|
|
297
|
+
font-variant-numeric: tabular-nums;
|
|
296
298
|
line-height: 28px;
|
|
297
299
|
}
|
|
298
300
|
|
|
@@ -300,6 +302,7 @@
|
|
|
300
302
|
color: var(--foreground-secondary);
|
|
301
303
|
font-size: 18px;
|
|
302
304
|
font-weight: 600;
|
|
305
|
+
font-variant-numeric: tabular-nums;
|
|
303
306
|
line-height: 28px;
|
|
304
307
|
}
|
|
305
308
|
|
|
@@ -343,6 +346,7 @@
|
|
|
343
346
|
}
|
|
344
347
|
|
|
345
348
|
.details-table-row-value {
|
|
349
|
+
font-variant-numeric: tabular-nums;
|
|
346
350
|
text-align: right;
|
|
347
351
|
}
|
|
348
352
|
|
|
@@ -448,6 +452,7 @@
|
|
|
448
452
|
color: var(--foreground-prominent);
|
|
449
453
|
font-size: 21px;
|
|
450
454
|
font-weight: 800;
|
|
455
|
+
font-variant-numeric: tabular-nums;
|
|
451
456
|
line-height: 36px;
|
|
452
457
|
}.statistics-legend {
|
|
453
458
|
display: flex;
|
|
@@ -466,17 +471,31 @@
|
|
|
466
471
|
.statistics-legend-item {
|
|
467
472
|
--color: var(--primary-600);
|
|
468
473
|
position: relative;
|
|
474
|
+
appearance: none;
|
|
469
475
|
display: flex;
|
|
470
476
|
padding: 6px;
|
|
471
477
|
margin: 0 -9px;
|
|
472
478
|
align-items: flex-start;
|
|
473
479
|
flex-flow: row nowrap;
|
|
474
480
|
gap: 9px;
|
|
481
|
+
color: inherit;
|
|
482
|
+
font: inherit;
|
|
475
483
|
font-size: 14px;
|
|
476
484
|
line-height: 20px;
|
|
485
|
+
text-align: inherit;
|
|
477
486
|
white-space: nowrap;
|
|
487
|
+
background: none;
|
|
488
|
+
border: 0;
|
|
478
489
|
border-radius: var(--radius-half);
|
|
490
|
+
cursor: default;
|
|
479
491
|
transition: background 120ms var(--swift-out);
|
|
492
|
+
z-index: 0;
|
|
493
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
494
|
+
outline-offset: 0;
|
|
495
|
+
}
|
|
496
|
+
.statistics-legend-item:focus-visible {
|
|
497
|
+
outline-color: var(--primary-600);
|
|
498
|
+
outline-offset: 0;
|
|
480
499
|
}
|
|
481
500
|
|
|
482
501
|
.statistics-legend-item.is-hovered {
|
|
@@ -504,17 +523,19 @@
|
|
|
504
523
|
}
|
|
505
524
|
|
|
506
525
|
.statistics-legend-item-value {
|
|
526
|
+
font-variant-numeric: tabular-nums;
|
|
507
527
|
margin-left: 15px;
|
|
508
528
|
text-align: right;
|
|
509
529
|
}
|
|
510
530
|
|
|
511
|
-
.statistics-legend-item + .statistics-legend-item::before {
|
|
531
|
+
.statistics-legend-item:not(:focus-visible) + .statistics-legend-item:not(:focus-visible)::before {
|
|
512
532
|
position: absolute;
|
|
513
533
|
top: -2px;
|
|
514
534
|
left: 0;
|
|
515
535
|
right: 0;
|
|
516
536
|
content: "";
|
|
517
537
|
border-top: 1px dashed var(--surface-stroke);
|
|
538
|
+
z-index: -1;
|
|
518
539
|
}
|
|
519
540
|
|
|
520
541
|
.statistics-legend-compact {
|
|
@@ -532,13 +553,27 @@
|
|
|
532
553
|
|
|
533
554
|
.statistics-legend-item-compact {
|
|
534
555
|
--color: var(--primary-600);
|
|
556
|
+
appearance: none;
|
|
535
557
|
display: flex;
|
|
558
|
+
padding: 0;
|
|
536
559
|
align-items: center;
|
|
537
560
|
flex-flow: row nowrap;
|
|
538
561
|
gap: 6px;
|
|
562
|
+
color: inherit;
|
|
563
|
+
font: inherit;
|
|
539
564
|
font-size: 14px;
|
|
540
565
|
line-height: 1;
|
|
566
|
+
text-align: inherit;
|
|
541
567
|
white-space: nowrap;
|
|
568
|
+
background: none;
|
|
569
|
+
border: 0;
|
|
570
|
+
cursor: default;
|
|
571
|
+
outline: 2px solid rgb(from var(--primary-600) r g b/0);
|
|
572
|
+
outline-offset: 0;
|
|
573
|
+
}
|
|
574
|
+
.statistics-legend-item-compact:focus-visible {
|
|
575
|
+
outline-color: var(--primary-600);
|
|
576
|
+
outline-offset: 0;
|
|
542
577
|
}
|
|
543
578
|
.statistics-legend-item-compact .statistics-legend-item-color {
|
|
544
579
|
margin: 0;
|
|
@@ -622,6 +657,7 @@
|
|
|
622
657
|
color: var(--foreground-prominent);
|
|
623
658
|
font-size: 16px;
|
|
624
659
|
font-weight: 700;
|
|
660
|
+
font-variant-numeric: tabular-nums;
|
|
625
661
|
}
|
|
626
662
|
|
|
627
663
|
.statistics-meter-header-tip {
|
|
@@ -671,11 +707,13 @@
|
|
|
671
707
|
color: var(--foreground);
|
|
672
708
|
font-size: 18px;
|
|
673
709
|
font-weight: 600;
|
|
710
|
+
font-variant-numeric: tabular-nums;
|
|
674
711
|
}
|
|
675
712
|
.statistics-metric-content strong {
|
|
676
713
|
color: var(--foreground-prominent);
|
|
677
714
|
font-size: 21px;
|
|
678
715
|
font-weight: 800;
|
|
716
|
+
font-variant-numeric: tabular-nums;
|
|
679
717
|
line-height: 36px;
|
|
680
718
|
}
|
|
681
719
|
.statistics-metric-content small:not(:first-child) {
|
|
@@ -703,6 +741,7 @@
|
|
|
703
741
|
color: var(--foreground-prominent);
|
|
704
742
|
font-size: 18px;
|
|
705
743
|
font-weight: 800;
|
|
744
|
+
font-variant-numeric: tabular-nums;
|
|
706
745
|
line-height: 36px;
|
|
707
746
|
text-transform: capitalize;
|
|
708
747
|
}
|