import { h } from "@stencil/core";
import * as echarts from "echarts";
import dayjs from "dayjs";
import localeData from "dayjs/plugin/localeData";
import relativeTime from "dayjs/plugin/relativeTime";
import weekOfYear from "dayjs/plugin/weekOfYear";
import "dayjs/locale/es";
import "dayjs/locale/fr";
import "dayjs/locale/pt";
export class IticChart {
    async componentDidLoad() {
        try {
            dayjs.extend(relativeTime);
            dayjs.extend(localeData);
            dayjs.extend(weekOfYear);
            dayjs.locale('en');
            this.parsedGroups = JSON.parse(this.groups); // Parseamos el JSON a objeto
            this.initializeChart();
        }
        catch (error) {
            console.error('Error al parsear el prop "groups":', error);
        }
    }
    initializeChart() {
        const chartElement = this.el.shadowRoot.querySelector('#chart-container');
        this.chart = echarts.init(chartElement);
        const chartOptions = Object.assign(Object.assign({}, CHART_OPTIONS), { xAxis: Object.assign(Object.assign({}, CHART_OPTIONS.xAxis), { name: 'Duration (ms)' }), yAxis: Object.assign(Object.assign({}, CHART_OPTIONS.yAxis), { name: 'Voltage (% of nominal voltage)' }), series: [
                ...CHART_OPTIONS.series,
                ...this.parsedGroups.map(({ groupName, points, color }) => {
                    return {
                        type: 'scatter',
                        name: groupName,
                        data: points.map(mark => [mark.duration, mark.voltage, mark.ts]),
                        symbolSize: 12,
                        z: 4,
                        itemStyle: {
                            color,
                            opacity: 1,
                        },
                        tooltip: {
                            formatter: (serie) => {
                                const requiredInfo = {
                                    phase: groupName,
                                    duration: `${serie.value[0]} ms`,
                                    voltage: `${Math.round(serie.value[1] * 10) / 10}%`,
                                    ts: dayjs(serie.value[2]).format('DD MMM, HH:mm:ss.SSS'),
                                };
                                return Object.entries(Object.assign({}, requiredInfo))
                                    .map(([key, value]) => {
                                    const label = `${key}`;
                                    return ` <strong>${label}</strong>: ${value}`;
                                })
                                    .join('<br/>');
                            },
                        },
                    };
                }),
            ] });
        this.chart.setOption(chartOptions);
    }
    render() {
        return (h("div", { key: '778e42ea49075bbc24099fef45da8c3188c87ba4' }, h("div", { key: 'd78cae7650ca95f7fbfde7532094bab0e10f3f84', id: "chart-container", style: { width: '100%', height: '400px' } })));
    }
    static get is() { return "itic-chart"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["itic-chart.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["itic-chart.css"]
        };
    }
    static get properties() {
        return {
            "groups": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "point groups"
                },
                "getter": false,
                "setter": false,
                "attribute": "groups",
                "reflect": false
            }
        };
    }
    static get elementRef() { return "el"; }
}
const ITIC_CURVE_PROHIBITED_REGION = [
    [0.167, 500],
    [1, 200],
    [3, 140],
    [3, 120],
    [500, 120],
    [500, 110],
    [100000, 110],
];
const ITIC_CURVE_NODAMAGE_REGION = [
    [20, 0],
    [20, 70],
    [500, 70],
    [500, 80],
    [10000, 80],
    [10000, 90],
    [100000, 90],
];
const CHART_OPTIONS = {
    animation: false,
    grid: {
        right: '20px',
        left: '60px',
    },
    legend: {},
    tooltip: {},
    textStyle: {
        fontFamily: 'CDS-Regular, Arial',
    },
    xAxis: {
        type: 'log',
        min: 0.1,
        max: 100000,
        name: 'Duration (ms)',
        nameGap: 30,
        nameLocation: 'center',
        nameTextStyle: {
            fontSize: 16,
            fontWeight: 'bold',
        },
    },
    yAxis: {
        type: 'value',
        min: 500,
        max: 0,
        nameTextStyle: {
            fontSize: 16,
            fontWeight: 'bold',
        },
        name: 'Voltage (% of nominal voltage)',
        nameRotate: 90,
        nameGap: 40,
        nameLocation: 'center',
    },
    series: [
        {
            type: 'line',
            data: ITIC_CURVE_PROHIBITED_REGION,
            areaStyle: {
                origin: 'end',
                color: '#FFEDEA',
            },
            lineStyle: {
                color: '#000',
            },
            showSymbol: false,
            emphasis: {
                disabled: true,
            },
        },
        {
            type: 'line',
            data: ITIC_CURVE_NODAMAGE_REGION,
            areaStyle: {
                origin: 'start',
                color: '#FFF5DF',
            },
            showSymbol: false,
            lineStyle: {
                color: '#000',
            },
            emphasis: {
                disabled: true,
            },
        },
        {
            type: 'line',
            data: ITIC_CURVE_NODAMAGE_REGION,
            areaStyle: {
                origin: 100,
                color: '#DDFAF1',
            },
            showSymbol: false,
            lineStyle: {
                color: '#000',
            },
            emphasis: {
                disabled: true,
            },
        },
        {
            type: 'line',
            data: ITIC_CURVE_PROHIBITED_REGION,
            areaStyle: {
                origin: 100,
                color: '#DDFAF1',
            },
            showSymbol: false,
            lineStyle: {
                color: '#000',
            },
            emphasis: {
                disabled: true,
            },
        },
        {
            type: 'line',
            data: [
                [0.1, 500],
                [0.167, 500],
            ],
            areaStyle: {
                origin: 100,
                color: '#DDFAF1',
            },
            showSymbol: false,
            lineStyle: {
                color: 'transparent',
            },
            emphasis: {
                disabled: true,
            },
        },
        {
            type: 'line',
            data: [
                [0.1, 0],
                [20, 0],
            ],
            areaStyle: {
                origin: 100,
                color: '#DDFAF1',
            },
            showSymbol: false,
            lineStyle: {
                color: 'transparent',
            },
            emphasis: {
                disabled: true,
            },
        },
    ],
};
//# sourceMappingURL=index.js.map
