{% load taskmonitor %}

{% random_id as data_id %}

{{ data|json_script:data_id }}
<figure class="highcharts-figure">
    {% include "admin/taskmonitor/report/div_chart_partial.html" with data_id=data_id %}
    <script>
        fetch("{% url 'taskmonitor:admin_taskmonitor_report_json' report_name %}")
            .then((response) => {
                if (response.ok) {
                    return response.json();
                }
                throw new Error(`${response.status} ${response.statusText}: ${response.url}`);
            })
            .then((data) => {
                Highcharts.chart('{{ data_id }}-container', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie',
                    },
                    title: null,
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y:.0f}</b> ({point.percentage:.1f}%)'
                    },
                    accessibility: {
                        point: {
                        valueSuffix: '%'
                        }
                    },
                    plotOptions: {
                        pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        animation: false,
                        dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                            }
                        }
                    },
                    series: [{
                        name: 'Tasks',
                        colorByPoint: true,
                        cursor: 'pointer',
                            point: {
                                events: {
                                    click: function () {
                                        location.href = this.options.url;
                                    }
                                }
                            },
                        data: data.data
                        }]
                    });
            })
            .catch((error) => {
                let div = document.getElementById("{{ data_id }}-container");
                div.innerHTML = `<p class="text-danger">${error}</p>`
            });
    </script>
</figure>
