import { h } from "@stencil/core";
import ApexCharts from "apexcharts";
function isObject(item) {
    return item && typeof item === 'object' && !Array.isArray(item);
}
function deepMerge(target, source) {
    const output = Object.assign({}, target);
    for (const key in source) {
        if (isObject(source[key]) && isObject(target[key])) {
            output[key] = deepMerge(target[key], source[key]);
        }
        else {
            output[key] = source[key];
        }
    }
    return output;
}
const optionsMap = {
    pie: {
        chart: {
            type: 'donut',
        },
        colors: ['#1B8354', '#079455', '#B8EACB', '#54C08A'],
        plotOptions: {
            pie: {
                startAngle: -180, // Start from the leftmost point
                endAngle: 180, // Complete the full circle
                donut: {
                    size: '40%',
                },
            },
        },
        stroke: {
            show: false, // Hides the dividers
        },
        legend: {
            show: true,
            showForSingleSeries: false,
            showForNullSeries: true,
            showForZeroSeries: true,
            position: 'bottom',
            horizontalAlign: 'center',
            floating: false,
            fontSize: '14px',
            fontFamily: 'IBM Plex Sans Arabic',
            fontWeight: 400,
            formatter: undefined,
            inverseOrder: false,
            width: undefined,
            height: undefined,
            tooltipHoverFormatter: undefined,
            customLegendItems: [],
            offsetX: 0,
            offsetY: 0,
            labels: {
                colors: undefined,
                useSeriesColors: false,
            },
            markers: {
                size: 3,
                shape: undefined,
                strokeWidth: 1,
                fillColors: undefined,
                customHTML: undefined,
                onClick: undefined,
                offsetX: 0,
                offsetY: 0,
            },
            itemMargin: {
                horizontal: 5,
                vertical: 0,
            },
            onItemClick: {
                toggleDataSeries: true,
            },
            onItemHover: {
                highlightDataSeries: true,
            },
        },
    },
    donut: {
        chart: {
            type: 'donut',
        },
        colors: ['#1B8354', '#079455', '#B8EACB', '#54C08A'],
        plotOptions: {
            pie: {
                startAngle: -180, // Start from the leftmost point
                endAngle: 180, // Complete the full circle
                donut: {
                    size: '40%',
                },
            },
        },
        stroke: {
            show: false, // Hides the dividers
        },
        legend: {
            show: true,
            showForSingleSeries: false,
            showForNullSeries: true,
            showForZeroSeries: true,
            position: 'bottom',
            horizontalAlign: 'center',
            floating: false,
            fontSize: '14px',
            fontFamily: 'IBM Plex Sans Arabic',
            fontWeight: 400,
            formatter: undefined,
            inverseOrder: false,
            width: undefined,
            height: undefined,
            tooltipHoverFormatter: undefined,
            customLegendItems: [],
            offsetX: 0,
            offsetY: 0,
            labels: {
                colors: undefined,
                useSeriesColors: false,
            },
            markers: {
                size: 3,
                shape: undefined,
                strokeWidth: 1,
                fillColors: undefined,
                customHTML: undefined,
                onClick: undefined,
                offsetX: 0,
                offsetY: 0,
            },
            itemMargin: {
                horizontal: 5,
                vertical: 0,
            },
            onItemClick: {
                toggleDataSeries: true,
            },
            onItemHover: {
                highlightDataSeries: true,
            },
        },
    },
    line: {
        chart: {
            height: 350,
            type: 'line',
            stacked: false,
            zoom: {
                enabled: false, // Disable zooming with mouse
            },
            toolbar: {
                show: false, // Hide the toolbar (including "Download as" dropdown)
            },
        },
        dataLabels: {
            enabled: false,
        },
        colors: ['#1B8354', '#079455', '#B8EACB', '#54C08A'],
        stroke: {
            width: [4, 4],
            curve: 'smooth',
        },
        plotOptions: {
            bar: {
                columnWidth: '20%',
            },
        },
        tooltip: {
            shared: false,
            intersect: true,
            x: {
                show: false,
            },
        },
        legend: {
            show: true,
            showForSingleSeries: false,
            showForNullSeries: true,
            showForZeroSeries: true,
            position: 'top', // Position legend at the top
            horizontalAlign: 'right', // Align legend to the right
            floating: false,
            fontSize: '14px',
            fontFamily: 'IBM Plex Sans Arabic',
            fontWeight: 400,
            formatter: undefined,
            inverseOrder: false,
            width: undefined,
            height: undefined,
            tooltipHoverFormatter: undefined,
            customLegendItems: [],
            offsetX: 0,
            offsetY: 0,
            labels: {
                colors: undefined,
                useSeriesColors: false,
            },
            markers: {
                size: 3,
                shape: undefined,
                strokeWidth: 1,
                fillColors: undefined,
                customHTML: undefined,
                onClick: undefined,
                offsetX: 0,
                offsetY: 0,
            },
            itemMargin: {
                horizontal: 5,
                vertical: 0,
            },
            onItemClick: {
                toggleDataSeries: true,
            },
            onItemHover: {
                highlightDataSeries: true,
            },
        },
    },
    bar: {
        chart: {
            type: 'bar',
            height: 350,
            stacked: true,
            toolbar: {
                show: false,
            },
            zoom: {
                enabled: false,
            },
        },
        dataLabels: {
            enabled: false,
        },
        colors: ['#1B8354', '#54C08A', '#E5E7EB'],
        plotOptions: {
            bar: {
                horizontal: false,
                borderRadius: 10,
                borderRadiusApplication: 'end', // 'around', 'end'
                borderRadiusWhenStacked: 'last', // 'all', 'last'
                dataLabels: {
                    total: {
                        enabled: true,
                        style: {
                            fontSize: '13px',
                            fontWeight: 900,
                        },
                    },
                },
            },
        },
        markers: {
            size: 3,
            shape: undefined,
            strokeWidth: 1,
            // fillColors: undefined,
            // customHTML: undefined,
            onClick: undefined,
            offsetX: 0,
            offsetY: 0,
        },
        legend: {
            show: true,
            showForSingleSeries: false,
            showForNullSeries: true,
            showForZeroSeries: true,
            position: 'top', // Position legend at the top
            horizontalAlign: 'right', // Align legend to the right
            floating: false,
            fontSize: '14px',
            fontFamily: 'IBM Plex Sans Arabic',
            fontWeight: 400,
            formatter: undefined,
            inverseOrder: false,
            width: undefined,
            height: undefined,
            tooltipHoverFormatter: undefined,
            customLegendItems: [],
            offsetX: 0,
            offsetY: 0,
            labels: {
                colors: undefined,
                useSeriesColors: false,
            },
            markers: {
                size: 3,
                shape: undefined,
                strokeWidth: 1,
                fillColors: undefined,
                customHTML: undefined,
                onClick: undefined,
                offsetX: 0,
                offsetY: 0,
            },
            itemMargin: {
                horizontal: 5,
                vertical: 0,
            },
            onItemClick: {
                toggleDataSeries: true,
            },
            onItemHover: {
                highlightDataSeries: true,
            },
        },
        fill: {
            opacity: 1,
        },
    }
};
const config = (options, type, width, height, series, labels, xaxis, yaxis, colors) => {
    var _a;
    // Default options based on the chart type
    const defaultOptions = optionsMap[type || ((_a = options === null || options === void 0 ? void 0 : options.chart) === null || _a === void 0 ? void 0 : _a.type)] || {};
    // Deep merge default options with user-provided options
    const mergedOptions = deepMerge(defaultOptions, options);
    // Override chart properties explicitly
    mergedOptions.chart = mergedOptions.chart || {};
    const chart = mergedOptions.chart ? Object.assign({}, mergedOptions.chart) : {};
    if (type) {
        chart.type = type;
    }
    if (width) {
        chart.width = width;
    }
    if (height) {
        chart.height = height;
    }
    if (labels) {
        mergedOptions['labels'] = labels;
    }
    if (xaxis) {
        mergedOptions['xaxis'] = xaxis;
    }
    if (yaxis) {
        mergedOptions['yaxis'] = yaxis;
    }
    if (colors) {
        mergedOptions['colors'] = colors;
    }
    return series ? Object.assign(Object.assign({}, mergedOptions), { chart, series }) : Object.assign(Object.assign({}, mergedOptions), { chart });
};
if (window) {
    const win = window;
    win.ApexCharts = ApexCharts;
}
export class DgaChart {
    constructor() {
        /**
         * Internal ApexCharts instance
         */
        this.chartObj = null;
    }
    optionsChanged(options) {
        if (this.chartObj !== null) {
            return this.chartObj.updateOptions(config(options, this.type, this.width, this.height, this.series, this.labels, this.xaxis, this.yaxis, this.colors));
        }
    }
    seriesChanged(series) {
        if (this.chartObj !== null) {
            this.chartObj.updateSeries(series, true);
        }
    }
    /**
     * Updates the configuration object. The new config object is merged with the existing config object preserving the existing configuration.
     * @param newOptions The configuration object to merge on the existing one
     * @param redrawPaths When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths
     * @param animate Should the chart animate on re-rendering
     */
    async updateOptions(newOptions, redrawPaths, animate) {
        return this.chartObj.updateOptions(newOptions, redrawPaths, animate);
    }
    async componentDidLoad() {
        if (this.chartObj === null) {
            this.chartObj = new ApexCharts(this.chartRef, config(this.options, this.type, this.width, this.height, this.series, this.labels, this.xaxis, this.yaxis, this.colors));
            return this.chartObj.render();
        }
    }
    disconnectedCallback() {
        if (this.chartObj !== null) {
            this.chartObj.destroy();
        }
    }
    render() {
        return h("div", { key: '666ca7a5ec7e8a8bc8869e6d88b9d4f1d8784ecb', ref: el => (this.chartRef = el) });
    }
    static get is() { return "dga-chart"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-chart.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-chart.css"]
        };
    }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ApexChartType",
                    "resolved": "\"area\" | \"bar\" | \"boxPlot\" | \"bubble\" | \"candlestick\" | \"donut\" | \"heatmap\" | \"line\" | \"pie\" | \"polarArea\" | \"radar\" | \"radialBar\" | \"rangeArea\" | \"rangeBar\" | \"scatter\" | \"treemap\"",
                    "references": {
                        "ApexChartType": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-chart/dga-chart.tsx",
                            "id": "src/components/dga-chart/dga-chart.tsx::ApexChartType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "https://apexcharts.com/docs/options/chart/type/"
                        }],
                    "text": "(optional) Type"
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false
            },
            "width": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "ApexChartWidth",
                    "resolved": "number | string",
                    "references": {
                        "ApexChartWidth": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-chart/dga-chart.tsx",
                            "id": "src/components/dga-chart/dga-chart.tsx::ApexChartWidth"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "https://apexcharts.com/docs/options/chart/width/"
                        }],
                    "text": "(optional) Width"
                },
                "getter": false,
                "setter": false,
                "attribute": "width",
                "reflect": false
            },
            "height": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "ApexChartHeight",
                    "resolved": "number | string",
                    "references": {
                        "ApexChartHeight": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-chart/dga-chart.tsx",
                            "id": "src/components/dga-chart/dga-chart.tsx::ApexChartHeight"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "https://apexcharts.com/docs/options/chart/height/"
                        }],
                    "text": "(optional) Height"
                },
                "getter": false,
                "setter": false,
                "attribute": "height",
                "reflect": false
            },
            "options": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "ApexOptions",
                    "resolved": "ApexOptions",
                    "references": {
                        "ApexOptions": {
                            "location": "import",
                            "path": "apexcharts",
                            "id": "../../node_modules/.pnpm/apexcharts@4.4.0/node_modules/apexcharts/types/apexcharts.d.ts::ApexOptions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "https://apexcharts.com/docs/options/"
                        }],
                    "text": "(optional) Options"
                },
                "getter": false,
                "setter": false
            },
            "series": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "ApexOptionsSeries",
                    "resolved": "number[] | { name?: string; type?: string; color?: string; group?: string; hidden?: boolean; zIndex?: number; data: number[] | { x: any; y: any; fill?: ApexFill; fillColor?: string; strokeColor?: string; meta?: any; goals?: { name?: string; value: number; strokeHeight?: number; strokeWidth?: number; strokeColor?: string; strokeDashArray?: number; strokeLineCap?: \"butt\" | \"round\" | \"square\"; }[]; barHeightOffset?: number; columnWidthOffset?: number; }[] | [number, number][] | [number, number[]][] | number[][]; }[]",
                    "references": {
                        "ApexOptionsSeries": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-chart/dga-chart.tsx",
                            "id": "src/components/dga-chart/dga-chart.tsx::ApexOptionsSeries"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "https://apexcharts.com/docs/options/series/"
                        }],
                    "text": "(optional) Series"
                },
                "getter": false,
                "setter": false
            },
            "labels": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "ApexOptionsLabels",
                    "resolved": "string[]",
                    "references": {
                        "ApexOptionsLabels": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-chart/dga-chart.tsx",
                            "id": "src/components/dga-chart/dga-chart.tsx::ApexOptionsLabels"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "xaxis": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "ApexOptions['xaxis']",
                    "resolved": "{ type?: \"datetime\" | \"category\" | \"numeric\"; categories?: any; overwriteCategories?: string[] | number[]; offsetX?: number; offsetY?: number; sorted?: boolean; labels?: { show?: boolean; rotate?: number; rotateAlways?: boolean; hideOverlappingLabels?: boolean; showDuplicates?: boolean; trim?: boolean; minHeight?: number; maxHeight?: number; style?: { colors?: string | string[]; fontSize?: string; fontFamily?: string; fontWeight?: string | number; cssClass?: string; }; offsetX?: number; offsetY?: number; format?: string; formatter?(value: string, timestamp?: number, opts?: any): string | string[]; datetimeUTC?: boolean; datetimeFormatter?: { year?: string; month?: string; day?: string; hour?: string; minute?: string; second?: string; }; }; group?: { groups?: { title: string; cols: number; }[]; style?: { colors?: string | string[]; fontSize?: string; fontFamily?: string; fontWeight?: string | number; cssClass?: string; }; }; axisBorder?: { show?: boolean; color?: string; offsetX?: number; offsetY?: number; strokeWidth?: number; }; axisTicks?: { show?: boolean; borderType?: string; color?: string; height?: number; offsetX?: number; offsetY?: number; }; tickPlacement?: string; tickAmount?: number | \"dataPoints\"; stepSize?: number; min?: number; max?: number; range?: number; floating?: boolean; decimalsInFloat?: number; position?: string; title?: { text?: string; offsetX?: number; offsetY?: number; style?: { color?: string; fontFamily?: string; fontWeight?: string | number; fontSize?: string; cssClass?: string; }; }; crosshairs?: { show?: boolean; width?: string | number; position?: string; opacity?: number; stroke?: { color?: string; width?: number; dashArray?: number; }; fill?: { type?: string; color?: string; gradient?: { colorFrom?: string; colorTo?: string; stops?: number[]; opacityFrom?: number; opacityTo?: number; }; }; dropShadow?: ApexDropShadow; }; tooltip?: { enabled?: boolean; offsetY?: number; formatter?(value: string, opts?: object): string; style?: { fontSize?: string; fontFamily?: string; }; }; }",
                    "references": {
                        "ApexOptions": {
                            "location": "import",
                            "path": "apexcharts",
                            "id": "../../node_modules/.pnpm/apexcharts@4.4.0/node_modules/apexcharts/types/apexcharts.d.ts::ApexOptions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "yaxis": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "ApexOptions['yaxis']",
                    "resolved": "ApexYAxis[] | ({ show?: boolean; showAlways?: boolean; showForNullSeries?: boolean; seriesName?: string | string[]; opposite?: boolean; reversed?: boolean; logarithmic?: boolean; logBase?: number; tickAmount?: number; stepSize?: number; forceNiceScale?: boolean; min?: number | ((min: number) => number); max?: number | ((max: number) => number); floating?: boolean; decimalsInFloat?: number; labels?: { show?: boolean; showDuplicates?: boolean; minWidth?: number; maxWidth?: number; offsetX?: number; offsetY?: number; rotate?: number; align?: \"left\" | \"center\" | \"right\"; padding?: number; style?: { colors?: string | string[]; fontSize?: string; fontWeight?: string | number; fontFamily?: string; cssClass?: string; }; formatter?(val: number, opts?: any): string | string[]; }; axisBorder?: { show?: boolean; color?: string; width?: number; offsetX?: number; offsetY?: number; }; axisTicks?: { show?: boolean; color?: string; width?: number; offsetX?: number; offsetY?: number; }; title?: { text?: string; rotate?: number; offsetX?: number; offsetY?: number; style?: { color?: string; fontSize?: string; fontWeight?: string | number; fontFamily?: string; cssClass?: string; }; }; crosshairs?: { show?: boolean; position?: string; stroke?: { color?: string; width?: number; dashArray?: number; }; }; tooltip?: { enabled?: boolean; offsetX?: number; }; })",
                    "references": {
                        "ApexOptions": {
                            "location": "import",
                            "path": "apexcharts",
                            "id": "../../node_modules/.pnpm/apexcharts@4.4.0/node_modules/apexcharts/types/apexcharts.d.ts::ApexOptions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "colors": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "ApexOptions['colors']",
                    "resolved": "any[]",
                    "references": {
                        "ApexOptions": {
                            "location": "import",
                            "path": "apexcharts",
                            "id": "../../node_modules/.pnpm/apexcharts@4.4.0/node_modules/apexcharts/types/apexcharts.d.ts::ApexOptions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "chartObj": {}
        };
    }
    static get methods() {
        return {
            "updateOptions": {
                "complexType": {
                    "signature": "(newOptions: ApexOptions, redrawPaths?: boolean, animate?: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "newOptions",
                            "type": "ApexOptions",
                            "docs": "The configuration object to merge on the existing one"
                        }, {
                            "name": "redrawPaths",
                            "type": "boolean",
                            "docs": "When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths"
                        }, {
                            "name": "animate",
                            "type": "boolean",
                            "docs": "Should the chart animate on re-rendering"
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "ApexOptions": {
                            "location": "import",
                            "path": "apexcharts",
                            "id": "../../node_modules/.pnpm/apexcharts@4.4.0/node_modules/apexcharts/types/apexcharts.d.ts::ApexOptions"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Updates the configuration object. The new config object is merged with the existing config object preserving the existing configuration.",
                    "tags": [{
                            "name": "param",
                            "text": "newOptions The configuration object to merge on the existing one"
                        }, {
                            "name": "param",
                            "text": "redrawPaths When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths"
                        }, {
                            "name": "param",
                            "text": "animate Should the chart animate on re-rendering"
                        }]
                }
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "options",
                "methodName": "optionsChanged"
            }, {
                "propName": "series",
                "methodName": "seriesChanged"
            }];
    }
}
//# sourceMappingURL=dga-chart.js.map
