'use strict';

var index = require('./index-DSiE2De_.js');

const DgaChartUsage = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        return (index.h("div", { key: 'd8bab2cf6bdf36ea7cb83408ce17fa4ca3666022' }, index.h("h1", { key: '7269902c66028e091a4789c547ed3f1a3cf202f0' }, " Chart Example"), index.h("div", { key: '8961116631b017e6e4a3b3d94a2963b2be8a19e8', style: { padding: '50px', display: 'flex', gap: '20px' } }, index.h("div", { key: 'e6523459cc7c3bd834801d7cc1b2c8cbd6b5010d', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, index.h("dga-chart", { key: '4534edbbfdd020e2d090a1e887086cf1a0c3d84b', type: "donut", series: [44, 55, 13, 33], labels: ['Apple', 'Mango', 'Orange', 'Watermelon'] }), index.h("dga-chart", { key: '11454d7d7f811b1e1bfe7d280f375aaef90f559b', type: "pie", series: [44, 55, 13, 33], labels: ['Apple', 'Mango', 'Orange', 'Watermelon'] }), index.h("dga-chart", { key: '8dc504a6656760f147a653764df4495158148230', 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',
                },
            } }), index.h("dga-chart", { key: 'af9075bd297e4a2e327a565989535a6f4c78d220', 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,
                },
            } })))));
    }
};

exports.dga_chart_usage = DgaChartUsage;
