// "apexcharts": "4.5.0"
import { __decorate, __metadata } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import ApexCharts from 'apexcharts';
import { keyed } from 'lit/directives/keyed.js';
import { roundNumber } from '../shared/utils/func/common';
let EaasChart = class EaasChart extends LitElement {
    constructor() {
        super(...arguments);
        this.data = [];
        this.seriesNames = [];
        this.seriesTypes = []; // 각 시리즈별 차트 타입
        this.chartType = 'bar';
        this.stacked = false; // 누적 차트 여부
        this.barColor = '#59AFF8';
        this.stackedColors = ['#59AFF8', '#00d167']; // 누적 차트 색상
        this.lineColors = [
            '#3e95cd',
            '#ff7f0e',
            '#2ca02c',
            '#d62728',
            '#9467bd',
            '#8c564b',
            '#e377c2',
            '#7f7f7f',
            '#bcbd22',
            '#17becf'
        ];
        this.mixedColors = []; // mixed 차트용 색상 배열
        this.hideLegend = false;
        this.chartKey = Date.now();
        this.prefix = ' kWh';
        this.yTickAmount = null;
        this.yStepSize = null;
        this.xLabelRotate = 0;
        this.lineMarkerSize = 3; // 라인 차트 마커 사이즈
        this.lineMarkerStrokeWidth = 2; // 라인 차트 마커 스트로크 너비
        this.lineStrokeWidth = 3; // 라인 차트 스트로크 너비
        this.barWidth = '70%'; // 막대 차트 굵기
        this.legendPosition = 'bottom'; // 범례 위치
    }
    createRenderRoot() {
        return this;
    }
    render() {
        if (this.data.length === 0)
            return '';
        return html `${keyed(this.chartKey, html `<div id="chart"></div>`)}`;
    }
    firstUpdated(_changedProperties) {
        this._createChart();
    }
    updated(changedProperties) {
        if (changedProperties.has('data') || changedProperties.has('chartType')) {
            if (this._chart) {
                this._chart.destroy();
            }
            this.chartKey = Date.now();
            this.updateComplete.then(() => {
                this._createChart();
            });
        }
    }
    _createChart() {
        const container = this.chartContainer;
        if (!this.data.length)
            return;
        // 첫 번째 데이터 항목의 values 길이를 확인하여 시리즈 수 결정
        const seriesCount = this.data?.[0]?.values?.length || 0;
        // 라벨 추출
        const labels = this.data?.map(item => item.label) || [];
        // 시리즈 데이터 구성
        const chartSeries = [];
        // 각 시리즈별로 데이터 구성
        for (let i = 0; i < seriesCount; i++) {
            // 시리즈 이름 결정: seriesNames가 있으면 사용, 없으면 기본 이름 생성
            const seriesName = this.seriesNames[i] || `Series ${i + 1}`;
            const seriesData = this.data.map(item => item.values[i]);
            const seriesType = this.seriesTypes[i] || this.chartType; // seriesTypes가 있으면 사용, 없으면 기본 chartType 사용
            chartSeries.push({
                name: seriesName,
                type: seriesType,
                data: seriesData
            });
        }
        const prefix = this.prefix;
        let chartColors = this.stacked ? this.stackedColors : [this.barColor];
        let chartStroke = { width: 0 };
        let chartMarkers = { size: 0 };
        if (this.chartType === 'mixed') {
            chartColors = this.mixedColors || this.lineColors;
            const defaultStrokeWidths = this.seriesTypes.map(type => (type === 'line' ? this.lineStrokeWidth : 0));
            const strokeWidths = Array.isArray(this.seriesStrokeWidths) && this.seriesStrokeWidths.length
                ? this.seriesStrokeWidths
                : defaultStrokeWidths;
            chartStroke = {
                width: strokeWidths,
                ...(Array.isArray(this.seriesDashArray) && this.seriesDashArray.length
                    ? { dashArray: this.seriesDashArray }
                    : {})
            };
            const defaultMarkerSizes = this.seriesTypes.map(type => (type === 'line' ? this.lineMarkerSize : 0));
            const markerSizes = Array.isArray(this.seriesMarkerSizes) && this.seriesMarkerSizes.length
                ? this.seriesMarkerSizes
                : defaultMarkerSizes;
            chartMarkers = {
                size: markerSizes, // 시리즈별 마커 사이즈
                strokeWidth: this.lineMarkerStrokeWidth || 2,
                // mixedColors가 있을 때 마커 색이 시리즈 색과 어긋나지 않도록 chartColors 사용
                strokeColors: chartColors,
                colors: this.lineMarkerCircleColor || chartColors
            };
        }
        else if (this.chartType === 'line') {
            chartColors = this.lineColors;
            chartStroke = {
                width: Array.isArray(this.seriesStrokeWidths) && this.seriesStrokeWidths.length
                    ? this.seriesStrokeWidths
                    : this.lineStrokeWidth || 2,
                ...(Array.isArray(this.seriesDashArray) && this.seriesDashArray.length
                    ? { dashArray: this.seriesDashArray }
                    : {})
            };
            chartMarkers = {
                size: Array.isArray(this.seriesMarkerSizes) && this.seriesMarkerSizes.length
                    ? this.seriesMarkerSizes
                    : this.lineMarkerSize,
                strokeWidth: this.lineMarkerStrokeWidth || 0,
                colors: this.lineMarkerCircleColor,
                strokeColors: this.lineColors
            };
        }
        const options = {
            chart: {
                type: this.chartType === 'mixed' ? 'line' : this.chartType, // mixed chart의 경우 기본 타입을 line으로 설정
                height: '100%',
                width: '100%',
                stacked: this.stacked, // 누적 차트 설정
                toolbar: {
                    show: false
                },
                animations: {
                    enabled: false
                },
                zoom: {
                    enabled: false
                }
            },
            series: chartSeries,
            xaxis: {
                categories: labels,
                labels: {
                    rotate: this.xLabelRotate,
                    hideOverlappingLabels: true,
                    showDuplicates: false,
                    style: {
                        colors: '#aebff0cc',
                        fontSize: '11px'
                    }
                },
                axisBorder: {
                    show: true,
                    color: '#aebff0cc'
                },
                axisTicks: {
                    show: true,
                    color: '#aebff0cc'
                },
                tickAmount: 6
            },
            yaxis: {
                // min: 0,
                labels: {
                    style: {
                        colors: '#aebff0cc',
                        fontSize: '11px'
                    },
                    formatter: function (value) {
                        return roundNumber(value, 1).toLocaleString() || '';
                    }
                },
                axisBorder: {
                    show: true,
                    color: '#aebff0cc'
                },
                axisTicks: {
                    show: true,
                    color: '#aebff0cc'
                },
                ...(this.yTickAmount ? { tickAmount: this.yTickAmount } : {}),
                ...(this.yStepSize ? { stepSize: this.yStepSize } : {})
            },
            grid: {
                padding: {
                    bottom: 0 // x축을 아래로 붙이기
                },
                yaxis: {
                    lines: {
                        show: true
                    }
                },
                borderColor: '#aebff040',
                strokeDashArray: 0.5
            },
            tooltip: {
                enabled: true,
                shared: true,
                intersect: false,
                theme: 'dark',
                style: {
                    fontSize: '12px'
                },
                x: {
                    show: true
                },
                y: {
                    formatter: function (value) {
                        return (roundNumber(value, 1).toLocaleString() || '') + prefix;
                    }
                }
            },
            plotOptions: {
                bar: {
                    distributed: false,
                    borderRadius: this.stacked ? 0 : 0, //5,
                    borderRadiusApplication: this.stacked ? 'around' : 'end',
                    borderRadiusWhenStacked: 'last',
                    columnWidth: this.barWidth, // 막대 차트 굵기 설정
                    ...(this.stacked ? { stacked: true } : {})
                }
            },
            dataLabels: {
                enabled: false,
                offsetY: this.chartType === 'line' ? -10 : 0,
                formatter: function (val) {
                    return roundNumber(Number(val), 1).toLocaleString() || '';
                }
            },
            colors: chartColors,
            stroke: chartStroke,
            markers: chartMarkers,
            legend: {
                show: !this.hideLegend,
                position: this.legendPosition,
                fontSize: '9px',
                labels: {
                    colors: '#ffffff' // 범례 폰트 색상을 흰색으로 설정
                },
                markers: {
                    size: 5
                }
            }
        };
        this._chart = new ApexCharts(container, options);
        this._chart?.render();
    }
};
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "data", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "seriesNames", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "seriesTypes", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChart.prototype, "chartType", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], EaasChart.prototype, "stacked", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChart.prototype, "barColor", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "stackedColors", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "lineColors", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "mixedColors", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], EaasChart.prototype, "hideLegend", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasChart.prototype, "chartKey", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChart.prototype, "prefix", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Object)
], EaasChart.prototype, "yTickAmount", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Object)
], EaasChart.prototype, "yStepSize", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasChart.prototype, "xLabelRotate", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasChart.prototype, "lineMarkerSize", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasChart.prototype, "lineMarkerStrokeWidth", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChart.prototype, "lineMarkerCircleColor", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasChart.prototype, "lineStrokeWidth", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "seriesStrokeWidths", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "seriesDashArray", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "seriesMarkerSizes", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChart.prototype, "barWidth", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", Object)
], EaasChart.prototype, "legendPosition", void 0);
__decorate([
    query('#chart'),
    __metadata("design:type", HTMLElement)
], EaasChart.prototype, "chartContainer", void 0);
EaasChart = __decorate([
    customElement('eaas-chart')
], EaasChart);
export { EaasChart };
//# sourceMappingURL=eaas-chart.js.map