@rivet-health/design-system 2.0.0 → 2.1.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/esm2020/lib/content-toggle/text-toggle/text-toggle.component.mjs +1 -1
- package/esm2020/lib/icon/icon.component.mjs +9 -4
- package/esm2020/lib/icon/icons.mjs +2 -2
- package/esm2020/lib/riv.module.mjs +13 -3
- package/esm2020/lib/visualization/donut/donut.component.mjs +4 -3
- package/esm2020/lib/visualization/legend-item/legend-item.component.mjs +15 -4
- package/esm2020/lib/visualization/stacked-column/stacked-column.component.mjs +174 -0
- package/esm2020/lib/visualization/time-series/time-series.component.mjs +4 -3
- package/esm2020/lib/visualization/zero-state/zero-state.component.mjs +16 -0
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/rivet-health-design-system.mjs +222 -19
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +218 -19
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/icon/icon.component.d.ts +3 -1
- package/lib/icon/icons.d.ts +1 -1
- package/lib/riv.module.d.ts +6 -4
- package/lib/visualization/legend-item/legend-item.component.d.ts +5 -1
- package/lib/visualization/stacked-column/stacked-column.component.d.ts +66 -0
- package/lib/visualization/zero-state/zero-state.component.d.ts +6 -0
- package/package.json +2 -1
- package/public-api.d.ts +2 -0
|
@@ -4,10 +4,11 @@ import * as i1 from '@angular/common';
|
|
|
4
4
|
import { DecimalPipe, CommonModule } from '@angular/common';
|
|
5
5
|
import { BehaviorSubject, map, shareReplay, combineLatest } from 'rxjs';
|
|
6
6
|
import { __awaiter } from 'tslib';
|
|
7
|
-
import { pie, arc, line } from 'd3-shape';
|
|
8
|
-
import { scaleLinear } from 'd3-scale';
|
|
7
|
+
import { pie, arc, line, stack } from 'd3-shape';
|
|
8
|
+
import { scaleLinear, scaleBand } from 'd3-scale';
|
|
9
9
|
import { timeYear, timeMonth, timeWeek, timeDay } from 'd3-time';
|
|
10
10
|
import { timeFormat } from 'd3-time-format';
|
|
11
|
+
import { index } from 'd3-array';
|
|
11
12
|
|
|
12
13
|
/**
|
|
13
14
|
* DOM cache that clones existing elements if available.
|
|
@@ -279,7 +280,7 @@ const icons = {
|
|
|
279
280
|
ZoomIn,
|
|
280
281
|
ZoomOut,
|
|
281
282
|
};
|
|
282
|
-
const IconSizes = [12, 16, 24];
|
|
283
|
+
const IconSizes = [8, 12, 16, 24];
|
|
283
284
|
const iconsMap = {};
|
|
284
285
|
for (const key in icons) {
|
|
285
286
|
iconsMap[key] = icons[key];
|
|
@@ -308,15 +309,18 @@ class IconComponent {
|
|
|
308
309
|
this.cached = cache.get(value);
|
|
309
310
|
this.element.nativeElement.append(this.cached.value);
|
|
310
311
|
}
|
|
312
|
+
get iconSize() {
|
|
313
|
+
return this.customSize ? this.customSize : this.size;
|
|
314
|
+
}
|
|
311
315
|
get calculateStrokeWidth() {
|
|
312
|
-
return this.strokeWidth ? this.strokeWidth : 24 / this.
|
|
316
|
+
return this.strokeWidth ? this.strokeWidth : 24 / this.iconSize;
|
|
313
317
|
}
|
|
314
318
|
ngOnDestroy() {
|
|
315
319
|
this.name = null;
|
|
316
320
|
}
|
|
317
321
|
}
|
|
318
322
|
IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
319
|
-
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: IconComponent, selector: "riv-icon", inputs: { name: "name", size: "size", strokeWidth: "strokeWidth" }, host: { properties: { "style.width.px": "this.
|
|
323
|
+
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: IconComponent, selector: "riv-icon", inputs: { name: "name", size: "size", customSize: "customSize", strokeWidth: "strokeWidth" }, host: { properties: { "style.width.px": "this.iconSize", "style.height.px": "this.iconSize", "style.stroke-width": "this.calculateStrokeWidth" } }, ngImport: i0, template: "", styles: [":host{display:inline-block;font-size:0;line-height:0;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
320
324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IconComponent, decorators: [{
|
|
321
325
|
type: Component,
|
|
322
326
|
args: [{ selector: 'riv-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "", styles: [":host{display:inline-block;font-size:0;line-height:0;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}\n"] }]
|
|
@@ -324,7 +328,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
324
328
|
type: Input
|
|
325
329
|
}], size: [{
|
|
326
330
|
type: Input
|
|
327
|
-
}, {
|
|
331
|
+
}], customSize: [{
|
|
332
|
+
type: Input
|
|
333
|
+
}], iconSize: [{
|
|
328
334
|
type: HostBinding,
|
|
329
335
|
args: ['style.width.px']
|
|
330
336
|
}, {
|
|
@@ -345,7 +351,7 @@ class TextToggleComponent {
|
|
|
345
351
|
}
|
|
346
352
|
}
|
|
347
353
|
TextToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
348
|
-
TextToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextToggleComponent, selector: "riv-text-toggle", inputs: { showLabel: "showLabel", hideLabel: "hideLabel", open: "open" }, ngImport: i0, template: "<button class=\"toggle\" type=\"button\" (click)=\"open = !open\">\n <riv-icon *ngIf=\"open\" [name]=\"'ChevronDown'\" [size]=\"24\"></riv-icon>\n <riv-icon *ngIf=\"!open\" [name]=\"'ChevronRight'\" [size]=\"24\"></riv-icon>\n <div>{{ open ? hideLabel : showLabel }}</div>\n</button>\n<div *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [".toggle{padding:var(--size-xxsmall);display:flex;align-items:center}.toggle:hover{cursor:pointer}button{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
354
|
+
TextToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextToggleComponent, selector: "riv-text-toggle", inputs: { showLabel: "showLabel", hideLabel: "hideLabel", open: "open" }, ngImport: i0, template: "<button class=\"toggle\" type=\"button\" (click)=\"open = !open\">\n <riv-icon *ngIf=\"open\" [name]=\"'ChevronDown'\" [size]=\"24\"></riv-icon>\n <riv-icon *ngIf=\"!open\" [name]=\"'ChevronRight'\" [size]=\"24\"></riv-icon>\n <div>{{ open ? hideLabel : showLabel }}</div>\n</button>\n<div *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [".toggle{padding:var(--size-xxsmall);display:flex;align-items:center}.toggle:hover{cursor:pointer}button{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
349
355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextToggleComponent, decorators: [{
|
|
350
356
|
type: Component,
|
|
351
357
|
args: [{ selector: 'riv-text-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"toggle\" type=\"button\" (click)=\"open = !open\">\n <riv-icon *ngIf=\"open\" [name]=\"'ChevronDown'\" [size]=\"24\"></riv-icon>\n <riv-icon *ngIf=\"!open\" [name]=\"'ChevronRight'\" [size]=\"24\"></riv-icon>\n <div>{{ open ? hideLabel : showLabel }}</div>\n</button>\n<div *ngIf=\"open\">\n <ng-content></ng-content>\n</div>\n", styles: [".toggle{padding:var(--size-xxsmall);display:flex;align-items:center}.toggle:hover{cursor:pointer}button{color:inherit}\n"] }]
|
|
@@ -592,6 +598,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
592
598
|
}]
|
|
593
599
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: CalloutService }]; } });
|
|
594
600
|
|
|
601
|
+
class ZeroStateComponent {
|
|
602
|
+
constructor() {
|
|
603
|
+
this.message = 'No data to display.';
|
|
604
|
+
}
|
|
605
|
+
}
|
|
606
|
+
ZeroStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ZeroStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
607
|
+
ZeroStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ZeroStateComponent, selector: "riv-zero-state", inputs: { message: "message" }, ngImport: i0, template: `{{ message }}`, isInline: true, styles: [":host{display:flex;justify-content:center;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-disabled);padding:var(--size-large)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
608
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ZeroStateComponent, decorators: [{
|
|
609
|
+
type: Component,
|
|
610
|
+
args: [{ selector: 'riv-zero-state', template: `{{ message }}`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;justify-content:center;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-disabled);padding:var(--size-large)}\n"] }]
|
|
611
|
+
}], propDecorators: { message: [{
|
|
612
|
+
type: Input
|
|
613
|
+
}] } });
|
|
614
|
+
|
|
595
615
|
class DonutComponent {
|
|
596
616
|
constructor() {
|
|
597
617
|
this.displayLabel = '';
|
|
@@ -620,10 +640,10 @@ class DonutComponent {
|
|
|
620
640
|
}
|
|
621
641
|
}
|
|
622
642
|
DonutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
623
|
-
DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <
|
|
643
|
+
DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
624
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, decorators: [{
|
|
625
645
|
type: Component,
|
|
626
|
-
args: [{ selector: 'riv-donut', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <
|
|
646
|
+
args: [{ selector: 'riv-donut', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"] }]
|
|
627
647
|
}], propDecorators: { displayLabel: [{
|
|
628
648
|
type: Input
|
|
629
649
|
}], displayValue: [{
|
|
@@ -636,20 +656,29 @@ class LegendItemComponent {
|
|
|
636
656
|
constructor() {
|
|
637
657
|
this.label = '';
|
|
638
658
|
this.colorToken = '';
|
|
659
|
+
this.style = 'solid';
|
|
660
|
+
this.visibility = 'visible';
|
|
661
|
+
this.itemClick = new EventEmitter();
|
|
639
662
|
}
|
|
640
663
|
get backgroundColor() {
|
|
641
664
|
return `var(${this.colorToken})`;
|
|
642
665
|
}
|
|
643
666
|
}
|
|
644
667
|
LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
645
|
-
LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken" }, ngImport: i0, template: "<i [style.background-color]=\"backgroundColor\"></i>\n<span
|
|
668
|
+
LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\">\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n ></i>\n <riv-icon\n *ngIf=\"visibility === 'hidden'\"\n name=\"EyeOff\"\n [size]=\"16\"\n ></riv-icon>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
646
669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
|
|
647
670
|
type: Component,
|
|
648
|
-
args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [style.background-color]=\"backgroundColor\"></i>\n<span
|
|
671
|
+
args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button (click)=\"itemClick.emit()\">\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n ></i>\n <riv-icon\n *ngIf=\"visibility === 'hidden'\"\n name=\"EyeOff\"\n [size]=\"16\"\n ></riv-icon>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"] }]
|
|
649
672
|
}], propDecorators: { label: [{
|
|
650
673
|
type: Input
|
|
651
674
|
}], colorToken: [{
|
|
652
675
|
type: Input
|
|
676
|
+
}], style: [{
|
|
677
|
+
type: Input
|
|
678
|
+
}], visibility: [{
|
|
679
|
+
type: Input
|
|
680
|
+
}], itemClick: [{
|
|
681
|
+
type: Output
|
|
653
682
|
}] } });
|
|
654
683
|
|
|
655
684
|
class MetricComponent {
|
|
@@ -691,7 +720,7 @@ function getTimeInterval(interval) {
|
|
|
691
720
|
return timeYear;
|
|
692
721
|
}
|
|
693
722
|
}
|
|
694
|
-
function getDateRange(configs) {
|
|
723
|
+
function getDateRange$1(configs) {
|
|
695
724
|
let min = Infinity;
|
|
696
725
|
let max = -Infinity;
|
|
697
726
|
for (const config of configs) {
|
|
@@ -755,7 +784,7 @@ class TimeSeriesComponent {
|
|
|
755
784
|
this.BOTTOM_PADDING = 8;
|
|
756
785
|
this.Y_TICK_COUNT = 5;
|
|
757
786
|
this.X_MINOR_TICK_LIMIT = 15;
|
|
758
|
-
this.dateRange$ = this.input$.pipe(map(getDateRange), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
787
|
+
this.dateRange$ = this.input$.pipe(map(getDateRange$1), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
759
788
|
this.binInterval$ = this.dateRange$.pipe(map(([minDate, maxDate]) => {
|
|
760
789
|
const diff = timeDay.count(new Date(minDate), new Date(maxDate));
|
|
761
790
|
if (diff >= 730) {
|
|
@@ -789,7 +818,7 @@ class TimeSeriesComponent {
|
|
|
789
818
|
})) });
|
|
790
819
|
}) });
|
|
791
820
|
})), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
792
|
-
this.binnedDateRange$ = this.binnedData$.pipe(map(getDateRange), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
821
|
+
this.binnedDateRange$ = this.binnedData$.pipe(map(getDateRange$1), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
793
822
|
this.drawData$ = combineLatest([
|
|
794
823
|
this.binnedData$,
|
|
795
824
|
this.binnedDateRange$,
|
|
@@ -917,10 +946,10 @@ class TimeSeriesComponent {
|
|
|
917
946
|
}
|
|
918
947
|
}
|
|
919
948
|
TimeSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
920
|
-
TimeSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TimeSeriesComponent, selector: "riv-time-series", inputs: { input: "input", width: "width", height: "height" }, ngImport: i0, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <g *ngFor=\"let tick of d.x.xMajorTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n y=\"0\"\n width=\"1\"\n [attr.height]=\"d.y1.yScale(0)\"\n ></rect>\n <text\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(0)\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.x.xMinorTicks\">\n <text\n class=\"x-minor-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(0)\"\n text-anchor=\"middle\"\n dominant-baseline=\"hanging\"\n dy=\"8\"\n >\n {{ tick.label }}\n <title>{{ tick.value | date }}</title>\n </text>\n </g>\n <g *ngFor=\"let tick of d.y1.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.y1.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n {{ d.y1.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngFor=\"let tick of d.y2?.yTicks\">\n <text\n class=\"y-tick-label\"\n [attr.x]=\"d.x.xScale(d.x.xMax)\"\n [attr.y]=\"d.y2?.yScale(tick)\"\n text-anchor=\"end\"\n dy=\"-4\"\n >\n {{ d.y2?.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n <line\n class=\"hover-rule\"\n [attr.x1]=\"hoveredMarker.marker.x\"\n [attr.y1]=\"d.y1.yScale(0)\"\n [attr.x2]=\"hoveredMarker.marker.x\"\n [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n\n <ng-template #seriesTpl let-series=\"series\">\n <path\n class=\"data path\"\n [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n [attr.d]=\"series.path\"\n fill=\"none\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n ></path>\n <circle\n *ngFor=\"let marker of series.markers\"\n class=\"data marker\"\n [class.focused]=\"(hoveredMarker$ | async)?.marker?.x === marker.x\"\n [class.blurred]=\"\n (hoveredMarker$ | async) !== null &&\n (hoveredMarker$ | async)?.marker?.x !== marker.x\n \"\n [attr.cx]=\"marker.x\"\n [attr.cy]=\"marker.y\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n (mouseover)=\"hoveredMarker$.next({ event: $event, marker: marker })\"\n (mouseleave)=\"hoveredMarker$.next(null)\"\n ></circle>\n </ng-template>\n <g *ngFor=\"let series of d.y1.series\">\n <ng-container\n *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n ></ng-container>\n </g>\n <g *ngFor=\"let series of d.y2?.series\">\n <ng-container\n *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n ></ng-container>\n </g>\n </svg>\n <legend>\n <riv-legend-item\n *ngFor=\"let item of legend$ | async\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n ></riv-legend-item>\n </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-callout\n [anchor]=\"callout.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'top-center'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n <div>{{ metric.label }}</div>\n <div class=\"callout-metric-value\">{{ metric.value }}</div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <
|
|
949
|
+
TimeSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TimeSeriesComponent, selector: "riv-time-series", inputs: { input: "input", width: "width", height: "height" }, ngImport: i0, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <g *ngFor=\"let tick of d.x.xMajorTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n y=\"0\"\n width=\"1\"\n [attr.height]=\"d.y1.yScale(0)\"\n ></rect>\n <text\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(0)\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.x.xMinorTicks\">\n <text\n class=\"x-minor-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(0)\"\n text-anchor=\"middle\"\n dominant-baseline=\"hanging\"\n dy=\"8\"\n >\n {{ tick.label }}\n <title>{{ tick.value | date }}</title>\n </text>\n </g>\n <g *ngFor=\"let tick of d.y1.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.y1.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n {{ d.y1.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngFor=\"let tick of d.y2?.yTicks\">\n <text\n class=\"y-tick-label\"\n [attr.x]=\"d.x.xScale(d.x.xMax)\"\n [attr.y]=\"d.y2?.yScale(tick)\"\n text-anchor=\"end\"\n dy=\"-4\"\n >\n {{ d.y2?.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n <line\n class=\"hover-rule\"\n [attr.x1]=\"hoveredMarker.marker.x\"\n [attr.y1]=\"d.y1.yScale(0)\"\n [attr.x2]=\"hoveredMarker.marker.x\"\n [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n\n <ng-template #seriesTpl let-series=\"series\">\n <path\n class=\"data path\"\n [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n [attr.d]=\"series.path\"\n fill=\"none\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n ></path>\n <circle\n *ngFor=\"let marker of series.markers\"\n class=\"data marker\"\n [class.focused]=\"(hoveredMarker$ | async)?.marker?.x === marker.x\"\n [class.blurred]=\"\n (hoveredMarker$ | async) !== null &&\n (hoveredMarker$ | async)?.marker?.x !== marker.x\n \"\n [attr.cx]=\"marker.x\"\n [attr.cy]=\"marker.y\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n (mouseover)=\"hoveredMarker$.next({ event: $event, marker: marker })\"\n (mouseleave)=\"hoveredMarker$.next(null)\"\n ></circle>\n </ng-template>\n <g *ngFor=\"let series of d.y1.series\">\n <ng-container\n *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n ></ng-container>\n </g>\n <g *ngFor=\"let series of d.y2?.series\">\n <ng-container\n *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n ></ng-container>\n </g>\n </svg>\n <legend>\n <riv-legend-item\n *ngFor=\"let item of legend$ | async\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n ></riv-legend-item>\n </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-callout\n [anchor]=\"callout.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'top-center'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n <div>{{ metric.label }}</div>\n <div class=\"callout-metric-value\">{{ metric.value }}</div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:flex;flex-direction:column;gap:var(--size-xlarge)}.y-tick-label,.x-major-tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast);text-anchor:middle}.tick{fill:var(--gray-20)}.data.path{transition:stroke-opacity var(--short-transition)}.data.path.marker-hovered{stroke-opacity:.4}.data.marker{fill:var(--surface-light-0);transition:stroke-opacity var(--short-transition)}.data.marker.focused{stroke-opacity:1;filter:drop-shadow(0 1px 1px rgba(10,2,22,.15))}.data.marker.blurred{stroke-opacity:.4}.hover-rule{stroke:var(--gray-20)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-large);display:flex;gap:var(--size-medium)}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility"], outputs: ["itemClick"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
921
950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, decorators: [{
|
|
922
951
|
type: Component,
|
|
923
|
-
args: [{ selector: 'riv-time-series', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <g *ngFor=\"let tick of d.x.xMajorTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n y=\"0\"\n width=\"1\"\n [attr.height]=\"d.y1.yScale(0)\"\n ></rect>\n <text\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(0)\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.x.xMinorTicks\">\n <text\n class=\"x-minor-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(0)\"\n text-anchor=\"middle\"\n dominant-baseline=\"hanging\"\n dy=\"8\"\n >\n {{ tick.label }}\n <title>{{ tick.value | date }}</title>\n </text>\n </g>\n <g *ngFor=\"let tick of d.y1.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.y1.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n {{ d.y1.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngFor=\"let tick of d.y2?.yTicks\">\n <text\n class=\"y-tick-label\"\n [attr.x]=\"d.x.xScale(d.x.xMax)\"\n [attr.y]=\"d.y2?.yScale(tick)\"\n text-anchor=\"end\"\n dy=\"-4\"\n >\n {{ d.y2?.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n <line\n class=\"hover-rule\"\n [attr.x1]=\"hoveredMarker.marker.x\"\n [attr.y1]=\"d.y1.yScale(0)\"\n [attr.x2]=\"hoveredMarker.marker.x\"\n [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n\n <ng-template #seriesTpl let-series=\"series\">\n <path\n class=\"data path\"\n [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n [attr.d]=\"series.path\"\n fill=\"none\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n ></path>\n <circle\n *ngFor=\"let marker of series.markers\"\n class=\"data marker\"\n [class.focused]=\"(hoveredMarker$ | async)?.marker?.x === marker.x\"\n [class.blurred]=\"\n (hoveredMarker$ | async) !== null &&\n (hoveredMarker$ | async)?.marker?.x !== marker.x\n \"\n [attr.cx]=\"marker.x\"\n [attr.cy]=\"marker.y\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n (mouseover)=\"hoveredMarker$.next({ event: $event, marker: marker })\"\n (mouseleave)=\"hoveredMarker$.next(null)\"\n ></circle>\n </ng-template>\n <g *ngFor=\"let series of d.y1.series\">\n <ng-container\n *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n ></ng-container>\n </g>\n <g *ngFor=\"let series of d.y2?.series\">\n <ng-container\n *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n ></ng-container>\n </g>\n </svg>\n <legend>\n <riv-legend-item\n *ngFor=\"let item of legend$ | async\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n ></riv-legend-item>\n </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-callout\n [anchor]=\"callout.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'top-center'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n <div>{{ metric.label }}</div>\n <div class=\"callout-metric-value\">{{ metric.value }}</div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <
|
|
952
|
+
args: [{ selector: 'riv-time-series', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <g *ngFor=\"let tick of d.x.xMajorTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n y=\"0\"\n width=\"1\"\n [attr.height]=\"d.y1.yScale(0)\"\n ></rect>\n <text\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(0)\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.x.xMinorTicks\">\n <text\n class=\"x-minor-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(0)\"\n text-anchor=\"middle\"\n dominant-baseline=\"hanging\"\n dy=\"8\"\n >\n {{ tick.label }}\n <title>{{ tick.value | date }}</title>\n </text>\n </g>\n <g *ngFor=\"let tick of d.y1.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.y1.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n {{ d.y1.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngFor=\"let tick of d.y2?.yTicks\">\n <text\n class=\"y-tick-label\"\n [attr.x]=\"d.x.xScale(d.x.xMax)\"\n [attr.y]=\"d.y2?.yScale(tick)\"\n text-anchor=\"end\"\n dy=\"-4\"\n >\n {{ d.y2?.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n <line\n class=\"hover-rule\"\n [attr.x1]=\"hoveredMarker.marker.x\"\n [attr.y1]=\"d.y1.yScale(0)\"\n [attr.x2]=\"hoveredMarker.marker.x\"\n [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n\n <ng-template #seriesTpl let-series=\"series\">\n <path\n class=\"data path\"\n [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n [attr.d]=\"series.path\"\n fill=\"none\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n ></path>\n <circle\n *ngFor=\"let marker of series.markers\"\n class=\"data marker\"\n [class.focused]=\"(hoveredMarker$ | async)?.marker?.x === marker.x\"\n [class.blurred]=\"\n (hoveredMarker$ | async) !== null &&\n (hoveredMarker$ | async)?.marker?.x !== marker.x\n \"\n [attr.cx]=\"marker.x\"\n [attr.cy]=\"marker.y\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n (mouseover)=\"hoveredMarker$.next({ event: $event, marker: marker })\"\n (mouseleave)=\"hoveredMarker$.next(null)\"\n ></circle>\n </ng-template>\n <g *ngFor=\"let series of d.y1.series\">\n <ng-container\n *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n ></ng-container>\n </g>\n <g *ngFor=\"let series of d.y2?.series\">\n <ng-container\n *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n ></ng-container>\n </g>\n </svg>\n <legend>\n <riv-legend-item\n *ngFor=\"let item of legend$ | async\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n ></riv-legend-item>\n </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-callout\n [anchor]=\"callout.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'top-center'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n <div>{{ metric.label }}</div>\n <div class=\"callout-metric-value\">{{ metric.value }}</div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:flex;flex-direction:column;gap:var(--size-xlarge)}.y-tick-label,.x-major-tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast);text-anchor:middle}.tick{fill:var(--gray-20)}.data.path{transition:stroke-opacity var(--short-transition)}.data.path.marker-hovered{stroke-opacity:.4}.data.marker{fill:var(--surface-light-0);transition:stroke-opacity var(--short-transition)}.data.marker.focused{stroke-opacity:1;filter:drop-shadow(0 1px 1px rgba(10,2,22,.15))}.data.marker.blurred{stroke-opacity:.4}.hover-rule{stroke:var(--gray-20)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-large);display:flex;gap:var(--size-medium)}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"] }]
|
|
924
953
|
}], propDecorators: { input: [{
|
|
925
954
|
type: Input
|
|
926
955
|
}], width: [{
|
|
@@ -983,6 +1012,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
983
1012
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
|
|
984
1013
|
}] });
|
|
985
1014
|
|
|
1015
|
+
function getDateRange(stacks) {
|
|
1016
|
+
let min = Infinity;
|
|
1017
|
+
let max = -Infinity;
|
|
1018
|
+
for (const stack of stacks) {
|
|
1019
|
+
for (const series of stack) {
|
|
1020
|
+
for (const { date } of series.data) {
|
|
1021
|
+
const value = date.valueOf();
|
|
1022
|
+
min = Math.min(min, value);
|
|
1023
|
+
max = Math.max(max, value);
|
|
1024
|
+
}
|
|
1025
|
+
}
|
|
1026
|
+
}
|
|
1027
|
+
return [new Date(min), new Date(max)];
|
|
1028
|
+
}
|
|
1029
|
+
// TODO: once we upgrade to Angular 16, this component can be cleaned up with
|
|
1030
|
+
// signals instead of RxJS.
|
|
1031
|
+
class StackedColumnComponent {
|
|
1032
|
+
constructor() {
|
|
1033
|
+
this.input$ = new BehaviorSubject([]);
|
|
1034
|
+
this.width$ = new BehaviorSubject(960);
|
|
1035
|
+
this.height$ = new BehaviorSubject(256);
|
|
1036
|
+
this.valueFormatter = v => v.toString();
|
|
1037
|
+
this.drawData$ = combineLatest([
|
|
1038
|
+
this.input$,
|
|
1039
|
+
this.width$,
|
|
1040
|
+
this.height$,
|
|
1041
|
+
]).pipe(map(([input, width, height]) => {
|
|
1042
|
+
const viewBox = `0 0 ${width} ${height}`;
|
|
1043
|
+
const padding = 8;
|
|
1044
|
+
const [minDate, maxDate] = getDateRange(input);
|
|
1045
|
+
const xSteps = timeMonth.range(timeMonth.floor(minDate), timeMonth.floor(timeMonth.offset(maxDate, 1)));
|
|
1046
|
+
const xFormatter = timeFormat('%b');
|
|
1047
|
+
const xOuterScale = scaleBand()
|
|
1048
|
+
.domain(xSteps.map(date => xFormatter(date)))
|
|
1049
|
+
.range([0, width]);
|
|
1050
|
+
const columnWidth = 6;
|
|
1051
|
+
const columnPadding = 4;
|
|
1052
|
+
const outerPadding = (xOuterScale.bandwidth() -
|
|
1053
|
+
(columnPadding * (input.length - 1) + columnWidth * input.length)) /
|
|
1054
|
+
2;
|
|
1055
|
+
const renderInformation = input.map(stackData => {
|
|
1056
|
+
const stackedTable = stackData.reduce((table, s) => [
|
|
1057
|
+
...table,
|
|
1058
|
+
...s.data.map(point => (Object.assign(Object.assign({}, point), { series: s }))),
|
|
1059
|
+
], []);
|
|
1060
|
+
const indexedTable = index(stackedTable, d => d.date, d => d.series.label);
|
|
1061
|
+
const stacked = stack()
|
|
1062
|
+
.keys(stackData.map(v => v.label))
|
|
1063
|
+
.value(([_, group], key) => {
|
|
1064
|
+
return group.get(key).value;
|
|
1065
|
+
})(indexedTable);
|
|
1066
|
+
return { indexedTable, stacked };
|
|
1067
|
+
});
|
|
1068
|
+
let domainMax = 0;
|
|
1069
|
+
renderInformation.forEach(({ stacked, indexedTable }) => {
|
|
1070
|
+
[...indexedTable.values()].forEach((pointMap, i) => {
|
|
1071
|
+
[...pointMap.values()].forEach((_, j) => {
|
|
1072
|
+
domainMax = Math.max(domainMax, ...stacked[j][i]);
|
|
1073
|
+
});
|
|
1074
|
+
});
|
|
1075
|
+
});
|
|
1076
|
+
const yScale = scaleLinear()
|
|
1077
|
+
.domain([0, domainMax])
|
|
1078
|
+
.range([height - padding * 2, padding]);
|
|
1079
|
+
const rects = [];
|
|
1080
|
+
renderInformation.forEach(({ stacked, indexedTable }, index) => {
|
|
1081
|
+
[...indexedTable.entries()].forEach(([date, pointMap], i) => {
|
|
1082
|
+
[...pointMap.entries()].forEach(([_, seriesPoint], j) => {
|
|
1083
|
+
var _a;
|
|
1084
|
+
const [baseline, topline] = stacked[j][i];
|
|
1085
|
+
const width = columnWidth;
|
|
1086
|
+
const height = yScale(baseline) - yScale(topline);
|
|
1087
|
+
const x = ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) +
|
|
1088
|
+
outerPadding +
|
|
1089
|
+
columnWidth * index +
|
|
1090
|
+
columnPadding * index;
|
|
1091
|
+
const y = yScale(baseline) - height;
|
|
1092
|
+
const fill = `var(${seriesPoint.series.colorToken})`;
|
|
1093
|
+
rects.push({
|
|
1094
|
+
dateValue: date.valueOf(),
|
|
1095
|
+
x,
|
|
1096
|
+
y,
|
|
1097
|
+
width,
|
|
1098
|
+
height,
|
|
1099
|
+
fill,
|
|
1100
|
+
striped: seriesPoint.series.style === 'striped',
|
|
1101
|
+
seriesPoint,
|
|
1102
|
+
});
|
|
1103
|
+
});
|
|
1104
|
+
});
|
|
1105
|
+
});
|
|
1106
|
+
const xTicks = xSteps.map(date => {
|
|
1107
|
+
var _a;
|
|
1108
|
+
return ({
|
|
1109
|
+
dateValue: date.valueOf(),
|
|
1110
|
+
label: xFormatter(date),
|
|
1111
|
+
x: ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) + xOuterScale.bandwidth() / 2,
|
|
1112
|
+
});
|
|
1113
|
+
});
|
|
1114
|
+
const yTicks = yScale.ticks(5);
|
|
1115
|
+
const hoverBandWidth = renderInformation.length * columnWidth +
|
|
1116
|
+
(renderInformation.length + 1) * columnPadding;
|
|
1117
|
+
const hoverBands = xSteps.map(date => {
|
|
1118
|
+
var _a;
|
|
1119
|
+
return ({
|
|
1120
|
+
dateValue: date.valueOf(),
|
|
1121
|
+
x: ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) +
|
|
1122
|
+
(xOuterScale.bandwidth() - hoverBandWidth) / 2,
|
|
1123
|
+
y: yScale(domainMax),
|
|
1124
|
+
width: hoverBandWidth,
|
|
1125
|
+
height: yScale(0) - yScale(domainMax),
|
|
1126
|
+
});
|
|
1127
|
+
});
|
|
1128
|
+
return {
|
|
1129
|
+
columnWidth,
|
|
1130
|
+
hoverBands,
|
|
1131
|
+
rects,
|
|
1132
|
+
viewBox,
|
|
1133
|
+
xTicks,
|
|
1134
|
+
yScale,
|
|
1135
|
+
yTicks,
|
|
1136
|
+
};
|
|
1137
|
+
}), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
1138
|
+
this.empty$ = this.input$.pipe(map(input => input.every(stack => stack.every(series => series.data.length === 0))), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
1139
|
+
this.hoveredBand$ = new BehaviorSubject(null);
|
|
1140
|
+
this.callout$ = combineLatest([this.hoveredBand$, this.drawData$]).pipe(map(([hoveredBand, drawData]) => {
|
|
1141
|
+
if (!hoveredBand)
|
|
1142
|
+
return null;
|
|
1143
|
+
const { target } = hoveredBand.event;
|
|
1144
|
+
if (!target)
|
|
1145
|
+
return null;
|
|
1146
|
+
const anchor = target.getBoundingClientRect();
|
|
1147
|
+
const metrics = drawData.rects
|
|
1148
|
+
.filter(rect => rect.dateValue === hoveredBand.dateValue)
|
|
1149
|
+
.map(rect => ({
|
|
1150
|
+
label: rect.seriesPoint.series.label,
|
|
1151
|
+
value: this.valueFormatter(rect.seriesPoint.value),
|
|
1152
|
+
}));
|
|
1153
|
+
return { anchor, metrics };
|
|
1154
|
+
}), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
1155
|
+
}
|
|
1156
|
+
set input(v) {
|
|
1157
|
+
this.input$.next(v);
|
|
1158
|
+
}
|
|
1159
|
+
set width(v) {
|
|
1160
|
+
this.width$.next(v);
|
|
1161
|
+
}
|
|
1162
|
+
set height(v) {
|
|
1163
|
+
this.height$.next(v);
|
|
1164
|
+
}
|
|
1165
|
+
}
|
|
1166
|
+
StackedColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1167
|
+
StackedColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedColumnComponent, selector: "riv-stacked-column", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter" }, ngImport: i0, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"d.columnWidth\"\n [attr.height]=\"d.columnWidth\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n x1=\"0\"\n [attr.y1]=\"d.columnWidth\"\n [attr.x2]=\"d.columnWidth\"\n y2=\"0\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let tick of d.xTicks\">\n <rect\n class=\"tick-background\"\n [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n [attr.x]=\"tick.x - 20\"\n [attr.y]=\"d.yScale(0) + 3\"\n width=\"40\"\n height=\"12\"\n rx=\"2\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"d.yScale(0) + 12\"\n text-anchor=\"middle\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g *ngFor=\"let rect of d.rects\">\n <rect\n class=\"column\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"rect.fill\"\n [class.blurred]=\"\n (hoveredBand$ | async) !== null &&\n (hoveredBand$ | async)?.dateValue !== rect.dateValue\n \"\n ></rect>\n <rect\n *ngIf=\"rect.striped\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"url(#stripes)\"\n ></rect>\n </g>\n <rect\n *ngFor=\"let rect of d.hoverBands\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"transparent\"\n (mouseenter)=\"\n hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n \"\n (mouseleave)=\"hoveredBand$.next(null)\"\n ></rect>\n </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-callout\n [anchor]=\"callout.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [allowedPositions]=\"[\n 'center-right',\n 'center-left',\n 'top-center',\n 'bottom-center'\n ]\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n <div>{{ metric.label }}</div>\n <div class=\"callout-metric-value\">{{ metric.value }}</div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedColumnComponent, decorators: [{
|
|
1169
|
+
type: Component,
|
|
1170
|
+
args: [{ selector: 'riv-stacked-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"d.columnWidth\"\n [attr.height]=\"d.columnWidth\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n x1=\"0\"\n [attr.y1]=\"d.columnWidth\"\n [attr.x2]=\"d.columnWidth\"\n y2=\"0\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let tick of d.xTicks\">\n <rect\n class=\"tick-background\"\n [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n [attr.x]=\"tick.x - 20\"\n [attr.y]=\"d.yScale(0) + 3\"\n width=\"40\"\n height=\"12\"\n rx=\"2\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"d.yScale(0) + 12\"\n text-anchor=\"middle\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g *ngFor=\"let rect of d.rects\">\n <rect\n class=\"column\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"rect.fill\"\n [class.blurred]=\"\n (hoveredBand$ | async) !== null &&\n (hoveredBand$ | async)?.dateValue !== rect.dateValue\n \"\n ></rect>\n <rect\n *ngIf=\"rect.striped\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"url(#stripes)\"\n ></rect>\n </g>\n <rect\n *ngFor=\"let rect of d.hoverBands\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"transparent\"\n (mouseenter)=\"\n hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n \"\n (mouseleave)=\"hoveredBand$.next(null)\"\n ></rect>\n </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-callout\n [anchor]=\"callout.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [allowedPositions]=\"[\n 'center-right',\n 'center-left',\n 'top-center',\n 'bottom-center'\n ]\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n <div>{{ metric.label }}</div>\n <div class=\"callout-metric-value\">{{ metric.value }}</div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"] }]
|
|
1171
|
+
}], propDecorators: { input: [{
|
|
1172
|
+
type: Input
|
|
1173
|
+
}], width: [{
|
|
1174
|
+
type: Input
|
|
1175
|
+
}], height: [{
|
|
1176
|
+
type: Input
|
|
1177
|
+
}], valueFormatter: [{
|
|
1178
|
+
type: Input
|
|
1179
|
+
}] } });
|
|
1180
|
+
|
|
986
1181
|
class RivModule {
|
|
987
1182
|
}
|
|
988
1183
|
RivModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -997,8 +1192,10 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
997
1192
|
IconComponent,
|
|
998
1193
|
LegendItemComponent,
|
|
999
1194
|
MetricComponent,
|
|
1195
|
+
StackedColumnComponent,
|
|
1000
1196
|
TextToggleComponent,
|
|
1001
|
-
TimeSeriesComponent
|
|
1197
|
+
TimeSeriesComponent,
|
|
1198
|
+
ZeroStateComponent], imports: [CommonModule], exports: [CalloutComponent,
|
|
1002
1199
|
CalloutDirective,
|
|
1003
1200
|
CalloutOutletComponent,
|
|
1004
1201
|
DataTableCellComponent,
|
|
@@ -1009,8 +1206,10 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
|
|
|
1009
1206
|
IconComponent,
|
|
1010
1207
|
LegendItemComponent,
|
|
1011
1208
|
MetricComponent,
|
|
1209
|
+
StackedColumnComponent,
|
|
1012
1210
|
TextToggleComponent,
|
|
1013
|
-
TimeSeriesComponent
|
|
1211
|
+
TimeSeriesComponent,
|
|
1212
|
+
ZeroStateComponent] });
|
|
1014
1213
|
RivModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, imports: [CommonModule] });
|
|
1015
1214
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, decorators: [{
|
|
1016
1215
|
type: NgModule,
|
|
@@ -1027,8 +1226,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1027
1226
|
IconComponent,
|
|
1028
1227
|
LegendItemComponent,
|
|
1029
1228
|
MetricComponent,
|
|
1229
|
+
StackedColumnComponent,
|
|
1030
1230
|
TextToggleComponent,
|
|
1031
1231
|
TimeSeriesComponent,
|
|
1232
|
+
ZeroStateComponent,
|
|
1032
1233
|
],
|
|
1033
1234
|
exports: [
|
|
1034
1235
|
CalloutComponent,
|
|
@@ -1042,8 +1243,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1042
1243
|
IconComponent,
|
|
1043
1244
|
LegendItemComponent,
|
|
1044
1245
|
MetricComponent,
|
|
1246
|
+
StackedColumnComponent,
|
|
1045
1247
|
TextToggleComponent,
|
|
1046
1248
|
TimeSeriesComponent,
|
|
1249
|
+
ZeroStateComponent,
|
|
1047
1250
|
],
|
|
1048
1251
|
imports: [CommonModule],
|
|
1049
1252
|
}]
|
|
@@ -1053,5 +1256,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1053
1256
|
* Generated bundle index. Do not edit.
|
|
1054
1257
|
*/
|
|
1055
1258
|
|
|
1056
|
-
export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, RivModule, TextToggleComponent, TimeSeriesComponent };
|
|
1259
|
+
export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, RivModule, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, ZeroStateComponent };
|
|
1057
1260
|
//# sourceMappingURL=rivet-health-design-system.mjs.map
|