@tolle_/tolle-ui 18.2.30 → 18.3.1

package/esm2022/lib/chart-spark.component.mjs

@@ -0,0 +1,120 @@
+import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChartComponent, ChartLineComponent, ChartAreaComponent, ChartBarComponent, } from './chart.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * A minimal inline chart: one series, no grid, no axes, no legend — sized to
+ * sit next to a number in a table cell or a stat card. A thin composition
+ * over `tolle-chart`; it draws nothing of its own and inherits `--chart-1`
+ * the same way any other single-series chart in this library does.
+ * @new
+ */
+export class ChartSparkComponent {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges() {
+        this.cdr.markForCheck();
+    }
+    /** Rows to plot, in x order. @default [] */
+    data = [];
+    /** Row key holding each row's numeric value. @default 'value' */
+    valueKey = 'value';
+    /** Row key holding each row's x position. Only matters once `hover` is on. @default '' */
+    xKey = '';
+    /** Which mark to draw. @default 'line' */
+    type = 'line';
+    /** Interpolation for line/area. @default 'linear' */
+    curve = 'linear';
+    /** Largest bar thickness in px, used when `type` is 'bar'. @default 6 */
+    maxBarWidth = 6;
+    /** Height in px. @default 32 */
+    height = 32;
+    /** Renders the crosshair, hit layer and tooltip. @default false */
+    hover = false;
+    /** Shows the data table instead of leaving it visually hidden. @default false */
+    showTable = false;
+    /** Accessible name, used as the svg <title>. @default '' */
+    ariaLabel = '';
+    /** Longer summary used as the svg <desc>. Falls back to `ariaLabel`. @default '' */
+    description = '';
+    /** Space reserved around the plot — a sparkline has no axis labels to fit. @default { top: 2, right: 2, bottom: 2, left: 2 } */
+    margin = { top: 2, right: 2, bottom: 2, left: 2 };
+    /** Extra Tailwind classes merged onto the chart via `cn()` (last-wins). */
+    class = '';
+    cdr = inject(ChangeDetectorRef);
+    /** Always exactly one series, reading `valueKey` off each row. */
+    get series() {
+        return [{ key: this.valueKey, label: this.ariaLabel || this.valueKey }];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartSparkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChartSparkComponent, isStandalone: true, selector: "tolle-chart-spark", inputs: { data: "data", valueKey: "valueKey", xKey: "xKey", type: "type", curve: "curve", maxBarWidth: "maxBarWidth", height: "height", hover: "hover", showTable: "showTable", ariaLabel: "ariaLabel", description: "description", margin: "margin", class: "class" }, usesOnChanges: true, ngImport: i0, template: `
+    <tolle-chart
+      [class]="class"
+      [data]="data"
+      [series]="series"
+      [xKey]="xKey"
+      [height]="height"
+      [margin]="margin"
+      [hover]="hover"
+      [showTable]="showTable"
+      [ariaLabel]="ariaLabel"
+      [description]="description"
+    >
+      <svg:g *ngIf="type === 'line'" tolle-chart-line [seriesKey]="valueKey" [curve]="curve"></svg:g>
+      <svg:g *ngIf="type === 'area'" tolle-chart-area [seriesKey]="valueKey" [curve]="curve"></svg:g>
+      <svg:g *ngIf="type === 'bar'" tolle-chart-bar [seriesKey]="valueKey" [maxWidth]="maxBarWidth"></svg:g>
+    </tolle-chart>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartComponent, selector: "tolle-chart", inputs: ["data", "series", "xKey", "height", "margin", "ariaLabel", "description", "stacked", "orientation", "hover", "showTable", "xHeader", "variant", "density", "class"], outputs: ["activeIndexChange"] }, { kind: "component", type: ChartLineComponent, selector: "svg:g[tolle-chart-line]", inputs: ["seriesKey", "curve", "showDots", "dotRadius", "class"] }, { kind: "component", type: ChartAreaComponent, selector: "svg:g[tolle-chart-area]", inputs: ["seriesKey", "curve", "fillOpacity", "class"] }, { kind: "component", type: ChartBarComponent, selector: "svg:g[tolle-chart-bar]", inputs: ["seriesKey", "radius", "maxWidth", "gap", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartSparkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-chart-spark', standalone: true, imports: [CommonModule, ChartComponent, ChartLineComponent, ChartAreaComponent, ChartBarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <tolle-chart
+      [class]="class"
+      [data]="data"
+      [series]="series"
+      [xKey]="xKey"
+      [height]="height"
+      [margin]="margin"
+      [hover]="hover"
+      [showTable]="showTable"
+      [ariaLabel]="ariaLabel"
+      [description]="description"
+    >
+      <svg:g *ngIf="type === 'line'" tolle-chart-line [seriesKey]="valueKey" [curve]="curve"></svg:g>
+      <svg:g *ngIf="type === 'area'" tolle-chart-area [seriesKey]="valueKey" [curve]="curve"></svg:g>
+      <svg:g *ngIf="type === 'bar'" tolle-chart-bar [seriesKey]="valueKey" [maxWidth]="maxBarWidth"></svg:g>
+    </tolle-chart>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], xKey: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], curve: [{
+                type: Input
+            }], maxBarWidth: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], hover: [{
+                type: Input
+            }], showTable: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtc3BhcmsuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdG9sbGUvc3JjL2xpYi9jaGFydC1zcGFyay5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsdUJBQXVCLEVBQUUsaUJBQWlCLEVBQWEsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hILE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsY0FBYyxFQUNkLGtCQUFrQixFQUNsQixrQkFBa0IsRUFDbEIsaUJBQWlCLEdBR2xCLE1BQU0sbUJBQW1CLENBQUM7OztBQUUzQjs7Ozs7O0dBTUc7QUEwQkgsTUFBTSxPQUFPLG1CQUFtQjtJQUM5Qjs7OztPQUlHO0lBQ0gsV0FBVztRQUNULElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELDRDQUE0QztJQUNuQyxJQUFJLEdBQTBCLEVBQUUsQ0FBQztJQUMxQyxpRUFBaUU7SUFDeEQsUUFBUSxHQUFHLE9BQU8sQ0FBQztJQUM1QiwwRkFBMEY7SUFDakYsSUFBSSxHQUFHLEVBQUUsQ0FBQztJQUNuQiwwQ0FBMEM7SUFDakMsSUFBSSxHQUE0QixNQUFNLENBQUM7SUFDaEQscURBQXFEO0lBQzVDLEtBQUssR0FBd0IsUUFBUSxDQUFDO0lBQy9DLHlFQUF5RTtJQUNoRSxXQUFXLEdBQUcsQ0FBQyxDQUFDO0lBQ3pCLGdDQUFnQztJQUN2QixNQUFNLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLG1FQUFtRTtJQUMxRCxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLGlGQUFpRjtJQUN4RSxTQUFTLEdBQUcsS0FBSyxDQUFDO0lBQzNCLDREQUE0RDtJQUNuRCxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3hCLG9GQUFvRjtJQUMzRSxXQUFXLEdBQUcsRUFBRSxDQUFDO0lBQzFCLGdJQUFnSTtJQUN2SCxNQUFNLEdBQWdCLEVBQUUsR0FBRyxFQUFFLENBQUMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsSUFBSSxFQUFFLENBQUMsRUFBRSxDQUFDO0lBQ3hFLDJFQUEyRTtJQUNsRSxLQUFLLEdBQUcsRUFBRSxDQUFDO0lBRUgsR0FBRyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBRWpELGtFQUFrRTtJQUNsRSxJQUFJLE1BQU07UUFDUixPQUFPLENBQUMsRUFBRSxHQUFHLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztJQUMxRSxDQUFDO3dHQTFDVSxtQkFBbUI7NEZBQW5CLG1CQUFtQiwwV0FuQnBCOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCVCwrRkFuQlMsWUFBWSxtSUFBRSxjQUFjLHNRQUFFLGtCQUFrQixzSUFBRSxrQkFBa0IsNEhBQUUsaUJBQWlCOzs0RkFxQnRGLG1CQUFtQjtrQkF6Qi9CLFNBQVM7K0JBQ0UsbUJBQW1CLGNBRWpCLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxjQUFjLEVBQUUsa0JBQWtCLEVBQUUsa0JBQWtCLEVBQUUsaUJBQWlCLENBQUMsbUJBQ2pGLHVCQUF1QixDQUFDLE1BQU0sWUFDckM7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJUOzhCQWFRLElBQUk7c0JBQVosS0FBSztnQkFFRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLO2dCQUVHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRUcsTUFBTTtzQkFBZCxLQUFLO2dCQUVHLEtBQUs7c0JBQWIsS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBRUcsV0FBVztzQkFBbkIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENoYW5nZURldGVjdG9yUmVmLCBPbkNoYW5nZXMsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYXJ0Q29tcG9uZW50LFxuICBDaGFydExpbmVDb21wb25lbnQsXG4gIENoYXJ0QXJlYUNvbXBvbmVudCxcbiAgQ2hhcnRCYXJDb21wb25lbnQsXG4gIHR5cGUgQ2hhcnRNYXJnaW4sXG4gIHR5cGUgQ2hhcnRTZXJpZXMsXG59IGZyb20gJy4vY2hhcnQuY29tcG9uZW50JztcblxuLyoqXG4gKiBBIG1pbmltYWwgaW5saW5lIGNoYXJ0OiBvbmUgc2VyaWVzLCBubyBncmlkLCBubyBheGVzLCBubyBsZWdlbmQg4oCUIHNpemVkIHRvXG4gKiBzaXQgbmV4dCB0byBhIG51bWJlciBpbiBhIHRhYmxlIGNlbGwgb3IgYSBzdGF0IGNhcmQuIEEgdGhpbiBjb21wb3NpdGlvblxuICogb3ZlciBgdG9sbGUtY2hhcnRgOyBpdCBkcmF3cyBub3RoaW5nIG9mIGl0cyBvd24gYW5kIGluaGVyaXRzIGAtLWNoYXJ0LTFgXG4gKiB0aGUgc2FtZSB3YXkgYW55IG90aGVyIHNpbmdsZS1zZXJpZXMgY2hhcnQgaW4gdGhpcyBsaWJyYXJ5IGRvZXMuXG4gKiBAbmV3XG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RvbGxlLWNoYXJ0LXNwYXJrJyxcbiAgc3R5bGVzOiBbJzpob3N0IHsgZGlzcGxheTogYmxvY2s7IH0nXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgQ2hhcnRDb21wb25lbnQsIENoYXJ0TGluZUNvbXBvbmVudCwgQ2hhcnRBcmVhQ29tcG9uZW50LCBDaGFydEJhckNvbXBvbmVudF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICB0ZW1wbGF0ZTogYFxuICAgIDx0b2xsZS1jaGFydFxuICAgICAgW2NsYXNzXT1cImNsYXNzXCJcbiAgICAgIFtkYXRhXT1cImRhdGFcIlxuICAgICAgW3Nlcmllc109XCJzZXJpZXNcIlxuICAgICAgW3hLZXldPVwieEtleVwiXG4gICAgICBbaGVpZ2h0XT1cImhlaWdodFwiXG4gICAgICBbbWFyZ2luXT1cIm1hcmdpblwiXG4gICAgICBbaG92ZXJdPVwiaG92ZXJcIlxuICAgICAgW3Nob3dUYWJsZV09XCJzaG93VGFibGVcIlxuICAgICAgW2FyaWFMYWJlbF09XCJhcmlhTGFiZWxcIlxuICAgICAgW2Rlc2NyaXB0aW9uXT1cImRlc2NyaXB0aW9uXCJcbiAgICA+XG4gICAgICA8c3ZnOmcgKm5nSWY9XCJ0eXBlID09PSAnbGluZSdcIiB0b2xsZS1jaGFydC1saW5lIFtzZXJpZXNLZXldPVwidmFsdWVLZXlcIiBbY3VydmVdPVwiY3VydmVcIj48L3N2ZzpnPlxuICAgICAgPHN2ZzpnICpuZ0lmPVwidHlwZSA9PT0gJ2FyZWEnXCIgdG9sbGUtY2hhcnQtYXJlYSBbc2VyaWVzS2V5XT1cInZhbHVlS2V5XCIgW2N1cnZlXT1cImN1cnZlXCI+PC9zdmc6Zz5cbiAgICAgIDxzdmc6ZyAqbmdJZj1cInR5cGUgPT09ICdiYXInXCIgdG9sbGUtY2hhcnQtYmFyIFtzZXJpZXNLZXldPVwidmFsdWVLZXlcIiBbbWF4V2lkdGhdPVwibWF4QmFyV2lkdGhcIj48L3N2ZzpnPlxuICAgIDwvdG9sbGUtY2hhcnQ+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIENoYXJ0U3BhcmtDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICAvKipcbiAgICogQW5ndWxhciB3cml0ZXMgYSBib3VuZCBgY2xhc3NgIGlucHV0IHRocm91Z2ggaXRzIHN0eWxpbmcgcGF0aCwgd2hpY2ggZG9lc1xuICAgKiBub3QgbWFyayBhbiBPblB1c2ggY29tcG9uZW50IGRpcnR5IOKAlCB3aXRob3V0IHRoaXMgaG9vayB0aGUgY29tcG9uZW50IGtlZXBzXG4gICAqIHJlbmRlcmluZyB0aGUgY2xhc3MgaXQgd2FzIGJvcm4gd2l0aC5cbiAgICovXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICB9XG5cbiAgLyoqIFJvd3MgdG8gcGxvdCwgaW4geCBvcmRlci4gQGRlZmF1bHQgW10gKi9cbiAgQElucHV0KCkgZGF0YTogUmVjb3JkPHN0cmluZywgYW55PltdID0gW107XG4gIC8qKiBSb3cga2V5IGhvbGRpbmcgZWFjaCByb3cncyBudW1lcmljIHZhbHVlLiBAZGVmYXVsdCAndmFsdWUnICovXG4gIEBJbnB1dCgpIHZhbHVlS2V5ID0gJ3ZhbHVlJztcbiAgLyoqIFJvdyBrZXkgaG9sZGluZyBlYWNoIHJvdydzIHggcG9zaXRpb24uIE9ubHkgbWF0dGVycyBvbmNlIGBob3ZlcmAgaXMgb24uIEBkZWZhdWx0ICcnICovXG4gIEBJbnB1dCgpIHhLZXkgPSAnJztcbiAgLyoqIFdoaWNoIG1hcmsgdG8gZHJhdy4gQGRlZmF1bHQgJ2xpbmUnICovXG4gIEBJbnB1dCgpIHR5cGU6ICdsaW5lJyB8ICdhcmVhJyB8ICdiYXInID0gJ2xpbmUnO1xuICAvKiogSW50ZXJwb2xhdGlvbiBmb3IgbGluZS9hcmVhLiBAZGVmYXVsdCAnbGluZWFyJyAqL1xuICBASW5wdXQoKSBjdXJ2ZTogJ2xpbmVhcicgfCAnc21vb3RoJyA9ICdsaW5lYXInO1xuICAvKiogTGFyZ2VzdCBiYXIgdGhpY2tuZXNzIGluIHB4LCB1c2VkIHdoZW4gYHR5cGVgIGlzICdiYXInLiBAZGVmYXVsdCA2ICovXG4gIEBJbnB1dCgpIG1heEJhcldpZHRoID0gNjtcbiAgLyoqIEhlaWdodCBpbiBweC4gQGRlZmF1bHQgMzIgKi9cbiAgQElucHV0KCkgaGVpZ2h0ID0gMzI7XG4gIC8qKiBSZW5kZXJzIHRoZSBjcm9zc2hhaXIsIGhpdCBsYXllciBhbmQgdG9vbHRpcC4gQGRlZmF1bHQgZmFsc2UgKi9cbiAgQElucHV0KCkgaG92ZXIgPSBmYWxzZTtcbiAgLyoqIFNob3dzIHRoZSBkYXRhIHRhYmxlIGluc3RlYWQgb2YgbGVhdmluZyBpdCB2aXN1YWxseSBoaWRkZW4uIEBkZWZhdWx0IGZhbHNlICovXG4gIEBJbnB1dCgpIHNob3dUYWJsZSA9IGZhbHNlO1xuICAvKiogQWNjZXNzaWJsZSBuYW1lLCB1c2VkIGFzIHRoZSBzdmcgPHRpdGxlPi4gQGRlZmF1bHQgJycgKi9cbiAgQElucHV0KCkgYXJpYUxhYmVsID0gJyc7XG4gIC8qKiBMb25nZXIgc3VtbWFyeSB1c2VkIGFzIHRoZSBzdmcgPGRlc2M+LiBGYWxscyBiYWNrIHRvIGBhcmlhTGFiZWxgLiBAZGVmYXVsdCAnJyAqL1xuICBASW5wdXQoKSBkZXNjcmlwdGlvbiA9ICcnO1xuICAvKiogU3BhY2UgcmVzZXJ2ZWQgYXJvdW5kIHRoZSBwbG90IOKAlCBhIHNwYXJrbGluZSBoYXMgbm8gYXhpcyBsYWJlbHMgdG8gZml0LiBAZGVmYXVsdCB7IHRvcDogMiwgcmlnaHQ6IDIsIGJvdHRvbTogMiwgbGVmdDogMiB9ICovXG4gIEBJbnB1dCgpIG1hcmdpbjogQ2hhcnRNYXJnaW4gPSB7IHRvcDogMiwgcmlnaHQ6IDIsIGJvdHRvbTogMiwgbGVmdDogMiB9O1xuICAvKiogRXh0cmEgVGFpbHdpbmQgY2xhc3NlcyBtZXJnZWQgb250byB0aGUgY2hhcnQgdmlhIGBjbigpYCAobGFzdC13aW5zKS4gKi9cbiAgQElucHV0KCkgY2xhc3MgPSAnJztcblxuICBwcml2YXRlIHJlYWRvbmx5IGNkciA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XG5cbiAgLyoqIEFsd2F5cyBleGFjdGx5IG9uZSBzZXJpZXMsIHJlYWRpbmcgYHZhbHVlS2V5YCBvZmYgZWFjaCByb3cuICovXG4gIGdldCBzZXJpZXMoKTogQ2hhcnRTZXJpZXNbXSB7XG4gICAgcmV0dXJuIFt7IGtleTogdGhpcy52YWx1ZUtleSwgbGFiZWw6IHRoaXMuYXJpYUxhYmVsIHx8IHRoaXMudmFsdWVLZXkgfV07XG4gIH1cbn1cbiJdfQ==