@weeehaoooz/talos-ui 0.1.0

package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs

@@ -0,0 +1,566 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, signal, computed, afterNextRender, DestroyRef, Component, NgModule } from '@angular/core';
+
+/**
+ * Types and interfaces for TalosSparklineComponent
+ */
+const GOLDEN_RATIO = 1.618;
+
+const PRESET_PALETTES = {
+    primary: { stroke: '#2563eb', fillStart: 'rgba(37, 99, 235, 0.35)', fillEnd: 'rgba(37, 99, 235, 0.0)' },
+    blue: { stroke: '#3b82f6', fillStart: 'rgba(59, 130, 246, 0.35)', fillEnd: 'rgba(59, 130, 246, 0.0)' },
+    success: { stroke: '#16a34a', fillStart: 'rgba(22, 163, 74, 0.35)', fillEnd: 'rgba(22, 163, 74, 0.0)' },
+    emerald: { stroke: '#10b981', fillStart: 'rgba(16, 185, 129, 0.35)', fillEnd: 'rgba(16, 185, 129, 0.0)' },
+    danger: { stroke: '#ef4444', fillStart: 'rgba(239, 68, 68, 0.35)', fillEnd: 'rgba(239, 68, 68, 0.0)' },
+    rose: { stroke: '#f43f5e', fillStart: 'rgba(244, 63, 94, 0.35)', fillEnd: 'rgba(244, 63, 94, 0.0)' },
+    warning: { stroke: '#f59e0b', fillStart: 'rgba(245, 158, 11, 0.35)', fillEnd: 'rgba(245, 158, 11, 0.0)' },
+    amber: { stroke: '#d97706', fillStart: 'rgba(217, 119, 6, 0.35)', fillEnd: 'rgba(217, 119, 6, 0.0)' },
+    info: { stroke: '#0284c7', fillStart: 'rgba(2, 132, 199, 0.35)', fillEnd: 'rgba(2, 132, 199, 0.0)' },
+    cyan: { stroke: '#06b6d4', fillStart: 'rgba(6, 182, 212, 0.35)', fillEnd: 'rgba(6, 182, 212, 0.0)' },
+    violet: { stroke: '#8b5cf6', fillStart: 'rgba(139, 92, 246, 0.35)', fillEnd: 'rgba(139, 92, 246, 0.0)' },
+    slate: { stroke: '#64748b', fillStart: 'rgba(100, 116, 139, 0.3)', fillEnd: 'rgba(100, 116, 139, 0.0)' }
+};
+// Golden Ratio (~1.618:1) and proportional defaults
+const DEFAULT_SIZE_DIMENSIONS = {
+    xs: { width: 64, height: 40 },
+    sm: { width: 96, height: 60 },
+    md: { width: 130, height: 80 },
+    lg: { width: 180, height: 110 },
+    responsive: { width: 240, height: 60 },
+    custom: { width: 130, height: 80 }
+};
+let uniqueIdCounter = 0;
+class TalosSparklineComponent {
+    elementRef = inject(ElementRef);
+    resizeObserver;
+    /** Data points (numbers or objects) */
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Chart type: line, area, or bar */
+    type = input('area', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Visual color theme or custom hex code */
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Automatically choose green/red based on first -> last delta */
+    autoColorTrend = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoColorTrend" }] : /* istanbul ignore next */ []));
+    /** Smooth Bezier interpolation vs straight line */
+    smooth = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "smooth" }] : /* istanbul ignore next */ []));
+    /** Stroke line width */
+    strokeWidth = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /** Marker dots display mode */
+    showMarkers = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMarkers" }] : /* istanbul ignore next */ []));
+    /** Marker circle radius */
+    markerRadius = input(3.5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerRadius" }] : /* istanbul ignore next */ []));
+    /** Optional reference horizontal baseline */
+    referenceValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "referenceValue" }] : /* istanbul ignore next */ []));
+    /** Show interactive hover tooltip */
+    showTooltip = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
+    /** Interactive mouse events enabled */
+    interactive = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    /** Gap between bars for bar sparklines */
+    barGap = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barGap" }] : /* istanbul ignore next */ []));
+    /** Corner radius for bars */
+    barRadius = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barRadius" }] : /* istanbul ignore next */ []));
+    /** Preset size */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Aspect ratio configuration (e.g. 'golden', 1.618, '2:1', '16:9') */
+    aspectRatio = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    /** Custom width override (e.g. '120px' or '100%') */
+    width = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** Custom height override (e.g. '36px') */
+    height = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Explicit minimum value bounds */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Explicit maximum value bounds */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Custom accessible label */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Value formatter for tooltip */
+    valueFormatter = input((val) => val.toLocaleString(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    /** Hover event emitter */
+    pointHover = output();
+    /** Click event emitter */
+    pointClick = output();
+    // Unique ID for SVG linear gradient IDs
+    gradientId = `talos-sparkline-grad-${++uniqueIdCounter}`;
+    // Interactive hover state
+    hoveredPoint = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredPoint" }] : /* istanbul ignore next */ []));
+    isHovering = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHovering" }] : /* istanbul ignore next */ []));
+    // Dynamic container dimensions for 1:1 SVG coordinate rendering (prevents non-uniform stretching)
+    containerWidth = signal(120, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
+    containerHeight = signal(36, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerHeight" }] : /* istanbul ignore next */ []));
+    svgWidth = computed(() => this.containerWidth(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
+    svgHeight = computed(() => this.containerHeight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
+    padding = computed(() => {
+        if (this.type() === 'bar')
+            return 2;
+        if (this.showMarkers() !== 'none' || this.interactive())
+            return 5;
+        return 3;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.updateDimensions();
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                        const { width, height } = entry.contentRect;
+                        if (width > 0 && height > 0) {
+                            this.containerWidth.set(Math.round(width));
+                            this.containerHeight.set(Math.round(height));
+                        }
+                    }
+                });
+                this.resizeObserver.observe(this.elementRef.nativeElement);
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.resizeObserver?.disconnect();
+        });
+    }
+    updateDimensions() {
+        const el = this.elementRef.nativeElement;
+        const rect = el.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+            this.containerWidth.set(Math.round(rect.width));
+            this.containerHeight.set(Math.round(rect.height));
+        }
+        else {
+            const defaultDims = DEFAULT_SIZE_DIMENSIONS[this.size()] || DEFAULT_SIZE_DIMENSIONS.md;
+            this.containerWidth.set(defaultDims.width);
+            this.containerHeight.set(defaultDims.height);
+        }
+    }
+    /** Host styles */
+    hostWidth = computed(() => {
+        const custom = this.width();
+        if (custom !== null)
+            return typeof custom === 'number' ? `${custom}px` : custom;
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []));
+    hostHeight = computed(() => {
+        const custom = this.height();
+        if (custom !== null)
+            return typeof custom === 'number' ? `${custom}px` : custom;
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostHeight" }] : /* istanbul ignore next */ []));
+    computedAspectRatio = computed(() => {
+        const ar = this.aspectRatio();
+        if (ar === 'golden')
+            return `${GOLDEN_RATIO} / 1`;
+        if (typeof ar === 'number')
+            return `${ar} / 1`;
+        if (typeof ar === 'string') {
+            if (ar.includes(':')) {
+                const [w, h] = ar.split(':');
+                return `${w.trim()} / ${h.trim()}`;
+            }
+            return ar;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAspectRatio" }] : /* istanbul ignore next */ []));
+    /** Normalized points array */
+    normalizedPoints = computed(() => {
+        const raw = this.data();
+        if (!raw || raw.length === 0)
+            return [];
+        return raw.map((item, idx) => {
+            if (typeof item === 'number') {
+                return { value: item };
+            }
+            return item;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedPoints" }] : /* istanbul ignore next */ []));
+    /** Determine effective color palette */
+    effectiveColor = computed(() => {
+        if (this.autoColorTrend()) {
+            const pts = this.normalizedPoints();
+            if (pts.length >= 2) {
+                const first = pts[0].value;
+                const last = pts[pts.length - 1].value;
+                if (last >= first) {
+                    return PRESET_PALETTES['success'];
+                }
+                else {
+                    return PRESET_PALETTES['danger'];
+                }
+            }
+        }
+        const c = this.color();
+        if (PRESET_PALETTES[c]) {
+            return PRESET_PALETTES[c];
+        }
+        // Custom hex/rgb
+        return {
+            stroke: c,
+            fillStart: c.startsWith('#') ? `${c}40` : 'rgba(37, 99, 235, 0.3)',
+            fillEnd: c.startsWith('#') ? `${c}00` : 'rgba(37, 99, 235, 0.0)'
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveColor" }] : /* istanbul ignore next */ []));
+    /** Min & Max calculation */
+    valueBounds = computed(() => {
+        const pts = this.normalizedPoints();
+        if (pts.length === 0)
+            return { min: 0, max: 100, span: 100, rawMin: 0, rawMax: 100 };
+        let calculatedMin = pts[0].value;
+        let calculatedMax = pts[0].value;
+        for (const p of pts) {
+            if (p.value < calculatedMin)
+                calculatedMin = p.value;
+            if (p.value > calculatedMax)
+                calculatedMax = p.value;
+        }
+        // Include reference value if set
+        const ref = this.referenceValue();
+        if (ref !== null) {
+            if (ref < calculatedMin)
+                calculatedMin = ref;
+            if (ref > calculatedMax)
+                calculatedMax = ref;
+        }
+        // Explicit override
+        const explicitMin = this.min();
+        const explicitMax = this.max();
+        const finalMin = explicitMin !== null ? explicitMin : calculatedMin;
+        const finalMax = explicitMax !== null ? explicitMax : calculatedMax;
+        // Prevent divide by zero if constant value
+        const span = finalMax === finalMin ? 1 : finalMax - finalMin;
+        return { min: finalMin, max: finalMax, span, rawMin: calculatedMin, rawMax: calculatedMax };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueBounds" }] : /* istanbul ignore next */ []));
+    /** Computed internal points with SVG coordinates */
+    internalPoints = computed(() => {
+        const pts = this.normalizedPoints();
+        if (pts.length === 0)
+            return [];
+        const { min, span, rawMin, rawMax } = this.valueBounds();
+        const w = this.svgWidth();
+        const h = this.svgHeight();
+        const p = this.padding();
+        const availableW = Math.max(1, w - p * 2);
+        const availableH = Math.max(1, h - p * 2);
+        const count = pts.length;
+        const stepX = count > 1 ? availableW / (count - 1) : availableW / 2;
+        return pts.map((pt, idx) => {
+            const x = count === 1 ? w / 2 : p + idx * stepX;
+            // Invert Y because SVG 0 is top
+            const normalizedRatio = (pt.value - min) / span;
+            const y = h - p - normalizedRatio * availableH;
+            return {
+                index: idx,
+                value: pt.value,
+                label: pt.label,
+                date: pt.date,
+                x,
+                y,
+                color: pt.color,
+                isMin: pt.value === rawMin,
+                isMax: pt.value === rawMax,
+                isFirst: idx === 0,
+                isLast: idx === count - 1
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalPoints" }] : /* istanbul ignore next */ []));
+    /** SVG Path line data */
+    linePath = computed(() => {
+        const pts = this.internalPoints();
+        if (pts.length < 2)
+            return '';
+        if (!this.smooth()) {
+            return pts.map((p, idx) => `${idx === 0 ? 'M' : 'L'} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(' ');
+        }
+        // Smooth Bezier Curve (Catmull-Rom or Monotone-like control points)
+        let d = `M ${pts[0].x.toFixed(2)} ${pts[0].y.toFixed(2)}`;
+        for (let i = 0; i < pts.length - 1; i++) {
+            const p0 = i > 0 ? pts[i - 1] : pts[i];
+            const p1 = pts[i];
+            const p2 = pts[i + 1];
+            const p3 = i < pts.length - 2 ? pts[i + 2] : p2;
+            const cp1x = p1.x + (p2.x - p0.x) / 6;
+            const cp1y = p1.y + (p2.y - p0.y) / 6;
+            const cp2x = p2.x - (p3.x - p1.x) / 6;
+            const cp2y = p2.y - (p3.y - p1.y) / 6;
+            d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`;
+        }
+        return d;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linePath" }] : /* istanbul ignore next */ []));
+    /** SVG Area path (closed polygon under curve) */
+    areaPath = computed(() => {
+        const line = this.linePath();
+        const pts = this.internalPoints();
+        if (!line || pts.length < 2)
+            return '';
+        const lastPt = pts[pts.length - 1];
+        const firstPt = pts[0];
+        const baselineY = this.svgHeight();
+        return `${line} L ${lastPt.x.toFixed(2)} ${baselineY} L ${firstPt.x.toFixed(2)} ${baselineY} Z`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaPath" }] : /* istanbul ignore next */ []));
+    /** Bar chart segments */
+    barSegments = computed(() => {
+        const pts = this.normalizedPoints();
+        if (pts.length === 0)
+            return [];
+        const explicitMin = this.min();
+        const explicitMax = this.max();
+        const { rawMin, rawMax } = this.valueBounds();
+        // For bar charts, default baseline is 0 unless min is explicitly provided
+        const barMin = explicitMin !== null ? explicitMin : Math.min(0, rawMin);
+        const barMax = explicitMax !== null ? explicitMax : Math.max(0, rawMax);
+        const barSpan = barMax === barMin ? (barMax !== 0 ? Math.abs(barMax) : 1) : barMax - barMin;
+        const w = this.svgWidth();
+        const h = this.svgHeight();
+        const p = this.padding();
+        const gap = this.barGap();
+        const count = pts.length;
+        const availableW = Math.max(1, w - p * 2);
+        const totalGaps = (count - 1) * gap;
+        const barW = Math.max(2, (availableW - totalGaps) / count);
+        const availableH = Math.max(1, h - p * 2);
+        const baseColor = this.effectiveColor().stroke;
+        // Calculate Y position of zero baseline
+        const zeroRatio = Math.max(0, Math.min(1, (0 - barMin) / barSpan));
+        const zeroY = h - p - zeroRatio * availableH;
+        return pts.map((pt, idx) => {
+            const x = p + idx * (barW + gap);
+            const val = pt.value;
+            let y;
+            let barH;
+            if (barMin >= 0) {
+                // All positive (standard case)
+                const ratio = Math.max(0, Math.min(1, (val - barMin) / barSpan));
+                barH = Math.max(2, ratio * availableH);
+                y = h - p - barH;
+            }
+            else if (barMax <= 0) {
+                // All negative
+                const ratio = Math.max(0, Math.min(1, Math.abs(val) / barSpan));
+                barH = Math.max(2, ratio * availableH);
+                y = p;
+            }
+            else {
+                // Mixed positive & negative values around zero baseline
+                if (val >= 0) {
+                    const ratio = Math.min(1, val / barSpan);
+                    barH = Math.max(2, ratio * availableH);
+                    y = zeroY - barH;
+                }
+                else {
+                    const ratio = Math.min(1, Math.abs(val) / barSpan);
+                    barH = Math.max(2, ratio * availableH);
+                    y = zeroY;
+                }
+            }
+            return {
+                index: idx,
+                value: pt.value,
+                label: pt.label,
+                x,
+                y,
+                width: barW,
+                height: barH,
+                color: pt.color || baseColor
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barSegments" }] : /* istanbul ignore next */ []));
+    /** Highlight markers based on showMarkers input */
+    markersToRender = computed(() => {
+        const mode = this.showMarkers();
+        if (mode === 'none')
+            return [];
+        const pts = this.internalPoints();
+        switch (mode) {
+            case 'all':
+                return pts;
+            case 'endpoints':
+                return pts.filter((p) => p.isFirst || p.isLast);
+            case 'min-max':
+                return pts.filter((p) => p.isMin || p.isMax);
+            case 'last':
+                return pts.length > 0 ? [pts[pts.length - 1]] : [];
+            default:
+                return [];
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markersToRender" }] : /* istanbul ignore next */ []));
+    /** Reference baseline Y coordinate */
+    referenceLineY = computed(() => {
+        const ref = this.referenceValue();
+        if (ref === null)
+            return null;
+        const { min, span } = this.valueBounds();
+        const h = this.svgHeight();
+        const p = this.padding();
+        const availableH = Math.max(1, h - p * 2);
+        const ratio = (ref - min) / span;
+        return h - p - ratio * availableH;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "referenceLineY" }] : /* istanbul ignore next */ []));
+    /** Aria label for accessibility */
+    computedAriaLabel = computed(() => {
+        const custom = this.ariaLabel();
+        if (custom)
+            return custom;
+        const pts = this.normalizedPoints();
+        if (pts.length === 0)
+            return 'Empty sparkline';
+        const first = pts[0].value;
+        const last = pts[pts.length - 1].value;
+        const delta = last - first;
+        const direction = delta >= 0 ? 'increased' : 'decreased';
+        return `Sparkline trend: ${first} to ${last} (${direction} by ${Math.abs(delta).toFixed(1)})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Handle mouse move for interactive hover tracking */
+    onMouseMove(event) {
+        if (!this.interactive())
+            return;
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        if (this.type() === 'bar') {
+            const bars = this.barSegments();
+            if (bars.length === 0)
+                return;
+            let nearest = bars[0];
+            let minDistance = Math.abs(bars[0].x + bars[0].width / 2 - mouseX);
+            for (let i = 1; i < bars.length; i++) {
+                const centerX = bars[i].x + bars[i].width / 2;
+                const dist = Math.abs(centerX - mouseX);
+                if (dist < minDistance) {
+                    minDistance = dist;
+                    nearest = bars[i];
+                }
+            }
+            const point = {
+                index: nearest.index,
+                value: nearest.value,
+                label: nearest.label,
+                x: Math.round(nearest.x + nearest.width / 2),
+                y: nearest.y
+            };
+            this.hoveredPoint.set(point);
+            this.isHovering.set(true);
+            this.pointHover.emit({
+                index: nearest.index,
+                value: nearest.value,
+                label: nearest.label,
+                x: point.x,
+                y: point.y
+            });
+            return;
+        }
+        const pts = this.internalPoints();
+        if (pts.length === 0)
+            return;
+        // Find nearest point based on direct pixel coordinate
+        let nearest = pts[0];
+        let minDistance = Math.abs(pts[0].x - mouseX);
+        for (let i = 1; i < pts.length; i++) {
+            const dist = Math.abs(pts[i].x - mouseX);
+            if (dist < minDistance) {
+                minDistance = dist;
+                nearest = pts[i];
+            }
+        }
+        this.hoveredPoint.set(nearest);
+        this.isHovering.set(true);
+        this.pointHover.emit({
+            index: nearest.index,
+            value: nearest.value,
+            label: nearest.label,
+            x: nearest.x,
+            y: nearest.y
+        });
+    }
+    /** Handle mouse leave */
+    onMouseLeave() {
+        if (!this.interactive())
+            return;
+        this.hoveredPoint.set(null);
+        this.isHovering.set(false);
+        this.pointHover.emit(null);
+    }
+    /** Handle point click */
+    onPointClick(point) {
+        const x = 'width' in point ? Math.round(point.x + point.width / 2) : ('x' in point ? point.x : 0);
+        this.pointClick.emit({
+            index: point.index,
+            value: point.value,
+            label: point.label,
+            x,
+            y: 'y' in point ? point.y : 0
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosSparklineComponent, isStandalone: true, selector: "talos-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, autoColorTrend: { classPropertyName: "autoColorTrend", publicName: "autoColorTrend", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showMarkers: { classPropertyName: "showMarkers", publicName: "showMarkers", isSignal: true, isRequired: false, transformFunction: null }, markerRadius: { classPropertyName: "markerRadius", publicName: "markerRadius", isSignal: true, isRequired: false, transformFunction: null }, referenceValue: { classPropertyName: "referenceValue", publicName: "referenceValue", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, barRadius: { classPropertyName: "barRadius", publicName: "barRadius", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointHover: "pointHover", pointClick: "pointClick" }, host: { properties: { "class.talos-sparkline-xs": "size() === \"xs\"", "class.talos-sparkline-sm": "size() === \"sm\"", "class.talos-sparkline-md": "size() === \"md\"", "class.talos-sparkline-lg": "size() === \"lg\"", "class.talos-sparkline-responsive": "size() === \"responsive\"", "style.width": "hostWidth()", "style.height": "hostHeight()", "style.aspectRatio": "computedAspectRatio()", "attr.role": "\"img\"", "attr.aria-label": "computedAriaLabel()" }, classAttribute: "talos-sparkline" }, ngImport: i0, template: "<svg\n  class=\"talos-sparkline-svg\"\n  [attr.viewBox]=\"'0 0 ' + svgWidth() + ' ' + svgHeight()\"\n  (mousemove)=\"onMouseMove($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n  aria-hidden=\"true\"\n>\n  <defs>\n    <linearGradient [id]=\"gradientId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop offset=\"0%\" [attr.stop-color]=\"effectiveColor().fillStart\" />\n      <stop offset=\"100%\" [attr.stop-color]=\"effectiveColor().fillEnd\" />\n    </linearGradient>\n  </defs>\n\n  <!-- Reference Baseline (if provided) -->\n  @if (referenceLineY() !== null) {\n    <line\n      class=\"talos-sparkline-reference-line\"\n      [attr.x1]=\"0\"\n      [attr.y1]=\"referenceLineY()\"\n      [attr.x2]=\"svgWidth()\"\n      [attr.y2]=\"referenceLineY()\"\n    />\n  }\n\n  <!-- Chart Type: Area / Line -->\n  @if (type() === 'area' || type() === 'line') {\n    @if (type() === 'area' && areaPath()) {\n      <path\n        class=\"talos-sparkline-area\"\n        [attr.d]=\"areaPath()\"\n        [attr.fill]=\"'url(#' + gradientId + ')'\"\n      />\n    }\n\n    @if (linePath()) {\n      <path\n        class=\"talos-sparkline-line\"\n        [attr.d]=\"linePath()\"\n        [attr.stroke]=\"effectiveColor().stroke\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        fill=\"none\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    }\n  }\n\n  <!-- Chart Type: Bar -->\n  @if (type() === 'bar') {\n    @for (bar of barSegments(); track bar.index) {\n      <rect\n        class=\"talos-sparkline-bar\"\n        [class.talos-sparkline-bar-hovered]=\"isHovering() && hoveredPoint()?.index === bar.index\"\n        [attr.x]=\"bar.x\"\n        [attr.y]=\"bar.y\"\n        [attr.width]=\"bar.width\"\n        [attr.height]=\"bar.height\"\n        [attr.rx]=\"barRadius()\"\n        [attr.ry]=\"barRadius()\"\n        [attr.fill]=\"bar.color\"\n        (click)=\"onPointClick(bar)\"\n      />\n    }\n  }\n\n  <!-- Highlight Markers -->\n  @for (marker of markersToRender(); track marker.index) {\n    <circle\n      class=\"talos-sparkline-marker\"\n      [attr.cx]=\"marker.x\"\n      [attr.cy]=\"marker.y\"\n      [attr.r]=\"markerRadius()\"\n      [attr.fill]=\"marker.color || effectiveColor().stroke\"\n      [attr.stroke]=\"'#ffffff'\"\n      [attr.stroke-width]=\"1.5\"\n      (click)=\"onPointClick(marker)\"\n    />\n  }\n\n  <!-- Interactive Hover Crosshair / Cursor Dot (Line/Area only) -->\n  @if (type() !== 'bar' && isHovering() && hoveredPoint(); as pt) {\n    <line\n      class=\"talos-sparkline-cursor-line\"\n      [attr.x1]=\"pt.x\"\n      [attr.y1]=\"0\"\n      [attr.x2]=\"pt.x\"\n      [attr.y2]=\"svgHeight()\"\n    />\n    <circle\n      class=\"talos-sparkline-hover-dot-outer\"\n      [attr.cx]=\"pt.x\"\n      [attr.cy]=\"pt.y\"\n      [attr.r]=\"markerRadius() + 2.5\"\n      [attr.fill]=\"effectiveColor().stroke\"\n      opacity=\"0.25\"\n    />\n    <circle\n      class=\"talos-sparkline-hover-dot\"\n      [attr.cx]=\"pt.x\"\n      [attr.cy]=\"pt.y\"\n      [attr.r]=\"markerRadius() + 0.5\"\n      [attr.fill]=\"effectiveColor().stroke\"\n      stroke=\"#ffffff\"\n      [attr.stroke-width]=\"1.5\"\n    />\n  }\n</svg>\n\n<!-- Floating Tooltip on Hover -->\n@if (showTooltip() && isHovering() && hoveredPoint(); as pt) {\n  <div\n    class=\"talos-sparkline-tooltip\"\n    [style.left.px]=\"pt.x\"\n  >\n    @if (pt.label) {\n      <span class=\"talos-sparkline-tooltip-label\">{{ pt.label }}</span>\n    }\n    <span class=\"talos-sparkline-tooltip-value\">{{ valueFormatter()(pt.value) }}</span>\n  </div>\n}\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;overflow:visible;-webkit-user-select:none;user-select:none}:host.talos-sparkline-xs{width:64px;height:40px}:host.talos-sparkline-sm{width:96px;height:60px}:host.talos-sparkline-md{width:130px;height:80px}:host.talos-sparkline-lg{width:180px;height:110px}:host.talos-sparkline-responsive{display:block;width:100%;height:100%;min-height:48px}:host .talos-sparkline-svg{display:block;width:100%;height:100%;overflow:visible;cursor:crosshair}:host .talos-sparkline-area{transition:d .25s ease,opacity .2s ease}:host .talos-sparkline-line{transition:d .25s ease,stroke .2s ease}:host .talos-sparkline-bar{transition:height .2s ease,y .2s ease,opacity .15s ease,filter .15s ease;cursor:pointer}:host .talos-sparkline-bar:hover,:host .talos-sparkline-bar.talos-sparkline-bar-hovered{opacity:.85;filter:brightness(1.1)}:host .talos-sparkline-reference-line{stroke:var(--talos-border-hover, #94a3b8);stroke-width:1;stroke-dasharray:2 2;opacity:.65}:host .talos-sparkline-cursor-line{stroke:var(--talos-text-muted, #64748b);stroke-width:1;stroke-dasharray:2 2;opacity:.7;pointer-events:none}:host .talos-sparkline-marker{filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));cursor:pointer;transition:transform .15s ease}:host .talos-sparkline-marker:hover{transform:scale(1.2)}:host .talos-sparkline-hover-dot{pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}:host .talos-sparkline-tooltip{position:absolute;bottom:calc(100% + 4px);transform:translate(-50%);pointer-events:none;z-index:30;display:flex;flex-direction:column;align-items:center;padding:2px 6px;border-radius:4px;background:var(--talos-text-color, #0f172a);color:var(--talos-card-bg, #ffffff);font-size:.6875rem;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 4px 6px -1px #00000026,0 2px 4px -2px #0000001a;animation:talosSparklineFadeIn .12s ease-out}:host .talos-sparkline-tooltip .talos-sparkline-tooltip-label{font-size:.625rem;font-weight:400;opacity:.8}:host .talos-sparkline-tooltip .talos-sparkline-tooltip-value{letter-spacing:-.01em}:host .talos-sparkline-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:3px;border-style:solid;border-color:var(--talos-text-color, #0f172a) transparent transparent transparent}@keyframes talosSparklineFadeIn{0%{opacity:0;transform:translate(-50%,2px)}to{opacity:1;transform:translate(-50%)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-sparkline', host: {
+                        'class': 'talos-sparkline',
+                        '[class.talos-sparkline-xs]': 'size() === "xs"',
+                        '[class.talos-sparkline-sm]': 'size() === "sm"',
+                        '[class.talos-sparkline-md]': 'size() === "md"',
+                        '[class.talos-sparkline-lg]': 'size() === "lg"',
+                        '[class.talos-sparkline-responsive]': 'size() === "responsive"',
+                        '[style.width]': 'hostWidth()',
+                        '[style.height]': 'hostHeight()',
+                        '[style.aspectRatio]': 'computedAspectRatio()',
+                        '[attr.role]': '"img"',
+                        '[attr.aria-label]': 'computedAriaLabel()'
+                    }, template: "<svg\n  class=\"talos-sparkline-svg\"\n  [attr.viewBox]=\"'0 0 ' + svgWidth() + ' ' + svgHeight()\"\n  (mousemove)=\"onMouseMove($event)\"\n  (mouseleave)=\"onMouseLeave()\"\n  aria-hidden=\"true\"\n>\n  <defs>\n    <linearGradient [id]=\"gradientId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop offset=\"0%\" [attr.stop-color]=\"effectiveColor().fillStart\" />\n      <stop offset=\"100%\" [attr.stop-color]=\"effectiveColor().fillEnd\" />\n    </linearGradient>\n  </defs>\n\n  <!-- Reference Baseline (if provided) -->\n  @if (referenceLineY() !== null) {\n    <line\n      class=\"talos-sparkline-reference-line\"\n      [attr.x1]=\"0\"\n      [attr.y1]=\"referenceLineY()\"\n      [attr.x2]=\"svgWidth()\"\n      [attr.y2]=\"referenceLineY()\"\n    />\n  }\n\n  <!-- Chart Type: Area / Line -->\n  @if (type() === 'area' || type() === 'line') {\n    @if (type() === 'area' && areaPath()) {\n      <path\n        class=\"talos-sparkline-area\"\n        [attr.d]=\"areaPath()\"\n        [attr.fill]=\"'url(#' + gradientId + ')'\"\n      />\n    }\n\n    @if (linePath()) {\n      <path\n        class=\"talos-sparkline-line\"\n        [attr.d]=\"linePath()\"\n        [attr.stroke]=\"effectiveColor().stroke\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        fill=\"none\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    }\n  }\n\n  <!-- Chart Type: Bar -->\n  @if (type() === 'bar') {\n    @for (bar of barSegments(); track bar.index) {\n      <rect\n        class=\"talos-sparkline-bar\"\n        [class.talos-sparkline-bar-hovered]=\"isHovering() && hoveredPoint()?.index === bar.index\"\n        [attr.x]=\"bar.x\"\n        [attr.y]=\"bar.y\"\n        [attr.width]=\"bar.width\"\n        [attr.height]=\"bar.height\"\n        [attr.rx]=\"barRadius()\"\n        [attr.ry]=\"barRadius()\"\n        [attr.fill]=\"bar.color\"\n        (click)=\"onPointClick(bar)\"\n      />\n    }\n  }\n\n  <!-- Highlight Markers -->\n  @for (marker of markersToRender(); track marker.index) {\n    <circle\n      class=\"talos-sparkline-marker\"\n      [attr.cx]=\"marker.x\"\n      [attr.cy]=\"marker.y\"\n      [attr.r]=\"markerRadius()\"\n      [attr.fill]=\"marker.color || effectiveColor().stroke\"\n      [attr.stroke]=\"'#ffffff'\"\n      [attr.stroke-width]=\"1.5\"\n      (click)=\"onPointClick(marker)\"\n    />\n  }\n\n  <!-- Interactive Hover Crosshair / Cursor Dot (Line/Area only) -->\n  @if (type() !== 'bar' && isHovering() && hoveredPoint(); as pt) {\n    <line\n      class=\"talos-sparkline-cursor-line\"\n      [attr.x1]=\"pt.x\"\n      [attr.y1]=\"0\"\n      [attr.x2]=\"pt.x\"\n      [attr.y2]=\"svgHeight()\"\n    />\n    <circle\n      class=\"talos-sparkline-hover-dot-outer\"\n      [attr.cx]=\"pt.x\"\n      [attr.cy]=\"pt.y\"\n      [attr.r]=\"markerRadius() + 2.5\"\n      [attr.fill]=\"effectiveColor().stroke\"\n      opacity=\"0.25\"\n    />\n    <circle\n      class=\"talos-sparkline-hover-dot\"\n      [attr.cx]=\"pt.x\"\n      [attr.cy]=\"pt.y\"\n      [attr.r]=\"markerRadius() + 0.5\"\n      [attr.fill]=\"effectiveColor().stroke\"\n      stroke=\"#ffffff\"\n      [attr.stroke-width]=\"1.5\"\n    />\n  }\n</svg>\n\n<!-- Floating Tooltip on Hover -->\n@if (showTooltip() && isHovering() && hoveredPoint(); as pt) {\n  <div\n    class=\"talos-sparkline-tooltip\"\n    [style.left.px]=\"pt.x\"\n  >\n    @if (pt.label) {\n      <span class=\"talos-sparkline-tooltip-label\">{{ pt.label }}</span>\n    }\n    <span class=\"talos-sparkline-tooltip-value\">{{ valueFormatter()(pt.value) }}</span>\n  </div>\n}\n", styles: [":host{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;overflow:visible;-webkit-user-select:none;user-select:none}:host.talos-sparkline-xs{width:64px;height:40px}:host.talos-sparkline-sm{width:96px;height:60px}:host.talos-sparkline-md{width:130px;height:80px}:host.talos-sparkline-lg{width:180px;height:110px}:host.talos-sparkline-responsive{display:block;width:100%;height:100%;min-height:48px}:host .talos-sparkline-svg{display:block;width:100%;height:100%;overflow:visible;cursor:crosshair}:host .talos-sparkline-area{transition:d .25s ease,opacity .2s ease}:host .talos-sparkline-line{transition:d .25s ease,stroke .2s ease}:host .talos-sparkline-bar{transition:height .2s ease,y .2s ease,opacity .15s ease,filter .15s ease;cursor:pointer}:host .talos-sparkline-bar:hover,:host .talos-sparkline-bar.talos-sparkline-bar-hovered{opacity:.85;filter:brightness(1.1)}:host .talos-sparkline-reference-line{stroke:var(--talos-border-hover, #94a3b8);stroke-width:1;stroke-dasharray:2 2;opacity:.65}:host .talos-sparkline-cursor-line{stroke:var(--talos-text-muted, #64748b);stroke-width:1;stroke-dasharray:2 2;opacity:.7;pointer-events:none}:host .talos-sparkline-marker{filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));cursor:pointer;transition:transform .15s ease}:host .talos-sparkline-marker:hover{transform:scale(1.2)}:host .talos-sparkline-hover-dot{pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}:host .talos-sparkline-tooltip{position:absolute;bottom:calc(100% + 4px);transform:translate(-50%);pointer-events:none;z-index:30;display:flex;flex-direction:column;align-items:center;padding:2px 6px;border-radius:4px;background:var(--talos-text-color, #0f172a);color:var(--talos-card-bg, #ffffff);font-size:.6875rem;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 4px 6px -1px #00000026,0 2px 4px -2px #0000001a;animation:talosSparklineFadeIn .12s ease-out}:host .talos-sparkline-tooltip .talos-sparkline-tooltip-label{font-size:.625rem;font-weight:400;opacity:.8}:host .talos-sparkline-tooltip .talos-sparkline-tooltip-value{letter-spacing:-.01em}:host .talos-sparkline-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:3px;border-style:solid;border-color:var(--talos-text-color, #0f172a) transparent transparent transparent}@keyframes talosSparklineFadeIn{0%{opacity:0;transform:translate(-50%,2px)}to{opacity:1;transform:translate(-50%)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], autoColorTrend: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoColorTrend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showMarkers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkers", required: false }] }], markerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerRadius", required: false }] }], referenceValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceValue", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], barRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "barRadius", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], pointHover: [{ type: i0.Output, args: ["pointHover"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
+
+class TalosSparklineModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineModule, imports: [TalosSparklineComponent], exports: [TalosSparklineComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosSparklineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TalosSparklineComponent],
+                    exports: [TalosSparklineComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GOLDEN_RATIO, TalosSparklineComponent, TalosSparklineModule };
+//# sourceMappingURL=weeehaoooz-talos-ui-data-viz-sparkline.mjs.map