// amcharts
// #region 儀錶板圓餅圖
let am4core = window.am4core;
let am4charts = window.am4charts;
let am4themes_animated = window.am4themes_animated;
let am4themes_dark = window.am4themes_dark;


am4core.useTheme(am4themes_dark);

let chart = am4core.create("chartdiv", am4charts.PieChart3D);
chart.colors.list = [
    am4core.color("#f5576b"),
    am4core.color("#3FED95"),
    am4core.color("#004FD3"),
    am4core.color("#DE5389"),
    am4core.color("#FF7BAB"),
    am4core.color("#A9ED39"),
    am4core.color("#49BAF0"),
    am4core.color("#C139ED"),
    am4core.color("#FFDE7F"),
    am4core.color("#00BBBA")
];
chart.legend = new am4charts.Legend();
// 設定圖例的位置
chart.legend.position = "bottom"; // 可選值有 "left", "right", "top", "bottom"
chart.legend.valign = "middle";  // 可選值有 "top", "middle", "bottom"

chart.innerRadius = am4core.percent(0);

let pieSeries = chart.series.push(new am4charts.PieSeries3D());

function drawPie(data) {
    // 清除舊的圓餅圖
    chart.data = [];

    data.forEach((item, index) => {
        item.color = chart.colors.list[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 = "count";
    pieSeries.dataFields.category = "violationtype";
    pieSeries.dataFields.color = "color";
}

// #endregion


// --------------------------------------------------
// Bar chart

// let chart3 = am4core.create('chartdiv2', 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);
//             })
//         }
//     }
// }

// Add data & color

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

// #region 儀錶板下方圓餅圖
// 先用for迴圈產生指定數量的div.chartb1~n (n為數量)
// 接著再使用 am4core.create 產生n個圓餅圖
// 並且根據每個圓餅圖所需的資料進行繪製 (drawPieb1~n)
// #endregion
// --------------------------------------------------
// 取得 API 資料 (圓餅圖數量 n)

function getBottomPieNum() {
    let num = 4;
    return num;
}
function drawPieb(data, chart, pieSeries) {
    // 清除舊的圓餅圖
    chart.data = [];

    data.forEach((item, index) => {
        item.color = chart.colors.list[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 = "count";
    pieSeries.dataFields.category = "violationtype";
    pieSeries.dataFields.color = "color";
}
document.addEventListener('DOMContentLoaded', function () {
    // 取得圓餅圖數量
    let bottom_pie_num = getBottomPieNum();
    // 產生圓餅圖div區塊
    for (let i = 1; i <= bottom_pie_num; i++) {
         let chartdiv = document.createElement('div');
         chartdiv.id = 'chartb' + i;
         chartdiv.className = 'col-3';
         document.getElementById('bottom_pie').appendChild(chartdiv);
    }
    // 產生圓餅圖
    for (let i = 1; i <= bottom_pie_num; i++) {
        let chart = am4core.create('chartb' + i, am4charts.PieChart3D);
        chart.colors.list = [
            am4core.color("#f5576b"),
            am4core.color("#3FED95"),
            am4core.color("#004FD3"),
            am4core.color("#DE5389"),
            am4core.color("#FF7BAB"),
            am4core.color("#A9ED39"),
            am4core.color("#49BAF0"),
            am4core.color("#C139ED"),
            am4core.color("#FFDE7F"),
            am4core.color("#00BBBA")
        ];
        chart.legend = new am4charts.Legend();
        chart.legend.position = "bottom";
        chart.legend.valign = "middle";
        // 不顯示圖例
        chart.legend.disabled = true;
        // 設定圓餅圖的內半徑
        chart.innerRadius = am4core.percent(40);
        // 設定圓餅圖的深度
        chart.depth = 10;
        // 設定圓餅圖的角度
        chart.angle = 50;

        let pieSeries = chart.series.push(new am4charts.PieSeries3D());
        // 不顯示圓餅圖周圍的數據
        pieSeries.labels.template.disabled = true;
        // 不顯示圓餅圖周圍的數據的線條
        pieSeries.ticks.template.disabled = true;
        // 取得圓餅圖資料
        let data = [
            {
                "violationtype": "違規1",
                "count": 10
            },
            {
                "violationtype": "違規2",
                "count": 20
            },
            {
                "violationtype": "違規3",
                "count": 30
            },
            {
                "violationtype": "違規4",
                "count": 40
            },
            {
                "violationtype": "違規5",
                "count": 50
            }
        ];
        // 繪製圓餅圖
        drawPieb(data, chart, pieSeries);
    }
});