var histogram_data = []
var histogram_cat = []
var histogram_colors = []
var histogram_name = []
histogram_data["PVPotential"] = [3377,  522,  667,  392,  205,  216,  169,  106,  746]
histogram_data["ElecDemand"] = [71, 56, 65, 55, 60]
histogram_data["HeatDemand"] = [29, 6, 12, 13, 16, 24, 18, 20, 765]
histogram_cat["PVPotential"] = [
    '0 - 3615',
    '3615 - 4615',
    '4615 - 5615',
    '5615 - 6615',
    '6615 - 7615',
    '7615 - 8615',
    '8615 - 9615',
    '9615 - 10615',
    '> 10615'
]
histogram_cat["ElecDemand"] = [
    '0 - 3229',
    '3229 - 4229',
    '4229 - 5229',
    '5229 - 6229',
    '6229 - 7229',
    '> 7229'
]
histogram_cat["HeatDemand"] = [
    '0 - 10937',
    '10937 - 12884',
    '12884 - 14832',
    '14832 - 16779',
    '16779 - 18726',
    '18726 - 20673',
    '20673 - 22620',
    '22620 - 24568',
    '> 24568'
]
histogram_colors["PVPotential"] = ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b']
histogram_colors["ElecDemand"] = ['#feedde', '#fdd0a2', '#fdae6b', '#fd8d3c', '#e6550d', '#a63603']
histogram_colors["HeatDemand"] = ['#fcfbfd', '#efedf5', '#dadaeb', '#bcbddc', '#9e9ac8', '#807dba', '#6a51a3', '#54278f', '#3f007d']
histogram_name["PVPotential"] = "PV Potential (kW⋅h_el)"
histogram_name["ElecDemand"] = "Elec Demand (kW⋅h_el)"
histogram_name["HeatDemand"] = "Heat Demand (kW⋅h_th)"
var chart;
var activateChart = function (data_name) {
    console.log(`draw chart for ${data_name}`)
    console.log(`data: ${histogram_data[data_name]}`)

    if (typeof chart !== "undefined") {
        // detroy old chart
        chart.destroy();
    }
    if (typeof histogram_name[data_name] !== "undefined") {
        var options = {
            series: [{
                data: histogram_data[data_name],
                name: "# of Buildings: "
            }],
            chart: {
                height: 350,
                type: 'bar',
                events: {
                    click: function (chart, w, e) {
                        // console.log(chart, w, e)
                    }
                }
            },
            colors: histogram_colors[data_name],
            plotOptions: {
                bar: {
                    columnWidth: '45%',
                    distributed: true,
                }
            },
            dataLabels: {
                enabled: false
            },
            legend: {
                show: false
            },
            xaxis: {
                title: {
                    text: histogram_name[data_name],
                },
                categories: histogram_cat[data_name],
                labels: {
                    style: {
                        colors: "#000",
                        fontSize: '12px'
                    }
                }
            },
            tooltip: {
                y: {
                    title: {
                        formatter: (seriesName) => seriesName,
                    },
                },
                x: {
                    show: false,
                }
            }
        };

        chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    }

}

