admin_hura_8/template/javascript/homepage.html

<script>
    const initCustomerAcquisitionChart = () => {
        const chartOptions = {
            chart: {
                height: 350,
                sparkline: {
                    enabled: false,
                },
                toolbar: {
                    show: false,
                },
                zoom: {
                    enabled: false,
                },
                background: "transparent",
            },
            forecastDataPoints: {
                count: 2,
                dashArray: [6, 4],
            },
            grid: {
                show: false,
            },
            yaxis: {
                show: false,
                min: 125,
                max: 181,
            },
            xaxis: {
                categories: Array.from({ length: 15 }, (_, index) => index + 1),
            },
            tooltip: {
                y: {
                    formatter: (val) => val.toString(),
                },
            },
            stroke: {
                curve: "stepline",
                width: [2, 1.5],
            },
            colors: ["#167bff", "rgba(150,150,150,0.3)"],
            series: [
                {
                    name: "Khách hàng",
                    data: [144, 150, 146, 154, 150, 155, 160, 155, 140, 155, 160, 180, 170, 165, 165],
                },
                {
                    name: "Quảng cáo",
                    data: [140, 142, 142, 140, 146, 148, 150, 136, 130, 133, 145, 148, 158, 150, 150],
                },
            ],
        }

        if (document.getElementById("customer-acquisition-chart")) {
            new ApexCharts(document.getElementById("customer-acquisition-chart"), chartOptions).render()
        }
    }

    const initRevenueStatisticsChart = () => {
        const chartOptions = {
            chart: {
                height: 292,
                type: "bar",
                stacked: true,
                background: "transparent",
                toolbar: {
                    show: false,
                },
            },

            plotOptions: {
                bar: {
                    borderRadius: 8,
                    borderRadiusApplication: "end",
                    borderRadiusWhenStacked: "last",
                    colors: {
                        backgroundBarColors: ["rgba(150,150,150,0.07)"],
                        backgroundBarRadius: 8,
                    },
                    columnWidth: "45%",
                    barHeight: "100%",
                },
            },
            dataLabels: {
                enabled: false,
            },
            colors: ["#ff8b4b", "#6c74f8"],
            legend: {
                show: true,
                horizontalAlign: "center",
                offsetX: 0,
                offsetY: 6,
            },
            series: [
                {
                    name: "Đơn hàng",
                    data: [10, 12, 14, 16, 18, 20, 14, 16, 24, 12],
                },
                {
                    name: "Doanh thu",
                    data: [15, 24, 21, 28, 30, 40, 22, 32, 48, 20],
                },
            ],
            xaxis: {
                categories: [
                    new Date("1/1/2016"),
                    new Date("1/1/2017"),
                    new Date("1/1/2018"),
                    new Date("1/1/2019"),
                    new Date("1/1/2020"),
                    new Date("1/1/2021"),
                    new Date("1/1/2022"),
                    new Date("1/1/2023"),
                    new Date("1/1/2024"),
                    new Date("1/1/2025"),
                ],
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    formatter: (val) => {
                        return new Date(val).getFullYear().toString()
                    },
                },
            },
            yaxis: {
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                },
            },

            tooltip: {
                enabled: true,
                shared: true,
                intersect: false,
            },
            grid: {
                show: false,
            },
            responsive: [
                {
                    breakpoint: 450,
                    options: {
                        plotOptions: {
                            bar: {
                                borderRadius: 4,
                            },
                        },
                        xaxis: {
                            tickAmount: 3,
                        },
                    },
                },
            ],
        }

        if (document.getElementById("revenue-statics-chart")) {
            new ApexCharts(document.getElementById("revenue-statics-chart"), chartOptions).render()
        }
    }

    const initGlobalSalesChart = () => {
        const data = [
            {
                name: "Turkey",
                orders: 9,
            },
            {
                name: "India",
                orders: 12,
            },
            {
                name: "Canada",
                orders: 13,
            },
            {
                name: "US",
                orders: 16,
            },
            {
                name: "Netherlands",
                orders: 14,
            },
            {
                name: "Italy",
                orders: 17,
            },
            {
                name: "Other",
                orders: 19,
            },
        ]

        const chartOptions = {
            chart: {
                height: 344,
                type: "bar",
                parentHeightOffset: 0,
                background: "transparent",
                toolbar: {
                    show: false,
                },
            },
            plotOptions: {
                bar: {
                    horizontal: true,
                    borderRadius: 4,
                    distributed: true,
                    borderRadiusApplication: "end",
                },
            },
            dataLabels: {
                enabled: true,
                textAnchor: "start",
                style: {
                    colors: ["#fff"],
                },
                formatter: function (val, opt) {
                    return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
                },
                offsetX: -10,
                dropShadow: {
                    enabled: false,
                },
            },
            series: [
                {
                    data: data.map((country) => country.orders),
                },
            ],
            legend: {
                show: false,
            },
            stroke: {
                width: 0,
                colors: ["#fff"],
            },
            xaxis: {
                categories: data.map((country) => country.name),
            },
            yaxis: {
                labels: {
                    show: false,
                },
            },
            grid: {
                show: false,
            },

            tooltip: {
                theme: "dark",
                x: {
                    show: false,
                },
                y: {
                    formatter: (val) => `${val}%`,
                },
            },
            colors: ["#7179ff", "#4bcd89", "#ff6c88", "#5cb7ff", "#9071ff", "#ff5892", "#ff8b4b"],
        }

        if (document.getElementById("global-sales-chart")) {
            new ApexCharts(document.getElementById("global-sales-chart"), chartOptions).render()
        }
    }


    const initGradientDonutChart = () => {
        const seriesData = [35.1, 23.5, 2.4, 5.4]
        const chartOptions = {
            chart: {
                type: "donut",
                height: 380,
                toolbar: {
                    show: false,
                },
                background: "transparent",
            },
            title: {
                text: "Truy cập website",
                style: { fontWeight: "500" },
                align: "right",
            },
            stroke: {
                show: true,
                width: 1,
                colors: ["var(--color-base-100)"],
            },
            fill: {
                type: "solid",
            },
            plotOptions: {
                pie: {
                    startAngle: -45,
                    endAngle: 315,
                    donut: {
                        size: "60%",
                        labels: {
                            show: true,
                            value: {
                                formatter: (value) => `${value}K`,
                                color: "var(--color-base-content)",
                            },
                            total: {
                                show: true,
                                color: "#FF4560",
                                formatter: () => `${seriesData.reduce((acc, cur) => acc + cur, 0)}K`,
                            },
                        },
                    },
                },
            },
            tooltip: {
                enabled: true,
                y: {
                    formatter: (value) => `${value}K`,
                },
            },
            responsive: [
                {
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 200,
                        },
                        legend: {
                            position: "bottom",
                        },
                    },
                },
            ],
            labels: [
                "Trực tiếp",
                "Quảng cáo",
                "Liên kết",
                "Qua email",
            ],
            colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
            series: seriesData,
        }

        if (document.getElementById("gradient-donut-chart")) {
            new ApexCharts(document.getElementById("gradient-donut-chart"), chartOptions).render()
        }
    }


    function initAdminHomeTab() {
        document.querySelectorAll("#js-admin-home-tab a").forEach(function (link) {
            link.addEventListener("click", function (event) {
                event.preventDefault();

                // Xóa class current ở tất cả các tab
                document.querySelectorAll("#js-admin-home-tab a").forEach(function (el) {
                    el.classList.remove("btn-active");
                });

                // Gán class current vào tab đang click
                this.classList.add("btn-active");

                // Lấy ID từ href để show nội dung
                var id = this.getAttribute("href");

                // Ẩn tất cả nội dung
                document.querySelectorAll(".home-report-holder").forEach(function (holder) {
                    holder.style.display = "none";
                });

                // Hiện phần tương ứng
                document.querySelector(id).style.display = "block";
            });
        });
    }


    document.addEventListener("DOMContentLoaded", () => {
        initCustomerAcquisitionChart()
        initRevenueStatisticsChart()
        initGlobalSalesChart()
        initGradientDonutChart()
        initAdminHomeTab()
    })

</script>