package chart

templ ShowChart(idDiv string, udata string) {
    <div id={ idDiv } class="mx-auto"></div>
	@GenerateChart(idDiv, udata)
}

script GenerateChart(idDiv string, udata string) {
    htmx.onLoad(function(elt) {
        console.log("elt ",elt)
        var element = document.getElementById(idDiv);
        console.log("element ",element)
        if (element) {
            element.style.height = "450px";
            element.style.width = "100%";
        }

        var myChart = {}; 
        var option = {};

        // var myChart_001 = echarts.init(document.getElementById(idDiv));
        myChart[idDiv] = echarts.init(element);

        // var option_001 = JSON.parse(udata);
        option[idDiv] = JSON.parse(udata);
        console.log("option ", option)
        // myChart_001.setOption(option_001);
        myChart[idDiv].setOption(option[idDiv]);
    });
}

templ ShowChartFixed(idDiv string, udata string, width string, height string) {
    <div id={ idDiv } class="mx-auto"></div>
    @GenerateChartFixed(idDiv, udata, width, height)
}

script GenerateChartFixed(idDiv string, udata string, width string, height string) {
    htmx.onLoad(function(elt) {
        // console.log("elt ",elt)
        var element = document.getElementById(idDiv);
        // console.log("element ",element)
        if (element) {
            element.style.height = height;
            element.style.width = width;
        }

        var myChart = {}; 
        var option = {};

        // var myChart_001 = echarts.init(document.getElementById(idDiv));
        myChart[idDiv] = echarts.init(element);

        // var option_001 = JSON.parse(udata);
        option[idDiv] = JSON.parse(udata);
        // console.log("option ", option)
        // myChart_001.setOption(option_001);
        myChart[idDiv].setOption(option[idDiv]);
    });
}

templ ShowChartResponsiveWidth(idDiv string, udata string, height string) {
    <div id={ idDiv } class="mx-auto" style="width: 100%;"></div>
    @GenerateChartResponsive(idDiv, udata, height)
}

script GenerateChartResponsive(idDiv string, udata string, height string) {
    htmx.onLoad(function(elt) {
        // console.log("elt ",elt)
        var element = document.getElementById(idDiv);
        // console.log("element ",element)
        if (element) {
            element.style.height = height;
        }

        var myChart = {}; 
        var option = {};

        // var myChart_001 = echarts.init(document.getElementById(idDiv));
        myChart[idDiv] = echarts.init(element);

        // var option_001 = JSON.parse(udata);
        option[idDiv] = JSON.parse(udata);
        // console.log("option ", option)
        // myChart_001.setOption(option_001);
        if (option[idDiv]['series']['radius']) {
            option[idDiv]['series']['radius'] = ['30%', '55%'];
        } else {
            option[idDiv]['series'][0]['radius'] = ['30%', '55%'];
        }
    
        myChart[idDiv].setOption(option[idDiv]);

        var resizeObserver = new ResizeObserver(function() {
            myChart[idDiv].resize();
        });

        resizeObserver.observe(element);
    });
}