admin_hura8/assets/js/chart_home.js

const revenue = document.getElementById('revenueChart');


// Mảng labels chứa các ngày trong tuần
var labels_week = ['', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'];
var labels_month = ['', 'T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10', 'T11', 'T12']
var labels_year = ['', '2022', '2023']
// Mảng data chứa dữ liệu biểu đồ
var weeklyData = [0, 50000, 20000, 150000, 60000, 5000, 8000, 70];
var monthlyData = [0, 60000, 20000, 150000, 60000, 5000, 8000, 70, 20000, 10000, 40000, 2000, 22];
var yearlyData = [0, 20000000, 5000000];
// Xác định ngày hiện tại
const today = new Date().getDay(); // Lấy ngày trong tuần từ 0 (Chủ nhật) đến 6 (Thứ 7)


const Chart_revenue = new Chart(revenue, {
    type: 'line',
    data: {
        labels: labels_week,
        datasets: [{
            label: 'view',
            data: weeklyData,
            borderColor: '#4795DF',
            borderWidth: 2,
            pointRadius: 6, // Đặt kích thước điểm mặc định
            pointHoverRadius: 8 // Đặt kích thước điểm khi hover
        },]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    display: true,
                    color: 'transparent' // Màu sắc của ô kẻ trục x
                },
                ticks: {
                    stepSize: 50000,
                    callback: function (value, index, values) {
                        if (value >= 1000) {
                            return (value / 1000) + 'k';
                        }
                        return value;
                    }
                }
            },
            x: {
                beginAtZero: true,
                grid: {
                    display: true,
                    color: 'rgb(234,239,244)', // Màu mờ
                },
                border: {
                    dash: [4, 8],
                },
                ticks: {
                    color: 'rgb(136,183,228)' // Màu đen
                },
            },
        },
        plugins: {
            legend: {
                display: false // Ẩn hiển thị legend
            },
            title: {
                display: true,
            },
            tooltip: {
                borderColor: 'black'
            }
        },
        elements: {
            line: {
                tension: 0.2
            },
            point: {
                borderColor: "#4795DF",
                backgroundColor: "#4795DF"
            }
        },
        interaction: {
            mode: 'index', // Chế độ tương tác
            intersect: false
        },
        onHover: function (event, elements) {
            if (elements.length > 0) {
                var element = elements[0];
                var datasetIndex = element.datasetIndex;
                var index = element.index;

                // Tạo mảng mới chứa màu mờ ban đầu cho tất cả các điểm
                var gridColor = new Array(Chart_revenue.data.labels.length).fill('rgb(234,239,244)');
                var ticksColor = new Array(Chart_revenue.data.labels.length).fill('rgb(234,239,244)');

                // Đặt màu của trục x tương ứng với điểm được hover thành màu tương ứng
                gridColor[index] = 'rgb(136,183,228)';
                ticksColor[index] = 'rgb(136,183,228)';

                // Cập nhật màu của trục x
                Chart_revenue.options.scales.x.grid.color = gridColor;
                Chart_revenue.options.scales.x.ticks.color = ticksColor;

                // Cập nhật biểu đồ
                Chart_revenue.update();
            }
        },
        onLeave: function () {
            // Reset màu của trục x về màu mờ ban đầu
            Chart_revenue.options.scales.x.grid.color = 'rgb(234,239,244)';
            Chart_revenue.options.scales.x.ticks.color = 'rgb(234,239,244)';

            // Cập nhật biểu đồ
            Chart_revenue.update();
        },
    }
});


const clickRevenue = document.getElementById('click-revenue');
clickRevenue.addEventListener('change', select_revenue);

function select_revenue() {
    var selectedValue = clickRevenue.value;

    if (selectedValue === 'week') {
        Chart_revenue.data.labels = labels_week;
        Chart_revenue.data.datasets[0].data = weeklyData;
    } else if (selectedValue === 'month') {
        Chart_revenue.data.labels = labels_month;
        Chart_revenue.data.datasets[0].data = monthlyData;
    } else if (selectedValue === 'year') {
        Chart_revenue.data.labels = labels_year;
        Chart_revenue.data.datasets[0].data = yearlyData;
    }

    Chart_revenue.update();
}




//  bieu dồ lượt truy cập
const access = document.getElementById('chart_access');

const Chart_access = new Chart(access, {
    type: 'bar',
    data: {
        labels: ['Cột 1', 'Cột 2', 'Cột 3', 'Cột 4', 'Cột 5', 'Cột 6'],
        datasets: [
            {
                label: 'Dữ liệu cột 1',
                data: [100000, 20000, 5000, 16000, 2000, 22],
                backgroundColor: 'rgb(141,212,252)',
                borderWidth: 0,
                borderRadius: 50
            },
            {
                label: 'Dữ liệu cột 2',
                data: [150202, 20005, 5055, 17000, 60000, 22],
                backgroundColor: 'rgb(44,122,244)',
                borderWidth: 0,
                borderRadius: 50
            },
        ]
    },
    options: {
        responsive: true,
        scales: {
            x: {
                grid: {
                    display: true,
                    color: 'transparent', // Màu sắc của ô kẻ trục x
                }
            },
            y: {
                beginAtZero: true,
                grid: {
                    display: true,
                    color: 'rgb(221,221,221)',
                    borderDash: [5, 5],
                },
                ticks: {
                    stepSize: 50000,
                    callback: function (value, index, values) {
                        if (value >= 1000) {
                            return (value / 1000) + 'k';
                        }
                        return value;
                    }
                }
            }
        },
        plugins: {
            legend: {
                display: false // Ẩn hiển thị legend
            },
            title: {
                display: true,
            },
            tooltip: {
                borderColor: 'black'
            }
        },
        barPercentage: 1,
        categoryPercentage: 0.2
    },
});


//  biểu đồ website giới thiệu

const webInfo = document.getElementById('chart_WebInfo');

const chart_WebInfo = new Chart(webInfo, {
    type: 'doughnut',
    data: {
        labels: [
            'blue',
            'green',
            'Yellow',
            'yellow'
        ],
        datasets: [{
            label: 'My First Dataset',
            data: [30, 30, 30, 10],
            backgroundColor: [
                'rgb(53,158,255)',
                'rgb(100,195,92)',
                'rgb(0,78,153)',
                'rgb(255,165,29)'
            ],
            hoverOffset: 4,
            borderWidth: 1
        }]
    },
    options: {
        cutout: 100,
        plugins: {
            datalabels: {
                formatter: (value) => {
                    return Math.round(value) + '%';
                },
                color: '#fff',
                font: {
                    size: 14
                },
            },
            legend: {
                display: false // Ẩn hiển thị legend
            },
        },
    },
    plugins: [ChartDataLabels],
})