// amcharts
let am4core = window.am4core;
let am4charts = window.am4charts;
let am4themes_animated = window.am4themes_animated;
let am4themes_dark = window.am4themes_dark;

am4core.useTheme(am4themes_dark);
// #region 表一 圓餅
let chart = am4core.create("chartViolation", am4charts.PieChart3D);
chart.colors.list = [am4core.color("#FF0000")];
chart.legend = new am4charts.Legend();
// 設定圖例的位置
chart.legend.position = "bottom"; // 可選值有 "left", "right", "top", "bottom"
chart.legend.valign = "middle";  // 可選值有 "top", "middle", "bottom"

// 設定圖例標籤的樣式
chart.legend.labels.template.fontSize = 22; // 字體大小

let chartColor = [
    am4core.color("#C95F59"),
    am4core.color("#E6986A"),
    am4core.color("#DFC333"),
    am4core.color("#65C581"),
    am4core.color("#00A7C7"),
    am4core.color("#4664BA"),
    am4core.color("#9156FC"),
    am4core.color("#7E71FB"),
    am4core.color("#D6635C"),
    am4core.color("#33952E")
]

chart.innerRadius = am4core.percent(0);
let pieSeries = chart.series.push(new am4charts.PieSeries3D());

function drawPie(data) {
    data.forEach((item, index) => {
        item.color = chartColor[index];
    });
    chart.data = data;

    // 設定邊框顏色、線條粗細和填充顏色
    pieSeries.slices.template.stroke = am4core.color("#ffffff");
    pieSeries.slices.template.strokeWidth = 2;

    pieSeries.slices.template.adapter.add("fill", function (fill, target) {
        // Check if the data item has a color property
        if (target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.color) {
            return target.dataItem.dataContext.color;
        }
        // If not, use the color from the chart's color list based on the data item's index
        return chart.colors.list[target.dataItem.index % chart.colors.list.length];
    });

    pieSeries.dataFields.value = "times";
    pieSeries.dataFields.category = "title";
    pieSeries.dataFields.color = "color";
}





// #endregion

// --------------------------------------------

// #region 表二 圓餅
let chart2 = am4core.create("chartViolation2", am4charts.PieChart3D);
chart2.colors.list = [am4core.color("#FF0000")];
chart2.legend = new am4charts.Legend();
// 設定圖例的位置
chart2.legend.position = "bottom"; // 可選值有 "left", "right", "top", "bottom"
chart2.legend.valign = "middle";  // 可選值有 "top", "middle", "bottom"


// 設定圖例標籤的樣式
chart2.legend.labels.template.fontSize = 22; // 字體大小

chart2.innerRadius = am4core.percent(0);

let pieSeries2 = chart2.series.push(new am4charts.PieSeries3D());

function drawPie2(data) {
    data.forEach((item, index) => {
        item.color = chartColor[index];
    });
    chart2.data = data;
    // 設定邊框顏色、線條粗細和填充顏色
    pieSeries2.slices.template.stroke = am4core.color("#ffffff");
    pieSeries2.slices.template.strokeWidth = 2;

    pieSeries2.slices.template.adapter.add("fill", function (fill, target) {
        // Check if the data item has a color property
        if (target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.color) {
            return target.dataItem.dataContext.color;
        }
    });

    pieSeries2.dataFields.value = "times";
    pieSeries2.dataFields.category = "title";
    pieSeries2.dataFields.color = "color";
}

// #endregion
// --------------------------------------------

// #region 表三
/* Chart code */
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

let chart3 = am4core.create('chartViolation3', am4charts.XYChart)
chart3.colors.step = 2;

chart3.legend = new am4charts.Legend()
chart3.legend.position = 'top'
chart3.legend.paddingBottom = 20
chart3.legend.labels.template.maxWidth = 95
chart3.legend.labels.template.fontSize = 22; // 字體大小
chart3.scrollbarX = new am4core.Scrollbar();
chart3.maskBullets = false;

let xAxis = chart3.xAxes.push(new am4charts.CategoryAxis())
xAxis.dataFields.category = 'category'
xAxis.renderer.cellStartLocation = 0.1
xAxis.renderer.cellEndLocation = 0.9
xAxis.renderer.grid.template.location = 0;

let yAxis = chart3.yAxes.push(new am4charts.ValueAxis());
yAxis.min = 0;

function createSeries(value, name) {

    let series = chart3.series.push(new am4charts.ColumnSeries())
    series.dataFields.valueY = value
    series.dataFields.categoryX = 'category'

    series.columns.template.hoverOnFocus = true;

    series.columns.template.focusable = true;

    series.columns.template.tooltipText = "{name}: {valueY}";

    chart3.series.each(function (series) {
        series.columns.template.adapter.add("label.visible", function (visible, target) {
            return target.dataItem.values.valueY > 50;
        });
    });

    series.name = name

    series.events.on("hidden", arrangeColumns);
    series.events.on("shown", arrangeColumns);

    let bullet = series.bullets.push(new am4charts.LabelBullet())
    bullet.interactionsEnabled = false
    // bullet.dy = 30;
    // bullet.label.text = '{valueY}'
    // bullet.label.fill = am4core.color('#ffffff')
    bullet.label.text = '{valueY}';
    bullet.label.fontWeight = 'bold';
    bullet.label.dy = -15;


    return series;
}

function drawBar(data, violationtype) {
    // 清除圖表數據
    chart3.series.clear();
    chart3.data = data;
    // console.log(data, chart3.data);
    // 重新繪製圖表
    violationtype.forEach((item, index) => {
        // console.log(item, index);
        createSeries(index, item);
    });
}



function arrangeColumns() {

    let series = chart3.series.getIndex(0);

    let w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
    if (series.dataItems.length > 1) {
        let x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
        let x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
        let delta = ((x1 - x0) / chart3.series.length) * w;
        if (am4core.isNumber(delta)) {
            let middle = chart3.series.length / 2;

            let newIndex = 0;
            chart3.series.each(function (series) {
                if (!series.isHidden && !series.isHiding) {
                    series.dummyData = newIndex;
                    newIndex++;
                }
                else {
                    series.dummyData = chart3.series.indexOf(series);
                }
            })
            let visibleCount = newIndex;
            let newMiddle = visibleCount / 2;

            chart3.series.each(function (series) {
                let trueIndex = chart3.series.indexOf(series);
                let newIndex = series.dummyData;

                let dx = (newIndex - trueIndex + middle - newMiddle) * delta

                series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
                series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
            })
        }
    }
}
// #endregion