import { Component, Input, ViewChild } from '@angular/core';
import * as d3 from 'd3';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
const _c0 = ["chartSvg"];
const _c1 = ["tooltip"];
const _c2 = ["legendGradient"];
export class PerformanceHeatmapComponent {
    data = [];
    title;
    config = {};
    chartSvg;
    tooltip;
    legendGradient;
    svg;
    width = 0;
    height = 0;
    margin = { top: 40, right: 20, bottom: 60, left: 80 };
    // Chart configuration
    defaultColorScheme = [];
    getColorScheme() {
        const style = getComputedStyle(document.documentElement);
        const surface = style.getPropertyValue('--mj-bg-surface').trim() || '#ffffff';
        const brandPrimary = style.getPropertyValue('--mj-brand-primary').trim() || '#0076b6';
        // Build a 9-stop scale from surface white through brand primary to dark brand
        const toSurface = d3.interpolateRgb(surface, brandPrimary);
        const toDark = d3.interpolateRgb(brandPrimary, d3.rgb(brandPrimary).darker(2).formatHex());
        return [
            surface,
            toSurface(0.15),
            toSurface(0.3),
            toSurface(0.5),
            toSurface(0.7),
            toSurface(0.85),
            brandPrimary,
            toDark(0.5),
            toDark(1),
        ];
    }
    // Data processing
    selectedMetric = 'performance';
    processedData = [];
    uniqueAgents = [];
    uniqueModels = [];
    minValue = 0;
    maxValue = 1;
    ngOnInit() {
        this.applyConfig();
    }
    ngAfterViewInit() {
        this.initChart();
        this.processData();
        this.updateChart();
    }
    ngOnChanges(changes) {
        if (changes['data'] && !changes['data'].firstChange) {
            this.processData();
            this.updateChart();
        }
        if (changes['config'] && !changes['config'].firstChange) {
            this.applyConfig();
            this.updateChart();
        }
    }
    ngOnDestroy() {
        d3.select(window).on('resize.heatmap', null);
    }
    applyConfig() {
        const config = this.config;
        this.margin = { ...this.margin, ...config.margin };
    }
    initChart() {
        this.svg = d3.select(this.chartSvg.nativeElement);
        this.initLegend();
        // Set up responsive behavior
        d3.select(window).on('resize.heatmap', () => this.updateChart());
    }
    processData() {
        if (!this.data || this.data.length === 0) {
            this.processedData = [];
            this.uniqueAgents = [];
            this.uniqueModels = [];
            return;
        }
        // Calculate performance scores and process data
        this.processedData = this.data.map(d => ({
            ...d,
            value: this.calculatePerformanceScore(d)
        }));
        // Get unique agents and models
        this.uniqueAgents = Array.from(new Set(this.processedData.map(d => d.agent))).sort();
        this.uniqueModels = Array.from(new Set(this.processedData.map(d => d.model))).sort();
        // Update value range based on selected metric
        this.updateValueRange();
    }
    calculatePerformanceScore(data) {
        // Normalize avgTime (lower is better, scale 0-1)
        const maxTime = Math.max(...this.data.map(d => d.avgTime));
        const normalizedTime = maxTime > 0 ? 1 - (data.avgTime / maxTime) : 1;
        // Success rate is already 0-1
        const normalizedSuccess = data.successRate;
        // Weighted combination (60% success rate, 40% speed)
        return normalizedSuccess * 0.6 + normalizedTime * 0.4;
    }
    updateValueRange() {
        let values;
        switch (this.selectedMetric) {
            case 'avgTime':
                values = this.processedData.map(d => d.avgTime);
                break;
            case 'successRate':
                values = this.processedData.map(d => d.successRate);
                break;
            case 'performance':
            default:
                values = this.processedData.map(d => d.value || 0);
                break;
        }
        this.minValue = Math.min(...values);
        this.maxValue = Math.max(...values);
        // Ensure reasonable range
        if (this.minValue === this.maxValue) {
            this.maxValue = this.minValue + 1;
        }
    }
    updateChart() {
        if (!this.processedData || this.processedData.length === 0) {
            this.svg.selectAll('*').remove();
            return;
        }
        this.calculateDimensions();
        this.svg.selectAll('*').remove();
        this.drawChart();
        this.updateLegend();
    }
    calculateDimensions() {
        const container = this.chartSvg.nativeElement.parentElement;
        this.width = (this.config.width || container.clientWidth) - this.margin.left - this.margin.right;
        this.height = (this.config.height || Math.max(300, this.uniqueAgents.length * 30 + 100)) - this.margin.top - this.margin.bottom;
        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.scaleBand()
            .domain(this.uniqueModels)
            .range([0, this.width])
            .padding(0.05);
        const yScale = d3.scaleBand()
            .domain(this.uniqueAgents)
            .range([0, this.height])
            .padding(0.05);
        const colorScale = d3.scaleSequential()
            .domain([this.minValue, this.maxValue])
            .interpolator(d3.interpolateBlues);
        // Draw cells
        const cells = g.selectAll('.heatmap-cell')
            .data(this.processedData)
            .enter().append('rect')
            .attr('class', 'heatmap-cell')
            .attr('x', d => xScale(d.model) || 0)
            .attr('y', d => yScale(d.agent) || 0)
            .attr('width', xScale.bandwidth())
            .attr('height', yScale.bandwidth())
            .attr('fill', d => colorScale(this.getMetricValue(d)))
            .on('mouseover', (event, d) => this.showTooltip(event, d))
            .on('mouseout', () => this.hideTooltip());
        // Add animation
        if (this.config.animationDuration !== 0) {
            cells
                .attr('opacity', 0)
                .transition()
                .duration(this.config.animationDuration || 500)
                .delay((d, i) => i * 20)
                .attr('opacity', 1);
        }
        // Draw axes
        this.drawAxes(g, xScale, yScale);
        // Add value labels on cells (for smaller datasets)
        if (this.processedData.length <= 50) {
            g.selectAll('.cell-label')
                .data(this.processedData)
                .enter().append('text')
                .attr('class', 'cell-label')
                .attr('x', d => (xScale(d.model) || 0) + xScale.bandwidth() / 2)
                .attr('y', d => (yScale(d.agent) || 0) + yScale.bandwidth() / 2)
                .attr('text-anchor', 'middle')
                .attr('dominant-baseline', 'middle')
                .attr('font-size', '10px')
                .attr('font-weight', '500')
                .attr('fill', d => this.getTextColor(colorScale(this.getMetricValue(d))))
                .text(d => this.formatCellValue(this.getMetricValue(d)));
        }
    }
    drawAxes(g, xScale, yScale) {
        // X axis (models)
        g.append('g')
            .attr('class', 'axis axis-x')
            .attr('transform', `translate(0,${this.height})`)
            .call(d3.axisBottom(xScale))
            .selectAll('text')
            .style('text-anchor', 'end')
            .attr('dx', '-.8em')
            .attr('dy', '.15em')
            .attr('transform', 'rotate(-45)');
        // Y axis (agents)
        g.append('g')
            .attr('class', 'axis axis-y')
            .call(d3.axisLeft(yScale));
        // Axis labels
        g.append('text')
            .attr('class', 'axis-label')
            .attr('transform', 'rotate(-90)')
            .attr('y', 0 - this.margin.left)
            .attr('x', 0 - (this.height / 2))
            .attr('dy', '1em')
            .style('text-anchor', 'middle')
            .text('MJ: AI Agents');
        g.append('text')
            .attr('class', 'axis-label')
            .attr('transform', `translate(${this.width / 2}, ${this.height + this.margin.bottom - 10})`)
            .style('text-anchor', 'middle')
            .text('MJ: AI Models');
    }
    getMetricValue(data) {
        switch (this.selectedMetric) {
            case 'avgTime':
                return data.avgTime;
            case 'successRate':
                return data.successRate;
            case 'performance':
            default:
                return data.value || 0;
        }
    }
    getTextColor(backgroundColor) {
        // Convert color to RGB and calculate luminance
        const rgb = d3.rgb(backgroundColor);
        const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
        const style = getComputedStyle(document.documentElement);
        const darkText = style.getPropertyValue('--mj-text-primary').trim() || '#1e293b';
        const lightText = style.getPropertyValue('--mj-text-inverse').trim() || '#ffffff';
        return luminance > 0.5 ? darkText : lightText;
    }
    formatCellValue(value) {
        switch (this.selectedMetric) {
            case 'avgTime':
                return `${(value / 1000).toFixed(1)}s`;
            case 'successRate':
                return `${(value * 100).toFixed(0)}%`;
            case 'performance':
            default:
                return value.toFixed(2);
        }
    }
    showTooltip(event, data) {
        const tooltip = d3.select(this.tooltip.nativeElement);
        const content = `
      <div><strong>${data.agent} × ${data.model}</strong></div>
      <div>Performance Score: ${(data.value || 0).toFixed(3)}</div>
      <div>Success Rate: ${(data.successRate * 100).toFixed(1)}%</div>
      <div>Avg Time: ${(data.avgTime / 1000).toFixed(2)}s</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');
    }
    initLegend() {
        // Create gradient for legend
        const gradient = d3.select(this.legendGradient.nativeElement)
            .append('svg')
            .attr('width', '100%')
            .attr('height', '100%')
            .append('defs')
            .append('linearGradient')
            .attr('id', 'legend-gradient')
            .attr('x1', '0%')
            .attr('x2', '100%');
        // Add color stops
        const colorScheme = this.config.colorScheme || this.getColorScheme();
        colorScheme.forEach((color, i) => {
            gradient.append('stop')
                .attr('offset', `${(i / (colorScheme.length - 1)) * 100}%`)
                .attr('stop-color', color);
        });
        d3.select(this.legendGradient.nativeElement)
            .select('svg')
            .append('rect')
            .attr('width', '100%')
            .attr('height', '100%')
            .style('fill', 'url(#legend-gradient)');
    }
    updateLegend() {
        // Update gradient colors based on current color scale
        const gradient = d3.select(this.legendGradient.nativeElement)
            .select('linearGradient');
        gradient.selectAll('stop').remove();
        const colorScale = d3.scaleSequential()
            .domain([this.minValue, this.maxValue])
            .interpolator(d3.interpolateBlues);
        // Create 10 color stops
        for (let i = 0; i <= 10; i++) {
            const t = i / 10;
            const value = this.minValue + t * (this.maxValue - this.minValue);
            gradient.append('stop')
                .attr('offset', `${t * 100}%`)
                .attr('stop-color', colorScale(value));
        }
    }
    getLegendTitle() {
        switch (this.selectedMetric) {
            case 'avgTime':
                return 'Execution Time';
            case 'successRate':
                return 'Success Rate';
            case 'performance':
            default:
                return 'Performance Score';
        }
    }
    formatLegendValue(value) {
        switch (this.selectedMetric) {
            case 'avgTime':
                return `${(value / 1000).toFixed(1)}s`;
            case 'successRate':
                return `${(value * 100).toFixed(0)}%`;
            case 'performance':
            default:
                return value.toFixed(2);
        }
    }
    static ɵfac = function PerformanceHeatmapComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PerformanceHeatmapComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerformanceHeatmapComponent, selectors: [["app-performance-heatmap"]], viewQuery: function PerformanceHeatmapComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 7)(_c1, 7)(_c2, 7);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartSvg = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tooltip = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.legendGradient = _t.first);
        } }, inputs: { data: "data", title: "title", config: "config" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 30, vars: 5, consts: [["chartSvg", ""], ["tooltip", ""], ["legendGradient", ""], [1, "performance-heatmap"], [1, "chart-header"], [1, "chart-title"], [1, "chart-controls"], [1, "metric-selector"], [3, "ngModelChange", "change", "ngModel"], ["value", "performance"], ["value", "avgTime"], ["value", "successRate"], [1, "chart-container"], [1, "chart-tooltip", 2, "display", "none"], [1, "chart-legend"], [1, "legend-title"], [1, "legend-gradient"], [1, "legend-labels"], [1, "legend-min"], [1, "legend-max"]], template: function PerformanceHeatmapComponent_Template(rf, ctx) { if (rf & 1) {
            const _r1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "h4", 5);
            i0.ɵɵtext(3);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "div", 6)(5, "div", 7)(6, "label");
            i0.ɵɵtext(7, "Metric:");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(8, "select", 8);
            i0.ɵɵtwoWayListener("ngModelChange", function PerformanceHeatmapComponent_Template_select_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedMetric, $event) || (ctx.selectedMetric = $event); return i0.ɵɵresetView($event); });
            i0.ɵɵlistener("change", function PerformanceHeatmapComponent_Template_select_change_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateChart()); });
            i0.ɵɵelementStart(9, "option", 9);
            i0.ɵɵtext(10, "Performance Score");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(11, "option", 10);
            i0.ɵɵtext(12, "Avg Execution Time");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(13, "option", 11);
            i0.ɵɵtext(14, "Success Rate");
            i0.ɵɵelementEnd()()()()();
            i0.ɵɵelementStart(15, "div", 12);
            i0.ɵɵnamespaceSVG();
            i0.ɵɵelement(16, "svg", null, 0);
            i0.ɵɵnamespaceHTML();
            i0.ɵɵelement(18, "div", 13, 1);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(20, "div", 14)(21, "div", 15);
            i0.ɵɵtext(22);
            i0.ɵɵelementEnd();
            i0.ɵɵelement(23, "div", 16, 2);
            i0.ɵɵelementStart(25, "div", 17)(26, "span", 18);
            i0.ɵɵtext(27);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(28, "span", 19);
            i0.ɵɵtext(29);
            i0.ɵɵelementEnd()()()();
        } if (rf & 2) {
            i0.ɵɵadvance(3);
            i0.ɵɵtextInterpolate(ctx.title || "Agent vs Model Performance");
            i0.ɵɵadvance(5);
            i0.ɵɵtwoWayProperty("ngModel", ctx.selectedMetric);
            i0.ɵɵadvance(14);
            i0.ɵɵtextInterpolate(ctx.getLegendTitle());
            i0.ɵɵadvance(5);
            i0.ɵɵtextInterpolate(ctx.formatLegendValue(ctx.minValue));
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate(ctx.formatLegendValue(ctx.maxValue));
        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: [".performance-heatmap[_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: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n      flex-wrap: wrap;\n      gap: 12px;\n    }\n\n    .chart-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .chart-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n    }\n\n    .metric-selector[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .metric-selector[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .metric-selector[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 4px 8px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 11px;\n      background: var(--mj-bg-surface);\n    }\n\n    .chart-container[_ngcontent-%COMP%] {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      min-height: 200px;\n    }\n\n    .chart-tooltip[_ngcontent-%COMP%] {\n      position: absolute;\n      background: rgba(0, 0, 0, 0.85);\n      color: var(--mj-text-inverse);\n      padding: 10px 12px;\n      border-radius: 4px;\n      font-size: 12px;\n      pointer-events: none;\n      z-index: 1000;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n      max-width: 250px;\n    }\n\n    .chart-legend[_ngcontent-%COMP%] {\n      margin-top: 16px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 11px;\n    }\n\n    .legend-title[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .legend-gradient[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 16px;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .legend-labels[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      min-width: 80px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    \n\n    [_nghost-%COMP%]     .heatmap-cell {\n      stroke: var(--mj-bg-surface);\n      stroke-width: 1;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    [_nghost-%COMP%]     .heatmap-cell:hover {\n      stroke: var(--mj-text-primary);\n      stroke-width: 2;\n    }\n\n    [_nghost-%COMP%]     .axis {\n      font-size: 10px;\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 .tick text {\n      fill: var(--mj-text-muted);\n    }\n\n    [_nghost-%COMP%]     .axis-label {\n      font-size: 11px;\n      font-weight: 500;\n      fill: var(--mj-text-primary);\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: var(--mj-border-default);\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        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n      }\n      \n      .legend-gradient[_ngcontent-%COMP%] {\n        width: 100%;\n        max-width: 200px;\n      }\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerformanceHeatmapComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-performance-heatmap', template: `
    <div class="performance-heatmap">
      <div class="chart-header">
        <h4 class="chart-title">{{ title || 'Agent vs Model Performance' }}</h4>
        <div class="chart-controls">
          <div class="metric-selector">
            <label>Metric:</label>
            <select [(ngModel)]="selectedMetric" (change)="updateChart()">
              <option value="performance">Performance Score</option>
              <option value="avgTime">Avg Execution Time</option>
              <option value="successRate">Success Rate</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="chart-container">
        <svg #chartSvg></svg>
        <div class="chart-tooltip" #tooltip style="display: none;"></div>
      </div>
      
      <div class="chart-legend">
        <div class="legend-title">{{ getLegendTitle() }}</div>
        <div class="legend-gradient" #legendGradient></div>
        <div class="legend-labels">
          <span class="legend-min">{{ formatLegendValue(minValue) }}</span>
          <span class="legend-max">{{ formatLegendValue(maxValue) }}</span>
        </div>
      </div>
    </div>
  `, styles: ["\n    .performance-heatmap {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      padding: 20px;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .chart-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n      flex-wrap: wrap;\n      gap: 12px;\n    }\n\n    .chart-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .chart-controls {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n    }\n\n    .metric-selector {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n    }\n\n    .metric-selector label {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .metric-selector select {\n      padding: 4px 8px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 11px;\n      background: var(--mj-bg-surface);\n    }\n\n    .chart-container {\n      flex: 1;\n      position: relative;\n      overflow: hidden;\n      min-height: 200px;\n    }\n\n    .chart-tooltip {\n      position: absolute;\n      background: rgba(0, 0, 0, 0.85);\n      color: var(--mj-text-inverse);\n      padding: 10px 12px;\n      border-radius: 4px;\n      font-size: 12px;\n      pointer-events: none;\n      z-index: 1000;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n      max-width: 250px;\n    }\n\n    .chart-legend {\n      margin-top: 16px;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      font-size: 11px;\n    }\n\n    .legend-title {\n      color: var(--mj-text-muted);\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .legend-gradient {\n      flex: 1;\n      height: 16px;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .legend-labels {\n      display: flex;\n      justify-content: space-between;\n      min-width: 80px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    /* Chart styles */\n    :host ::ng-deep .heatmap-cell {\n      stroke: var(--mj-bg-surface);\n      stroke-width: 1;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    :host ::ng-deep .heatmap-cell:hover {\n      stroke: var(--mj-text-primary);\n      stroke-width: 2;\n    }\n\n    :host ::ng-deep .axis {\n      font-size: 10px;\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 .tick text {\n      fill: var(--mj-text-muted);\n    }\n\n    :host ::ng-deep .axis-label {\n      font-size: 11px;\n      font-weight: 500;\n      fill: var(--mj-text-primary);\n    }\n\n    .no-data {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      color: var(--mj-text-disabled);\n      gap: 12px;\n    }\n\n    .no-data i {\n      font-size: 32px;\n      color: var(--mj-border-default);\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        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n      }\n      \n      .legend-gradient {\n        width: 100%;\n        max-width: 200px;\n      }\n    }\n  "] }]
    }], null, { data: [{
            type: Input
        }], title: [{
            type: Input
        }], config: [{
            type: Input
        }], chartSvg: [{
            type: ViewChild,
            args: ['chartSvg', { static: true }]
        }], tooltip: [{
            type: ViewChild,
            args: ['tooltip', { static: true }]
        }], legendGradient: [{
            type: ViewChild,
            args: ['legendGradient', { static: true }]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceHeatmapComponent, { className: "PerformanceHeatmapComponent", filePath: "src/AI/components/charts/performance-heatmap.component.ts", lineNumber: 227 }); })();
//# sourceMappingURL=performance-heatmap.component.js.map