import { Component, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import * as d3 from 'd3';
import * as i0 from "@angular/core";
const _c0 = ["chartSvg"];
const _c1 = ["tooltip"];
function TimeSeriesChartComponent_Conditional_1_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵlistener("click", function TimeSeriesChartComponent_Conditional_1_Conditional_3_For_2_Template_div_click_0_listener() { const metric_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleMetric(metric_r2)); });
    i0.ɵɵelement(1, "div", 10);
    i0.ɵɵelementStart(2, "span", 11);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const metric_r2 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵclassProp("legend-item--disabled", !ctx_r2.isMetricVisible(metric_r2));
    i0.ɵɵadvance();
    i0.ɵɵstyleProp("background-color", ctx_r2.getMetricColor(metric_r2));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.getMetricLabel(metric_r2));
} }
function TimeSeriesChartComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 7);
    i0.ɵɵrepeaterCreate(1, TimeSeriesChartComponent_Conditional_1_Conditional_3_For_2_Template, 4, 5, "div", 8, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r2.visibleMetrics);
} }
function TimeSeriesChartComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 3)(1, "h4", 6);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(3, TimeSeriesChartComponent_Conditional_1_Conditional_3_Template, 3, 0, "div", 7);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.title);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.showLegend ? 3 : -1);
} }
export class TimeSeriesChartComponent {
    data = [];
    title;
    config = {};
    showLegend = true;
    showControls = true;
    dataPointClick = new EventEmitter();
    timeRangeChange = new EventEmitter();
    chartSvg;
    tooltip;
    svg;
    width = 0;
    height = 0;
    margin = { top: 10, right: 70, bottom: 50, left: 70 }; // Increased bottom margin for x-axis labels
    // Chart configuration — resolved from CSS custom properties for D3 color interpolation
    defaultColors = [];
    // Metrics configuration
    visibleMetrics = ['executions', 'cost', 'tokens', 'avgTime', 'errors'];
    hiddenMetrics = new Set();
    ngOnInit() {
        this.defaultColors = this.getDefaultColors();
        this.applyConfig();
    }
    /**
     * Reads chart-series colors from CSS custom properties so D3 can use
     * resolved values for color interpolation while remaining themeable.
     */
    getDefaultColors() {
        const style = getComputedStyle(document.documentElement);
        return [
            style.getPropertyValue('--mj-brand-primary').trim() || '#0076b6',
            style.getPropertyValue('--mj-status-success').trim() || '#22c55e',
            style.getPropertyValue('--mj-status-warning').trim() || '#f59e0b',
            style.getPropertyValue('--mj-status-error').trim() || '#ef4444',
            style.getPropertyValue('--mj-brand-primary').trim() || '#8b5cf6',
        ];
    }
    ngAfterViewInit() {
        this.initChart();
        this.updateChart();
    }
    ngOnChanges(changes) {
        if (changes['data'] && !changes['data'].firstChange) {
            this.updateChart();
        }
        if (changes['config'] && !changes['config'].firstChange) {
            this.applyConfig();
            this.updateChart();
        }
    }
    ngOnDestroy() {
        // Cleanup D3 event listeners
        d3.select(window).on('resize.timeseries', null);
    }
    applyConfig() {
        const config = this.config;
        this.margin = { ...this.margin, ...config.margin };
    }
    initChart() {
        this.svg = d3.select(this.chartSvg.nativeElement);
        // Set up responsive behavior
        d3.select(window).on('resize.timeseries', () => this.updateChart());
    }
    updateChart() {
        if (!this.data || this.data.length === 0) {
            this.svg.selectAll('*').remove();
            return;
        }
        this.calculateDimensions();
        this.svg.selectAll('*').remove();
        this.drawChart();
    }
    calculateDimensions() {
        const container = this.chartSvg.nativeElement.parentElement;
        const containerWidth = container.clientWidth;
        const containerHeight = container.clientHeight;
        // Use config dimensions or fallback to container dimensions
        this.width = (this.config.width || containerWidth) - this.margin.left - this.margin.right;
        this.height = (this.config.height || Math.max(containerHeight, 200)) - this.margin.top - this.margin.bottom;
        // Ensure minimum dimensions for usability
        this.width = Math.max(this.width, 200);
        this.height = Math.max(this.height, 150);
        this.svg
            .attr('width', this.width + this.margin.left + this.margin.right)
            .attr('height', this.height + this.margin.top + this.margin.bottom);
    }
    drawChart() {
        const g = this.svg.append('g')
            .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
        // Create scales
        const xScale = d3.scaleTime()
            .domain(d3.extent(this.data, d => d.timestamp))
            .range([0, this.width]);
        // Create separate scales for different metrics
        const scales = this.createMetricScales();
        // Draw grid
        if (this.config.showGrid !== false) {
            this.drawGrid(g, xScale, scales);
        }
        // Draw axes
        this.drawAxes(g, xScale, scales);
        // Draw data lines and areas
        this.drawMetrics(g, xScale, scales);
        // Draw interactive elements
        this.drawInteractiveElements(g, xScale, scales);
    }
    createMetricScales() {
        const scales = {};
        if (this.config.useDualAxis !== false) {
            // Dual axis mode: Left axis (cost, avgTime), Right axis (executions, tokens, errors)
            const leftAxisMetrics = ['cost', 'avgTime'];
            const rightAxisMetrics = ['executions', 'tokens', 'errors'];
            // Create left axis scale (cost and time)
            const leftValues = leftAxisMetrics.flatMap(metric => this.data.map(d => {
                const value = this.getMetricValue(d, metric);
                // Normalize avgTime to seconds for better scale comparison with cost
                return metric === 'avgTime' ? (value || 0) / 1000 : (value || 0);
            }).filter((v) => v != null));
            if (leftValues.length > 0) {
                const maxLeftValue = Math.max(...leftValues);
                const leftScale = d3.scaleLinear()
                    .domain([0, maxLeftValue])
                    .range([this.height, 0])
                    .nice();
                leftAxisMetrics.forEach(metric => scales[metric] = leftScale);
            }
            // Create right axis scale (count-based metrics)
            const rightValues = rightAxisMetrics.flatMap(metric => this.data.map(d => this.getMetricValue(d, metric)).filter((v) => v != null));
            if (rightValues.length > 0) {
                const maxRightValue = Math.max(...rightValues);
                const rightScale = d3.scaleLinear()
                    .domain([0, maxRightValue])
                    .range([this.height, 0])
                    .nice();
                rightAxisMetrics.forEach(metric => scales[metric] = rightScale);
            }
        }
        else {
            // Single axis mode (original behavior)
            const metricGroups = {
                count: ['executions', 'errors'],
                cost: ['cost'],
                tokens: ['tokens'],
                time: ['avgTime']
            };
            Object.entries(metricGroups).forEach(([groupName, metrics]) => {
                const allValues = metrics.flatMap(metric => this.data.map(d => this.getMetricValue(d, metric)).filter((v) => v != null));
                if (allValues.length > 0) {
                    const maxValue = Math.max(...allValues);
                    const scale = d3.scaleLinear()
                        .domain([0, maxValue])
                        .range([this.height, 0])
                        .nice();
                    metrics.forEach(metric => scales[metric] = scale);
                }
            });
        }
        return scales;
    }
    drawGrid(g, xScale, scales) {
        // Vertical grid lines
        g.selectAll('.grid-line-x')
            .data(xScale.ticks(6))
            .enter().append('line')
            .attr('class', 'grid-line grid-line-x')
            .attr('x1', (d) => xScale(d))
            .attr('x2', (d) => xScale(d))
            .attr('y1', 0)
            .attr('y2', this.height);
        // Horizontal grid lines (use first scale)
        const firstScale = Object.values(scales)[0];
        if (firstScale) {
            g.selectAll('.grid-line-y')
                .data(firstScale.ticks(5))
                .enter().append('line')
                .attr('class', 'grid-line grid-line-y')
                .attr('x1', 0)
                .attr('x2', this.width)
                .attr('y1', (d) => firstScale(d))
                .attr('y2', (d) => firstScale(d));
        }
    }
    drawAxes(g, xScale, scales) {
        // X axis
        g.append('g')
            .attr('class', 'axis axis-x')
            .attr('transform', `translate(0,${this.height})`)
            .call(d3.axisBottom(xScale)
            .ticks(this.getOptimalTickCount())
            .tickFormat(this.getTimeFormat()));
        if (this.config.useDualAxis !== false) {
            // Dual Y-axis mode
            const leftAxisMetrics = ['cost', 'avgTime'];
            const rightAxisMetrics = ['executions', 'tokens', 'errors'];
            // Left Y axis (cost, time)
            const leftScale = scales[leftAxisMetrics[0]];
            if (leftScale) {
                g.append('g')
                    .attr('class', 'axis axis-y axis-y-left')
                    .call(d3.axisLeft(leftScale)
                    .ticks(5)
                    .tickFormat((d) => {
                    const value = d;
                    // Format based on value range - if > 1, likely cost, else time in seconds
                    return value > 1 ? `$${value.toFixed(2)}` : `${value.toFixed(1)}s`;
                }));
                // Left axis label
                g.append('text')
                    .attr('class', 'axis-label axis-label-left')
                    .attr('transform', 'rotate(-90)')
                    .attr('y', 0 - this.margin.left + 20)
                    .attr('x', 0 - (this.height / 2))
                    .style('text-anchor', 'middle')
                    .style('font-size', '12px')
                    .style('fill', 'var(--mj-text-muted)')
                    .text('Cost ($) / Time (s)');
            }
            // Right Y axis (counts)
            const rightScale = scales[rightAxisMetrics[0]];
            if (rightScale) {
                g.append('g')
                    .attr('class', 'axis axis-y axis-y-right')
                    .attr('transform', `translate(${this.width},0)`)
                    .call(d3.axisRight(rightScale)
                    .ticks(5)
                    .tickFormat((d) => {
                    const value = d;
                    // Format large numbers with K/M suffixes
                    if (value >= 1000000)
                        return `${(value / 1000000).toFixed(1)}M`;
                    if (value >= 1000)
                        return `${(value / 1000).toFixed(1)}K`;
                    return value.toString();
                }));
                // Right axis label
                g.append('text')
                    .attr('class', 'axis-label axis-label-right')
                    .attr('transform', 'rotate(90)')
                    .attr('y', 0 - this.width - this.margin.right + 20)
                    .attr('x', this.height / 2)
                    .style('text-anchor', 'middle')
                    .style('font-size', '12px')
                    .style('fill', 'var(--mj-text-muted)')
                    .text('Count (Executions / Tokens)');
            }
        }
        else {
            // Single Y axis (original behavior)
            const firstScale = Object.values(scales)[0];
            if (firstScale) {
                g.append('g')
                    .attr('class', 'axis axis-y')
                    .call(d3.axisLeft(firstScale).ticks(5));
            }
        }
    }
    drawMetrics(g, xScale, scales) {
        // Create a group for lines and areas
        const linesGroup = g.append('g').attr('class', 'lines-group');
        // First draw all lines and areas
        this.visibleMetrics.forEach((metric) => {
            if (this.hiddenMetrics.has(metric) || !scales[metric])
                return;
            const color = this.getMetricColor(metric);
            const scale = scales[metric];
            // Create line generator with proper value transformation
            const line = d3.line()
                .x(d => xScale(d.timestamp))
                .y(d => {
                const value = this.getMetricValue(d, metric) || 0;
                // Normalize avgTime to seconds if using dual axis
                const transformedValue = (this.config.useDualAxis !== false && metric === 'avgTime')
                    ? value / 1000 : value;
                return scale(transformedValue);
            })
                .curve(d3.curveMonotoneX);
            // Create area generator with proper value transformation
            const area = d3.area()
                .x(d => xScale(d.timestamp))
                .y0(this.height)
                .y1(d => {
                const value = this.getMetricValue(d, metric) || 0;
                // Normalize avgTime to seconds if using dual axis
                const transformedValue = (this.config.useDualAxis !== false && metric === 'avgTime')
                    ? value / 1000 : value;
                return scale(transformedValue);
            })
                .curve(d3.curveMonotoneX);
            // Draw area (optional)
            if (metric === 'executions' || metric === 'cost') {
                linesGroup.append('path')
                    .datum(this.data)
                    .attr('class', `chart-area chart-area--${metric}`)
                    .attr('d', area)
                    .attr('fill', color);
            }
            // Draw line
            linesGroup.append('path')
                .datum(this.data)
                .attr('class', `chart-line chart-line--${metric}`)
                .attr('d', line)
                .attr('stroke', color);
        });
        // Then create dots group on top of everything
        const dotsGroup = g.append('g').attr('class', 'dots-group').style('pointer-events', 'all');
        // Draw all dots in a separate pass so they're all on top
        this.visibleMetrics.forEach((metric) => {
            if (this.hiddenMetrics.has(metric) || !scales[metric])
                return;
            const color = this.getMetricColor(metric);
            const scale = scales[metric];
            // Draw dots with click events - only for non-zero values
            const dotsData = this.data.filter(d => {
                const value = this.getMetricValue(d, metric);
                return value != null && value > 0;
            });
            const dots = dotsGroup.selectAll(`.chart-dot--${metric}`)
                .data(dotsData)
                .enter().append('circle')
                .attr('class', `chart-dot chart-dot--${metric}`)
                .attr('cx', (d) => xScale(d.timestamp))
                .attr('cy', (d) => {
                const value = this.getMetricValue(d, metric) || 0;
                // Normalize avgTime to seconds if using dual axis
                const transformedValue = (this.config.useDualAxis !== false && metric === 'avgTime')
                    ? value / 1000 : value;
                return scale(transformedValue);
            })
                .attr('r', 4) // Slightly larger for easier clicking
                .attr('stroke', color)
                .attr('stroke-width', 2)
                .attr('fill', 'var(--mj-bg-surface)')
                .style('cursor', 'pointer')
                .style('pointer-events', 'all') // Ensure clicks are captured
                .style('z-index', 1000) // Ensure dots are on top
                .attr('data-metric', metric) // Add data attribute for debugging
                .on('mouseenter', (event, d) => {
                // Bring to front on hover
                const dot = d3.select(event.currentTarget);
                dot.raise();
                dot.attr('r', 6);
                // Show tooltip
                if (this.config.showTooltip !== false) {
                    this.showTooltip(event, d);
                }
            })
                .on('mouseleave', (event, d) => {
                const dot = d3.select(event.currentTarget);
                dot.attr('r', 4);
                // Hide tooltip
                if (this.config.showTooltip !== false) {
                    this.hideTooltip();
                }
            })
                .on('click', (event, d) => {
                event.stopPropagation();
                event.preventDefault();
                // Only emit if there's actual data
                const value = this.getMetricValue(d, metric);
                if (value != null && value > 0) {
                    this.dataPointClick.emit({ data: d, metric, event });
                }
            });
        });
    }
    drawInteractiveElements(g, xScale, scales) {
        if (this.config.showTooltip === false)
            return;
        // Note: We don't need an overlay for tooltips as the dots themselves handle interactions
        // The overlay was preventing click events on dots
    }
    findClosestDataPoint(targetDate) {
        if (!this.data.length)
            return null;
        return this.data.reduce((closest, current) => {
            const currentDiff = Math.abs(current.timestamp.getTime() - targetDate.getTime());
            const closestDiff = Math.abs(closest.timestamp.getTime() - targetDate.getTime());
            return currentDiff < closestDiff ? current : closest;
        });
    }
    showTooltip(event, data) {
        const tooltip = d3.select(this.tooltip.nativeElement);
        const content = `
      <div><strong>${d3.timeFormat('%H:%M')(data.timestamp)}</strong></div>
      <div>Executions: ${data.executions.toLocaleString()}</div>
      <div>Cost: $${data.cost.toFixed(4)}</div>
      <div>Tokens: ${data.tokens.toLocaleString()}</div>
      <div>Avg Time: ${(data.avgTime / 1000).toFixed(1)}s</div>
      <div>Errors: ${data.errors}</div>
      <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--mj-bg-surface) 30%, transparent); font-size: 11px; color: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);">
        Click data points to drill down
      </div>
    `;
        tooltip
            .style('display', 'block')
            .html(content)
            .style('left', (event.offsetX + 10) + 'px')
            .style('top', (event.offsetY - 10) + 'px');
    }
    hideTooltip() {
        d3.select(this.tooltip.nativeElement)
            .style('display', 'none');
    }
    getMetricValue(data, metric) {
        switch (metric) {
            case 'executions': return data.executions;
            case 'cost': return data.cost;
            case 'tokens': return data.tokens;
            case 'avgTime': return data.avgTime;
            case 'errors': return data.errors;
            default: return null;
        }
    }
    getMetricColor(metric) {
        const colors = this.config.colors || this.defaultColors;
        const index = this.visibleMetrics.indexOf(metric);
        return colors[index % colors.length];
    }
    getMetricLabel(metric) {
        const labels = {
            executions: 'Executions',
            cost: 'Cost ($)',
            tokens: 'Tokens',
            avgTime: 'Avg Time (ms)',
            errors: 'Errors'
        };
        return labels[metric] || metric;
    }
    isMetricVisible(metric) {
        return !this.hiddenMetrics.has(metric);
    }
    toggleMetric(metric) {
        if (this.hiddenMetrics.has(metric)) {
            this.hiddenMetrics.delete(metric);
        }
        else {
            this.hiddenMetrics.add(metric);
        }
        this.updateChart();
    }
    getTimeFormat() {
        if (this.data.length < 2) {
            return d3.timeFormat('%H:%M');
        }
        // Calculate the time span of the data
        const firstDate = this.data[0].timestamp;
        const lastDate = this.data[this.data.length - 1].timestamp;
        const timeDiff = lastDate.getTime() - firstDate.getTime();
        const hours = timeDiff / (1000 * 60 * 60);
        const days = hours / 24;
        // Choose format based on time span
        if (hours <= 24) {
            // For up to 24 hours, show hours and minutes
            return d3.timeFormat('%H:%M');
        }
        else if (days <= 7) {
            // For up to 7 days, show day and time
            return d3.timeFormat('%a %H:%M'); // e.g., "Mon 14:00"
        }
        else if (days <= 30) {
            // For up to 30 days, show month/day
            return d3.timeFormat('%m/%d'); // e.g., "06/13"
        }
        else {
            // For longer periods, show month/day/year
            return d3.timeFormat('%m/%d/%y'); // e.g., "06/13/25"
        }
    }
    getOptimalTickCount() {
        if (this.data.length < 2) {
            return 6;
        }
        // Calculate the time span of the data
        const firstDate = this.data[0].timestamp;
        const lastDate = this.data[this.data.length - 1].timestamp;
        const timeDiff = lastDate.getTime() - firstDate.getTime();
        const hours = timeDiff / (1000 * 60 * 60);
        const days = hours / 24;
        // Adjust tick count based on time span and chart width
        const pixelsPerTick = 100; // Minimum pixels between ticks
        const maxTicks = Math.floor(this.width / pixelsPerTick);
        if (days <= 1) {
            return Math.min(8, maxTicks); // Show more ticks for hourly data
        }
        else if (days <= 7) {
            return Math.min(7, maxTicks); // One per day for weekly view
        }
        else if (days <= 30) {
            return Math.min(6, maxTicks); // Fewer ticks for monthly view
        }
        else {
            return Math.min(5, maxTicks); // Even fewer for longer periods
        }
    }
    static ɵfac = function TimeSeriesChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimeSeriesChartComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TimeSeriesChartComponent, selectors: [["app-time-series-chart"]], viewQuery: function TimeSeriesChartComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 7)(_c1, 7);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartSvg = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltip = _t.first);
        } }, inputs: { data: "data", title: "title", config: "config", showLegend: "showLegend", showControls: "showControls" }, outputs: { dataPointClick: "dataPointClick", timeRangeChange: "timeRangeChange" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 7, vars: 1, consts: [["chartSvg", ""], ["tooltip", ""], [1, "time-series-chart"], [1, "chart-header"], [1, "chart-container"], [1, "chart-tooltip", 2, "display", "none"], [1, "chart-title"], [1, "chart-legend"], [1, "legend-item", 3, "legend-item--disabled"], [1, "legend-item", 3, "click"], [1, "legend-color"], [1, "legend-label"]], template: function TimeSeriesChartComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 2);
            i0.ɵɵconditionalCreate(1, TimeSeriesChartComponent_Conditional_1_Template, 4, 2, "div", 3);
            i0.ɵɵelementStart(2, "div", 4);
            i0.ɵɵnamespaceSVG();
            i0.ɵɵelement(3, "svg", null, 0);
            i0.ɵɵnamespaceHTML();
            i0.ɵɵelement(5, "div", 5, 1);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.title ? 1 : -1);
        } }, styles: [".time-series-chart[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      padding: 12px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden; \n\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n      flex-wrap: wrap;\n      gap: 12px;\n      flex-shrink: 0; \n\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .chart-legend[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .legend-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      cursor: pointer;\n      transition: opacity 0.2s ease;\n      font-size: 11px;\n    }\n\n    .legend-item--disabled[_ngcontent-%COMP%] {\n      opacity: 0.4;\n    }\n\n    .legend-color[_ngcontent-%COMP%] {\n      width: 12px;\n      height: 12px;\n      border-radius: 2px;\n    }\n\n    .legend-label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .chart-container[_ngcontent-%COMP%] {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      min-height: 0; \n\n    }\n\n    .chart-container[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-tooltip[_ngcontent-%COMP%] {\n      position: absolute;\n      background: rgba(0, 0, 0, 0.8);\n      color: var(--mj-text-inverse);\n      padding: 8px 12px;\n      border-radius: 4px;\n      font-size: 12px;\n      pointer-events: none;\n      z-index: 1000;\n      max-width: 200px;\n    }\n\n\n    \n\n    [_nghost-%COMP%]     .chart-line {\n      fill: none;\n      stroke-width: 2;\n    }\n\n    [_nghost-%COMP%]     .chart-area {\n      fill-opacity: 0.1;\n    }\n\n    [_nghost-%COMP%]     .chart-dot {\n      transition: r 0.1s ease;\n    }\n\n    [_nghost-%COMP%]     .chart-dot:hover {\n      filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));\n    }\n\n    [_nghost-%COMP%]     .grid-line {\n      stroke: var(--mj-bg-surface-sunken);\n      stroke-width: 1;\n    }\n\n    [_nghost-%COMP%]     .axis {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    [_nghost-%COMP%]     .axis path {\n      stroke: var(--mj-border-default);\n    }\n\n    [_nghost-%COMP%]     .axis .tick line {\n      stroke: var(--mj-border-default);\n    }\n\n    [_nghost-%COMP%]     .axis-y-left {\n      color: var(--mj-brand-primary);\n    }\n\n    [_nghost-%COMP%]     .axis-y-right {\n      color: var(--mj-status-success);\n    }\n\n    [_nghost-%COMP%]     .axis-label {\n      font-weight: 500;\n    }\n\n    @media (max-width: 768px) {\n      .chart-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .chart-legend[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .chart-controls[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n      }\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeSeriesChartComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-time-series-chart', template: `
    <div class="time-series-chart">
      @if (title) {
        <div class="chart-header">
          <h4 class="chart-title">{{ title }}</h4>
          @if (showLegend) {
            <div class="chart-legend">
              @for (metric of visibleMetrics; track metric) {
                <div 
                  class="legend-item"
                  (click)="toggleMetric(metric)"
                  [class.legend-item--disabled]="!isMetricVisible(metric)"
                >
                  <div 
                    class="legend-color"
                    [style.background-color]="getMetricColor(metric)"
                  ></div>
                  <span class="legend-label">{{ getMetricLabel(metric) }}</span>
                </div>
              }
            </div>
          }
        </div>
      }
      
      <div class="chart-container">
        <svg #chartSvg></svg>
        <div class="chart-tooltip" #tooltip style="display: none;"></div>
      </div>
    </div>
  `, styles: ["\n    .time-series-chart {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      padding: 12px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden; /* Ensure content doesn't overflow */\n    }\n\n    .chart-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 8px;\n      flex-wrap: wrap;\n      gap: 12px;\n      flex-shrink: 0; /* Prevent header from being squeezed */\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .chart-legend {\n      display: flex;\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .legend-item {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      cursor: pointer;\n      transition: opacity 0.2s ease;\n      font-size: 11px;\n    }\n\n    .legend-item--disabled {\n      opacity: 0.4;\n    }\n\n    .legend-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 2px;\n    }\n\n    .legend-label {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .chart-container {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      min-height: 0; /* Important: allows flex child to shrink below content size */\n    }\n\n    .chart-container svg {\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-tooltip {\n      position: absolute;\n      background: rgba(0, 0, 0, 0.8);\n      color: var(--mj-text-inverse);\n      padding: 8px 12px;\n      border-radius: 4px;\n      font-size: 12px;\n      pointer-events: none;\n      z-index: 1000;\n      max-width: 200px;\n    }\n\n\n    /* Chart styles */\n    :host ::ng-deep .chart-line {\n      fill: none;\n      stroke-width: 2;\n    }\n\n    :host ::ng-deep .chart-area {\n      fill-opacity: 0.1;\n    }\n\n    :host ::ng-deep .chart-dot {\n      transition: r 0.1s ease;\n    }\n\n    :host ::ng-deep .chart-dot:hover {\n      filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));\n    }\n\n    :host ::ng-deep .grid-line {\n      stroke: var(--mj-bg-surface-sunken);\n      stroke-width: 1;\n    }\n\n    :host ::ng-deep .axis {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    :host ::ng-deep .axis path {\n      stroke: var(--mj-border-default);\n    }\n\n    :host ::ng-deep .axis .tick line {\n      stroke: var(--mj-border-default);\n    }\n\n    :host ::ng-deep .axis-y-left {\n      color: var(--mj-brand-primary);\n    }\n\n    :host ::ng-deep .axis-y-right {\n      color: var(--mj-status-success);\n    }\n\n    :host ::ng-deep .axis-label {\n      font-weight: 500;\n    }\n\n    @media (max-width: 768px) {\n      .chart-header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      \n      .chart-legend {\n        width: 100%;\n        justify-content: flex-start;\n      }\n      \n      .chart-controls {\n        flex-wrap: wrap;\n      }\n    }\n  "] }]
    }], null, { data: [{
            type: Input
        }], title: [{
            type: Input
        }], config: [{
            type: Input
        }], showLegend: [{
            type: Input
        }], showControls: [{
            type: Input
        }], dataPointClick: [{
            type: Output
        }], timeRangeChange: [{
            type: Output
        }], chartSvg: [{
            type: ViewChild,
            args: ['chartSvg', { static: true }]
        }], tooltip: [{
            type: ViewChild,
            args: ['tooltip', { static: true }]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TimeSeriesChartComponent, { className: "TimeSeriesChartComponent", filePath: "src/AI/components/charts/time-series-chart.component.ts", lineNumber: 205 }); })();
//# sourceMappingURL=time-series-chart.component.js.map