@rivet-health/design-system 2.3.1 → 2.5.0

package/fesm2020/rivet-health-design-system.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, Injectable, EventEmitter, ViewChild, Output, Directive, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, Pipe, Injectable, EventEmitter, ViewChild, Output, Directive, HostListener, ViewContainerRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { DecimalPipe, CommonModule } from '@angular/common';
-import { BehaviorSubject, map, shareReplay, combineLatest } from 'rxjs';
-import { pie, arc, line, stack } from 'd3-shape';
-import { scaleLinear, scaleBand } from 'd3-scale';
-import { timeYear, timeMonth, timeWeek, timeDay } from 'd3-time';
-import { timeFormat } from 'd3-time-format';
+import { DecimalPipe, PercentPipe, CurrencyPipe, CommonModule } from '@angular/common';
+import { BehaviorSubject, combineLatest, map, shareReplay } from 'rxjs';
+import { pie, arc, stack, line } from 'd3-shape';
 import { index } from 'd3-array';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { timeMonth, timeYear, timeWeek, timeDay } from 'd3-time';
+import { timeFormat } from 'd3-time-format';
 
 /**
  * DOM cache that clones existing elements if available.
@@ -362,6 +362,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+class DaysPipe {
+    constructor() {
+        this.inner = new DecimalPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        const ret = this.inner.transform(value, digitsInfo ?? '1.0-2');
+        return ret ? ret + (value === 1 ? ' day' : ' days') : '-';
+    }
+}
+DaysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DaysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, name: "rivDays" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivDays' }]
+        }] });
+
+class NumberPipe {
+    constructor() {
+        this.inner = new DecimalPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        return this.inner.transform(value, digitsInfo ?? '1.0-0') ?? '-';
+    }
+}
+NumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, name: "rivNumber" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivNumber' }]
+        }] });
+
+class PercentagePipe {
+    constructor() {
+        this.inner = new PercentPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        return this.inner.transform(value, digitsInfo ?? '1.1-1') ?? '-';
+    }
+}
+PercentagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PercentagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, name: "rivPercentage" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivPercentage' }]
+        }] });
+
+class SmallCurrencyPipe {
+    constructor() {
+        this.inner = new CurrencyPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        if (value === null) {
+            return '-';
+        }
+        const num = typeof value == 'string' ? Number.parseFloat(value) : value;
+        const magnitude = Math.log10(Math.abs(num));
+        if (num === 0) {
+            return (this.inner.transform(num, undefined, undefined, digitsInfo ?? '1.0-0') ?? '-');
+        }
+        if (magnitude >= 9) {
+            return ((this.inner.transform(num / 1000000000, undefined, undefined, digitsInfo ?? num / 1000000000 >= 100 ? '1.0-0' : '1.0-2') ?? '-') + 'B');
+        }
+        if (magnitude >= 6) {
+            return ((this.inner.transform(num / 1000000, undefined, undefined, digitsInfo ?? num / 1000000 >= 100 ? '1.0-0' : '1.0-2') ?? '-') + 'M');
+        }
+        if (magnitude >= 3) {
+            return ((this.inner.transform(num / 1000, undefined, undefined, digitsInfo ?? num / 1000 >= 100 ? '1.0-0' : '1.0-2') ?? '-') + 'K');
+        }
+        return (this.inner.transform(num, undefined, undefined, digitsInfo ?? num >= 100 ? '1.0-0' : '1.0-2') ?? '-');
+    }
+}
+SmallCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SmallCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, name: "rivSmallCurrency" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivSmallCurrency' }]
+        }] });
+
 class CalloutService {
     constructor() {
         this.calloutStack$ = new BehaviorSubject([]);
@@ -593,6 +671,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: CalloutService }]; } });
 
+class TooltipComponent {
+    constructor() {
+        this.anchor = null;
+        this.theme = 'dark';
+        this.onMouseEnter = new EventEmitter();
+        this.onMouseLeave = new EventEmitter();
+        this.isTemplate = isTemplate;
+    }
+    _onMouseLeave(evt) {
+        this.onMouseLeave.emit(evt);
+    }
+    _onMouseEnter(evt) {
+        this.onMouseEnter.emit(evt);
+    }
+}
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { listeners: { "mouseleave": "_onMouseLeave()", "mouseenter": "_onMouseEnter()" } }, ngImport: i0, template: "<riv-callout\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"'top-center'\"\n  [allowedPositions]=\"[\n    'top-center',\n    'center-right',\n    'bottom-center',\n    'center-left'\n  ]\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n>\n  <div class=\"content\">\n    <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #stringContent>\n      {{ content }}\n    </ng-template>\n  </div>\n</riv-callout>\n", styles: [".content{padding:var(--size-xsmall) var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"'top-center'\"\n  [allowedPositions]=\"[\n    'top-center',\n    'center-right',\n    'bottom-center',\n    'center-left'\n  ]\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n>\n  <div class=\"content\">\n    <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #stringContent>\n      {{ content }}\n    </ng-template>\n  </div>\n</riv-callout>\n", styles: [".content{padding:var(--size-xsmall) var(--size-small)}\n"] }]
+        }], propDecorators: { anchor: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: Output
+            }], onMouseLeave: [{
+                type: Output
+            }], _onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], _onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }] } });
+function isTemplate(v) {
+    return typeof v !== 'string';
+}
+
+class TooltipDirective {
+    constructor(el, applicationRef) {
+        this.el = el;
+        this.applicationRef = applicationRef;
+        this.rivTooltipTheme = 'dark';
+        this.closeDelay = 100;
+    }
+    onMouseEnter() {
+        if (!this.rivTooltip)
+            return;
+        if (this.tooltipRef) {
+            this.cancelClose();
+        }
+        else {
+            const tooltip = this.applicationRef.components[0].injector
+                .get(ViewContainerRef)
+                .createComponent(TooltipComponent);
+            tooltip.instance.anchor = this.el.nativeElement;
+            tooltip.instance.content = this.rivTooltip;
+            tooltip.instance.theme = this.rivTooltipTheme;
+            tooltip.instance.onMouseEnter.subscribe(this.cancelClose.bind(this));
+            tooltip.instance.onMouseLeave.subscribe(this.initiateClose.bind(this));
+            this.tooltipRef = tooltip;
+        }
+    }
+    onMouseLeave() {
+        this.initiateClose();
+    }
+    initiateClose() {
+        this.closeTimeout = window.setTimeout(() => {
+            this.tooltipRef?.destroy();
+            this.tooltipRef = undefined;
+        }, this.closeDelay);
+    }
+    cancelClose() {
+        window.clearTimeout(this.closeTimeout);
+    }
+}
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", closeDelay: "closeDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rivTooltip]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ApplicationRef }]; }, propDecorators: { rivTooltip: [{
+                type: Input
+            }], rivTooltipTheme: [{
+                type: Input
+            }], closeDelay: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class DataTableRowComponent {
+    constructor() {
+        this.subRow = false;
+    }
+}
+DataTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableRowComponent, selector: "[riv-data-table-row]", inputs: { subRow: "subRow" }, host: { properties: { "class.sub-row": "this.subRow" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-row]', template: '<ng-content></ng-content>', styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"] }]
+        }], propDecorators: { subRow: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.sub-row']
+            }] } });
+
+class DataTableCellComponent {
+    constructor(row) {
+        this.row = row;
+        this.subCell = false;
+    }
+    ngOnInit() {
+        this.subCell = this.row.subRow;
+    }
+}
+DataTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component });
+DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataTableRowComponent }]; }, propDecorators: { subCell: [{
+                type: HostBinding,
+                args: ['class.sub-cell']
+            }] } });
+
+class DataTableComponent {
+}
+DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableComponent, selector: "riv-data-table", ngImport: i0, template: '<table><ng-content></ng-content></table>', isInline: true, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-data-table', template: '<table><ng-content></ng-content></table>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"] }]
+        }] });
+
+class DataTableHeaderCellComponent {
+}
+DataTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
+        }] });
+
 class ZeroStateComponent {
     constructor() {
         this.message = 'No data to display.';
@@ -635,16 +867,18 @@ class DonutComponent {
     }
 }
 DonutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\">{{ displayValue }}</div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-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: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-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: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "closeDelay"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-donut', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\">{{ displayValue }}</div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"] }]
+            args: [{ selector: 'riv-donut', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"] }]
         }], propDecorators: { displayLabel: [{
                 type: Input
             }], displayValue: [{
                 type: Input
             }], data: [{
                 type: Input
+            }], displayTooltip: [{
+                type: Input
             }] } });
 
 class LegendItemComponent {
@@ -660,10 +894,10 @@ class LegendItemComponent {
     }
 }
 LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\">\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon\n    *ngIf=\"visibility === 'hidden'\"\n    name=\"EyeOff\"\n    [size]=\"16\"\n  ></riv-icon>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n  {{ label }}\n</span>\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}riv-icon,span.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon\n    *ngIf=\"visibility === 'hidden'\"\n    name=\"EyeOff\"\n    [size]=\"16\"\n  ></riv-icon>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n  {{ label }}\n</span>\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}riv-icon,span.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", "closeDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button (click)=\"itemClick.emit()\">\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon\n    *ngIf=\"visibility === 'hidden'\"\n    name=\"EyeOff\"\n    [size]=\"16\"\n  ></riv-icon>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n  {{ label }}\n</span>\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}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"] }]
+            args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon\n    *ngIf=\"visibility === 'hidden'\"\n    name=\"EyeOff\"\n    [size]=\"16\"\n  ></riv-icon>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n  {{ label }}\n</span>\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}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], colorToken: [{
@@ -672,6 +906,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], visibility: [{
                 type: Input
+            }], iconTooltip: [{
+                type: Input
             }], itemClick: [{
                 type: Output
             }] } });
@@ -696,30 +932,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-var Interval;
-(function (Interval) {
-    Interval["DAY"] = "day";
-    Interval["WEEK"] = "week";
-    Interval["MONTH"] = "month";
-    Interval["YEAR"] = "year";
-})(Interval || (Interval = {}));
-function getTimeInterval(interval) {
-    switch (interval) {
-        case Interval.DAY:
-            return timeDay;
-        case Interval.WEEK:
-            return timeWeek;
-        case Interval.MONTH:
-            return timeMonth;
-        case Interval.YEAR:
-            return timeYear;
-    }
-}
-function getDateRange$1(configs) {
+function getDateRange$1(stacks) {
     let min = Infinity;
     let max = -Infinity;
-    for (const config of configs) {
-        for (const series of config.series) {
+    for (const stack of stacks) {
+        for (const series of stack) {
             for (const { date } of series.data) {
                 const value = date.valueOf();
                 min = Math.min(min, value);
@@ -729,340 +946,22 @@ function getDateRange$1(configs) {
     }
     return [new Date(min), new Date(max)];
 }
-function getMinorIntervalFormat(interval) {
-    switch (interval) {
-        case Interval.DAY:
-        case Interval.WEEK:
-            return '%-d';
-        case Interval.MONTH:
-            return '%b';
-        case Interval.YEAR:
-            return '%Y';
-    }
-}
-function getMajorInterval(interval) {
-    switch (interval) {
-        case Interval.DAY:
-        case Interval.WEEK:
-            return Interval.MONTH;
-        default:
-            return Interval.YEAR;
-    }
-}
-function getMajorIntervalFormat(interval) {
-    switch (interval) {
-        case Interval.YEAR:
-            return '%Y';
-        case Interval.MONTH:
-            return '%b %Y';
-        default:
-            return '%d';
-    }
-}
 // TODO: once we upgrade to Angular 16, this component can be cleaned up with
-// signals instead of RxJS. See commit e238c2d.
-class TimeSeriesComponent {
+// signals instead of RxJS.
+class StackedColumnComponent {
     constructor() {
-        this.input$ = new BehaviorSubject([
-            {
-                pointReducer: points => points.reduce((total, { value }) => total + value, 0),
-                valueFormatter: v => new DecimalPipe('en-US').transform(v) ?? '',
-                series: [],
-            },
-        ]);
+        this.input$ = new BehaviorSubject([]);
         this.width$ = new BehaviorSubject(960);
         this.height$ = new BehaviorSubject(256);
-        this.BOTTOM_OFFSET = 24;
-        this.LEFT_OFFSET = 48;
-        this.TOP_PADDING = 16;
-        this.LEFT_RIGHT_PADDING = 8;
-        this.BOTTOM_PADDING = 8;
-        this.Y_TICK_COUNT = 5;
-        this.X_MINOR_TICK_LIMIT = 15;
-        this.dateRange$ = this.input$.pipe(map(getDateRange$1), shareReplay({ refCount: true, bufferSize: 1 }));
-        this.binInterval$ = this.dateRange$.pipe(map(([minDate, maxDate]) => {
-            const diff = timeDay.count(new Date(minDate), new Date(maxDate));
-            if (diff >= 365 * 3) {
-                return Interval.YEAR;
-            }
-            else if (diff >= 365) {
-                return Interval.MONTH;
-            }
-            else if (diff >= 90) {
-                return Interval.WEEK;
-            }
-            else {
-                return Interval.DAY;
-            }
-        }), shareReplay({ refCount: true, bufferSize: 1 }));
-        this.binnedData$ = combineLatest([this.input$, this.binInterval$]).pipe(map(([input, binInterval]) => input.map((config) => {
-            return {
-                ...config,
-                series: config.series.map(series => {
-                    const binned = new Map();
-                    for (const point of series.data) {
-                        const bin = getTimeInterval(binInterval)
-                            .floor(point.date)
-                            .valueOf();
-                        if (!binned.has(bin)) {
-                            binned.set(bin, []);
-                        }
-                        binned.get(bin).push(point);
-                    }
-                    return {
-                        ...series,
-                        data: [...binned.entries()].map(([dateValue, points]) => ({
-                            date: new Date(dateValue),
-                            value: config.pointReducer(points),
-                        })),
-                    };
-                }),
-            };
-        })), shareReplay({ refCount: true, bufferSize: 1 }));
-        this.binnedDateRange$ = this.binnedData$.pipe(map(getDateRange$1), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.valueFormatter = v => v.toString();
         this.drawData$ = combineLatest([
-            this.binnedData$,
-            this.binnedDateRange$,
-            this.binInterval$,
+            this.input$,
             this.width$,
             this.height$,
-        ]).pipe(map(([binnedData, binnedDateRange, binInterval, width, height]) => {
-            const viewBox = `0 0 ${width} ${height}`;
-            const xScale = scaleLinear()
-                .domain(binnedDateRange)
-                .range([
-                this.LEFT_OFFSET + this.LEFT_RIGHT_PADDING,
-                width - this.LEFT_RIGHT_PADDING * 2,
-            ]);
-            const xMinorIntervalFormat = getMinorIntervalFormat(binInterval);
-            const [minDateValue, maxDateValue] = binnedDateRange;
-            const minorFormatter = timeFormat(xMinorIntervalFormat);
-            const xMinorTicks = getTimeInterval(binInterval)
-                .range(minDateValue, timeDay.offset(maxDateValue, 1))
-                .map(date => ({
-                value: date.valueOf(),
-                label: minorFormatter(date),
-            }))
-                .filter((_, i, arr) => arr.length > this.X_MINOR_TICK_LIMIT
-                ? i % Math.round(arr.length / this.X_MINOR_TICK_LIMIT) === 0
-                : true);
-            const xMajorInterval = getMajorInterval(binInterval);
-            const xMajorIntervalFormat = getMajorIntervalFormat(xMajorInterval);
-            const timeInterval = getTimeInterval(xMajorInterval);
-            const tickFloor = timeInterval.floor(minDateValue);
-            const tickCeiling = timeInterval.ceil(timeDay.offset(maxDateValue, 1));
-            const majorFormatter = timeFormat(xMajorIntervalFormat);
-            const xMajorTicks = timeInterval
-                .range(tickFloor, tickCeiling)
-                .map(tickDate => ({
-                label: xMajorInterval === binInterval ? '' : majorFormatter(tickDate),
-                value: tickDate.valueOf(),
-            }));
-            const x = { xMax: maxDateValue, xScale, xMinorTicks, xMajorTicks };
-            const [y1, y2] = binnedData.map(config => {
-                const flattenedValues = config.series.reduce((values, series) => [
-                    ...values,
-                    ...series.data.map(({ value }) => value),
-                ], []);
-                const yMax = config.max ?? Math.max(...flattenedValues);
-                const yMin = config.min ?? Math.min(...flattenedValues, 0);
-                const yScale = scaleLinear()
-                    .domain([yMin, yMax])
-                    .range([
-                    height -
-                        this.BOTTOM_OFFSET -
-                        (this.BOTTOM_PADDING + this.TOP_PADDING),
-                    this.TOP_PADDING,
-                ]);
-                const yTicks = yScale.ticks(this.Y_TICK_COUNT);
-                const series = config.series.map(series => ({
-                    ...series,
-                    path: line()
-                        .x(d => xScale(d.date))
-                        .y(d => yScale(d.value))(series.data),
-                    stroke: `var(${series.colorToken})`,
-                    markers: series.data.map(point => ({
-                        ...point,
-                        x: xScale(point.date),
-                        y: yScale(point.value),
-                    })),
-                }));
-                return {
-                    ...config,
-                    series,
-                    yMax,
-                    yMin,
-                    yScale,
-                    yTicks,
-                };
-            });
-            // If we have a y2, coerce y1's ticks to be visually equivalent to y2's ticks.
-            if (y2?.yTicks) {
-                const tickConversionScale = scaleLinear()
-                    .range(y1.yScale.domain())
-                    .domain(y2.yScale.domain());
-                y1.yTicks = y2.yTicks.map(tickConversionScale);
-            }
-            return { viewBox, x, y1, y2 };
-        }), shareReplay({ refCount: true, bufferSize: 1 }));
-        this.legend$ = this.binnedData$.pipe(map(binnedData => binnedData.reduce((items, config) => [
-            ...items,
-            ...config.series.map(series => ({
-                label: series.label,
-                colorToken: series.colorToken,
-            })),
-        ], [])));
-        this.empty$ = this.binnedData$.pipe(map(binnedData => binnedData.every(config => config.series.every(series => series.data.length === 0))), shareReplay({ refCount: true, bufferSize: 1 }));
-        this.hoveredMarker$ = new BehaviorSubject(null);
-        this.callout$ = combineLatest([this.hoveredMarker$, this.drawData$]).pipe(map(([hoveredMarker, drawData]) => {
-            if (!hoveredMarker)
-                return null;
-            const { target } = hoveredMarker.event;
-            if (!target)
-                return null;
-            const markerRect = target.getBoundingClientRect();
-            const padding = 8;
-            const anchor = new DOMRect(markerRect.left - padding, markerRect.top - padding, markerRect.width + padding * 2, markerRect.height + padding * 2);
-            const metrics = [];
-            for (const series of drawData.y1.series) {
-                const match = series.markers.find(marker => marker.x === hoveredMarker.marker.x);
-                if (match) {
-                    metrics.push({
-                        label: series.label,
-                        value: drawData.y1.valueFormatter(match.value),
-                    });
-                }
-            }
-            if (drawData.y2) {
-                for (const series of drawData.y2.series) {
-                    const match = series.markers.find(marker => marker.x === hoveredMarker.marker.x);
-                    if (match) {
-                        metrics.push({
-                            label: series.label,
-                            value: drawData.y2.valueFormatter(match.value),
-                        });
-                    }
-                }
-            }
-            return { anchor, metrics };
-        }));
-    }
-    set input(v) {
-        this.input$.next(v);
-    }
-    get input() {
-        return this.input$.getValue();
-    }
-    set width(v) {
-        this.width$.next(v);
-    }
-    get width() {
-        return this.width$.getValue();
-    }
-    set height(v) {
-        this.height$.next(v);
-    }
-    get height() {
-        return this.height$.getValue();
-    }
-}
-TimeSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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" }, 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        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        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      <circle\n        *ngFor=\"let marker of series.markers\"\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-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    ></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></riv-zero-state>\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-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-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"], outputs: ["itemClick"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, decorators: [{
-            type: Component,
-            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        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        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      <circle\n        *ngFor=\"let marker of series.markers\"\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-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    ></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></riv-zero-state>\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-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-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"] }]
-        }], propDecorators: { input: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }] } });
-
-class DataTableComponent {
-}
-DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableComponent, selector: "riv-data-table", ngImport: i0, template: '<table><ng-content></ng-content></table>', isInline: true, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'riv-data-table', template: '<table><ng-content></ng-content></table>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"] }]
-        }] });
-
-class DataTableRowComponent {
-    constructor() {
-        this.subRow = false;
-    }
-}
-DataTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableRowComponent, selector: "[riv-data-table-row]", inputs: { subRow: "subRow" }, host: { properties: { "class.sub-row": "this.subRow" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-row]', template: '<ng-content></ng-content>', styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"] }]
-        }], propDecorators: { subRow: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.sub-row']
-            }] } });
-
-class DataTableCellComponent {
-    constructor(row) {
-        this.row = row;
-        this.subCell = false;
-    }
-    ngOnInit() {
-        this.subCell = this.row.subRow;
-    }
-}
-DataTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component });
-DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataTableRowComponent }]; }, propDecorators: { subCell: [{
-                type: HostBinding,
-                args: ['class.sub-cell']
-            }] } });
-
-class DataTableHeaderCellComponent {
-}
-DataTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
-        }] });
-
-function getDateRange(stacks) {
-    let min = Infinity;
-    let max = -Infinity;
-    for (const stack of stacks) {
-        for (const series of stack) {
-            for (const { date } of series.data) {
-                const value = date.valueOf();
-                min = Math.min(min, value);
-                max = Math.max(max, value);
-            }
-        }
-    }
-    return [new Date(min), new Date(max)];
-}
-// TODO: once we upgrade to Angular 16, this component can be cleaned up with
-// signals instead of RxJS.
-class StackedColumnComponent {
-    constructor() {
-        this.input$ = new BehaviorSubject([]);
-        this.width$ = new BehaviorSubject(960);
-        this.height$ = new BehaviorSubject(256);
-        this.valueFormatter = v => v.toString();
-        this.drawData$ = combineLatest([
-            this.input$,
-            this.width$,
-            this.height$,
-        ]).pipe(map(([input, width, height]) => {
+        ]).pipe(map(([input, width, height]) => {
             const viewBox = `0 0 ${width} ${height}`;
             const padding = 8;
-            const [minDate, maxDate] = getDateRange(input);
+            const [minDate, maxDate] = getDateRange$1(input);
             const xSteps = timeMonth.range(timeMonth.floor(minDate), timeMonth.floor(timeMonth.offset(maxDate, 1)));
             const xFormatter = timeFormat('%b');
             const xOuterScale = scaleBand()
@@ -1204,6 +1103,289 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+var Interval;
+(function (Interval) {
+    Interval["DAY"] = "day";
+    Interval["WEEK"] = "week";
+    Interval["MONTH"] = "month";
+    Interval["YEAR"] = "year";
+})(Interval || (Interval = {}));
+function getTimeInterval(interval) {
+    switch (interval) {
+        case Interval.DAY:
+            return timeDay;
+        case Interval.WEEK:
+            return timeWeek;
+        case Interval.MONTH:
+            return timeMonth;
+        case Interval.YEAR:
+            return timeYear;
+    }
+}
+function getDateRange(configs) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const config of configs) {
+        for (const series of config.series) {
+            for (const { date } of series.data) {
+                const value = date.valueOf();
+                min = Math.min(min, value);
+                max = Math.max(max, value);
+            }
+        }
+    }
+    return [new Date(min), new Date(max)];
+}
+function getMinorIntervalFormat(interval) {
+    switch (interval) {
+        case Interval.DAY:
+        case Interval.WEEK:
+            return '%-d';
+        case Interval.MONTH:
+            return '%b';
+        case Interval.YEAR:
+            return '%Y';
+    }
+}
+function getMajorInterval(interval) {
+    switch (interval) {
+        case Interval.DAY:
+        case Interval.WEEK:
+            return Interval.MONTH;
+        default:
+            return Interval.YEAR;
+    }
+}
+function getMajorIntervalFormat(interval) {
+    switch (interval) {
+        case Interval.YEAR:
+            return '%Y';
+        case Interval.MONTH:
+            return '%b %Y';
+        default:
+            return '%d';
+    }
+}
+// TODO: once we upgrade to Angular 16, this component can be cleaned up with
+// signals instead of RxJS. See commit e238c2d.
+class TimeSeriesComponent {
+    constructor() {
+        this.input$ = new BehaviorSubject([
+            {
+                pointReducer: points => points.reduce((total, { value }) => total + value, 0),
+                valueFormatter: v => new DecimalPipe('en-US').transform(v) ?? '',
+                series: [],
+            },
+        ]);
+        this.width$ = new BehaviorSubject(960);
+        this.height$ = new BehaviorSubject(256);
+        this.BOTTOM_OFFSET = 24;
+        this.LEFT_OFFSET = 48;
+        this.TOP_PADDING = 16;
+        this.LEFT_RIGHT_PADDING = 8;
+        this.BOTTOM_PADDING = 8;
+        this.Y_TICK_COUNT = 5;
+        this.X_MINOR_TICK_LIMIT = 15;
+        this.dateRange$ = this.input$.pipe(map(getDateRange), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.binInterval$ = this.dateRange$.pipe(map(([minDate, maxDate]) => {
+            const diff = timeDay.count(new Date(minDate), new Date(maxDate));
+            if (diff >= 365 * 3) {
+                return Interval.YEAR;
+            }
+            else if (diff >= 365) {
+                return Interval.MONTH;
+            }
+            else if (diff >= 90) {
+                return Interval.WEEK;
+            }
+            else {
+                return Interval.DAY;
+            }
+        }), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.binnedData$ = combineLatest([this.input$, this.binInterval$]).pipe(map(([input, binInterval]) => input.map((config) => {
+            return {
+                ...config,
+                series: config.series.map(series => {
+                    const binned = new Map();
+                    for (const point of series.data) {
+                        const bin = getTimeInterval(binInterval)
+                            .floor(point.date)
+                            .valueOf();
+                        if (!binned.has(bin)) {
+                            binned.set(bin, []);
+                        }
+                        binned.get(bin).push(point);
+                    }
+                    return {
+                        ...series,
+                        data: [...binned.entries()].map(([dateValue, points]) => ({
+                            date: new Date(dateValue),
+                            value: config.pointReducer(points),
+                        })),
+                    };
+                }),
+            };
+        })), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.binnedDateRange$ = this.binnedData$.pipe(map(getDateRange), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.drawData$ = combineLatest([
+            this.binnedData$,
+            this.binnedDateRange$,
+            this.binInterval$,
+            this.width$,
+            this.height$,
+        ]).pipe(map(([binnedData, binnedDateRange, binInterval, width, height]) => {
+            const viewBox = `0 0 ${width} ${height}`;
+            const xScale = scaleLinear()
+                .domain(binnedDateRange)
+                .range([
+                this.LEFT_OFFSET + this.LEFT_RIGHT_PADDING,
+                width - this.LEFT_RIGHT_PADDING * 2,
+            ]);
+            const xMinorIntervalFormat = getMinorIntervalFormat(binInterval);
+            const [minDateValue, maxDateValue] = binnedDateRange;
+            const minorFormatter = timeFormat(xMinorIntervalFormat);
+            const xMinorTicks = getTimeInterval(binInterval)
+                .range(minDateValue, timeDay.offset(maxDateValue, 1))
+                .map(date => ({
+                value: date.valueOf(),
+                label: minorFormatter(date),
+            }))
+                .filter((_, i, arr) => arr.length > this.X_MINOR_TICK_LIMIT
+                ? i % Math.round(arr.length / this.X_MINOR_TICK_LIMIT) === 0
+                : true);
+            const xMajorInterval = getMajorInterval(binInterval);
+            const xMajorIntervalFormat = getMajorIntervalFormat(xMajorInterval);
+            const timeInterval = getTimeInterval(xMajorInterval);
+            const tickFloor = timeInterval.floor(minDateValue);
+            const tickCeiling = timeInterval.ceil(timeDay.offset(maxDateValue, 1));
+            const majorFormatter = timeFormat(xMajorIntervalFormat);
+            const xMajorTicks = timeInterval
+                .range(tickFloor, tickCeiling)
+                .map(tickDate => ({
+                label: xMajorInterval === binInterval ? '' : majorFormatter(tickDate),
+                value: tickDate.valueOf(),
+            }));
+            const x = { xMax: maxDateValue, xScale, xMinorTicks, xMajorTicks };
+            const [y1, y2] = binnedData.map(config => {
+                const flattenedValues = config.series.reduce((values, series) => [
+                    ...values,
+                    ...series.data.map(({ value }) => value),
+                ], []);
+                const yMax = config.max ?? Math.max(...flattenedValues);
+                const yMin = config.min ?? Math.min(...flattenedValues, 0);
+                const yScale = scaleLinear()
+                    .domain([yMin, yMax])
+                    .range([
+                    height -
+                        this.BOTTOM_OFFSET -
+                        (this.BOTTOM_PADDING + this.TOP_PADDING),
+                    this.TOP_PADDING,
+                ]);
+                const yTicks = yScale.ticks(this.Y_TICK_COUNT);
+                const series = config.series.map(series => ({
+                    ...series,
+                    path: line()
+                        .x(d => xScale(d.date))
+                        .y(d => yScale(d.value))(series.data),
+                    stroke: `var(${series.colorToken})`,
+                    markers: series.data.map(point => ({
+                        ...point,
+                        x: xScale(point.date),
+                        y: yScale(point.value),
+                    })),
+                }));
+                return {
+                    ...config,
+                    series,
+                    yMax,
+                    yMin,
+                    yScale,
+                    yTicks,
+                };
+            });
+            // If we have a y2, coerce y1's ticks to be visually equivalent to y2's ticks.
+            if (y2?.yTicks) {
+                const tickConversionScale = scaleLinear()
+                    .range(y1.yScale.domain())
+                    .domain(y2.yScale.domain());
+                y1.yTicks = y2.yTicks.map(tickConversionScale);
+            }
+            return { viewBox, x, y1, y2 };
+        }), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.legend$ = this.binnedData$.pipe(map(binnedData => binnedData.reduce((items, config) => [
+            ...items,
+            ...config.series.map(series => ({
+                label: series.label,
+                colorToken: series.colorToken,
+            })),
+        ], [])));
+        this.empty$ = this.binnedData$.pipe(map(binnedData => binnedData.every(config => config.series.every(series => series.data.length === 0))), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.hoveredMarker$ = new BehaviorSubject(null);
+        this.callout$ = combineLatest([this.hoveredMarker$, this.drawData$]).pipe(map(([hoveredMarker, drawData]) => {
+            if (!hoveredMarker)
+                return null;
+            const { target } = hoveredMarker.event;
+            if (!target)
+                return null;
+            const markerRect = target.getBoundingClientRect();
+            const padding = 8;
+            const anchor = new DOMRect(markerRect.left - padding, markerRect.top - padding, markerRect.width + padding * 2, markerRect.height + padding * 2);
+            const metrics = [];
+            for (const series of drawData.y1.series) {
+                const match = series.markers.find(marker => marker.x === hoveredMarker.marker.x);
+                if (match) {
+                    metrics.push({
+                        label: series.label,
+                        value: drawData.y1.valueFormatter(match.value),
+                    });
+                }
+            }
+            if (drawData.y2) {
+                for (const series of drawData.y2.series) {
+                    const match = series.markers.find(marker => marker.x === hoveredMarker.marker.x);
+                    if (match) {
+                        metrics.push({
+                            label: series.label,
+                            value: drawData.y2.valueFormatter(match.value),
+                        });
+                    }
+                }
+            }
+            return { anchor, metrics };
+        }));
+    }
+    set input(v) {
+        this.input$.next(v);
+    }
+    get input() {
+        return this.input$.getValue();
+    }
+    set width(v) {
+        this.width$.next(v);
+    }
+    get width() {
+        return this.width$.getValue();
+    }
+    set height(v) {
+        this.height$.next(v);
+    }
+    get height() {
+        return this.height$.getValue();
+    }
+}
+TimeSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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" }, 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        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        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      <circle\n        *ngFor=\"let marker of series.markers\"\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-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    ></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></riv-zero-state>\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-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-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: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, decorators: [{
+            type: Component,
+            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        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        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      <circle\n        *ngFor=\"let marker of series.markers\"\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-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    ></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></riv-zero-state>\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-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-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"] }]
+        }], propDecorators: { input: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+
 class RivModule {
 }
 RivModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1214,13 +1396,19 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         DataTableComponent,
         DataTableHeaderCellComponent,
         DataTableRowComponent,
+        DaysPipe,
         DonutComponent,
         IconComponent,
         LegendItemComponent,
         MetricComponent,
+        NumberPipe,
+        PercentagePipe,
+        SmallCurrencyPipe,
         StackedColumnComponent,
         TextToggleComponent,
         TimeSeriesComponent,
+        TooltipComponent,
+        TooltipDirective,
         ZeroStateComponent], imports: [CommonModule], exports: [CalloutComponent,
         CalloutDirective,
         CalloutOutletComponent,
@@ -1228,13 +1416,19 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         DataTableComponent,
         DataTableHeaderCellComponent,
         DataTableRowComponent,
+        DaysPipe,
         DonutComponent,
         IconComponent,
         LegendItemComponent,
         MetricComponent,
+        NumberPipe,
+        PercentagePipe,
+        SmallCurrencyPipe,
         StackedColumnComponent,
         TextToggleComponent,
         TimeSeriesComponent,
+        TooltipComponent,
+        TooltipDirective,
         ZeroStateComponent] });
 RivModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, decorators: [{
@@ -1248,13 +1442,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DataTableComponent,
                         DataTableHeaderCellComponent,
                         DataTableRowComponent,
+                        DaysPipe,
                         DonutComponent,
                         IconComponent,
                         LegendItemComponent,
                         MetricComponent,
+                        NumberPipe,
+                        PercentagePipe,
+                        SmallCurrencyPipe,
                         StackedColumnComponent,
                         TextToggleComponent,
                         TimeSeriesComponent,
+                        TooltipComponent,
+                        TooltipDirective,
                         ZeroStateComponent,
                     ],
                     exports: [
@@ -1265,13 +1465,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DataTableComponent,
                         DataTableHeaderCellComponent,
                         DataTableRowComponent,
+                        DaysPipe,
                         DonutComponent,
                         IconComponent,
                         LegendItemComponent,
                         MetricComponent,
+                        NumberPipe,
+                        PercentagePipe,
+                        SmallCurrencyPipe,
                         StackedColumnComponent,
                         TextToggleComponent,
                         TimeSeriesComponent,
+                        TooltipComponent,
+                        TooltipDirective,
                         ZeroStateComponent,
                     ],
                     imports: [CommonModule],
@@ -1282,5 +1488,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, RivModule, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, ZeroStateComponent };
+export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DaysPipe, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, NumberPipe, PercentagePipe, RivModule, SmallCurrencyPipe, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, TooltipComponent, TooltipDirective, ZeroStateComponent };
 //# sourceMappingURL=rivet-health-design-system.mjs.map