// amcharts
// import '/amcharts_4.10.38/core.js'
// import '/amcharts_4.10.38/charts.js'
// import '/amcharts_4.10.38/themes/dark.js'

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.legend.paddingTop = 10;    // 上方間距
// chart.legend.paddingRight = 12;  // 右側間距
// chart.legend.paddingBottom = 10; // 下方間距
// chart.legend.paddingLeft = 12;   // 左側間距

// 設定圖例的背景顏色和邊框
// chart.legend.background.fill = am4core.color("#f5f5f5"); // 背景顏色
// chart.legend.background.stroke = am4core.color("#d1d1d1"); // 邊框顏色
// chart.legend.background.strokeWidth = 1; // 邊框寬度
// chart.legend.background.cornerRadius = 8; // 背景圓角

// 設定圖例標籤的樣式
// chart.legend.labels.template.fontSize = 12; // 字體大小
// chart.legend.labels.template.fill = am4core.color("#555555"); // 字體顏色

// 設定圖例標記的大小
// chart.legend.markers.template.width = 20;
// chart.legend.markers.template.height = 20;

// 如果您想要更改標記的形狀，例如使用圓形而不是方形
// chart.legend.markers.template.circle.stroke = am4core.color("#ff0000");
// chart.legend.markers.template.circle.fill = am4core.color("#ff0000");

chart.data = [{
    "violationtype": "Lithuania",
    "litres": 501.9,
    "color": am4core.color("#f5576b")
}, {
    "violationtype": "Czech Republic",
    "litres": 301.9,
    "color": am4core.color("#3FED95")
}, {
    "violationtype": "Ireland",
    "litres": 201.1,
    "color": am4core.color("#004FD3")
}, {
    "violationtype": "Germany",
    "litres": 165.8,
    "color": am4core.color("#DE5389")
}, {
    "violationtype": "Australia",
    "litres": 139.9,
    "color": am4core.color("#FF7BAB")
}, {
    "violationtype": "Austria",
    "litres": 128.3,
    "color": am4core.color("#A9ED39")
}, {
    "violationtype": "UK",
    "litres": 99,
    "color": am4core.color("#49BAF0")
}, {
    "violationtype": "Belgium",
    "litres": 60,
    "color": am4core.color("#C139ED")
}, {
    "violationtype": "The Netherlands",
    "litres": 50,
    "color": am4core.color("#FFDE7F")
}, {
    "violationtype": "The Netherlands2",
    "litres": 50,
    "color": am4core.color("#00BBBA")
}];

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) {
    //   if (target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.color) {
    //     return target.dataItem && target.dataItem.dataContext && target.dataItem.dataContext.color ? target.dataItem.dataContext.color : fill;
    //   }
    //   // If not, use the next color from the chart's color list
    //   return chart.colors.next();
    // });
    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.slices.template.tooltipText = "";
    // 圓餅圖周圍的數據(常態顯示)
    // pieSeries.labels.template.disabled = true;
    // 圓餅圖周圍的數據(常態顯示) 的線條
    // pieSeries.ticks.template.disabled = true;

    pieSeries.dataFields.value = "count";
    pieSeries.dataFields.category = "violationtype";
    pieSeries.dataFields.color = "color";
}




// --------------------------------------------------
// Bar chart
// Create chart instance
// let chart2 = am4core.create("chartdiv2", am4charts.XYChart);

// Add data & color



// --------------------------------------------------
// Highcharts
// import '/Highcharts-11.1.0/code/highcharts.js'
// import '/Highcharts-11.1.0/code/highcharts-3d.js'
// import '/Highcharts-11.1.0/code/modules/exporting.js'
// import '/Highcharts-11.1.0/code/modules/export-data.js'
// import '/Highcharts-11.1.0/code/modules/accessibility.js'

// // Example to create a simple line chart in a div#pie:
// Highcharts.chart("pie", {
//     chart: {
//         type: "pie",
//         options3d: {
//             enabled: true,
//             alpha: 45
//         }
//     },
//     title: {
//         useHTML: true,
//         text: "<span class='pie_title'></span>"
//     },
//     subtitle: {
//         // text: "As per statistics data 2016"
//     },
//     plotOptions: {
//         pie: {
//             innerSize: 100,
//             depth: 65,
//             allowPointSelect: false,
//             cursor: "pointer",
//             dataLabels: {
//                 enabled: true,
//                 format: "{point.name} ({point.percentage:.1f}%)",
//                 connectorWidth: 2
//             },
//             borderColor: null,
//             borderWidth: 0 // < set this option
//         }
//     },
//     colors: ["#3b5998", "#d34836", "#8a3ab9", "#0077B5", "#0084b4", "#bb0000"],
//     series: [
//         {
//             name: "Million user",
//             data: [
//                 ["Facebook", 1300],
//                 ["Google+", 375],
//                 ["Instagram", 500],
//                 { name: "LinkedIn", y: 450, sliced: false, selected: false },
//                 ["Twitter", 313],
//                 ["YouTube", 1000]
//             ]
//         }
//     ],
//     tooltip: {
//         useHTML: true,
//         // formatter: () => {
//         //     console.log()
//         //     return `
//         //     <span style="color:white">
//         //         <h1>{point.key}</h1>
//         //         <h4>{point.percentage:.1f} {series.name} </h4>
//         //     </span>
//         //     `;
//         // },
//         headerFormat: "<h1 class='pie_title'>{point.key}</h1>",
//         pointFormat: "<h4 class='pie_content'>{point.percentage:.1f} {series.name} </h4>"
//     }
// });

// // Bar chart
// Highcharts.chart('bar', {
//     chart: {
//         type: 'column'
//     },
//     title: {
//         text: 'Corn vs wheat estimated production for 2020',
//         align: 'left'
//     },
//     subtitle: {
//         text:
//             'Source: <a target="_blank" ' +
//             'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>',
//         align: 'left'
//     },
//     xAxis: {
//         categories: ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia'],
//         crosshair: true,
//         accessibility: {
//             description: 'Countries'
//         }
//     },
//     yAxis: {
//         min: 0,
//         title: {
//             text: '1000 metric tons (MT)'
//         }
//     },
//     tooltip: {
//         valueSuffix: ' (1000 MT)'
//     },
//     plotOptions: {
//         column: {
//             pointPadding: 0.2,
//             borderWidth: 0
//         }
//     },
//     series: [
//         {
//             name: 'Corn',
//             data: [406292, 260000, 107000, 68300, 27500, 14500]
//         },
//         {
//             name: 'Wheat',
//             data: [51086, 136000, 5500, 141000, 107180, 77000]
//         }
//     ]
// });

// --------------------------------------------------
// Google charts
// import '/js/v2/charts_loader.js'

// google.charts.load('current', { 'packages': ['corechart'] });
// google.charts.setOnLoadCallback(drawPieChart);

// function drawPieChart() {
//   let data = google.visualization.arrayToDataTable([
//     ['Task', 'Hours per Day'],
//     ['Work', 8],
//     ['Eat', 2],
//     ['TV', 4],
//     ['Gym', 2],
//     ['Sleep', 8]
//   ]);
//   let options = {
//     title: 'My Daily Activities',
//     legend: 'bottom',
//     is3D: true,
//     height: 350,
//   };
//   let chart = new google.visualization.PieChart(document.getElementById('pieChart'));
//   chart.draw(data, options);
// }
// --------------------------------------------------