cats4u-charts 0.0.1

package/dist/charts-lib/fesm2022/charts-lib.mjs

@@ -0,0 +1,3418 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, effect, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, ViewContainerRef, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as echarts from 'echarts';
+import { Subject } from 'rxjs';
+
+class ClickEvent {
+    seriesName = '';
+    value = undefined;
+    name = '';
+    dataIndex = -1;
+    seriesIndex = -1;
+}
+class ChartsLibType {
+    chartType = 'bar';
+    columns = [];
+    data = [];
+    themeName = 'default';
+    colorsScheme;
+    chartOptionsConfig;
+}
+class OptionsConfig {
+    title = {
+        show: true,
+        text: '',
+        left: 'center',
+        textStyle: { fontSize: 16 },
+    };
+    legend = { show: true };
+    tooltip = { trigger: 'axis', axisPointer: { type: 'shadow' } };
+    xAxis = {
+        type: 'category',
+        data: [], // Populated dynamically
+        axisLabel: { rotate: 45, fontSize: 10 },
+        axisTick: { show: false },
+    };
+    yAxis = {
+        type: 'value',
+        axisLabel: { fontSize: 12 },
+    };
+    dataZoom = [
+        {
+            type: 'slider',
+            start: 0,
+            end: 100,
+            height: 25,
+            bottom: 20,
+            textStyle: { fontSize: 12 },
+        },
+        {
+            type: 'inside', // Mouse wheel/pinch zoom
+            start: 0,
+            end: 10,
+        },
+    ];
+    series = [];
+    grid = {
+        left: '5%',
+        right: '5%',
+        containLabel: true,
+    };
+}
+class ContextMenuListItem {
+    label = '';
+    options = [];
+    action;
+    disabled = false;
+}
+
+class ChartService {
+    themeSignal = signal('default', ...(ngDevMode ? [{ debugName: "themeSignal" }] : []));
+    theme = this.themeSignal.asReadonly();
+    newsubject = new Subject();
+    dataSignal = signal([], ...(ngDevMode ? [{ debugName: "dataSignal" }] : []));
+    data = this.dataSignal.asReadonly();
+    columnsSignal = signal([], ...(ngDevMode ? [{ debugName: "columnsSignal" }] : []));
+    columns = this.columnsSignal.asReadonly();
+    chartOptionsConfigSignal = signal({}, ...(ngDevMode ? [{ debugName: "chartOptionsConfigSignal" }] : []));
+    chartOptionsConfig = this.chartOptionsConfigSignal.asReadonly();
+    eventSignal = signal(new ClickEvent(), ...(ngDevMode ? [{ debugName: "eventSignal" }] : []));
+    clickEvent = this.eventSignal.asReadonly();
+    contextMenuEventSignal = signal(new ClickEvent(), ...(ngDevMode ? [{ debugName: "contextMenuEventSignal" }] : []));
+    contextMenuEvent = this.contextMenuEventSignal.asReadonly();
+    contextMenuListSignal = signal([], ...(ngDevMode ? [{ debugName: "contextMenuListSignal" }] : []));
+    contextMenuList = this.contextMenuListSignal.asReadonly();
+    drillByConfigSignal = signal(new ClickEvent(), ...(ngDevMode ? [{ debugName: "drillByConfigSignal" }] : []));
+    drillByConfig = this.drillByConfigSignal.asReadonly();
+    loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : []));
+    loading = this.loadingSignal.asReadonly();
+    contextMenu = null;
+    isDarkTheme = computed(() => this.theme() === 'dark', ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    constructor() { }
+    setTheme(themeName) {
+        this.themeSignal.set(themeName);
+    }
+    setData(data) {
+        this.dataSignal.set(data);
+    }
+    setColumns(columns) {
+        this.columnsSignal.set(columns);
+    }
+    setChartOptionsConfig(config) {
+        this.chartOptionsConfigSignal.set(config);
+    }
+    setContextMenuList(contextMenu) {
+        this.contextMenuListSignal.set(contextMenu);
+    }
+    setLoading(isLoading) {
+        this.loadingSignal.set(isLoading);
+    }
+    getCurrentTheme() {
+        return this.themeSignal();
+    }
+    getCurrentData() {
+        return this.dataSignal();
+    }
+    getCurrentColumns() {
+        return this.columnsSignal();
+    }
+    handleClick(event) {
+        this.eventSignal.set({
+            seriesName: event?.seriesName,
+            value: event?.value,
+            name: event?.name,
+            dataIndex: event?.dataIndex,
+            seriesIndex: event?.seriesIndex,
+        });
+    }
+    getClickEvent() {
+        return this.eventSignal();
+    }
+    showContextMenu(x, y, params, chartContainer) {
+        // Remove existing menu
+        this.hideContextMenu();
+        // Create menu element
+        this.contextMenu = document.createElement('div');
+        this.contextMenu.style.position = 'absolute';
+        this.contextMenu.style.left = `${x}px`;
+        this.contextMenu.style.top = `${y}px`;
+        this.contextMenu.style.background = 'white';
+        this.contextMenu.style.border = '1px solid #ccc';
+        this.contextMenu.style.borderRadius = '6px';
+        this.contextMenu.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
+        this.contextMenu.style.zIndex = '10000000';
+        this.contextMenu.style.padding = '5px 0';
+        this.contextMenu.style.minWidth = '120px';
+        // Define menu options (customize as needed)
+        const options = [
+            {
+                label: 'Drill By',
+                options: this.columns().map((column) => ({
+                    label: column,
+                    action: () => {
+                        this.drillByHandler(column);
+                    },
+                })),
+                action: () => { },
+            },
+            {
+                label: 'Drill Down',
+                action: () => this.drillDownHandler(params),
+                disabled: !params,
+            },
+            ...this.contextMenuList(),
+        ];
+        let activeSubMenu = null;
+        // Add options to menu
+        options.forEach((option, index) => {
+            const item = document.createElement('div');
+            item.innerHTML = option.options
+                ? `<div style="display: flex; justify-content: space-between;align-items:center;"><label>${option.label}</label><label style="font-weight:600; margin-left: 1rem;">></label></div>`
+                : `<label>${option.label}</label>`;
+            item.style.padding = '8px 12px';
+            item.style.cursor = 'pointer';
+            if (option.disabled) {
+                item.style.opacity = '0.5';
+                item.style.cursor = 'not-allowed';
+            }
+            if (index < options.length - 1) {
+                item.style.borderBottom = '1px solid #e1e1e1';
+            }
+            item.style.fontSize = '14px';
+            item.style.position = 'relative';
+            item.onmouseover = (event) => {
+                if (!option.disabled) {
+                    item.style.background = '#cee2ff';
+                    if (activeSubMenu) {
+                        activeSubMenu.remove();
+                        activeSubMenu = null;
+                    }
+                    if (option.options) {
+                        activeSubMenu = document.createElement('div');
+                        activeSubMenu.style.position = 'absolute';
+                        activeSubMenu.style.left = `${item.offsetWidth + 4}px`; // Position to the right of the item
+                        activeSubMenu.style.top = '0px'; // Align with the top of the item
+                        activeSubMenu.style.background = 'white';
+                        activeSubMenu.style.border = '1px solid #ccc';
+                        activeSubMenu.style.borderRadius = '6px';
+                        activeSubMenu.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
+                        activeSubMenu.style.zIndex = '10000001'; // Higher than main menu
+                        activeSubMenu.style.padding = '5px 0';
+                        activeSubMenu.style.minWidth = '120px';
+                        // Add submenu items
+                        option.options.forEach((subOption, idx) => {
+                            const subItem = document.createElement('div');
+                            subItem.textContent = subOption.label;
+                            subItem.style.padding = '8px 12px';
+                            subItem.style.cursor = 'pointer';
+                            if (option.options && idx < option.options.length - 1) {
+                                subItem.style.borderBottom = '1px solid #e1e1e1';
+                            }
+                            subItem.style.fontSize = '14px';
+                            subItem.onmouseover = () => {
+                                subItem.style.background = '#cee2ff';
+                            };
+                            subItem.onmouseout = () => (subItem.style.background = 'white');
+                            subItem.onclick = () => {
+                                if (subOption.action) {
+                                    subOption.action(params
+                                        ? {
+                                            seriesName: params?.seriesName,
+                                            value: params?.value,
+                                            name: params?.name,
+                                            dataIndex: params?.dataIndex,
+                                            seriesIndex: params?.seriesIndex,
+                                        }
+                                        : undefined);
+                                }
+                                this.hideContextMenu();
+                                this.resetContextEvent();
+                            };
+                            activeSubMenu.appendChild(subItem);
+                        });
+                        if (this.contextMenu) {
+                            this.contextMenu.appendChild(activeSubMenu);
+                        }
+                    }
+                }
+            };
+            item.onmouseout = (event) => {
+                if (!option.disabled) {
+                    item.style.background = 'white';
+                }
+            };
+            item.onclick = () => {
+                if (!option.options && !option.disabled) {
+                    if (option.action) {
+                        option.action();
+                    }
+                    this.hideContextMenu();
+                    this.resetContextEvent();
+                }
+            };
+            if (this.contextMenu) {
+                this.contextMenu.appendChild(item);
+            }
+        });
+        // Append to chart container
+        chartContainer.nativeElement.appendChild(this.contextMenu);
+    }
+    openContextMenu(params, chartContainer, mouseEvent) {
+        if (params) {
+            this.contextMenuEventSignal.set({
+                seriesName: params?.seriesName,
+                value: params?.value,
+                name: params?.name,
+                dataIndex: params?.dataIndex,
+                seriesIndex: params?.seriesIndex,
+            });
+        }
+        else {
+            this.resetContextEvent();
+        }
+        const event = mouseEvent || params?.event?.event;
+        event?.preventDefault();
+        if (!event)
+            return;
+        const rect = chartContainer.nativeElement.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        // Create or update the menu
+        this.showContextMenu(x, y, params, chartContainer);
+    }
+    hideContextMenu() {
+        if (this.contextMenu) {
+            this.contextMenu.remove();
+            this.contextMenu = null;
+        }
+    }
+    resetContextEvent() {
+        this.contextMenuEventSignal.set(new ClickEvent());
+    }
+    drillDownHandler(params) {
+        if (params) {
+            this.eventSignal.set({
+                seriesName: params?.seriesName,
+                value: params?.value,
+                name: params?.name,
+                dataIndex: params?.dataIndex,
+                seriesIndex: params?.seriesIndex,
+            });
+        }
+    }
+    drillByHandler(columnName = '') {
+        const params = {
+            seriesName: columnName,
+            value: undefined,
+            name: '',
+            dataIndex: -1,
+            seriesIndex: -1,
+        };
+        this.drillByConfigSignal.set(params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const defaultTheme = {
+    color: [
+        '#5470c6',
+        '#91cc75',
+        '#fac858',
+        '#ee6666',
+        '#73c0de',
+        '#3ba272',
+        '#fc8452',
+        '#9a60b4',
+        '#ea7ccc',
+    ],
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#464646',
+        },
+        subtextStyle: {
+            color: '#6E7079',
+        },
+    },
+    line: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+    },
+    radar: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+    },
+    bar: {
+        itemStyle: {
+            barBorderWidth: 0,
+            barBorderColor: '#ccc',
+        },
+    },
+    pie: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    scatter: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    parallel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    sankey: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    funnel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    gauge: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            color: '#eb5454',
+            color0: '#47b262',
+            borderColor: '#eb5454',
+            borderColor0: '#47b262',
+            borderWidth: 1,
+        },
+    },
+    graph: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+        lineStyle: {
+            width: 1,
+            color: '#aaa',
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+        color: [
+            '#5470c6',
+            '#91cc75',
+            '#fac858',
+            '#ee6666',
+            '#73c0de',
+            '#3ba272',
+            '#fc8452',
+            '#9a60b4',
+            '#ea7ccc',
+        ],
+        label: {
+            color: '#eee',
+        },
+    },
+    map: {
+        itemStyle: {
+            areaColor: '#eee',
+            borderColor: '#444',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#000',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)',
+                borderColor: '#444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            areaColor: '#eee',
+            borderColor: '#444',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#000',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)',
+                borderColor: '#444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#6E7079',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#6E7079',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#6E7079',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#E0E6F1'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: false,
+            lineStyle: {
+                color: '#6E7079',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#6E7079',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#6E7079',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#E0E6F1'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: false,
+            lineStyle: {
+                color: '#6E7079',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#6E7079',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#6E7079',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#E0E6F1'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#6E7079',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#6E7079',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#6E7079',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#E0E6F1'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: '#999',
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#333',
+        },
+        left: 'center',
+        right: 'auto',
+        top: 0,
+        bottom: 10,
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#ccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#ccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#DAE1F5',
+            width: 2,
+        },
+        itemStyle: {
+            color: '#A4B1D7',
+            borderWidth: 1,
+        },
+        controlStyle: {
+            color: '#A4B1D7',
+            borderColor: '#A4B1D7',
+            borderWidth: 1,
+        },
+        checkpointStyle: {
+            color: '#316bf3',
+            borderColor: '#fff',
+        },
+        label: {
+            color: '#A4B1D7',
+        },
+        emphasis: {
+            itemStyle: {
+                color: '#FFF',
+            },
+            controlStyle: {
+                color: '#A4B1D7',
+                borderColor: '#A4B1D7',
+                borderWidth: 1,
+            },
+            label: {
+                color: '#A4B1D7',
+            },
+        },
+    },
+    visualMap: {
+        color: ['#bf444c', '#d88273', '#f6efa6'],
+    },
+    markPoint: {
+        label: {
+            color: '#eee',
+        },
+        emphasis: {
+            label: {
+                color: '#eee',
+            },
+        },
+    },
+    grid: {
+        left: '10%',
+        right: '10%',
+        top: 60,
+        bottom: 70,
+    },
+};
+echarts.registerTheme('vintage', defaultTheme.default ?? defaultTheme);
+
+const vintageTheme = {
+    color: [
+        '#d87c7c',
+        '#919e8b',
+        '#d7ab82',
+        '#6e7074',
+        '#61a0a8',
+        '#efa18d',
+        '#787464',
+        '#cc7e63',
+        '#724e58',
+        '#4b565b',
+    ],
+    backgroundColor: 'rgba(254,248,239,1)',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#333333',
+        },
+        subtextStyle: {
+            color: '#aaa',
+        },
+    },
+    line: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+    },
+    radar: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+    },
+    bar: {
+        itemStyle: {
+            barBorderWidth: 0,
+            barBorderColor: '#ccc',
+        },
+    },
+    pie: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    scatter: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    parallel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    sankey: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    funnel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    gauge: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            color: '#c23531',
+            color0: '#314656',
+            borderColor: '#c23531',
+            borderColor0: '#314656',
+            borderWidth: 1,
+        },
+    },
+    graph: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+        lineStyle: {
+            width: 1,
+            color: '#aaa',
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+        color: [
+            '#d87c7c',
+            '#919e8b',
+            '#d7ab82',
+            '#6e7074',
+            '#61a0a8',
+            '#efa18d',
+            '#787464',
+            '#cc7e63',
+            '#724e58',
+            '#4b565b',
+        ],
+        label: {
+            color: '#eee',
+        },
+    },
+    map: {
+        itemStyle: {
+            areaColor: '#eeeeee',
+            borderColor: '#444444',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#000000',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)',
+                borderColor: '#444444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            areaColor: '#eeeeee',
+            borderColor: '#444444',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#000000',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)',
+                borderColor: '#444444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#ccc'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#ccc'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#ccc'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#ccc'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: '#999999',
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#333333',
+        },
+        left: 'center',
+        right: 'auto',
+        top: 0,
+        bottom: 10,
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#293c55',
+            width: 1,
+        },
+        itemStyle: {
+            color: '#293c55',
+            borderWidth: 1,
+        },
+        controlStyle: {
+            color: '#293c55',
+            borderColor: '#293c55',
+            borderWidth: 0.5,
+        },
+        checkpointStyle: {
+            color: '#e43c59',
+            borderColor: 'rgba(194,53,49,0.5)',
+        },
+        label: {
+            color: '#293c55',
+        },
+        emphasis: {
+            itemStyle: {
+                color: '#a9334c',
+            },
+            controlStyle: {
+                color: '#293c55',
+                borderColor: '#293c55',
+                borderWidth: 0.5,
+            },
+            label: {
+                color: '#293c55',
+            },
+        },
+    },
+    visualMap: {
+        color: ['#bf444c', '#d88273', '#f6efa6'],
+    },
+    markPoint: {
+        label: {
+            color: '#eee',
+        },
+        emphasis: {
+            label: {
+                color: '#eee',
+            },
+        },
+    },
+    grid: {
+        left: '10%',
+        right: '10%',
+        top: 60,
+        bottom: 70,
+    },
+};
+echarts.registerTheme('vintage', vintageTheme.default ?? vintageTheme);
+
+const darkTheme = {
+    color: [
+        '#dd6b66',
+        '#759aa0',
+        '#e69d87',
+        '#8dc1a9',
+        '#ea7e53',
+        '#eedd78',
+        '#73a373',
+        '#73b9bc',
+        '#7289ab',
+        '#91ca8c',
+        '#f49f42',
+    ],
+    backgroundColor: 'rgba(51,51,51,1)',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#eeeeee',
+        },
+        subtextStyle: {
+            color: '#aaa',
+        },
+    },
+    line: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 4,
+        symbol: 'circle',
+        smooth: false,
+    },
+    radar: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 4,
+        symbol: 'circle',
+        smooth: false,
+    },
+    bar: {
+        itemStyle: {
+            barBorderWidth: 0,
+            barBorderColor: '#ccc',
+        },
+    },
+    pie: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    scatter: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    parallel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    sankey: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    funnel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    gauge: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            color: '#fd1050',
+            color0: '#0cf49b',
+            borderColor: '#fd1050',
+            borderColor0: '#0cf49b',
+            borderWidth: 1,
+        },
+    },
+    graph: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+        lineStyle: {
+            width: 1,
+            color: '#aaa',
+        },
+        symbolSize: 4,
+        symbol: 'circle',
+        smooth: false,
+        color: [
+            '#dd6b66',
+            '#759aa0',
+            '#e69d87',
+            '#8dc1a9',
+            '#ea7e53',
+            '#eedd78',
+            '#73a373',
+            '#73b9bc',
+            '#7289ab',
+            '#91ca8c',
+            '#f49f42',
+        ],
+        label: {
+            color: '#eee',
+        },
+    },
+    map: {
+        itemStyle: {
+            areaColor: '#eee',
+            borderColor: '#444',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#000',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)',
+                borderColor: '#444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            areaColor: '#eee',
+            borderColor: '#444',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#000',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)',
+                borderColor: '#444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#eeeeee',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#eeeeee',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#eeeeee',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#aaaaaa'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['#eeeeee'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#eeeeee',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#eeeeee',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#eeeeee',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#aaaaaa'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['#eeeeee'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#eeeeee',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#eeeeee',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#eeeeee',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#aaaaaa'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['#eeeeee'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#eeeeee',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#eeeeee',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#eeeeee',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#aaaaaa'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['#eeeeee'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: '#999',
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#eeeeee',
+        },
+        left: 'center',
+        right: 'auto',
+        top: 'auto',
+        bottom: 15,
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#eeeeee',
+                width: '1',
+            },
+            crossStyle: {
+                color: '#eeeeee',
+                width: '1',
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#eeeeee',
+            width: 1,
+        },
+        itemStyle: {
+            color: '#dd6b66',
+            borderWidth: 1,
+        },
+        controlStyle: {
+            color: '#eeeeee',
+            borderColor: '#eeeeee',
+            borderWidth: 0.5,
+        },
+        checkpointStyle: {
+            color: '#e43c59',
+            borderColor: 'rgba(194,53,49, 0.5)',
+        },
+        label: {
+            color: '#eeeeee',
+        },
+        emphasis: {
+            itemStyle: {
+                color: '#a9334c',
+            },
+            controlStyle: {
+                color: '#eeeeee',
+                borderColor: '#eeeeee',
+                borderWidth: 0.5,
+            },
+            label: {
+                color: '#eeeeee',
+            },
+        },
+    },
+    visualMap: {
+        color: ['#bf444c', '#d88273', '#f6efa6'],
+    },
+    markPoint: {
+        label: {
+            color: '#eee',
+        },
+        emphasis: {
+            label: {
+                color: '#eee',
+            },
+        },
+    },
+    grid: {
+        left: '15%',
+        right: '10%',
+        top: 65,
+        bottom: 80,
+    },
+};
+echarts.registerTheme('dark', darkTheme.default ?? darkTheme);
+
+const essosTheme = {
+    color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
+    backgroundColor: 'rgba(242,234,191,0.15)',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#893448',
+        },
+        subtextStyle: {
+            color: '#d95850',
+        },
+    },
+    line: {
+        itemStyle: {
+            borderWidth: '2',
+        },
+        lineStyle: {
+            width: '2',
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            borderWidth: '2',
+        },
+        lineStyle: {
+            width: '2',
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            barBorderWidth: 0,
+            barBorderColor: '#ccc',
+        },
+    },
+    pie: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    scatter: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    parallel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    sankey: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    funnel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    gauge: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            color: '#eb8146',
+            color0: 'transparent',
+            borderColor: '#d95850',
+            borderColor0: '#58c470',
+            borderWidth: '2',
+        },
+    },
+    graph: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+        lineStyle: {
+            width: 1,
+            color: '#aaa',
+        },
+        symbolSize: '6',
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
+        label: {
+            color: '#ffffff',
+        },
+    },
+    map: {
+        itemStyle: {
+            areaColor: '#f3f3f3',
+            borderColor: '#999999',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#893448',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: '#ffb248',
+                borderColor: '#eb8146',
+                borderWidth: 1,
+            },
+            label: {
+                color: '#893448',
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            areaColor: '#f3f3f3',
+            borderColor: '#999999',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#893448',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: '#ffb248',
+                borderColor: '#eb8146',
+                borderWidth: 1,
+            },
+            label: {
+                color: '#893448',
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#999999',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#999999',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#999999',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#aaaaaa',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#999999',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: '#999',
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#999999',
+        },
+        left: 'center',
+        right: 'auto',
+        top: 'auto',
+        bottom: 15,
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#ccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#ccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#893448',
+            width: 1,
+        },
+        itemStyle: {
+            color: '#893448',
+            borderWidth: 1,
+        },
+        controlStyle: {
+            color: '#893448',
+            borderColor: '#893448',
+            borderWidth: 0.5,
+        },
+        checkpointStyle: {
+            color: '#eb8146',
+            borderColor: 'rgba(255,178,72,0.41)',
+        },
+        label: {
+            color: '#893448',
+        },
+        emphasis: {
+            itemStyle: {
+                color: '#ffb248',
+            },
+            controlStyle: {
+                color: '#893448',
+                borderColor: '#893448',
+                borderWidth: 0.5,
+            },
+            label: {
+                color: '#893448',
+            },
+        },
+    },
+    visualMap: {
+        color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', 'rgb(247,238,173)'],
+    },
+    markPoint: {
+        label: {
+            color: '#ffffff',
+        },
+        emphasis: {
+            label: {
+                color: '#ffffff',
+            },
+        },
+    },
+    grid: {
+        left: '15%',
+        right: '10%',
+        top: 65,
+        bottom: 80,
+    },
+};
+echarts.registerTheme('essos', essosTheme.default ?? essosTheme);
+
+const chalkTheme = {
+    color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'],
+    backgroundColor: 'rgba(41,52,65,1)',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#ffffff',
+        },
+        subtextStyle: {
+            color: '#dddddd',
+        },
+    },
+    line: {
+        itemStyle: {
+            borderWidth: '4',
+        },
+        lineStyle: {
+            width: '3',
+        },
+        symbolSize: '0',
+        symbol: 'circle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            borderWidth: '4',
+        },
+        lineStyle: {
+            width: '3',
+        },
+        symbolSize: '0',
+        symbol: 'circle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            barBorderWidth: 0,
+            barBorderColor: '#ccc',
+        },
+    },
+    pie: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    scatter: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    parallel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    sankey: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    funnel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    gauge: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            color: '#fc97af',
+            color0: 'transparent',
+            borderColor: '#fc97af',
+            borderColor0: '#87f7cf',
+            borderWidth: '2',
+        },
+    },
+    graph: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+        lineStyle: {
+            width: '1',
+            color: '#ffffff',
+        },
+        symbolSize: '0',
+        symbol: 'circle',
+        smooth: true,
+        color: ['#fc97af', '#87f7cf', '#f7f494', '#72ccff', '#f7c5a0', '#d4a4eb', '#d2f5a6', '#76f2f2'],
+        label: {
+            color: '#293441',
+        },
+    },
+    map: {
+        itemStyle: {
+            areaColor: '#f3f3f3',
+            borderColor: '#999999',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#893448',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,178,72,1)',
+                borderColor: '#eb8146',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(137,52,72)',
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            areaColor: '#f3f3f3',
+            borderColor: '#999999',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#893448',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,178,72,1)',
+                borderColor: '#eb8146',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(137,52,72)',
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#666666',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#aaaaaa',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#666666',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#aaaaaa',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#666666',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#aaaaaa',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#666666',
+            },
+        },
+        axisTick: {
+            show: false,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#aaaaaa',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#e6e6e6'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: '#999999',
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#999999',
+        },
+        left: 'center',
+        right: 'auto',
+        top: 'auto',
+        bottom: 15,
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#87f7cf',
+            width: 1,
+        },
+        itemStyle: {
+            color: '#87f7cf',
+            borderWidth: 1,
+        },
+        controlStyle: {
+            color: '#87f7cf',
+            borderColor: '#87f7cf',
+            borderWidth: 0.5,
+        },
+        checkpointStyle: {
+            color: '#fc97af',
+            borderColor: 'rgba(252,151,175,0.3)',
+        },
+        label: {
+            color: '#87f7cf',
+        },
+        emphasis: {
+            itemStyle: {
+                color: '#f7f494',
+            },
+            controlStyle: {
+                color: '#87f7cf',
+                borderColor: '#87f7cf',
+                borderWidth: 0.5,
+            },
+            label: {
+                color: '#87f7cf',
+            },
+        },
+    },
+    visualMap: {
+        color: ['#fc97af', '#87f7cf'],
+    },
+    markPoint: {
+        label: {
+            color: '#293441',
+        },
+        emphasis: {
+            label: {
+                color: '#293441',
+            },
+        },
+    },
+    grid: {
+        left: '15%',
+        right: '10%',
+        top: 65,
+        bottom: 80,
+    },
+};
+echarts.registerTheme('chalk', chalkTheme.default ?? chalkTheme);
+
+const romaTheme = {
+    color: [
+        '#e01f54',
+        '#001852',
+        '#f5e8c8',
+        '#b8d2c7',
+        '#c6b38e',
+        '#a4d8c2',
+        '#f3d999',
+        '#d3758f',
+        '#dcc392',
+        '#2e4783',
+        '#82b6e9',
+        '#ff6347',
+        '#a092f1',
+        '#0a915d',
+        '#eaf889',
+        '#6699FF',
+        '#ff6666',
+        '#3cb371',
+        '#d5b158',
+        '#38b6b6',
+    ],
+    backgroundColor: 'rgba(0,0,0,0)',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#333333',
+        },
+        subtextStyle: {
+            color: '#aaa',
+        },
+    },
+    line: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+    },
+    radar: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+    },
+    bar: {
+        itemStyle: {
+            barBorderWidth: 0,
+            barBorderColor: '#ccc',
+        },
+    },
+    pie: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    scatter: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    parallel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    sankey: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    funnel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    gauge: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            color: '#e01f54',
+            color0: '#001852',
+            borderColor: '#f5e8c8',
+            borderColor0: '#b8d2c7',
+            borderWidth: 1,
+        },
+    },
+    graph: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+        lineStyle: {
+            width: 1,
+            color: '#aaa',
+        },
+        symbolSize: 4,
+        symbol: 'emptyCircle',
+        smooth: false,
+        color: [
+            '#e01f54',
+            '#001852',
+            '#f5e8c8',
+            '#b8d2c7',
+            '#c6b38e',
+            '#a4d8c2',
+            '#f3d999',
+            '#d3758f',
+            '#dcc392',
+            '#2e4783',
+            '#82b6e9',
+            '#ff6347',
+            '#a092f1',
+            '#0a915d',
+            '#eaf889',
+            '#6699FF',
+            '#ff6666',
+            '#3cb371',
+            '#d5b158',
+            '#38b6b6',
+        ],
+        label: {
+            color: '#eee',
+        },
+    },
+    map: {
+        itemStyle: {
+            areaColor: '#eeeeee',
+            borderColor: '#444444',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#000000',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)',
+                borderColor: '#444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            areaColor: '#eeeeee',
+            borderColor: '#444444',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#000000',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)',
+                borderColor: '#444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#ccc'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#ccc'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#ccc'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#ccc'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: '#999999',
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#666666',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#333333',
+        },
+        left: 'center',
+        right: 'auto',
+        top: 'auto',
+        bottom: 15,
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+            crossStyle: {
+                color: '#cccccc',
+                width: 1,
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#293c55',
+            width: 1,
+        },
+        itemStyle: {
+            color: '#293c55',
+            borderWidth: 1,
+        },
+        controlStyle: {
+            color: '#293c55',
+            borderColor: '#293c55',
+            borderWidth: 0.5,
+        },
+        checkpointStyle: {
+            color: '#e43c59',
+            borderColor: 'rgba(194,53,49,0.5)',
+        },
+        label: {
+            color: '#293c55',
+        },
+        emphasis: {
+            itemStyle: {
+                color: '#a9334c',
+            },
+            controlStyle: {
+                color: '#293c55',
+                borderColor: '#293c55',
+                borderWidth: 0.5,
+            },
+            label: {
+                color: '#293c55',
+            },
+        },
+    },
+    visualMap: {
+        color: ['#e01f54', '#e7dbc3'],
+    },
+    markPoint: {
+        label: {
+            color: '#eee',
+        },
+        emphasis: {
+            label: {
+                color: '#eee',
+            },
+        },
+    },
+    grid: {
+        left: '15%',
+        right: '10%',
+        top: 65,
+        bottom: 80,
+    },
+};
+echarts.registerTheme('roma', romaTheme.default ?? romaTheme);
+
+class BarChart {
+    cdr;
+    title = '';
+    height = '600px';
+    enableSampling = true; // Sample data if > threshold for perf
+    sampleThreshold = 10000; // Sample if data > 10k (keep full for 50k if hardware allows)
+    isLoading = true;
+    defaultConfig = new OptionsConfig();
+    optionsConfig = {};
+    chartContainer;
+    chartInstance = null;
+    chartService = inject(ChartService);
+    destroy$ = new Subject();
+    currentData = [];
+    currentColumns = [];
+    boundHandleContextMenu;
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.boundHandleContextMenu = this.handleContextMenu.bind(this);
+        // Effect for theme changes
+        effect(() => {
+            this.chartService.theme(); // Read signal
+            if (this.chartInstance) {
+                this.reinitializeChart();
+            }
+        });
+        // Effect for data changes
+        effect(() => {
+            const data = this.chartService.data(); // Read signal
+            const columns = this.chartService.columns();
+            this.currentColumns = columns;
+            this.currentData = data;
+            this.processAndUpdateData();
+        });
+        // Effect for chartOptionsConfig changes
+        effect(() => {
+            this.chartService.chartOptionsConfig();
+            this.optionsConfig = this.chartService.chartOptionsConfig();
+            this.reinitializeChart();
+        });
+    }
+    ngOnInit() {
+        if (this.currentData.length > 0) {
+            this.processAndUpdateData();
+        }
+    }
+    ngAfterViewInit() {
+        this.initializeChart();
+        if (this.currentData.length > 0) {
+            this.updateChartWithData();
+        }
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.chartService.hideContextMenu();
+        this.disposeChart();
+        if (this.chartInstance) {
+            this.chartInstance.dispose(); // Clean up to free memory
+        }
+        if (this.chartContainer) {
+            this.chartContainer.nativeElement.removeEventListener('contextmenu', this.boundHandleContextMenu);
+        }
+        document.removeEventListener('click', () => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+        });
+    }
+    reinitializeChart() {
+        this.initializeChart();
+        if (this.currentData.length > 0) {
+            this.updateChartWithData();
+        }
+        this.cdr.markForCheck();
+    }
+    initializeChart() {
+        if (!this.chartContainer) {
+            return;
+        }
+        const chartDom = this.chartContainer.nativeElement;
+        chartDom.innerHTML = '';
+        if (this.chartInstance) {
+            this.chartInstance.dispose();
+            this.chartInstance = null;
+        }
+        this.chartInstance = echarts.init(chartDom, this.chartService.theme()); // Init ECharts
+        this.chartInstance.setOption({
+            ...this.defaultConfig,
+            ...this.optionsConfig,
+            title: {
+                ...this.defaultConfig.title,
+                ...this.optionsConfig.title,
+                textStyle: {
+                    ...this.defaultConfig.title?.textStyle,
+                    ...this.optionsConfig.title?.textStyle,
+                },
+            },
+            tooltip: {
+                ...this.defaultConfig.tooltip,
+                ...this.optionsConfig.tooltip,
+            },
+            legend: { ...this.defaultConfig.legend, ...this.optionsConfig.legend },
+            dataZoom: this.optionsConfig.dataZoom || this.defaultConfig.dataZoom,
+            grid: {
+                ...this.defaultConfig.grid,
+                ...this.optionsConfig.grid,
+            },
+            xAxis: {
+                ...this.defaultConfig.xAxis,
+                ...this.optionsConfig.xAxis,
+                data: [],
+            },
+            yAxis: {
+                ...this.defaultConfig.yAxis,
+                ...this.optionsConfig.yAxis,
+            },
+            series: [],
+        });
+        // Responsive: Resize on window change
+        window.addEventListener('resize', () => this.chartInstance?.resize(), { passive: true });
+        // Handle dataZoom events (optional: Log zoom changes)
+        this.chartInstance.on('dataZoom', (params) => {
+            // console.log('Zoomed to:', params.start, params.end);
+        });
+        this.chartInstance.on('rendered', () => {
+            // console.log('Chart rendered successfully');
+        });
+        this.chartInstance.on('click', (params) => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+            this.chartService.handleClick(params);
+        });
+        this.chartInstance.on('contextmenu', (params) => {
+            this.chartService.openContextMenu(params, this.chartContainer);
+        });
+        chartDom.addEventListener('contextmenu', this.boundHandleContextMenu);
+        document.addEventListener('click', () => {
+            this.chartService.hideContextMenu();
+            this.chartService.resetContextEvent();
+        }, {
+            passive: true,
+        });
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    handleContextMenu(event) {
+        event.preventDefault();
+        setTimeout(() => {
+            if (!this.chartService.contextMenuEvent().seriesName) {
+                this.chartService.openContextMenu(null, this.chartContainer, event);
+            }
+        }, 0);
+    }
+    updateChartWithData() {
+        this.processData(); // Process without updating yet
+        if (this.chartInstance) {
+            const updatedOptions = {
+                xAxis: { data: this.getProcessedCategories() },
+                series: this.getProcessedValues(),
+            };
+            this.chartInstance.setOption(updatedOptions, {
+                notMerge: false,
+                lazyUpdate: true,
+                silent: false,
+                replaceMerge: ['series'],
+            });
+        }
+    }
+    processedData = [];
+    processedColumns = [];
+    getProcessedCategories() {
+        return this.processedData.map((d) => d[0]);
+    }
+    getProcessedValues() {
+        const columnData = this.processedColumns.slice(1);
+        return columnData.map((c, i) => {
+            const seriesData = this.processedData.map((d) => d[i + 1]);
+            return {
+                name: c,
+                type: 'bar',
+                data: seriesData, // Populated dynamically
+                barWidth: 'auto', // Auto-adjust for density
+                large: true, // Enable large mode: Canvas rendering for 50k+ efficiency
+                largeThreshold: 5000, // Start large mode at 5k points
+                progressive: 300, // Render 300 bars per chunk (tune for your hardware)
+                progressiveChunkMode: 'sequential', // Sequential rendering for smooth init
+                progressiveThreshold: 5000, // Apply progressive above 5k
+                animation: true, // Disable initial animation for faster load on large data (re-enable for updates)
+                itemStyle: {
+                // color: '#5470c6', // Bar color
+                // shadowBlur: 0, // Reduce shadows for perf
+                },
+                // emphasis: {
+                //   // Hover highlight (lightweight)
+                //   focus: 'series',
+                //   itemStyle: { opacity: 0.8 },
+                // },
+            };
+        });
+    }
+    processData() {
+        let dataToProcess = this.currentData;
+        if (this.enableSampling && this.currentData.length > this.sampleThreshold) {
+            const step = Math.ceil(this.currentData.length / this.sampleThreshold);
+            dataToProcess = this.currentData.filter((_, index) => index % step === 0);
+            console.warn(`Sampled data from ${this.currentData.length} to ${dataToProcess.length} points.`);
+        }
+        this.processedData = dataToProcess; // Cache processed
+        this.processedColumns = this.currentColumns;
+    }
+    processAndUpdateData() {
+        this.processData();
+        if (this.chartInstance) {
+            this.updateChartWithData();
+        }
+    }
+    handleResize() {
+        if (this.chartInstance) {
+            this.chartInstance.resize();
+        }
+    }
+    disposeChart() {
+        if (this.chartInstance) {
+            this.chartInstance.dispose();
+            this.chartInstance.off('click');
+            this.chartInstance = null;
+            // console.log('ECharts instance disposed');
+        }
+        window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+    // Public method: Update data externally (e.g., from API)
+    updateData(newData) {
+        this.currentData = newData;
+        this.processAndUpdateData();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BarChart, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: "title", height: "height", enableSampling: "enableSampling", sampleThreshold: "sampleThreshold", isLoading: "isLoading" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["barChartContainer"], descendants: true }], ngImport: i0, template: "<div #barChartContainer style=\"width: 100%; height: 100%\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BarChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-bar-chart', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #barChartContainer style=\"width: 100%; height: 100%\"></div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], enableSampling: [{
+                type: Input
+            }], sampleThreshold: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], chartContainer: [{
+                type: ViewChild,
+                args: ['barChartContainer', { static: false }]
+            }] } });
+
+class LineChart {
+    cdr;
+    title = '';
+    height = '600px';
+    enableSampling = true; // Sample data if > threshold for perf
+    sampleThreshold = 10000; // Sample if data > 10k (keep full for 50k if hardware allows)
+    isLoading = true;
+    chartContainer;
+    chartInstance = null;
+    destroy$ = new Subject();
+    chartService = inject(ChartService);
+    currentData = [];
+    currentColumns = [];
+    // ECharts options optimized for 50k+ data
+    chartOptions = {
+        title: {
+            text: this.title,
+            left: 'center',
+            textStyle: { fontSize: 16 },
+        },
+        tooltip: {
+            // Hover info (efficient for large data)
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' },
+            // formatter: (params = [{ name: '', value: '' }]) => {
+            //   const param = params[0];
+            //   return `${param.name}<br/>Value: ${param.value}`;
+            // },
+        },
+        legend: { show: false }, // Disable for single series; add if multi-series
+        dataZoom: [
+            // Critical for large data: Zoom/slider to navigate 50k data points
+            {
+                type: 'slider', // Bottom slider
+                start: 0,
+                end: 100, // Initial view: First 10% (e.g., 5k of 50k)
+                height: 25,
+                bottom: 20,
+                textStyle: { fontSize: 12 },
+            },
+            {
+                type: 'inside', // Mouse wheel/pinch zoom
+                start: 0,
+                end: 10,
+            },
+        ],
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '80px', // Space for dataZoom slider
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            data: [], // Populated dynamically
+            axisLabel: { rotate: 45, fontSize: 10 },
+            axisTick: { show: false },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: { fontSize: 12 },
+        },
+        series: [],
+    };
+    constructor(cdr) {
+        this.cdr = cdr;
+        // Effect for theme changes
+        effect(() => {
+            const theme = this.chartService.theme(); // Read signal
+            if (this.chartInstance) {
+                this.reinitializeChart();
+            }
+        });
+        // Effect for data changes
+        effect(() => {
+            const data = this.chartService.data(); // Read signal
+            const columns = this.chartService.columns();
+            this.currentColumns = columns;
+            this.currentData = data;
+            this.processAndUpdateData();
+        });
+    }
+    ngOnInit() {
+        if (this.currentData.length > 0) {
+            this.processAndUpdateData();
+        }
+    }
+    ngAfterViewInit() {
+        this.initializeChart();
+        if (this.currentData.length > 0) {
+            this.updateChartWithData();
+        }
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.disposeChart();
+        if (this.chartInstance) {
+            this.chartInstance.dispose(); // Clean up to free memory
+        }
+    }
+    reinitializeChart() {
+        this.initializeChart();
+        if (this.currentData.length > 0) {
+            this.updateChartWithData();
+        }
+        this.cdr.markForCheck();
+    }
+    initializeChart() {
+        if (!this.chartContainer) {
+            console.error('Chart container not found!');
+            return;
+        }
+        const chartDom = this.chartContainer.nativeElement;
+        chartDom.innerHTML = '';
+        if (this.chartInstance) {
+            this.chartInstance.dispose();
+            this.chartInstance = null;
+        }
+        this.chartInstance = echarts.init(chartDom, this.chartService.theme()); // Init ECharts
+        this.chartInstance.setOption(this.chartOptions);
+        // Responsive: Resize on window change
+        window.addEventListener('resize', () => this.chartInstance?.resize(), { passive: true });
+        // Handle dataZoom events (optional: Log zoom changes)
+        this.chartInstance.on('dataZoom', (params) => {
+            // console.log('Zoomed to:', params.start, params.end);
+        });
+        this.chartInstance.on('rendered', () => {
+            // console.log('Chart rendered successfully');
+        });
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    updateChartWithData() {
+        this.processData(); // Process without updating yet
+        if (this.chartInstance) {
+            const updatedOptions = {
+                xAxis: { data: this.getProcessedCategories() },
+                series: this.getProcessedValues(),
+            };
+            this.chartInstance.setOption(updatedOptions, {
+                notMerge: false,
+                lazyUpdate: true,
+                silent: false,
+                replaceMerge: ['series'],
+            });
+        }
+    }
+    processedData = [];
+    processedColumns = [];
+    getProcessedCategories() {
+        return this.processedData.map((d) => d[0]);
+    }
+    getProcessedValues() {
+        const columnData = this.processedColumns.slice(1);
+        return columnData.map((c, i) => {
+            const seriesData = this.processedData.map((d) => d[i + 1]);
+            return {
+                name: c,
+                type: 'line',
+                data: seriesData, // Populated dynamically
+                large: true, // Enable large mode: Canvas rendering for 50k+ efficiency
+                largeThreshold: 5000, // Start large mode at 5k points
+                progressive: 300, // Render 300 points per chunk (tune for your hardware)
+                progressiveChunkMode: 'sequential', // Sequential rendering for smooth init
+                progressiveThreshold: 5000, // Apply progressive above 5k
+                animation: true, // Disable initial animation for faster load on large data (re-enable for updates)
+                itemStyle: {
+                // color: '#5470c6', // line color
+                // shadowBlur: 0, // Reduce shadows for perf
+                },
+                // emphasis: {
+                //   // Hover highlight (lightweight)
+                //   focus: 'series',
+                //   itemStyle: { opacity: 0.8 },
+                // },
+            };
+        });
+    }
+    processData() {
+        let dataToProcess = this.currentData;
+        if (this.enableSampling && this.currentData.length > this.sampleThreshold) {
+            const step = Math.ceil(this.currentData.length / this.sampleThreshold);
+            dataToProcess = this.currentData.filter((_, index) => index % step === 0);
+            console.warn(`Sampled data from ${this.currentData.length} to ${dataToProcess.length} points.`);
+        }
+        this.processedData = dataToProcess; // Cache processed
+        this.processedColumns = this.currentColumns;
+    }
+    processAndUpdateData() {
+        this.processData();
+        if (this.chartInstance) {
+            this.updateChartWithData();
+        }
+    }
+    handleResize() {
+        if (this.chartInstance) {
+            this.chartInstance.resize();
+        }
+    }
+    disposeChart() {
+        if (this.chartInstance) {
+            this.chartInstance.dispose();
+            this.chartInstance = null;
+            // console.log('ECharts instance disposed');
+        }
+        window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+    // Public method: Update data externally (e.g., from API)
+    updateData(newData) {
+        this.currentData = newData;
+        this.processAndUpdateData();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LineChart, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: "title", height: "height", enableSampling: "enableSampling", sampleThreshold: "sampleThreshold", isLoading: "isLoading" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["lineChartContainer"], descendants: true }], ngImport: i0, template: "<div #lineChartContainer style=\"width: 100%; height: 100%\"></div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LineChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-line-chart', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #lineChartContainer style=\"width: 100%; height: 100%\"></div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], enableSampling: [{
+                type: Input
+            }], sampleThreshold: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], chartContainer: [{
+                type: ViewChild,
+                args: ['lineChartContainer', { static: false }]
+            }] } });
+
+class AreaChart {
+    cdr;
+    title = '';
+    height = '600px';
+    enableSampling = true; // Sample data if > threshold for perf
+    sampleThreshold = 10000; // Sample if data > 10k (keep full for 50k if hardware allows)
+    isLoading = true;
+    chartContainer;
+    chartInstance = null;
+    chartService = inject(ChartService);
+    destroy$ = new Subject();
+    currentData = [];
+    currentColumns = [];
+    // ECharts options optimized for 50k+ data
+    chartOptions = {
+        title: {
+            text: this.title,
+            left: 'center',
+            textStyle: { fontSize: 16 },
+        },
+        tooltip: {
+            // Hover info (efficient for large data)
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' },
+            // formatter: (params = [{ name: '', value: '' }]) => {
+            //   const param = params[0];
+            //   return `${param.name}<br/>Value: ${param.value}`;
+            // },
+        },
+        legend: { show: false }, // Disable for single series; add if multi-series
+        dataZoom: [
+            // Critical for large data: Zoom/slider to navigate 50k data points
+            {
+                type: 'slider', // Bottom slider
+                start: 0,
+                end: 100, // Initial view: First 10% (e.g., 5k of 50k)
+                height: 25,
+                bottom: 20,
+                textStyle: { fontSize: 12 },
+            },
+            {
+                type: 'inside', // Mouse wheel/pinch zoom
+                start: 0,
+                end: 10,
+            },
+        ],
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '80px', // Space for dataZoom slider
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            data: [], // Populated dynamically
+            axisLabel: { rotate: 45, fontSize: 10 },
+            axisTick: { show: false },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: { fontSize: 12 },
+        },
+        series: [],
+    };
+    constructor(cdr) {
+        this.cdr = cdr;
+        effect(() => {
+            const theme = this.chartService.theme(); // Read signal
+            if (this.chartInstance) {
+                this.reinitializeChart();
+            }
+        });
+        // Effect for data changes
+        effect(() => {
+            const data = this.chartService.data(); // Read signal
+            const columns = this.chartService.columns();
+            this.currentColumns = columns;
+            this.currentData = data;
+            this.processAndUpdateData();
+        });
+    }
+    ngOnInit() {
+        if (this.currentData.length > 0) {
+            this.processAndUpdateData();
+        }
+    }
+    ngAfterViewInit() {
+        this.initializeChart();
+        if (this.currentData.length > 0) {
+            this.updateChartWithData();
+        }
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.disposeChart();
+        if (this.chartInstance) {
+            this.chartInstance.dispose(); // Clean up to free memory
+        }
+    }
+    reinitializeChart() {
+        this.initializeChart();
+        if (this.currentData.length > 0) {
+            this.updateChartWithData();
+        }
+        this.cdr.markForCheck();
+    }
+    initializeChart() {
+        if (!this.chartContainer) {
+            console.error('Chart container not found!');
+            return;
+        }
+        const chartDom = this.chartContainer.nativeElement;
+        chartDom.innerHTML = '';
+        if (this.chartInstance) {
+            this.chartInstance.dispose();
+            this.chartInstance = null;
+        }
+        this.chartInstance = echarts.init(chartDom, this.chartService.theme()); // Init ECharts
+        this.chartInstance.setOption(this.chartOptions);
+        // Responsive: Resize on window change
+        window.addEventListener('resize', () => this.chartInstance?.resize(), { passive: true });
+        // Handle dataZoom events (optional: Log zoom changes)
+        this.chartInstance.on('dataZoom', (params) => {
+            // console.log('Zoomed to:', params.start, params.end);
+        });
+        this.chartInstance.on('rendered', () => {
+            // console.log('Chart rendered successfully');
+        });
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    updateChartWithData() {
+        this.processData(); // Process without updating yet
+        if (this.chartInstance) {
+            const updatedOptions = {
+                xAxis: { data: this.getProcessedCategories() },
+                series: this.getProcessedValues(),
+            };
+            this.chartInstance.setOption(updatedOptions, {
+                notMerge: false,
+                lazyUpdate: true,
+                silent: false,
+                replaceMerge: ['series'],
+            });
+        }
+    }
+    processedData = [];
+    processedColumns = [];
+    getProcessedCategories() {
+        return this.processedData.map((d) => d[0]);
+    }
+    getProcessedValues() {
+        const columnData = this.processedColumns.slice(1);
+        return columnData.map((c, i) => {
+            const seriesData = this.processedData.map((d) => d[i + 1]);
+            return {
+                name: c,
+                type: 'line',
+                data: seriesData, // Populated dynamically
+                large: true, // Enable large mode: Canvas rendering for 50k+ efficiency
+                largeThreshold: 5000, // Start large mode at 5k points
+                progressive: 300, // Render 300 points per chunk (tune for your hardware)
+                progressiveChunkMode: 'sequential', // Sequential rendering for smooth init
+                progressiveThreshold: 5000, // Apply progressive above 5k
+                animation: true, // Disable initial animation for faster load on large data (re-enable for updates)
+                itemStyle: {
+                // color: '#5470c6', // line color
+                // shadowBlur: 0, // Reduce shadows for perf
+                },
+                areaStyle: { opacity: 0.2 },
+                // emphasis: {
+                //   // Hover highlight (lightweight)
+                //   focus: 'series',
+                //   itemStyle: { opacity: 0.8 },
+                // },
+            };
+        });
+    }
+    processData() {
+        let dataToProcess = this.currentData;
+        if (this.enableSampling && this.currentData.length > this.sampleThreshold) {
+            const step = Math.ceil(this.currentData.length / this.sampleThreshold);
+            dataToProcess = this.currentData.filter((_, index) => index % step === 0);
+            console.warn(`Sampled data from ${this.currentData.length} to ${dataToProcess.length} points.`);
+        }
+        this.processedData = dataToProcess; // Cache processed
+        this.processedColumns = this.currentColumns;
+    }
+    processAndUpdateData() {
+        this.processData();
+        if (this.chartInstance) {
+            this.updateChartWithData();
+        }
+    }
+    handleResize() {
+        if (this.chartInstance) {
+            this.chartInstance.resize();
+        }
+    }
+    disposeChart() {
+        if (this.chartInstance) {
+            this.chartInstance.dispose();
+            this.chartInstance = null;
+            // console.log('ECharts instance disposed');
+        }
+        window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+    // Public method: Update data externally (e.g., from API)
+    updateData(newData) {
+        this.currentData = newData;
+        this.processAndUpdateData();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AreaChart, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AreaChart, isStandalone: true, selector: "lib-area-chart", inputs: { title: "title", height: "height", enableSampling: "enableSampling", sampleThreshold: "sampleThreshold", isLoading: "isLoading" }, viewQueries: [{ propertyName: "chartContainer", first: true, predicate: ["areaChartContainer"], descendants: true }], ngImport: i0, template: "<div #areaChartContainer style=\"width: 100%; height: 100%\"></div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AreaChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-area-chart', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #areaChartContainer style=\"width: 100%; height: 100%\"></div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], enableSampling: [{
+                type: Input
+            }], sampleThreshold: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], chartContainer: [{
+                type: ViewChild,
+                args: ['areaChartContainer', { static: false }]
+            }] } });
+
+class ChartsLib {
+    chartService;
+    differs;
+    container;
+    chartType;
+    columns = [];
+    data = [];
+    themeName = 'default';
+    chartOptionsConfig = {};
+    contextMenuList = [];
+    handleSingleClick = new EventEmitter();
+    handleDrillBy = new EventEmitter();
+    optionsConfigDiffer;
+    componentRef = null;
+    constructor(chartService, differs) {
+        this.chartService = chartService;
+        this.differs = differs;
+        effect(() => {
+            if (this.chartService.clickEvent().seriesName) {
+                this.handleSingleClick.emit(this.chartService.clickEvent());
+            }
+        });
+        effect(() => {
+            if (this.chartService.drillByConfig().seriesName) {
+                this.handleDrillBy.emit(this.chartService.drillByConfig());
+            }
+        });
+    }
+    ngOnInit() {
+        this.optionsConfigDiffer = this.differs.find(this.chartOptionsConfig).create();
+    }
+    ngAfterViewInit() {
+        this.loadComponent();
+    }
+    ngOnChanges(changes) {
+        if (changes['chartType']) {
+            this.loadComponent();
+        }
+        if (changes['themeName'] && this.componentRef) {
+            this.chartService.setTheme(this.themeName);
+        }
+        if (changes['data']) {
+            this.chartService.setData(this.data);
+        }
+        if (changes['columns']) {
+            this.chartService.setColumns(this.columns);
+        }
+        if (changes['contextMenuList']) {
+            this.chartService.setContextMenuList(this.contextMenuList);
+        }
+    }
+    ngDoCheck() {
+        if (this.chartOptionsConfig) {
+            const changes = this.optionsConfigDiffer.diff(this.chartOptionsConfig);
+            if (changes) {
+                this.chartService.setChartOptionsConfig({ ...this.chartOptionsConfig });
+            }
+        }
+    }
+    loadComponent() {
+        if (!this.container) {
+            return;
+        }
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+        const componentType = this.getComponentType();
+        if (componentType) {
+            this.componentRef = this.container.createComponent(componentType);
+        }
+    }
+    getComponentType() {
+        switch (this.chartType) {
+            case 'bar':
+                return BarChart;
+            case 'line':
+                return LineChart;
+            case 'area':
+                return AreaChart;
+            default:
+                return null;
+        }
+    }
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartsLib, deps: [{ token: ChartService }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ChartsLib, isStandalone: true, selector: "lib-charts-lib", inputs: { chartType: "chartType", columns: "columns", data: "data", themeName: "themeName", chartOptionsConfig: "chartOptionsConfig", contextMenuList: "contextMenuList" }, outputs: { handleSingleClick: "handleSingleClick", handleDrillBy: "handleDrillBy" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["chartContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template #chartContainer></ng-template>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ChartsLib, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-charts-lib', imports: [], template: "<ng-template #chartContainer></ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ChartService }, { type: i0.KeyValueDiffers }], propDecorators: { container: [{
+                type: ViewChild,
+                args: ['chartContainer', { read: ViewContainerRef }]
+            }], chartType: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], themeName: [{
+                type: Input
+            }], chartOptionsConfig: [{
+                type: Input
+            }], contextMenuList: [{
+                type: Input
+            }], handleSingleClick: [{
+                type: Output
+            }], handleDrillBy: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChartsLib, ChartsLibType, ClickEvent, ContextMenuListItem, OptionsConfig };
+//# sourceMappingURL=charts-lib.mjs.map