@rivet-health/design-system 5.0.2 → 5.2.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 +4 -1
- package/esm2020/lib/visualization/legend-item/legend-item.component.mjs +9 -3
- package/esm2020/lib/visualization/stacked-row/stacked-row.component.mjs +70 -25
- package/esm2020/lib/visualization/time-series/time-series.component.mjs +3 -3
- package/fesm2015/rivet-health-design-system.mjs +82 -28
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +82 -28
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/input/single-select/single-select.component.d.ts +1 -0
- package/lib/visualization/legend-item/legend-item.component.d.ts +3 -1
- package/lib/visualization/stacked-row/stacked-row.component.d.ts +20 -12
- package/package.json +1 -1
|
@@ -1321,6 +1321,9 @@ class SingleSelectComponent extends InputLabelComponent {
|
|
|
1321
1321
|
this.open = true;
|
|
1322
1322
|
}
|
|
1323
1323
|
}
|
|
1324
|
+
close() {
|
|
1325
|
+
this.open = false;
|
|
1326
|
+
}
|
|
1324
1327
|
trackByHeader(i, group) {
|
|
1325
1328
|
return `${i}${group.header}`;
|
|
1326
1329
|
}
|
|
@@ -2487,17 +2490,21 @@ class LegendItemComponent {
|
|
|
2487
2490
|
this.colorToken = '';
|
|
2488
2491
|
this.style = 'solid';
|
|
2489
2492
|
this.visibility = 'visible';
|
|
2493
|
+
this.clickable = false;
|
|
2490
2494
|
this.itemClick = new EventEmitter();
|
|
2491
2495
|
}
|
|
2492
2496
|
get backgroundColor() {
|
|
2493
2497
|
return `var(${this.colorToken})`;
|
|
2494
2498
|
}
|
|
2499
|
+
isLegendItemClickable() {
|
|
2500
|
+
return this.clickable && this.visibility !== 'locked';
|
|
2501
|
+
}
|
|
2495
2502
|
}
|
|
2496
2503
|
LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2497
|
-
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" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button
|
|
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 });
|
|
2498
2505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
|
|
2499
2506
|
type: Component,
|
|
2500
|
-
args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button
|
|
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"] }]
|
|
2501
2508
|
}], propDecorators: { label: [{
|
|
2502
2509
|
type: Input
|
|
2503
2510
|
}], colorToken: [{
|
|
@@ -2508,6 +2515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2508
2515
|
type: Input
|
|
2509
2516
|
}], iconTooltip: [{
|
|
2510
2517
|
type: Input
|
|
2518
|
+
}], clickable: [{
|
|
2519
|
+
type: Input
|
|
2511
2520
|
}], itemClick: [{
|
|
2512
2521
|
type: Output
|
|
2513
2522
|
}] } });
|
|
@@ -3002,7 +3011,7 @@ class StackedRowComponent {
|
|
|
3002
3011
|
// Width helps determine the size of the viewbox this graph is displaying in.
|
|
3003
3012
|
this.width$ = new BehaviorSubject(960);
|
|
3004
3013
|
// Height helps determine the size of the viewbox this graph is displaying in.
|
|
3005
|
-
this.height$ = new BehaviorSubject(
|
|
3014
|
+
this.height$ = new BehaviorSubject(null);
|
|
3006
3015
|
// ValueFormatter determines how we style the values in a metric and the x-axis
|
|
3007
3016
|
this.valueFormatter = v => v.toString();
|
|
3008
3017
|
this.zeroStateMessage$ = new BehaviorSubject('No data to display.');
|
|
@@ -3012,13 +3021,42 @@ class StackedRowComponent {
|
|
|
3012
3021
|
| X Axis Labels |
|
|
3013
3022
|
Row Name | Rectangles | Totals
|
|
3014
3023
|
*/
|
|
3024
|
+
this.RECTANGLE_HEIGHTS = {
|
|
3025
|
+
MIN_HEIGHT: 12,
|
|
3026
|
+
MAX_HEIGHT: 42, // Sets the largest size a row can expand to
|
|
3027
|
+
};
|
|
3015
3028
|
this.SECTION_HEIGHTS = {
|
|
3016
3029
|
// Space reserved for the x-axis labels
|
|
3017
3030
|
X_AXIS_LABEL: 14,
|
|
3018
3031
|
// Height of each row
|
|
3019
|
-
PER_ROW:
|
|
3020
|
-
|
|
3021
|
-
|
|
3032
|
+
PER_ROW: () => {
|
|
3033
|
+
//Only use height if specified
|
|
3034
|
+
if (this.input.length && this.height) {
|
|
3035
|
+
let rowHeight = (this.height -
|
|
3036
|
+
this.SECTION_HEIGHTS.X_AXIS_LABEL -
|
|
3037
|
+
this.SECTION_PADDING.OUTER_TOP_BOTTOM -
|
|
3038
|
+
this.SECTION_PADDING.RECTANGLE_TO_ROW) /
|
|
3039
|
+
this.input.length; // calculate base row height
|
|
3040
|
+
// Clamping the row height between the min and max heights
|
|
3041
|
+
return Math.min(Math.max(rowHeight, this.RECTANGLE_HEIGHTS.MIN_HEIGHT), this.RECTANGLE_HEIGHTS.MAX_HEIGHT);
|
|
3042
|
+
}
|
|
3043
|
+
return (this.RECTANGLE_HEIGHTS.MIN_HEIGHT + this.SECTION_PADDING.BETWEEN_ROW); // Default if no input
|
|
3044
|
+
},
|
|
3045
|
+
// Max Height of each rectangle
|
|
3046
|
+
PER_RECTANGLE: () => {
|
|
3047
|
+
//Only use height if specified
|
|
3048
|
+
if (this.input.length && this.height) {
|
|
3049
|
+
let rectangleHeight = (this.height -
|
|
3050
|
+
this.SECTION_HEIGHTS.X_AXIS_LABEL -
|
|
3051
|
+
this.SECTION_PADDING.OUTER_TOP_BOTTOM -
|
|
3052
|
+
this.SECTION_PADDING.RECTANGLE_TO_ROW) /
|
|
3053
|
+
this.input.length -
|
|
3054
|
+
this.SECTION_PADDING.BETWEEN_ROW; // calculate base rectangle height
|
|
3055
|
+
// Clamping the rectangle height between the min and max heights
|
|
3056
|
+
return Math.min(Math.max(rectangleHeight, this.RECTANGLE_HEIGHTS.MIN_HEIGHT), this.RECTANGLE_HEIGHTS.MAX_HEIGHT);
|
|
3057
|
+
}
|
|
3058
|
+
return this.RECTANGLE_HEIGHTS.MIN_HEIGHT; // Default if no input
|
|
3059
|
+
},
|
|
3022
3060
|
};
|
|
3023
3061
|
this.SECTION_WIDTHS = {
|
|
3024
3062
|
// Space reserved for the name at the start of the row
|
|
@@ -3036,33 +3074,43 @@ class StackedRowComponent {
|
|
|
3036
3074
|
RECTANGLE_TO_ROW: 6,
|
|
3037
3075
|
};
|
|
3038
3076
|
// The number of X-axis segments to create, with labels at the start of each segment.
|
|
3039
|
-
this.
|
|
3077
|
+
this.X_TICK_COUNT_MAX = 8;
|
|
3078
|
+
this.X_TICK_COUNT_MIN = 3;
|
|
3079
|
+
this.X_TICK_MAX_WIDTH = 900;
|
|
3080
|
+
this.X_TICK_MIN_WIDTH = 400;
|
|
3040
3081
|
this.drawData$ = combineLatest([
|
|
3041
3082
|
this.input$,
|
|
3042
3083
|
this.width$,
|
|
3043
3084
|
this.height$,
|
|
3044
3085
|
]).pipe(map(([input, width, height]) => {
|
|
3045
|
-
return this.getDrawnData(input, width, height
|
|
3086
|
+
return this.getDrawnData(input, width, height
|
|
3087
|
+
? height
|
|
3088
|
+
: this.SECTION_HEIGHTS.X_AXIS_LABEL +
|
|
3089
|
+
this.SECTION_PADDING.OUTER_TOP_BOTTOM +
|
|
3090
|
+
this.SECTION_PADDING.RECTANGLE_TO_ROW +
|
|
3091
|
+
this.SECTION_HEIGHTS.PER_ROW() * input.length);
|
|
3046
3092
|
}), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
3047
3093
|
// Lets us know whether to display the zero data state
|
|
3048
3094
|
this.empty$ = this.input$.pipe(map(input => input.every(stack => stack.data.length === 0)), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
3049
3095
|
// What rectangle we are currently hovering over
|
|
3050
3096
|
this.hoveredRectangle$ = new BehaviorSubject(null);
|
|
3097
|
+
// What band we are currently hovering over
|
|
3098
|
+
this.hoveredBand$ = new BehaviorSubject(null);
|
|
3051
3099
|
// Create the metric to display based on the currently hovered rectangle
|
|
3052
|
-
this.callout$ = this.
|
|
3053
|
-
if (!
|
|
3100
|
+
this.callout$ = combineLatest([this.hoveredBand$, this.drawData$]).pipe(map(([hoveredBand, drawData]) => {
|
|
3101
|
+
if (!hoveredBand || !drawData)
|
|
3054
3102
|
return null;
|
|
3055
|
-
const { target } =
|
|
3103
|
+
const { target } = hoveredBand.event;
|
|
3056
3104
|
if (!target)
|
|
3057
3105
|
return null;
|
|
3058
3106
|
const anchor = target.getBoundingClientRect();
|
|
3059
|
-
const
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
value: this.valueFormatter(stackedRowElement.value),
|
|
3064
|
-
};
|
|
3065
|
-
return { anchor,
|
|
3107
|
+
const metrics = drawData.rects
|
|
3108
|
+
.filter(rect => rect.rowName === hoveredBand.rowName)
|
|
3109
|
+
.map(rect => ({
|
|
3110
|
+
label: rect.stackedRowElement.label,
|
|
3111
|
+
value: this.valueFormatter(rect.stackedRowElement.value),
|
|
3112
|
+
}));
|
|
3113
|
+
return { anchor, metrics };
|
|
3066
3114
|
}), shareReplay({ refCount: true, bufferSize: 1 }));
|
|
3067
3115
|
}
|
|
3068
3116
|
set input(v) {
|
|
@@ -3106,7 +3154,7 @@ class StackedRowComponent {
|
|
|
3106
3154
|
// The y-index of the top of the current row
|
|
3107
3155
|
getTopOfRow(rowIndex) {
|
|
3108
3156
|
const spaceAboveRows = this.SECTION_PADDING.OUTER_TOP_BOTTOM + this.SECTION_HEIGHTS.X_AXIS_LABEL;
|
|
3109
|
-
const aboveRows = rowIndex * this.SECTION_HEIGHTS.PER_ROW;
|
|
3157
|
+
const aboveRows = rowIndex * this.SECTION_HEIGHTS.PER_ROW();
|
|
3110
3158
|
const aboveRowPaddings = rowIndex * this.SECTION_PADDING.BETWEEN_ROW;
|
|
3111
3159
|
const allAboveRows = aboveRows + aboveRowPaddings;
|
|
3112
3160
|
return spaceAboveRows + allAboveRows;
|
|
@@ -3127,14 +3175,20 @@ class StackedRowComponent {
|
|
|
3127
3175
|
const xScale = scaleLinear()
|
|
3128
3176
|
.domain([0, domainMax])
|
|
3129
3177
|
.range([this.locationOfXAxisZero(), this.locationOfXAxisEnd(width)]);
|
|
3130
|
-
|
|
3178
|
+
// Setup a linear scale for tick count based on width
|
|
3179
|
+
const tickScale = scaleLinear()
|
|
3180
|
+
.domain([this.X_TICK_MIN_WIDTH, this.X_TICK_MAX_WIDTH])
|
|
3181
|
+
.range([this.X_TICK_COUNT_MIN, this.X_TICK_COUNT_MAX])
|
|
3182
|
+
.clamp(true); // Ensures the scale does not go beyond the defined range
|
|
3183
|
+
const xtickCountAdjusted = Math.round(tickScale(width));
|
|
3184
|
+
const xTicks = xScale.ticks(xtickCountAdjusted);
|
|
3131
3185
|
const rects = this.createRectanglesFromRows(rowsForDisplay, xScale);
|
|
3132
3186
|
const rowNamesToDraw = this.getRowNamesToDraw(rowsForDisplay);
|
|
3133
3187
|
const rowTotalsToDraw = this.getRowTotalsToDraw(rowsForDisplay, width);
|
|
3134
3188
|
const legendItems = getLegendItems(rowsForDisplay, keysInOrder);
|
|
3135
3189
|
return {
|
|
3136
3190
|
legendItems: legendItems,
|
|
3137
|
-
rowHeight: this.SECTION_HEIGHTS.PER_RECTANGLE,
|
|
3191
|
+
rowHeight: this.SECTION_HEIGHTS.PER_RECTANGLE(),
|
|
3138
3192
|
rects: rects,
|
|
3139
3193
|
rowNames: rowNamesToDraw,
|
|
3140
3194
|
rowTotals: rowTotalsToDraw,
|
|
@@ -3150,7 +3204,7 @@ class StackedRowComponent {
|
|
|
3150
3204
|
currentRow.elementsButStacked.forEach((currentElement, _) => {
|
|
3151
3205
|
const topOfRow = this.getTopOfRow(rowIndex);
|
|
3152
3206
|
const rectangleWidth = xScale(currentElement.topline) - xScale(currentElement.baseline);
|
|
3153
|
-
const rectangleHeight = this.SECTION_HEIGHTS.PER_RECTANGLE;
|
|
3207
|
+
const rectangleHeight = this.SECTION_HEIGHTS.PER_RECTANGLE();
|
|
3154
3208
|
const rectangleX = xScale(currentElement.baseline);
|
|
3155
3209
|
const rectangleY = topOfRow + this.SECTION_PADDING.RECTANGLE_TO_ROW;
|
|
3156
3210
|
const fill = `var(${currentElement.colorToken})`;
|
|
@@ -3175,7 +3229,7 @@ class StackedRowComponent {
|
|
|
3175
3229
|
// The row name looks right if its base is at the base of the associated rectangle
|
|
3176
3230
|
const rowLabelY = this.getTopOfRow(rowIndex) +
|
|
3177
3231
|
this.SECTION_PADDING.RECTANGLE_TO_ROW +
|
|
3178
|
-
this.SECTION_HEIGHTS.PER_RECTANGLE;
|
|
3232
|
+
this.SECTION_HEIGHTS.PER_RECTANGLE() / 2;
|
|
3179
3233
|
return {
|
|
3180
3234
|
label: row.rowName,
|
|
3181
3235
|
x: rowLabelX,
|
|
@@ -3190,7 +3244,7 @@ class StackedRowComponent {
|
|
|
3190
3244
|
// The row totals looks right if its base is at the base of the associated rectangle
|
|
3191
3245
|
const rowLabelY = this.getTopOfRow(rowIndex) +
|
|
3192
3246
|
this.SECTION_PADDING.RECTANGLE_TO_ROW +
|
|
3193
|
-
this.SECTION_HEIGHTS.PER_RECTANGLE;
|
|
3247
|
+
this.SECTION_HEIGHTS.PER_RECTANGLE() / 2;
|
|
3194
3248
|
return {
|
|
3195
3249
|
label: this.valueFormatter(row.rowTotal),
|
|
3196
3250
|
x: rowLabelX,
|
|
@@ -3200,10 +3254,10 @@ class StackedRowComponent {
|
|
|
3200
3254
|
}
|
|
3201
3255
|
}
|
|
3202
3256
|
StackedRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3203
|
-
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
|
|
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 });
|
|
3204
3258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedRowComponent, decorators: [{
|
|
3205
3259
|
type: Component,
|
|
3206
|
-
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
|
|
3260
|
+
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"] }]
|
|
3207
3261
|
}], propDecorators: { input: [{
|
|
3208
3262
|
type: Input
|
|
3209
3263
|
}], width: [{
|
|
@@ -3499,10 +3553,10 @@ class TimeSeriesComponent {
|
|
|
3499
3553
|
}
|
|
3500
3554
|
}
|
|
3501
3555
|
TimeSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3502
|
-
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 (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"], 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 });
|
|
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 });
|
|
3503
3557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, decorators: [{
|
|
3504
3558
|
type: Component,
|
|
3505
|
-
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 (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"] }]
|
|
3559
|
+
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"] }]
|
|
3506
3560
|
}], propDecorators: { input: [{
|
|
3507
3561
|
type: Input
|
|
3508
3562
|
}], width: [{
|