var YourTeam = YourTeam || {};
YourTeam.Chartjs = YourTeam.Chartjs || {};
class Bar {
    constructor() {
    }
    /*
    * @deprecated since version 0.1
    * @description 初始化Bar基本圖表
    * @param {String} cvsId the canvas`s id    
    * @param {Array} aryLabelsX X軸標籤值(String Array)
    * @param {Array} aryVluesY Y軸量值(Integer Array)
    * @param {String} strTitle the title of the chart;def value = null
    * @returns {Object} chart element
    */
    initBasesss(cvsId, aryLabels, aryVlues, strTitle = null) {
        //function newDate(days) {
        //    return new YourTeam.Utility.DateHelper().getChangeDateTime(false, '/', 0, 0, days);
        //}
        let myDatasets = [];
        let objJson = {};
        for (let i = 0; i < aryVlues.length; i++) {
            objJson = {};
            objJson.label = aryLabels[i];
            objJson.data = [aryVlues[i]];
            objJson.borderColor = "rgba(220,20,20,1)";
            objJson.backgroundColor = "rgba(220,20,20,0.5)";
            myDatasets.push(objJson);
        }

        let config = {
            type: "bar",
            data: {
                //labels: [newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
                labels: aryLabels,
                datasets: myDatasets
                //datasets: [{
                //    //data: [2, 5, 3, 4, 7, 3],
                //    data: aryVlues,
                //    borderColor: "rgba(220,20,20,1)",
                //    backgroundColor: "rgba(220,20,20,0.5)"
                //}]
            },
            options: {
                legend: {
                    display: true,
                    labels: {
                        fontColor: 'rgb(255, 99, 132)'
                    }
                },
                scales: {
                    xAxes: [{
                        type: "category",
                        labels: aryLabels
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                title: {
                    display: (strTitle) ? true : false,
                    text: (strTitle) ? strTitle : ""
                }
            }
        }
        let ctx = document.getElementById(cvsId).getContext("2d");
        //window.myLine = new Chart(ctx, config);
        return new Chart(ctx, config);
    }
    /*
    * @deprecated since version 0.1
    * @description 初始化Bar基本圖表
    * @param {String} cvsId the canvas`s id    
    * @param {Array} aryLabelsX X軸標籤值(String Array)
    * @param {Array} aryVluesY Y軸量值(Integer Array)
    * @param {String} strTitle the title of the chart;def value = null
    * @param {String} type the chart is vertical or horizontal ;def value = "bar" (vertical), "horizontalBar" (horizontal)
    * @returns {Object} chart element
    */
    initBase(cvsId, aryLabels, aryVlues, strLabel = null, strTitle = null, chart = null,type="bar",animation = null) {
        //function newDate(days) {
        //    return new YourTeam.Utility.DateHelper().getChangeDateTime(false, '/', 0, 0, days);
        //}
        if (chart !== null) {
            chart.destroy();
        }
        let myDatasets = [];
        let objJson = {};
        let valLabelObj = {};
  
        objJson.backgroundColor = [];

        objJson.label = strLabel ?? "";
        for (let i = 0; i < aryVlues.length; i++) {
            objJson.borderColor = "rgba(220,20,20,1)";
            objJson.backgroundColor.push("rgba(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ",0.5)");
        }
        objJson.data = aryVlues;
        myDatasets.push(objJson);
        
       
        let config = {
            type: type,
            data: {
                //labels: [newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
                labels: aryLabels,
                datasets: myDatasets
                //datasets: [{
                //    //data: [2, 5, 3, 4, 7, 3],
                //    data: aryVlues,
                //    borderColor: "rgba(220,20,20,1)",
                //    backgroundColor: "rgba(220,20,20,0.5)"
                //}]
            },
            options: {
                indexAxis: 'y',
                legend: {
                    labels: {
                        generateLabels: function (chart) {
                            let labels = chart.data.labels;
                            let dataset = chart.data.datasets[0];
                            let legend = labels.map(function (label, index) {
                                return {
                                    datasetIndex: 0,
                                    fillStyle: dataset.backgroundColor && dataset.backgroundColor[index],
                                    strokeStyle: dataset.borderColor && dataset.borderColor[index],
                                    lineWidth: 0,
                                    text: label
                                }
                            });
                            return legend;
                        }
                    },
                    onClick: null
                },
                
                scales: {
                    xAxes: [{
                        
                        ticks: {
                            beginAtZero: true,
                            callback: function (value, index, values) {
                                if (value.length > 10) {
                                    value = value.substring(0, 10) + "...";
                                }
                                return value;
                            },
                        },
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                   
                },
                animation: animation,
                title: {
                    display: (strTitle) ? true : false,
                    text: (strTitle) ? strTitle : ""
                },
                tooltips: {
                    callbacks: {
                        //label: function (tooltipItem) {
                        //    console.log(tooltipItem)
                        //    return tooltipItem.yLabel;
                        //},
                        //title: function (tooltipItem) {
                        //    console.log(tooltipItem)
                        //    return tooltipItem.xLabel
                        //}
                    }
                },
            },
           
        }
        let ctx = document.getElementById(cvsId).getContext("2d");
        //window.myLine = new Chart(ctx, config);
        return new Chart(ctx, config);
    }
    /*
    * @deprecated since version 0.1
    * @description 初始化Bar日期基本圖表
    * @param {String} cvsId the canvas`s id    
    * @param {Array} aryLabelsX X軸標籤值(Date Array)
    * @param {Array} aryVluesY Y軸量值(Integer Array)
    * @param {String} strTitle the title of the chart;def value = null
    * @returns {Object} chart element
    */
    initBaseDate(cvsId, aryLabels, aryVlues, strTitle = null, chart = null) {
        //function newDate(days) {
        //    return new YourTeam.Utility.DateHelper().getChangeDateTime(false, '/', 0, 0, days);
        //}
        if (chart !== null) {
            chart.destroy();
        }
        let config = {
            type: "bar",
            data: {
                //labels: [newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
                labels: aryLabels,
                datasets: [{
                    //data: [2, 5, 3, 4, 7, 3],
                    data: aryVlues,
                    borderColor: "rgba(220,20,20,1)",
                    backgroundColor: "rgba(220,20,20,0.5)"
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: "time",
                        time: {
                            unit: "day",
                            round: "day",
                            displayFormats: {
                                day: "YYYY/MM/DD"
                            }
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                title: {
                    display: (strTitle) ? true : false,
                    text: (strTitle) ? strTitle : ""
                },
                
            }
        }
        let ctx = document.getElementById(cvsId).getContext("2d");
        //window.myLine = new Chart(ctx, config);
        return new Chart(ctx, config);
    }
}
YourTeam.Chartjs.Bar = YourTeam.Chartjs.BarHelper || Bar;



class Pie {
    constructor() {
    }
    /*
    * @deprecated since version 0.1
    * @description 初始化Pie基本圖表
    * @param {String} cvsId the canvas`s id    
    * @param {Array} aryLabels 標籤值(String Array)
    * @param {Array} aryVlues  量值(Integer Array)
    * @param {String} strTitle the title of the chart;def value = null
    * @param {Integer} borderWidth the width of the border;def value = 1
    * @param {Array} aryStrBgColor the rgba or color code with the backaround;def value = null
    * @param {Array} aryStrBorderColor the rgba or color code with the border;def value = null
    * @returns {Object} chart element
    */

   

    initBase(cvsId, aryLabels, aryVlues, strTitle = null, chart = null, borderWidth = 1, aryStrBgColor = null, aryStrBorderColor = null)
    {
        if (chart !== null) {
            chart.destroy();
        }
        if (!aryStrBgColor) {
            aryStrBgColor = [];
            for (let i = 0; i < aryVlues.length; i++) {
                aryStrBgColor.push('rgb(' + random(0, 255) + ', ' + random(0, 255) + ', ' + random(0, 255) + ')');
            }
        }
        if (!aryStrBorderColor) {
            aryStrBorderColor = [];
            for (let i = 0; i < aryVlues.length; i++) {
                aryStrBorderColor.push('rgb(255,255,255)');
            }
        }
        let config = {
            type: (aryVlues.length % 2) ? "doughnut" :"doughnut",
            data: {
                labels: aryLabels,
                datasets: [{
                    data: aryVlues,
                    backgroundColor: aryStrBgColor,
                    borderColor: aryStrBorderColor,
                    borderWidth: borderWidth
                }]                
            },
            options: {
                //cutoutPercentage: 40,
                cutoutPercentage: 60,
                maintainAspectRatio: false,
                responsive: false,
                legend: {
                    display: false,
                },

                title: {
                    display: (strTitle) ? true : false,
                    text: (strTitle) ? strTitle : ""
                },
                tooltips: {
                    position: 'nearest',
                    xAlign: "left",
                    yAlign: 'center'
                }
            }
        }
        let ctx = document.getElementById(cvsId).getContext("2d");        
        //window.myLine = new Chart(ctx, config);
        return new Chart(ctx, config);
    }
}
YourTeam.Chartjs.Pie = YourTeam.Chartjs.PieHelper || Pie;


function random(min, max) {
    return Math.floor(Math.random() * max) + min;
}