@rivet-health/design-system 11.3.1 → 11.3.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/chart/chart.component.mjs +2 -2
- package/fesm2015/rivet-health-design-system.mjs +2 -2
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +2 -2
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -139,10 +139,10 @@ export class ChartComponent {
|
|
|
139
139
|
}
|
|
140
140
|
}
|
|
141
141
|
ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
-
ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"!(empty$ | async); else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"hover != null\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n ></path>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"hover != null\">\n <riv-callout\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend>\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n #legendTooltip\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);&:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);
|
|
142
|
+
ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"!(empty$ | async); else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"hover != null\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n ></path>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"hover != null\">\n <riv-callout\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend>\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n #legendTooltip\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);&:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: i4.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked"] }, { kind: "directive", type: i5.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i6.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
143
143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, decorators: [{
|
|
144
144
|
type: Component,
|
|
145
|
-
args: [{ selector: 'riv-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"!(empty$ | async); else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"hover != null\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n ></path>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"hover != null\">\n <riv-callout\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend>\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n #legendTooltip\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);&:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);
|
|
145
|
+
args: [{ selector: 'riv-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"!(empty$ | async); else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"hover != null\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n ></path>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"hover != null\">\n <riv-callout\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend>\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n #legendTooltip\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);&:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}\n"] }]
|
|
146
146
|
}], propDecorators: { container: [{
|
|
147
147
|
type: ViewChild,
|
|
148
148
|
args: ['container']
|
|
@@ -4111,10 +4111,10 @@ class ChartComponent {
|
|
|
4111
4111
|
}
|
|
4112
4112
|
}
|
|
4113
4113
|
ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4114
|
-
ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"!(empty$ | async); else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"hover != null\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n ></path>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"hover != null\">\n <riv-callout\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend>\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n #legendTooltip\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);&:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);
|
|
4114
|
+
ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"!(empty$ | async); else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"hover != null\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n ></path>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"hover != null\">\n <riv-callout\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend>\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n #legendTooltip\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);&:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4115
4115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, decorators: [{
|
|
4116
4116
|
type: Component,
|
|
4117
|
-
args: [{ selector: 'riv-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"!(empty$ | async); else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"hover != null\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n ></path>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"hover != null\">\n <riv-callout\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend>\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n #legendTooltip\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);&:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);
|
|
4117
|
+
args: [{ selector: 'riv-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"!(empty$ | async); else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"hover != null\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n ></path>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n hover != null &&\n (config.groupedTooltip || i == hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"hover != null\">\n <riv-callout\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend>\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n #legendTooltip\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);&:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}\n"] }]
|
|
4118
4118
|
}], propDecorators: { container: [{
|
|
4119
4119
|
type: ViewChild,
|
|
4120
4120
|
args: ['container']
|