@rivet-health/design-system 2.13.0 → 2.15.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/input/single-select/single-select.component.mjs +2 -2
- package/esm2020/lib/visualization/intervals.mjs +63 -0
- package/esm2020/lib/visualization/metric/metric.component.mjs +7 -3
- package/esm2020/lib/visualization/stacked-column/stacked-column.component.mjs +129 -25
- package/esm2020/lib/visualization/time-series/time-series.component.mjs +66 -79
- package/fesm2015/rivet-health-design-system.mjs +256 -101
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +254 -101
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/visualization/intervals.d.ts +8 -0
- package/lib/visualization/metric/metric.component.d.ts +2 -1
- package/lib/visualization/stacked-column/stacked-column.component.d.ts +24 -6
- package/lib/visualization/time-series/time-series.component.d.ts +13 -8
- package/package.json +1 -1
|
@@ -37,10 +37,10 @@ export class SingleSelectComponent {
|
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
SingleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
-
SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { options: "options", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", placeholder: "placeholder" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, ngImport: i0, template: "<button #trigger class=\"trigger\" (click)=\"open = true\">\n <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n <span class=\"value\">{{ selectedOption.title }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n </span>\n</button>\n\n<riv-callout\n *ngIf=\"open\"\n [anchor]=\"trigger\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"open = false\"\n>\n <input\n *ngIf=\"filterabilityOptions.enabled\"\n #filter\n class=\"filter\"\n [placeholder]=\"getFilterPlaceholder()\"\n [value]=\"filterQuery\"\n (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n />\n <div class=\"options\">\n <riv-loading-cover [loading]=\"loading\">\n <ng-container *ngIf=\"getNodes(); let nodes\">\n <ng-container *ngIf=\"nodes.length > 0; else empty\">\n <ng-container *ngFor=\"let node of nodes\">\n <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n <button\n class=\"custom-single-select-node\"\n [disabled]=\"node.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTemplate>\n <button\n class=\"single-select-node\"\n [class.selected]=\"node?.selected\"\n [class.disabled]=\"node?.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <riv-icon\n [name]=\"'Check'\"\n *ngIf=\"node?.selected\"\n [size]=\"16\"\n ></riv-icon>\n <span class=\"label\">\n <span class=\"label-title\">\n <riv-highlight\n [text]=\"node?.title || ''\"\n [indices]=\"node?.titleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n <riv-highlight\n [text]=\"node?.subtitle || ''\"\n [indices]=\"node?.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n </span>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #empty>\n <div class=\"empty\">\n {{ noOptionsMessage }}\n </div>\n </ng-template>\n </ng-container>\n </riv-loading-cover>\n </div>\n</riv-callout>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:calc(var(--base-grid-size) * 200);max-width:calc(var(--base-grid-size) * 150);overflow-y:
|
|
40
|
+
SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { options: "options", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", placeholder: "placeholder" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, ngImport: i0, template: "<button #trigger class=\"trigger\" (click)=\"open = true\">\n <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n <span class=\"value\">{{ selectedOption.title }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n </span>\n</button>\n\n<riv-callout\n *ngIf=\"open\"\n [anchor]=\"trigger\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"open = false\"\n>\n <input\n *ngIf=\"filterabilityOptions.enabled\"\n #filter\n class=\"filter\"\n [placeholder]=\"getFilterPlaceholder()\"\n [value]=\"filterQuery\"\n (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n />\n <div class=\"options\">\n <riv-loading-cover [loading]=\"loading\">\n <ng-container *ngIf=\"getNodes(); let nodes\">\n <ng-container *ngIf=\"nodes.length > 0; else empty\">\n <ng-container *ngFor=\"let node of nodes\">\n <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n <button\n class=\"custom-single-select-node\"\n [disabled]=\"node.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTemplate>\n <button\n class=\"single-select-node\"\n [class.selected]=\"node?.selected\"\n [class.disabled]=\"node?.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <riv-icon\n [name]=\"'Check'\"\n *ngIf=\"node?.selected\"\n [size]=\"16\"\n ></riv-icon>\n <span class=\"label\">\n <span class=\"label-title\">\n <riv-highlight\n [text]=\"node?.title || ''\"\n [indices]=\"node?.titleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n <riv-highlight\n [text]=\"node?.subtitle || ''\"\n [indices]=\"node?.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n </span>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #empty>\n <div class=\"empty\">\n {{ noOptionsMessage }}\n </div>\n </ng-template>\n </ng-container>\n </riv-loading-cover>\n </div>\n</riv-callout>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:calc(var(--base-grid-size) * 200);max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}\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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i5.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
41
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, decorators: [{
|
|
42
42
|
type: Component,
|
|
43
|
-
args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #trigger class=\"trigger\" (click)=\"open = true\">\n <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n <span class=\"value\">{{ selectedOption.title }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n </span>\n</button>\n\n<riv-callout\n *ngIf=\"open\"\n [anchor]=\"trigger\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"open = false\"\n>\n <input\n *ngIf=\"filterabilityOptions.enabled\"\n #filter\n class=\"filter\"\n [placeholder]=\"getFilterPlaceholder()\"\n [value]=\"filterQuery\"\n (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n />\n <div class=\"options\">\n <riv-loading-cover [loading]=\"loading\">\n <ng-container *ngIf=\"getNodes(); let nodes\">\n <ng-container *ngIf=\"nodes.length > 0; else empty\">\n <ng-container *ngFor=\"let node of nodes\">\n <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n <button\n class=\"custom-single-select-node\"\n [disabled]=\"node.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTemplate>\n <button\n class=\"single-select-node\"\n [class.selected]=\"node?.selected\"\n [class.disabled]=\"node?.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <riv-icon\n [name]=\"'Check'\"\n *ngIf=\"node?.selected\"\n [size]=\"16\"\n ></riv-icon>\n <span class=\"label\">\n <span class=\"label-title\">\n <riv-highlight\n [text]=\"node?.title || ''\"\n [indices]=\"node?.titleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n <riv-highlight\n [text]=\"node?.subtitle || ''\"\n [indices]=\"node?.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n </span>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #empty>\n <div class=\"empty\">\n {{ noOptionsMessage }}\n </div>\n </ng-template>\n </ng-container>\n </riv-loading-cover>\n </div>\n</riv-callout>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:calc(var(--base-grid-size) * 200);max-width:calc(var(--base-grid-size) * 150);overflow-y:
|
|
43
|
+
args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #trigger class=\"trigger\" (click)=\"open = true\">\n <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n <span class=\"value\">{{ selectedOption.title }}</span>\n </ng-container>\n <ng-template #placeholderValue>\n <span class=\"value placeholder\">{{ placeholder }}</span>\n </ng-template>\n <span class=\"chevron\">\n <riv-icon [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n </span>\n</button>\n\n<riv-callout\n *ngIf=\"open\"\n [anchor]=\"trigger\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [allowedPositions]=\"[\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-right',\n 'bottom-center',\n 'bottom-left'\n ]\"\n (close)=\"open = false\"\n>\n <input\n *ngIf=\"filterabilityOptions.enabled\"\n #filter\n class=\"filter\"\n [placeholder]=\"getFilterPlaceholder()\"\n [value]=\"filterQuery\"\n (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n />\n <div class=\"options\">\n <riv-loading-cover [loading]=\"loading\">\n <ng-container *ngIf=\"getNodes(); let nodes\">\n <ng-container *ngIf=\"nodes.length > 0; else empty\">\n <ng-container *ngFor=\"let node of nodes\">\n <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n <button\n class=\"custom-single-select-node\"\n [disabled]=\"node.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"\n ></ng-container>\n </button>\n </ng-container>\n <ng-template #standardTemplate>\n <button\n class=\"single-select-node\"\n [class.selected]=\"node?.selected\"\n [class.disabled]=\"node?.disabled\"\n (click)=\"selectedOptionChange.emit(node); open = false\"\n >\n <riv-icon\n [name]=\"'Check'\"\n *ngIf=\"node?.selected\"\n [size]=\"16\"\n ></riv-icon>\n <span class=\"label\">\n <span class=\"label-title\">\n <riv-highlight\n [text]=\"node?.title || ''\"\n [indices]=\"node?.titleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n <riv-highlight\n [text]=\"node?.subtitle || ''\"\n [indices]=\"node?.subtitleHighlightIndices || []\"\n ></riv-highlight>\n </span>\n </span>\n </button>\n </ng-template>\n </ng-container>\n </ng-container>\n <ng-template #empty>\n <div class=\"empty\">\n {{ noOptionsMessage }}\n </div>\n </ng-template>\n </ng-container>\n </riv-loading-cover>\n </div>\n</riv-callout>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:calc(var(--base-grid-size) * 200);max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}\n"] }]
|
|
44
44
|
}], propDecorators: { options: [{
|
|
45
45
|
type: Input
|
|
46
46
|
}], selectedOption: [{
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { timeDay, timeMonth, timeWeek, timeYear } from 'd3-time';
|
|
2
|
+
export const intervals = ['year', 'quarter', 'month', 'week', 'day'];
|
|
3
|
+
export function getTimeInterval(interval) {
|
|
4
|
+
switch (interval) {
|
|
5
|
+
case 'day':
|
|
6
|
+
return timeDay;
|
|
7
|
+
case 'week':
|
|
8
|
+
return timeWeek;
|
|
9
|
+
case 'month':
|
|
10
|
+
return timeMonth;
|
|
11
|
+
case 'quarter':
|
|
12
|
+
return timeMonth.every(3);
|
|
13
|
+
case 'year':
|
|
14
|
+
return timeYear;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
export function getMinorIntervalFormat(interval) {
|
|
18
|
+
switch (interval) {
|
|
19
|
+
case 'day':
|
|
20
|
+
case 'week':
|
|
21
|
+
return '%-d';
|
|
22
|
+
case 'month':
|
|
23
|
+
return '%b';
|
|
24
|
+
case 'quarter':
|
|
25
|
+
return 'Q%q';
|
|
26
|
+
case 'year':
|
|
27
|
+
return '%Y';
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
export function getMajorInterval(interval) {
|
|
31
|
+
switch (interval) {
|
|
32
|
+
case 'day':
|
|
33
|
+
case 'week':
|
|
34
|
+
return 'month';
|
|
35
|
+
case 'month':
|
|
36
|
+
case 'quarter':
|
|
37
|
+
case 'year':
|
|
38
|
+
return 'year';
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
export function getMajorIntervalFormat(interval, hasMultipleYears) {
|
|
42
|
+
switch (interval) {
|
|
43
|
+
case 'year':
|
|
44
|
+
return hasMultipleYears ? '%Y' : '';
|
|
45
|
+
case 'month':
|
|
46
|
+
return hasMultipleYears ? '%b %Y' : '%b';
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
export function getIntervalTitle(interval) {
|
|
50
|
+
switch (interval) {
|
|
51
|
+
case 'year':
|
|
52
|
+
return 'Years';
|
|
53
|
+
case 'quarter':
|
|
54
|
+
return 'Quarters';
|
|
55
|
+
case 'month':
|
|
56
|
+
return 'Months';
|
|
57
|
+
case 'week':
|
|
58
|
+
return 'Weeks';
|
|
59
|
+
case 'day':
|
|
60
|
+
return 'Days';
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJ2YWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvdmlzdWFsaXphdGlvbi9pbnRlcnZhbHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFnQixPQUFPLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxTQUFTLENBQUM7QUFFL0UsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLENBQUMsTUFBTSxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLEtBQUssQ0FBVSxDQUFDO0FBRzlFLE1BQU0sVUFBVSxlQUFlLENBQUMsUUFBa0I7SUFDaEQsUUFBUSxRQUFRLEVBQUU7UUFDaEIsS0FBSyxLQUFLO1lBQ1IsT0FBTyxPQUFPLENBQUM7UUFDakIsS0FBSyxNQUFNO1lBQ1QsT0FBTyxRQUFRLENBQUM7UUFDbEIsS0FBSyxPQUFPO1lBQ1YsT0FBTyxTQUFTLENBQUM7UUFDbkIsS0FBSyxTQUFTO1lBQ1osT0FBTyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBRSxDQUFDO1FBQzdCLEtBQUssTUFBTTtZQUNULE9BQU8sUUFBUSxDQUFDO0tBQ25CO0FBQ0gsQ0FBQztBQUVELE1BQU0sVUFBVSxzQkFBc0IsQ0FBQyxRQUFrQjtJQUN2RCxRQUFRLFFBQVEsRUFBRTtRQUNoQixLQUFLLEtBQUssQ0FBQztRQUNYLEtBQUssTUFBTTtZQUNULE9BQU8sS0FBSyxDQUFDO1FBQ2YsS0FBSyxPQUFPO1lBQ1YsT0FBTyxJQUFJLENBQUM7UUFDZCxLQUFLLFNBQVM7WUFDWixPQUFPLEtBQUssQ0FBQztRQUNmLEtBQUssTUFBTTtZQUNULE9BQU8sSUFBSSxDQUFDO0tBQ2Y7QUFDSCxDQUFDO0FBRUQsTUFBTSxVQUFVLGdCQUFnQixDQUFDLFFBQWtCO0lBQ2pELFFBQVEsUUFBUSxFQUFFO1FBQ2hCLEtBQUssS0FBSyxDQUFDO1FBQ1gsS0FBSyxNQUFNO1lBQ1QsT0FBTyxPQUFPLENBQUM7UUFDakIsS0FBSyxPQUFPLENBQUM7UUFDYixLQUFLLFNBQVMsQ0FBQztRQUNmLEtBQUssTUFBTTtZQUNULE9BQU8sTUFBTSxDQUFDO0tBQ2pCO0FBQ0gsQ0FBQztBQUVELE1BQU0sVUFBVSxzQkFBc0IsQ0FDcEMsUUFBNkMsRUFDN0MsZ0JBQXlCO0lBRXpCLFFBQVEsUUFBUSxFQUFFO1FBQ2hCLEtBQUssTUFBTTtZQUNULE9BQU8sZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ3RDLEtBQUssT0FBTztZQUNWLE9BQU8sZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0tBQzVDO0FBQ0gsQ0FBQztBQUVELE1BQU0sVUFBVSxnQkFBZ0IsQ0FBQyxRQUFrQjtJQUNqRCxRQUFRLFFBQVEsRUFBRTtRQUNoQixLQUFLLE1BQU07WUFDVCxPQUFPLE9BQU8sQ0FBQztRQUNqQixLQUFLLFNBQVM7WUFDWixPQUFPLFVBQVUsQ0FBQztRQUNwQixLQUFLLE9BQU87WUFDVixPQUFPLFFBQVEsQ0FBQztRQUNsQixLQUFLLE1BQU07WUFDVCxPQUFPLE9BQU8sQ0FBQztRQUNqQixLQUFLLEtBQUs7WUFDUixPQUFPLE1BQU0sQ0FBQztLQUNqQjtBQUNILENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUaW1lSW50ZXJ2YWwsIHRpbWVEYXksIHRpbWVNb250aCwgdGltZVdlZWssIHRpbWVZZWFyIH0gZnJvbSAnZDMtdGltZSc7XG5cbmV4cG9ydCBjb25zdCBpbnRlcnZhbHMgPSBbJ3llYXInLCAncXVhcnRlcicsICdtb250aCcsICd3ZWVrJywgJ2RheSddIGFzIGNvbnN0O1xuZXhwb3J0IHR5cGUgSW50ZXJ2YWwgPSAodHlwZW9mIGludGVydmFscylbbnVtYmVyXTtcblxuZXhwb3J0IGZ1bmN0aW9uIGdldFRpbWVJbnRlcnZhbChpbnRlcnZhbDogSW50ZXJ2YWwpOiBUaW1lSW50ZXJ2YWwge1xuICBzd2l0Y2ggKGludGVydmFsKSB7XG4gICAgY2FzZSAnZGF5JzpcbiAgICAgIHJldHVybiB0aW1lRGF5O1xuICAgIGNhc2UgJ3dlZWsnOlxuICAgICAgcmV0dXJuIHRpbWVXZWVrO1xuICAgIGNhc2UgJ21vbnRoJzpcbiAgICAgIHJldHVybiB0aW1lTW9udGg7XG4gICAgY2FzZSAncXVhcnRlcic6XG4gICAgICByZXR1cm4gdGltZU1vbnRoLmV2ZXJ5KDMpITtcbiAgICBjYXNlICd5ZWFyJzpcbiAgICAgIHJldHVybiB0aW1lWWVhcjtcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gZ2V0TWlub3JJbnRlcnZhbEZvcm1hdChpbnRlcnZhbDogSW50ZXJ2YWwpIHtcbiAgc3dpdGNoIChpbnRlcnZhbCkge1xuICAgIGNhc2UgJ2RheSc6XG4gICAgY2FzZSAnd2Vlayc6XG4gICAgICByZXR1cm4gJyUtZCc7XG4gICAgY2FzZSAnbW9udGgnOlxuICAgICAgcmV0dXJuICclYic7XG4gICAgY2FzZSAncXVhcnRlcic6XG4gICAgICByZXR1cm4gJ1ElcSc7XG4gICAgY2FzZSAneWVhcic6XG4gICAgICByZXR1cm4gJyVZJztcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gZ2V0TWFqb3JJbnRlcnZhbChpbnRlcnZhbDogSW50ZXJ2YWwpIHtcbiAgc3dpdGNoIChpbnRlcnZhbCkge1xuICAgIGNhc2UgJ2RheSc6XG4gICAgY2FzZSAnd2Vlayc6XG4gICAgICByZXR1cm4gJ21vbnRoJztcbiAgICBjYXNlICdtb250aCc6XG4gICAgY2FzZSAncXVhcnRlcic6XG4gICAgY2FzZSAneWVhcic6XG4gICAgICByZXR1cm4gJ3llYXInO1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRNYWpvckludGVydmFsRm9ybWF0KFxuICBpbnRlcnZhbDogUmV0dXJuVHlwZTx0eXBlb2YgZ2V0TWFqb3JJbnRlcnZhbD4sXG4gIGhhc011bHRpcGxlWWVhcnM6IGJvb2xlYW4sXG4pIHtcbiAgc3dpdGNoIChpbnRlcnZhbCkge1xuICAgIGNhc2UgJ3llYXInOlxuICAgICAgcmV0dXJuIGhhc011bHRpcGxlWWVhcnMgPyAnJVknIDogJyc7XG4gICAgY2FzZSAnbW9udGgnOlxuICAgICAgcmV0dXJuIGhhc011bHRpcGxlWWVhcnMgPyAnJWIgJVknIDogJyViJztcbiAgfVxufVxuXG5leHBvcnQgZnVuY3Rpb24gZ2V0SW50ZXJ2YWxUaXRsZShpbnRlcnZhbDogSW50ZXJ2YWwpIHtcbiAgc3dpdGNoIChpbnRlcnZhbCkge1xuICAgIGNhc2UgJ3llYXInOlxuICAgICAgcmV0dXJuICdZZWFycyc7XG4gICAgY2FzZSAncXVhcnRlcic6XG4gICAgICByZXR1cm4gJ1F1YXJ0ZXJzJztcbiAgICBjYXNlICdtb250aCc6XG4gICAgICByZXR1cm4gJ01vbnRocyc7XG4gICAgY2FzZSAnd2Vlayc6XG4gICAgICByZXR1cm4gJ1dlZWtzJztcbiAgICBjYXNlICdkYXknOlxuICAgICAgcmV0dXJuICdEYXlzJztcbiAgfVxufVxuIl19
|
|
@@ -1,23 +1,27 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
|
+
import * as i2 from "../../modal/help/help.component";
|
|
4
5
|
export class MetricComponent {
|
|
5
6
|
constructor() {
|
|
6
7
|
this.label = '';
|
|
7
8
|
this.value = '';
|
|
9
|
+
// Variations
|
|
8
10
|
this.card = false;
|
|
9
11
|
}
|
|
10
12
|
}
|
|
11
13
|
MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
-
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", card: "card" }, 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\"
|
|
14
|
+
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", 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\">{{ value }}</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{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"], dependencies: [{ 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 });
|
|
13
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, decorators: [{
|
|
14
16
|
type: Component,
|
|
15
|
-
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\"
|
|
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\">{{ value }}</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{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"] }]
|
|
16
18
|
}], propDecorators: { label: [{
|
|
17
19
|
type: Input
|
|
18
20
|
}], value: [{
|
|
19
21
|
type: Input
|
|
20
22
|
}], card: [{
|
|
21
23
|
type: Input
|
|
24
|
+
}], help: [{
|
|
25
|
+
type: Input
|
|
22
26
|
}] } });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
27
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL3Zpc3VhbGl6YXRpb24vbWV0cmljL21ldHJpYy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL21ldHJpYy9tZXRyaWMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFRMUUsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFRRSxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBR25CLFVBQUssR0FBVyxFQUFFLENBQUM7UUFFbkIsYUFBYTtRQUViLFNBQUksR0FBWSxLQUFLLENBQUM7S0FJdkI7OzRHQWJZLGVBQWU7Z0dBQWYsZUFBZSwwSENSNUIsMFlBWUE7MkZESmEsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxZQUFZLG1CQUdMLHVCQUF1QixDQUFDLE1BQU07OEJBSS9DLEtBQUs7c0JBREosS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBS04sSUFBSTtzQkFESCxLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1tZXRyaWMnLFxuICB0ZW1wbGF0ZVVybDogJy4vbWV0cmljLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbWV0cmljLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIGxhYmVsOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoKVxuICB2YWx1ZTogc3RyaW5nID0gJyc7XG5cbiAgLy8gVmFyaWF0aW9uc1xuICBASW5wdXQoKVxuICBjYXJkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KClcbiAgaGVscD86IHN0cmluZztcbn1cbiIsIjxkaXYgKm5nSWY9XCJjYXJkOyBlbHNlIGNvbnRlbnRcIiBjbGFzcz1cImNhcmRcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbjwvZGl2PlxuPG5nLXRlbXBsYXRlICNjb250ZW50PlxuICA8ZGl2IGNsYXNzPVwibGFiZWxcIj5cbiAgICB7eyBsYWJlbCB9fSA8c3BhbiAqbmdJZj1cImhlbHBcIj48cml2LWhlbHAgW2hlbHBdPVwiaGVscFwiPjwvcml2LWhlbHA+PC9zcGFuPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImNvbnRlbnRcIj5cbiAgICA8ZGl2IGNsYXNzPVwidmFsdWVcIj57eyB2YWx1ZSB9fTwvZGl2PlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
|