'use strict';

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

const DgaMetricUsage = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    //   @State() variant: 'critical' | 'warning' | 'success' | 'info' | 'neutral' = 'neutral';
    render() {
        return (index.h("div", { key: '23b1d3d8462958245739167a24ff0745e9603093' }, index.h("h1", { key: '28f57b5a541de63b6b26d4ca3a56e877415c08af' }, "Metric Example"), index.h("div", { key: '2cb81eedda63e773b0873f44544f43655c2702ee', style: { padding: '50px', display: 'flex', gap: '20px' } }, index.h("div", { key: '604a11fbececb8bd69034bcb9bdefb8e08c2db6a', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, index.h("dga-apex-chart", { key: 'd015f98ffe73dc3709fef4cbfc9ef2ddb4a0e3ae',
            // 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
                }
            } }), index.h("dga-apex-chart", { key: '03e7380ba4e399482cfc4d3067369592c4813a5f',
            // 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
                }
            } }), index.h("dga-apex-chart", { key: '3c77d04aff110ca8ea9d0fdf3d6640831b29ced3',
            // 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
                }
            } }), index.h("dga-apex-chart", { key: '26c2f01cc2726066c006e239c2f8e10133c7ae95',
            // 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
                }
            } })), index.h("div", { key: '4ce0fd9a63c1d03b3e9ba1210c11d3da4bc8ebf7', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
};

exports.dga_metric_usage = DgaMetricUsage;
