{% load i18n %}

{% include "insight_ui/components/charts/_data_table.html" %}

<div
    id="{{ chart_config.tag_id }}"
    style="height: {{ chart_config.chart_height|default:24 }}rem"
    role="img"
    aria-label="{% if chart_config.aria_label %}{{ chart_config.aria_label }}{% else %}{% blocktrans with title=chart_config.dataset.title %}Bar chart: {{ title }}{% endblocktrans %}{% endif %}"
    aria-describedby="{{ chart_config.tag_id }}-table"
></div>

<script type="module">
    var chartDom = document.getElementById("{{ chart_config.tag_id }}");
    var myChart = echarts.init(chartDom);
    var option;

    const rawData = {{ chart_config.dataset.data }};
    const totalData = [];
    for (let i = 0; i < rawData[0].length; ++i)
    {
        let sum = 0;
        for (let j = 0; j < rawData.length; ++j)
        {
            sum += rawData[j][i];
        }
        totalData.push(sum);
    }

    const series = {{ chart_config.dataset.series|safe }}.map((name, sid) => {
        return {
            name,
            type: 'bar',
            stack: 'total',
            barWidth: '60%',
            label:{
                show: true,
                formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
            },
            data: rawData[sid].map((d, did) =>
                totalData[did] <= 0 ? 0 : d / totalData[did]
            )
        };
    });

    option = {
        aria: {
            enabled: true,
            decal: {
                show: {{ chart_config.show_decal|yesno:"true,false" }}
            }
        },
        title: {
            text: "{{ chart_config.dataset.title }}"
        },
        legend: {
            selectedMode: false
        },
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: {{ chart_config.dataset.x_axis_legend|safe }}
        },
        series
    };

    option && myChart.setOption(option);

    const resizeChart = () => myChart.resize();
    window.addEventListener('resize', resizeChart);
    if ('ResizeObserver' in window) {
        const resizeObserver = new ResizeObserver(resizeChart);
        resizeObserver.observe(chartDom);
    }
</script>