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

const DgaMetricUsage$1 = /*@__PURE__*/ proxyCustomElement(class DgaMetricUsage extends H {
    constructor() {
        super();
        this.__registerHost();
    }
    //   @State() variant: 'critical' | 'warning' | 'success' | 'info' | 'neutral' = 'neutral';
    render() {
        return (h("div", { key: '2d46362e9e4c6b3cda5788102e041c3aa8bbbd2a' }, h("h1", { key: 'd562e0dc52f67e7ba5d36d21de141ec4ae106ef6' }, "Metric Example"), h("div", { key: 'e69498d4bb7f5e19776b86ff887325d401d60c0a', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '3600f42062139c5a721afdd100acab799f8d6022', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-apex-chart", { key: '588f093e96c8e1f55ab1d0bd286a3605fb314377',
            // type="donut" 
            //   series={ [{
            //     name: "Desktops",
            //     data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
            // }]} 
            // labels={['Apple', 'Mango', 'Orange', 'Watermelon']}
            options: {
                series: [{
                        name: 'series1',
                        data: [31, 40, 28, 51, 42, 109, 100]
                    }],
                chart: {
                    height: 350,
                    type: 'area',
                    toolbar: {
                        show: false // Hides the toolbar
                    },
                    zoom: {
                        enabled: false // Disables zooming
                    },
                },
                dataLabels: {
                    enabled: false
                },
                // markers:{
                //   shape:"circle",
                //   size:6,
                //   strokeColors:"#067647",
                //   strokeWidth:2,
                //   fillOpacity: 1, // Simulates inner fill opacity
                //   colors:"#fff",
                // },
                stroke: {
                    curve: 'stepline'
                },
                fill: {
                    type: 'gradient', // Options: 'solid', 'gradient'
                    gradient: {
                        shade: 'light',
                        type: "vertical", // Options: 'horizontal', 'vertical'
                        gradientToColors: ['#fff'], // End color of the gradient
                        stops: [0, 100] // Color distribution
                    },
                    colors: ['#079455'] // Start color
                },
                // xaxis: {
                //   type: 'datetime',
                //   categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
                // },
                // tooltip: {
                //   x: {
                //     format: 'dd/MM/yy HH:mm'
                //   },
                // },
                xaxis: {
                    labels: {
                        show: false // Hides X-axis labels
                    },
                    axisBorder: {
                        show: false // Hides the X-axis border line
                    },
                    axisTicks: {
                        show: false // Hides the X-axis ticks
                    }
                },
                yaxis: {
                    labels: {
                        show: false // Hides X-axis labels
                    },
                    axisBorder: {
                        show: false // Hides the X-axis border line
                    },
                    axisTicks: {
                        show: false // Hides the X-axis ticks
                    }
                },
                // xaxis: {
                //   show: false // Hides the X-axis completely
                // },
                // yaxis: {
                //   show: false // Hides the Y-axis completely
                // },
                grid: {
                    show: false
                },
                // tooltip:{
                //   enabled: false
                // }
                legend: {
                    show: false
                }
            } }), h("dga-apex-chart", { key: 'e775cb21454a36dfbaaa4c9c5f0d17873c129e19',
            // type="donut" 
            //   series={ [{
            //     name: "Desktops",
            //     data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
            // }]} 
            // labels={['Apple', 'Mango', 'Orange', 'Watermelon']}
            options: {
                series: [{
                        name: 'series1',
                        data: [31, 40, 28, 51, 42, 109, 100]
                    }],
                chart: {
                    height: 350,
                    type: 'area',
                    toolbar: {
                        show: false // Hides the toolbar
                    },
                    zoom: {
                        enabled: false // Disables zooming
                    },
                },
                dataLabels: {
                    enabled: false
                },
                // markers:{
                //   shape:"circle",
                //   size:6,
                //   strokeColors:"#067647",
                //   strokeWidth:2,
                //   fillOpacity: 1, // Simulates inner fill opacity
                //   colors:"#fff",
                // },
                stroke: {
                    curve: 'straight'
                },
                fill: {
                    type: 'gradient', // Options: 'solid', 'gradient'
                    gradient: {
                        shade: 'light',
                        type: "vertical", // Options: 'horizontal', 'vertical'
                        gradientToColors: ['#fff'], // End color of the gradient
                        stops: [0, 100] // Color distribution
                    },
                    colors: ['#079455'] // Start color
                },
                // xaxis: {
                //   type: 'datetime',
                //   categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
                // },
                // tooltip: {
                //   x: {
                //     format: 'dd/MM/yy HH:mm'
                //   },
                // },
                xaxis: {
                    labels: {
                        show: false // Hides X-axis labels
                    },
                    axisBorder: {
                        show: false // Hides the X-axis border line
                    },
                    axisTicks: {
                        show: false // Hides the X-axis ticks
                    }
                },
                yaxis: {
                    labels: {
                        show: false // Hides X-axis labels
                    },
                    axisBorder: {
                        show: false // Hides the X-axis border line
                    },
                    axisTicks: {
                        show: false // Hides the X-axis ticks
                    }
                },
                // xaxis: {
                //   show: false // Hides the X-axis completely
                // },
                // yaxis: {
                //   show: false // Hides the Y-axis completely
                // },
                grid: {
                    show: false
                },
                // tooltip:{
                //   enabled: false
                // }
                legend: {
                    show: false
                }
            } }), h("dga-apex-chart", { key: '53e8ab298a2af592614ac586e26fb3edb071931c',
            // type="donut" 
            //   series={ [{
            //     name: "Desktops",
            //     data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
            // }]} 
            // labels={['Apple', 'Mango', 'Orange', 'Watermelon']}
            options: {
                series: [{
                        name: 'series1',
                        data: [31, 40, 28, 51, 42, 109, 100]
                    }],
                chart: {
                    height: 350,
                    type: 'area',
                    toolbar: {
                        show: false // Hides the toolbar
                    },
                    zoom: {
                        enabled: false // Disables zooming
                    },
                },
                dataLabels: {
                    enabled: false
                },
                // markers:{
                //   shape:"circle",
                //   size:6,
                //   strokeColors:"#067647",
                //   strokeWidth:2,
                //   fillOpacity: 1, // Simulates inner fill opacity
                //   colors:"#fff",
                // },
                stroke: {
                    curve: 'smooth'
                },
                fill: {
                    type: 'gradient', // Options: 'solid', 'gradient'
                    gradient: {
                        shade: 'light',
                        type: "vertical", // Options: 'horizontal', 'vertical'
                        gradientToColors: ['#fff'], // End color of the gradient
                        stops: [0, 100] // Color distribution
                    },
                    colors: ['#079455'] // Start color
                },
                // xaxis: {
                //   type: 'datetime',
                //   categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
                // },
                // tooltip: {
                //   x: {
                //     format: 'dd/MM/yy HH:mm'
                //   },
                // },
                xaxis: {
                    labels: {
                        show: false // Hides X-axis labels
                    },
                    axisBorder: {
                        show: false // Hides the X-axis border line
                    },
                    axisTicks: {
                        show: false // Hides the X-axis ticks
                    }
                },
                yaxis: {
                    labels: {
                        show: false // Hides X-axis labels
                    },
                    axisBorder: {
                        show: false // Hides the X-axis border line
                    },
                    axisTicks: {
                        show: false // Hides the X-axis ticks
                    }
                },
                // xaxis: {
                //   show: false // Hides the X-axis completely
                // },
                // yaxis: {
                //   show: false // Hides the Y-axis completely
                // },
                grid: {
                    show: false
                },
                // tooltip:{
                //   enabled: false
                // }
                legend: {
                    show: false
                }
            } }), h("dga-apex-chart", { key: '7f80388a894dc2f379ab8d317c225473d61736a5',
            // type="donut" 
            //   series={ [{
            //     name: "Desktops",
            //     data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
            // }]} 
            // labels={['Apple', 'Mango', 'Orange', 'Watermelon']}
            options: {
                series: [{
                        name: 'series1',
                        data: [31, 40, 28, 51, 42, 109, 100]
                    }, {
                        name: 'series2',
                        data: [11, 32, 45, 32, 34, 52, 41]
                    }],
                chart: {
                    height: 350,
                    type: 'area',
                    toolbar: {
                        show: false // Hides the toolbar
                    },
                    zoom: {
                        enabled: false // Disables zooming
                    },
                },
                dataLabels: {
                    enabled: false
                },
                // markers:{
                //   shape:"circle",
                //   size:6,
                //   strokeColors:"#067647",
                //   strokeWidth:2,
                //   fillOpacity: 1, // Simulates inner fill opacity
                //   colors:"#fff",
                // },
                stroke: {
                    curve: 'smooth'
                },
                fill: {
                    type: 'gradient', // Options: 'solid', 'gradient'
                    gradient: {
                        shade: 'light',
                        type: "vertical", // Options: 'horizontal', 'vertical'
                        gradientToColors: ['#fff'], // End color of the gradient
                        stops: [0, 100] // Color distribution
                    },
                    colors: ['#079455'] // Start color
                },
                // xaxis: {
                //   type: 'datetime',
                //   categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
                // },
                // tooltip: {
                //   x: {
                //     format: 'dd/MM/yy HH:mm'
                //   },
                // },
                xaxis: {
                    labels: {
                        show: false // Hides X-axis labels
                    },
                    axisBorder: {
                        show: false // Hides the X-axis border line
                    },
                    axisTicks: {
                        show: false // Hides the X-axis ticks
                    }
                },
                yaxis: {
                    labels: {
                        show: false // Hides X-axis labels
                    },
                    axisBorder: {
                        show: false // Hides the X-axis border line
                    },
                    axisTicks: {
                        show: false // Hides the X-axis ticks
                    }
                },
                // xaxis: {
                //   show: false // Hides the X-axis completely
                // },
                // yaxis: {
                //   show: false // Hides the Y-axis completely
                // },
                grid: {
                    show: false
                },
                // tooltip:{
                //   enabled: false
                // }
                legend: {
                    show: false
                }
            } })), h("div", { key: '421af9d3472793b9f3c8ee249e71afbbbc529bea', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
}, [0, "dga-metric-usage"]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-metric-usage", "dga-apex-chart"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-metric-usage":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaMetricUsage$1);
            }
            break;
        case "dga-apex-chart":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DgaMetricUsage = DgaMetricUsage$1;
const defineCustomElement = defineCustomElement$1;

export { DgaMetricUsage, defineCustomElement };

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