dealhub/resources/views/components/dashboard/admin/active-users-chart.blade.php

<div id="active-users-chart-parent" class="col-span-2">
    <x-dashboard.card  class="h-75">
        <div class="flex justify-between items-baseline">
            <h3 class="text-md font-bold mb-4">User Activity</h3>
            <x-ui.toggle-button-group class="mb-4">
                <x-ui.toggle-button :active="request('sortBy') == null">
                    <button onclick="switchGraph(this, 30)" class="graphBtn flex items-center px-2  space-x-2">
                        <p class="font-bold text-xs  sm:text-sm md:text-md">30 Days</p>
                    </button>
                </x-ui.toggle-button>

                <x-ui.toggle-button>
                    <button onclick="switchGraph(this, 7)" class="graphBtn flex items-center px-2 space-x-2">
                        <p class="font-bold text-xs sm:text-sm md:text-md">7 Days</p>
                    </button>
                </x-ui.toggle-button>

                <x-ui.toggle-button>
                    <button id="dateRange" class="flex items-center pt-0.5 px-4 space-x-2">
                        <x-heroicon-o-calendar-date-range class="w-4"/>
                    </button>
                </x-ui.toggle-button>
            </x-ui.toggle-button-group>
        </div>

        <div data-is-loading="false" class="h-50">
            <canvas id="active-users-chart"></canvas>
        </div>
    </x-dashboard.card>
</div>
@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script>
        window.addEventListener('DOMContentLoaded', () => {

            flatpickr("#dateRange", {
                mode: "range",
                dateFormat: "Y-m-d",
                onClose: function (selectedDates) {
                    if (selectedDates.length === 2) {
                        const start = selectedDates[0].toISOString().split('T')[0];
                        const end = selectedDates[1].toISOString().split('T')[0];

                        activeBtn(document.getElementById('dateRange'));

                        generateActiveUsersChart(start, end);
                    }
                }
            });


            // By default load 30 days data
            const end = new Date();
            const start = new Date();
            start.setDate(end.getDate() - 30);
            const startDate = start.toISOString().split('T')[0];
            const endDate = end.toISOString().split('T')[0];

            generateActiveUsersChart(startDate, endDate);
        })

        const generateActiveUsersChart = async (startDay, endDay) => {
            const activeChartParent = document.getElementById('active-users-chart-parent');
            const activeUsersChart = document.getElementById('active-users-chart')

            if (!activeUsersChart || !activeChartParent) {
                console.error('canvas  not defined');
                return;
            }

            toggleShimmer(false, activeChartParent);

            // Generate last 30-day labels from today
            let labels = getDaysArray(startDay, endDay);

            try {
                const {data: apiData} = await axios.get('/api/stats/active-users/', {
                    params: {from: startDay, to: endDay}
                });

                const customerDataFromAPI = apiData?.activeCustomers?.data || [];
                const brokerDataFromAPI = apiData?.activeBrokers?.data || [];

                // Fill the data from api response
                const customerData = labels.map((date) => {
                    let found = customerDataFromAPI.find(item => item.date === date);
                    return found ? found.userCount : 0;
                })

                const brokerData = labels.map((date) => {
                    let found = brokerDataFromAPI.find(item => item.date === date);
                    return found ? found.userCount : 0;
                })

                const data = {
                    labels: labels,
                    datasets: [
                        {
                            label: `Active Customers`,
                            backgroundColor: 'rgba(255, 99, 132, 0.3)',
                            borderColor: 'rgb(255, 99, 132)',
                            borderRadius: 4,
                            borderWidth: 1,
                            data: customerData,
                        },
                        {
                            label: `Active Brokers`,
                            backgroundColor: 'rgba(91,162,238,0.3)',
                            borderColor: 'rgb(99,102,255)',
                            borderRadius: 4,
                            borderWidth: 1,
                            data: brokerData,
                        }
                    ]
                }
                const config = {
                    type: 'line',
                    data: data,
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {beginAtZero: true, ticks: {precision: 0}}
                        },
                        interaction: {intersect: false, mode: 'index'},
                    }
                };

                const existingChart = Chart.getChart(activeUsersChart);
                if (existingChart) {
                    existingChart.destroy()
                }

                const chart = new Chart(activeUsersChart, config);

                toggleShimmer(true, activeChartParent);
            } catch (e) {
                console.log(e)
            }
        };


        const switchGraph = (el, daysCount) => {
            activeBtn(el);
            const end = new Date();
            const start = new Date();
            start.setDate(end.getDate() - daysCount);

            generateActiveUsersChart(
                start.toISOString().split('T')[0],
                end.toISOString().split('T')[0]
            );
        }

        const activeBtn = (el) => {
            const graphBtns = document.getElementById('active-users-chart-parent').querySelectorAll('.toggleBtn');
            graphBtns.forEach(btn => btn.classList.remove('bg-white'));
            el.closest('.toggleBtn').classList.add('bg-white');
        }

        const getDaysArray = (start, end) => {
            let arr = [];
            for (let dt = new Date(start); dt <= new Date(end); dt.setDate(dt.getDate() + 1)) {
                arr.push(new Date(dt).toISOString().split('T')[0]);
            }
            return arr;
        };

    </script>
@endpush