import { p as proxyCustomElement, H, h } from './p-604af0ee.js';
import { d as defineCustomElement$2 } from './p-dcdf3e56.js';

const DgaChartUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaChartUsage extends H {
    constructor() {
        super();
        this.__registerHost();
    }
    render() {
        return (h("div", { key: 'b898abf9bb3fb5b667343e23e133861bb89480cb' }, h("h1", { key: '751192ecf2684ee3233c89b077a9b91b136c8dcd' }, " Chart Example"), h("div", { key: '41ec5d05615de8623580c12780671ed55ebaf509', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: 'f549a2de22cac097e94faf9a0ec21314afa17782', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-chart", { key: 'a90406d3b6305b80e7581125e91e6799c7a1e68b', type: "donut", series: [44, 55, 13, 33], labels: ['Apple', 'Mango', 'Orange', 'Watermelon'] }), h("dga-chart", { key: 'c651571e6e23a7bca0ea6aaa434c27e13be801f9', type: "pie", series: [44, 55, 13, 33], labels: ['Apple', 'Mango', 'Orange', 'Watermelon'] }), h("dga-chart", { key: '3307f866c44b056861c0b74d3c70705e013084d2', type: 'line', series: [
                {
                    name: 'Series A',
                    data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6],
                },
                {
                    name: 'Series B',
                    data: [20, 29, 37, 36, 44, 45, 50, 58],
                },
            ], xaxis: {
                title: {
                    text: 'Month',
                },
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
            }, yaxis: {
                title: {
                    text: 'Active users',
                },
            } }), h("dga-chart", { key: 'feaa3e691d6b7879ab894919acfc2b75a4c0b958', series: [
                {
                    name: 'Series A',
                    data: [44, 55, 41, 44, 55, 41],
                },
                {
                    name: 'Series B',
                    data: [13, 23, 20, 44, 55, 41],
                },
                {
                    name: 'Series C',
                    data: [11, 17, 15, 44, 55, 41],
                },
            ],
            // colors= {['#000', '#54C08A', '#E5E7EB']}
            options: {
                chart: {
                    type: 'bar',
                    height: 350,
                    stacked: true,
                    toolbar: {
                        show: false,
                    },
                    zoom: {
                        enabled: false,
                    },
                },
                dataLabels: {
                    enabled: false,
                },
                // responsive: [{
                //   breakpoint: 480,
                //   options: {
                //     legend: {
                //       position: 'bottom',
                //       offsetX: -10,
                //       offsetY: 0
                //     }
                //   }
                // }],
                plotOptions: {
                    bar: {
                        horizontal: false,
                        borderRadius: 10,
                        borderRadiusApplication: 'end', // 'around', 'end'
                        borderRadiusWhenStacked: 'last', // 'all', 'last'
                        dataLabels: {
                            total: {
                                enabled: true,
                                style: {
                                    fontSize: '13px',
                                    fontWeight: 900,
                                },
                            },
                        },
                    },
                },
                xaxis: {
                    title: {
                        text: 'Month',
                    },
                    type: 'category',
                    categories: ['Jan', 'Fab', 'Mar', 'Apr', 'May', 'Jun'],
                },
                yaxis: {
                    title: {
                        text: 'Active users',
                    },
                },
                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,
                },
            } })))));
    }
}, [0, "dga-chart-usage"]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-chart-usage", "dga-chart"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-chart-usage":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaChartUsage$1);
            }
            break;
        case "dga-chart":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DgaChartUsage = DgaChartUsage$1;
const defineCustomElement = defineCustomElement$1;

export { DgaChartUsage, defineCustomElement };

//# sourceMappingURL=dga-chart-usage.js.map