@rivet-health/design-system 4.5.0 → 4.6.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/visualization/funnel-chart/funnel-chart.component.mjs +1 -1
- package/esm2020/lib/visualization/metric/metric.component.mjs +12 -3
- package/fesm2015/rivet-health-design-system.mjs +12 -3
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +12 -3
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/visualization/metric/metric.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -55,7 +55,7 @@ export class FunnelChartComponent {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
FunnelChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
58
|
-
FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: i2.MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "card", "help"] }, { kind: "component", type: i3.TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
58
|
+
FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: i2.MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "card", "help", "align", "valueColorToken"] }, { kind: "component", type: i3.TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
59
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
61
61
|
args: [{ selector: 'riv-funnel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\n"] }]
|
|
@@ -8,13 +8,18 @@ export class MetricComponent {
|
|
|
8
8
|
this.value = '';
|
|
9
9
|
this.size = 'medium';
|
|
10
10
|
this.card = false;
|
|
11
|
+
this.align = 'left';
|
|
12
|
+
this.valueColorToken = '--type-light-high-contrast';
|
|
13
|
+
}
|
|
14
|
+
get valueColor() {
|
|
15
|
+
return `var(${this.valueColorToken})`;
|
|
11
16
|
}
|
|
12
17
|
}
|
|
13
18
|
MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
-
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", card: "card", help: "help" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\" [ngClass]=\"size\"
|
|
19
|
+
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\" [ngClass]=\"align\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.right{text-align:end;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.HelpComponent, selector: "riv-help", inputs: ["help"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, decorators: [{
|
|
16
21
|
type: Component,
|
|
17
|
-
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\" [ngClass]=\"size\"
|
|
22
|
+
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\" [ngClass]=\"align\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.right{text-align:end;justify-content:flex-end}\n"] }]
|
|
18
23
|
}], propDecorators: { label: [{
|
|
19
24
|
type: Input
|
|
20
25
|
}], value: [{
|
|
@@ -25,8 +30,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
25
30
|
type: Input
|
|
26
31
|
}], help: [{
|
|
27
32
|
type: Input
|
|
33
|
+
}], align: [{
|
|
34
|
+
type: Input
|
|
35
|
+
}], valueColorToken: [{
|
|
36
|
+
type: Input
|
|
28
37
|
}] } });
|
|
29
38
|
(function (MetricComponent) {
|
|
30
39
|
MetricComponent.Sizes = ['small', 'medium', 'large'];
|
|
31
40
|
})(MetricComponent || (MetricComponent = {}));
|
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL3Zpc3VhbGl6YXRpb24vbWV0cmljL21ldHJpYy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL21ldHJpYy9tZXRyaWMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRMUUsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFRRSxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBR25CLFVBQUssR0FBVyxFQUFFLENBQUM7UUFHbkIsU0FBSSxHQUF5QixRQUFRLENBQUM7UUFHdEMsU0FBSSxHQUFZLEtBQUssQ0FBQztRQU10QixVQUFLLEdBQXNCLE1BQU0sQ0FBQztRQUdsQyxvQkFBZSxHQUFZLDRCQUE0QixDQUFDO0tBS3pEO0lBSEMsSUFBSSxVQUFVO1FBQ1osT0FBTyxPQUFPLElBQUksQ0FBQyxlQUFlLEdBQUcsQ0FBQztJQUN4QyxDQUFDOzs0R0F4QlUsZUFBZTtnR0FBZixlQUFlLDRMQ1I1QixnZkFjQTsyRkROYSxlQUFlO2tCQU4zQixTQUFTOytCQUNFLFlBQVksbUJBR0wsdUJBQXVCLENBQUMsTUFBTTs4QkFJL0MsS0FBSztzQkFESixLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sZUFBZTtzQkFEZCxLQUFLOztBQVFSLFdBQWlCLGVBQWU7SUFDakIscUJBQUssR0FBRyxDQUFDLE9BQU8sRUFBRSxRQUFRLEVBQUUsT0FBTyxDQUFVLENBQUM7QUFFN0QsQ0FBQyxFQUhnQixlQUFlLEtBQWYsZUFBZSxRQUcvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1tZXRyaWMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbWV0cmljLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbWV0cmljLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIGxhYmVsOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoKVxuICB2YWx1ZTogc3RyaW5nID0gJyc7XG5cbiAgQElucHV0KClcbiAgc2l6ZTogTWV0cmljQ29tcG9uZW50LlNpemUgPSAnbWVkaXVtJztcblxuICBASW5wdXQoKVxuICBjYXJkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgaGVscD86IHN0cmluZztcblxuICBASW5wdXQoKVxuICBhbGlnbj86ICdsZWZ0JyB8ICdyaWdodCcgPSAnbGVmdCc7XG5cbiAgQElucHV0KClcbiAgdmFsdWVDb2xvclRva2VuPzogc3RyaW5nID0gJy0tdHlwZS1saWdodC1oaWdoLWNvbnRyYXN0JztcblxuICBnZXQgdmFsdWVDb2xvcigpOiBzdHJpbmcge1xuICAgIHJldHVybiBgdmFyKCR7dGhpcy52YWx1ZUNvbG9yVG9rZW59KWA7XG4gIH1cbn1cblxuZXhwb3J0IG5hbWVzcGFjZSBNZXRyaWNDb21wb25lbnQge1xuICBleHBvcnQgY29uc3QgU2l6ZXMgPSBbJ3NtYWxsJywgJ21lZGl1bScsICdsYXJnZSddIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBTaXplID0gKHR5cGVvZiBTaXplcylbbnVtYmVyXTtcbn1cbiIsIjxkaXYgKm5nSWY9XCJjYXJkOyBlbHNlIGNvbnRlbnRcIiBjbGFzcz1cImNhcmRcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuPG5nLXRlbXBsYXRlICNjb250ZW50PlxuICA8ZGl2IGNsYXNzPVwibGFiZWxcIiBbbmdDbGFzc109XCJhbGlnblwiPlxuICAgIHt7IGxhYmVsIH19IDxzcGFuICpuZ0lmPVwiaGVscFwiPjxyaXYtaGVscCBbaGVscF09XCJoZWxwXCI+PC9yaXYtaGVscD48L3NwYW4+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY29udGVudFwiIFtuZ0NsYXNzXT1cImFsaWduXCI+XG4gICAgPGRpdiBjbGFzcz1cInZhbHVlXCIgW25nQ2xhc3NdPVwic2l6ZVwiIFtzdHlsZS5jb2xvcl09XCJ2YWx1ZUNvbG9yXCI+XG4gICAgICB7eyB2YWx1ZSB9fVxuICAgIDwvZGl2PlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -2259,13 +2259,18 @@ class MetricComponent {
|
|
|
2259
2259
|
this.value = '';
|
|
2260
2260
|
this.size = 'medium';
|
|
2261
2261
|
this.card = false;
|
|
2262
|
+
this.align = 'left';
|
|
2263
|
+
this.valueColorToken = '--type-light-high-contrast';
|
|
2264
|
+
}
|
|
2265
|
+
get valueColor() {
|
|
2266
|
+
return `var(${this.valueColorToken})`;
|
|
2262
2267
|
}
|
|
2263
2268
|
}
|
|
2264
2269
|
MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2265
|
-
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", card: "card", help: "help" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\" [ngClass]=\"size\"
|
|
2270
|
+
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\" [ngClass]=\"align\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.right{text-align:end;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: HelpComponent, selector: "riv-help", inputs: ["help"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2266
2271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, decorators: [{
|
|
2267
2272
|
type: Component,
|
|
2268
|
-
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\">\n <div class=\"value\" [ngClass]=\"size\"
|
|
2273
|
+
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n <div class=\"label\" [ngClass]=\"align\">\n {{ label }} <span *ngIf=\"help\"><riv-help [help]=\"help\"></riv-help></span>\n </div>\n <div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.right{text-align:end;justify-content:flex-end}\n"] }]
|
|
2269
2274
|
}], propDecorators: { label: [{
|
|
2270
2275
|
type: Input
|
|
2271
2276
|
}], value: [{
|
|
@@ -2276,6 +2281,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2276
2281
|
type: Input
|
|
2277
2282
|
}], help: [{
|
|
2278
2283
|
type: Input
|
|
2284
|
+
}], align: [{
|
|
2285
|
+
type: Input
|
|
2286
|
+
}], valueColorToken: [{
|
|
2287
|
+
type: Input
|
|
2279
2288
|
}] } });
|
|
2280
2289
|
(function (MetricComponent) {
|
|
2281
2290
|
MetricComponent.Sizes = ['small', 'medium', 'large'];
|
|
@@ -2380,7 +2389,7 @@ class FunnelChartComponent {
|
|
|
2380
2389
|
}
|
|
2381
2390
|
}
|
|
2382
2391
|
FunnelChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2383
|
-
FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "card", "help"] }, { kind: "component", type: TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2392
|
+
FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "card", "help", "align", "valueColorToken"] }, { kind: "component", type: TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2384
2393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, decorators: [{
|
|
2385
2394
|
type: Component,
|
|
2386
2395
|
args: [{ selector: 'riv-funnel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] != null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\n"] }]
|