@rivet-health/design-system 5.2.0 → 5.2.2
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/legend-item/legend-item.component.mjs +6 -3
- package/esm2020/lib/visualization/stacked-row/stacked-row.component.mjs +8 -5
- package/esm2020/lib/visualization/time-series/time-series.component.mjs +1 -1
- package/fesm2015/rivet-health-design-system.mjs +13 -7
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +13 -7
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/visualization/legend-item/legend-item.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -2491,6 +2491,7 @@ class LegendItemComponent {
|
|
|
2491
2491
|
this.style = 'solid';
|
|
2492
2492
|
this.visibility = 'visible';
|
|
2493
2493
|
this.clickable = false;
|
|
2494
|
+
this.showCheckWhenClickable = true;
|
|
2494
2495
|
this.itemClick = new EventEmitter();
|
|
2495
2496
|
}
|
|
2496
2497
|
get backgroundColor() {
|
|
@@ -2501,10 +2502,10 @@ class LegendItemComponent {
|
|
|
2501
2502
|
}
|
|
2502
2503
|
}
|
|
2503
2504
|
LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2504
|
-
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", iconTooltip: "iconTooltip", clickable: "clickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n [rivTooltip]=\"iconTooltip\"\n type=\"button\"\n [disabled]=\"visibility === 'locked'\"\n [class.clickable]=\"clickable\"\n>\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n class=\"opacity-hover\"\n ></i>\n <i\n *ngIf=\"visibility === 'hidden'\"\n class=\"hidden-legend-item opacity-hover\"\n [class.striped]=\"style === 'striped'\"\n [style.border-color]=\"backgroundColor\"\n [style.--background-color-hover]=\"backgroundColor\"\n ></i>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n <span\n [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n >\n {{ label }}\n </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .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"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2505
|
+
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", iconTooltip: "iconTooltip", clickable: "clickable", showCheckWhenClickable: "showCheckWhenClickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n [rivTooltip]=\"iconTooltip\"\n type=\"button\"\n [disabled]=\"visibility === 'locked'\"\n [class.clickable]=\"clickable\"\n>\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n class=\"opacity-hover\"\n >\n <riv-icon\n *ngIf=\"clickable && showCheckWhenClickable\"\n name=\"Check\"\n [size]=\"16\"\n [strokeWidth]=\"3\"\n style=\"color: var(--white-100)\"\n ></riv-icon>\n </i>\n <i\n *ngIf=\"visibility === 'hidden'\"\n class=\"hidden-legend-item opacity-hover\"\n [class.striped]=\"style === 'striped'\"\n [style.border-color]=\"backgroundColor\"\n [style.--background-color-hover]=\"backgroundColor\"\n ></i>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n <span\n [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n >\n {{ label }}\n </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .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"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2505
2506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
|
|
2506
2507
|
type: Component,
|
|
2507
|
-
args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n [rivTooltip]=\"iconTooltip\"\n type=\"button\"\n [disabled]=\"visibility === 'locked'\"\n [class.clickable]=\"clickable\"\n>\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n class=\"opacity-hover\"\n ></i>\n <i\n *ngIf=\"visibility === 'hidden'\"\n class=\"hidden-legend-item opacity-hover\"\n [class.striped]=\"style === 'striped'\"\n [style.border-color]=\"backgroundColor\"\n [style.--background-color-hover]=\"backgroundColor\"\n ></i>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n <span\n [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n >\n {{ label }}\n </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"] }]
|
|
2508
|
+
args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n [rivTooltip]=\"iconTooltip\"\n type=\"button\"\n [disabled]=\"visibility === 'locked'\"\n [class.clickable]=\"clickable\"\n>\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n class=\"opacity-hover\"\n >\n <riv-icon\n *ngIf=\"clickable && showCheckWhenClickable\"\n name=\"Check\"\n [size]=\"16\"\n [strokeWidth]=\"3\"\n style=\"color: var(--white-100)\"\n ></riv-icon>\n </i>\n <i\n *ngIf=\"visibility === 'hidden'\"\n class=\"hidden-legend-item opacity-hover\"\n [class.striped]=\"style === 'striped'\"\n [style.border-color]=\"backgroundColor\"\n [style.--background-color-hover]=\"backgroundColor\"\n ></i>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n <span\n [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n >\n {{ label }}\n </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"] }]
|
|
2508
2509
|
}], propDecorators: { label: [{
|
|
2509
2510
|
type: Input
|
|
2510
2511
|
}], colorToken: [{
|
|
@@ -2517,6 +2518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2517
2518
|
type: Input
|
|
2518
2519
|
}], clickable: [{
|
|
2519
2520
|
type: Input
|
|
2521
|
+
}], showCheckWhenClickable: [{
|
|
2522
|
+
type: Input
|
|
2520
2523
|
}], itemClick: [{
|
|
2521
2524
|
type: Output
|
|
2522
2525
|
}] } });
|
|
@@ -3036,11 +3039,12 @@ class StackedRowComponent {
|
|
|
3036
3039
|
this.SECTION_HEIGHTS.X_AXIS_LABEL -
|
|
3037
3040
|
this.SECTION_PADDING.OUTER_TOP_BOTTOM -
|
|
3038
3041
|
this.SECTION_PADDING.RECTANGLE_TO_ROW) /
|
|
3039
|
-
this.input.length
|
|
3042
|
+
this.input.length -
|
|
3043
|
+
this.SECTION_PADDING.BETWEEN_ROW; // calculate base row height
|
|
3040
3044
|
// Clamping the row height between the min and max heights
|
|
3041
3045
|
return Math.min(Math.max(rowHeight, this.RECTANGLE_HEIGHTS.MIN_HEIGHT), this.RECTANGLE_HEIGHTS.MAX_HEIGHT);
|
|
3042
3046
|
}
|
|
3043
|
-
return
|
|
3047
|
+
return this.RECTANGLE_HEIGHTS.MIN_HEIGHT; // Default if no input
|
|
3044
3048
|
},
|
|
3045
3049
|
// Max Height of each rectangle
|
|
3046
3050
|
PER_RECTANGLE: () => {
|
|
@@ -3088,7 +3092,9 @@ class StackedRowComponent {
|
|
|
3088
3092
|
: this.SECTION_HEIGHTS.X_AXIS_LABEL +
|
|
3089
3093
|
this.SECTION_PADDING.OUTER_TOP_BOTTOM +
|
|
3090
3094
|
this.SECTION_PADDING.RECTANGLE_TO_ROW +
|
|
3091
|
-
this.SECTION_HEIGHTS.PER_ROW()
|
|
3095
|
+
(this.SECTION_HEIGHTS.PER_ROW() +
|
|
3096
|
+
this.SECTION_PADDING.BETWEEN_ROW) *
|
|
3097
|
+
input.length);
|
|
3092
3098
|
}), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
3093
3099
|
// Lets us know whether to display the zero data state
|
|
3094
3100
|
this.empty$ = this.input$.pipe(map(input => input.every(stack => stack.data.length === 0)), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
@@ -3254,7 +3260,7 @@ class StackedRowComponent {
|
|
|
3254
3260
|
}
|
|
3255
3261
|
}
|
|
3256
3262
|
StackedRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3257
|
-
StackedRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, 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 draw\"\n [attr.viewBox]=\"draw.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"draw.rowHeight\"\n [attr.height]=\"draw.rowHeight\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n [attr.x1]=\"0\"\n [attr.y1]=\"0\"\n [attr.x2]=\"draw.rowHeight\"\n [attr.y2]=\"draw.rowHeight\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n <text\n rivSVGTextTruncate\n [text]=\"rowNameToDraw.label\"\n [width]=\"SECTION_WIDTHS.ROW_NAME\"\n class=\"row-title\"\n [attr.x]=\"rowNameToDraw.x\"\n [attr.y]=\"rowNameToDraw.y\"\n ></text>\n </g>\n <g *ngFor=\"let tick of draw.xTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"draw.xScale(tick)\"\n y=\"0\"\n width=\"1\"\n height=\"100%\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"draw.xScale(tick)\"\n [attr.y]=\"locationOfXAxisTick()\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g\n *ngFor=\"let rect of draw.rects\"\n (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n (mouseleave)=\"hoveredBand$.next(null)\"\n >\n <rect\n class=\"row\"\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)?.rowName !== rect.rowName\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 <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n <text\n class=\"row-total\"\n [attr.x]=\"rowTotalToDraw.x\"\n [attr.y]=\"rowTotalToDraw.y\"\n text-anchor=\"end\"\n >\n {{ rowTotalToDraw.label }}\n </text>\n </g>\n </svg>\n <legend *ngIf=\"drawData$ | async; let draw\">\n <riv-legend-item\n *ngFor=\"let item of draw.legendItems\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable"], outputs: ["itemClick"] }, { kind: "directive", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3263
|
+
StackedRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, 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 draw\"\n [attr.viewBox]=\"draw.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"draw.rowHeight\"\n [attr.height]=\"draw.rowHeight\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n [attr.x1]=\"0\"\n [attr.y1]=\"0\"\n [attr.x2]=\"draw.rowHeight\"\n [attr.y2]=\"draw.rowHeight\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n <text\n rivSVGTextTruncate\n [text]=\"rowNameToDraw.label\"\n [width]=\"SECTION_WIDTHS.ROW_NAME\"\n class=\"row-title\"\n [attr.x]=\"rowNameToDraw.x\"\n [attr.y]=\"rowNameToDraw.y\"\n ></text>\n </g>\n <g *ngFor=\"let tick of draw.xTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"draw.xScale(tick)\"\n y=\"0\"\n width=\"1\"\n height=\"100%\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"draw.xScale(tick)\"\n [attr.y]=\"locationOfXAxisTick()\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g\n *ngFor=\"let rect of draw.rects\"\n (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n (mouseleave)=\"hoveredBand$.next(null)\"\n >\n <rect\n class=\"row\"\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)?.rowName !== rect.rowName\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 <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n <text\n class=\"row-total\"\n [attr.x]=\"rowTotalToDraw.x\"\n [attr.y]=\"rowTotalToDraw.y\"\n text-anchor=\"end\"\n >\n {{ rowTotalToDraw.label }}\n </text>\n </g>\n </svg>\n <legend *ngIf=\"drawData$ | async; let draw\">\n <riv-legend-item\n *ngFor=\"let item of draw.legendItems\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3258
3264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedRowComponent, decorators: [{
|
|
3259
3265
|
type: Component,
|
|
3260
3266
|
args: [{ selector: 'riv-stacked-row', 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 draw\"\n [attr.viewBox]=\"draw.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"draw.rowHeight\"\n [attr.height]=\"draw.rowHeight\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n [attr.x1]=\"0\"\n [attr.y1]=\"0\"\n [attr.x2]=\"draw.rowHeight\"\n [attr.y2]=\"draw.rowHeight\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n <text\n rivSVGTextTruncate\n [text]=\"rowNameToDraw.label\"\n [width]=\"SECTION_WIDTHS.ROW_NAME\"\n class=\"row-title\"\n [attr.x]=\"rowNameToDraw.x\"\n [attr.y]=\"rowNameToDraw.y\"\n ></text>\n </g>\n <g *ngFor=\"let tick of draw.xTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"draw.xScale(tick)\"\n y=\"0\"\n width=\"1\"\n height=\"100%\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"draw.xScale(tick)\"\n [attr.y]=\"locationOfXAxisTick()\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g\n *ngFor=\"let rect of draw.rects\"\n (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n (mouseleave)=\"hoveredBand$.next(null)\"\n >\n <rect\n class=\"row\"\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)?.rowName !== rect.rowName\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 <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n <text\n class=\"row-total\"\n [attr.x]=\"rowTotalToDraw.x\"\n [attr.y]=\"rowTotalToDraw.y\"\n text-anchor=\"end\"\n >\n {{ rowTotalToDraw.label }}\n </text>\n </g>\n </svg>\n <legend *ngIf=\"drawData$ | async; let draw\">\n <riv-legend-item\n *ngFor=\"let item of draw.legendItems\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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"] }]
|
|
@@ -3553,7 +3559,7 @@ class TimeSeriesComponent {
|
|
|
3553
3559
|
}
|
|
3554
3560
|
}
|
|
3555
3561
|
TimeSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3556
|
-
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", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], 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(d.y1.yMin)\"\n ></rect>\n <text\n *ngIf=\"d.x.xScale(tick.value) >= 0\"\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\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(d.y1.yMin)\"\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(d.y1.yMin)\"\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 *ngIf=\"series.visibility != 'hidden'\"\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 <ng-container *ngFor=\"let marker of series.markers\">\n <circle\n *ngIf=\"series.visibility != 'hidden'\"\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-container>\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 [visibility]=\"item.visibility\"\n [clickable]=\"allowLegendToggle\"\n (itemClick)=\"\n allowLegendToggle\n ? toggleVisibility$.next({\n label: item.label,\n visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n })\n : null\n \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n <riv-single-select\n [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n [selectedOption]=\"selectedIntervalOption$ | async\"\n (selectedOptionChange)=\"setIntervalOption($event)\"\n ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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", "iconTooltip", "clickable"], outputs: ["itemClick"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3562
|
+
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", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], 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(d.y1.yMin)\"\n ></rect>\n <text\n *ngIf=\"d.x.xScale(tick.value) >= 0\"\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\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(d.y1.yMin)\"\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(d.y1.yMin)\"\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 *ngIf=\"series.visibility != 'hidden'\"\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 <ng-container *ngFor=\"let marker of series.markers\">\n <circle\n *ngIf=\"series.visibility != 'hidden'\"\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-container>\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 [visibility]=\"item.visibility\"\n [clickable]=\"allowLegendToggle\"\n (itemClick)=\"\n allowLegendToggle\n ? toggleVisibility$.next({\n label: item.label,\n visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n })\n : null\n \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n <riv-single-select\n [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n [selectedOption]=\"selectedIntervalOption$ | async\"\n (selectedOptionChange)=\"setIntervalOption($event)\"\n ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3557
3563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, decorators: [{
|
|
3558
3564
|
type: Component,
|
|
3559
3565
|
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(d.y1.yMin)\"\n ></rect>\n <text\n *ngIf=\"d.x.xScale(tick.value) >= 0\"\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\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(d.y1.yMin)\"\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(d.y1.yMin)\"\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 *ngIf=\"series.visibility != 'hidden'\"\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 <ng-container *ngFor=\"let marker of series.markers\">\n <circle\n *ngIf=\"series.visibility != 'hidden'\"\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-container>\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 [visibility]=\"item.visibility\"\n [clickable]=\"allowLegendToggle\"\n (itemClick)=\"\n allowLegendToggle\n ? toggleVisibility$.next({\n label: item.label,\n visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n })\n : null\n \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n <riv-single-select\n [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n [selectedOption]=\"selectedIntervalOption$ | async\"\n (selectedOptionChange)=\"setIntervalOption($event)\"\n ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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"] }]
|