FruitBank/Presentation/Nop.Web/Areas/Admin/Views/Home/_CustomerStatistics.cshtml

@inject Nop.Services.Common.IGenericAttributeService genericAttributeService
@inject IWorkContext workContext
@{
    const string prefix = "customer-statistics";
    const string hideCardAttributeName = "Reports.HideCustomerStatisticsCard";
    var hideCard = await genericAttributeService.GetAttributeAsync<bool>(await workContext.GetCurrentCustomerAsync(), hideCardAttributeName);
}

<script src="~/lib_npm/chart.js/chart.umd.min.js"></script>

<div class="card card-primary card-outline @if (hideCard){<text>collapsed-card</text>}" id="@(prefix)-card">
    <div class="card-header with-border">
        <h3 class="card-title">
            <i class="far fa-user"></i>
            @T("Admin.Reports.Customers.CustomerStatistics")
        </h3>
        <div class="card-tools float-right">
            <button class="btn btn-xs btn-info btn-flat margin-r-5" @if (hideCard) { <text> disabled="disabled" </text>  } data-chart-role="toggle-chart" data-chart-period="year">@T("Admin.Reports.Customers.CustomerStatistics.Year")</button>
            <button class="btn btn-xs btn-info btn-flat margin-r-5" @if (hideCard) { <text> disabled="disabled" </text>  } data-chart-role="toggle-chart" data-chart-period="month">@T("Admin.Reports.Customers.CustomerStatistics.Month")</button>
            <button class="btn btn-xs btn-info btn-flat" @if (hideCard) { <text> disabled="disabled" </text>  } data-chart-role="toggle-chart" data-chart-period="week">@T("Admin.Reports.Customers.CustomerStatistics.Week")</button>
            <button class="btn btn-tool margin-l-10" data-card-widget="collapse">
                @if (hideCard)
                {
                    <text><i class="fas fa-plus"></i></text>
                }
                else
                {
                    <text><i class="fas fa-minus"></i></text>
                }
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="chart" style="height: 300px;">
            <canvas id="@(prefix)-chart" height="300"></canvas>
        </div>
    </div>
</div>

<script>
    $(function() {
        var csCurrentPeriod;

        $('#@(prefix)-card').on('click',  'button[data-card-widget="collapse"]', function () {
            
            var collapsed = !$('#@(prefix)-card').hasClass('collapsed-card');
            saveUserPreferences('@(Url.Action("SavePreference", "Preferences"))', '@hideCardAttributeName', collapsed);
                       
            if (!collapsed) {
                $('#@(prefix)-card button[data-chart-role="toggle-chart"]').removeAttr('disabled');
                if (!csCurrentPeriod) {
                    $('#@(prefix)-card button[data-chart-role="toggle-chart"][data-chart-period="week"]').trigger('click');
                }
            } else {
                $('#@(prefix)-card button[data-chart-role="toggle-chart"]').attr('disabled', 'disabled');
            }
        });

        var csConfig = {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                    {
                        backgroundColor: 'rgba(0,166,90,0.5)',
                        fill: 'origin',
                        label: "@T("Admin.Reports.Customers.CustomerStatistics")",
                        borderColor: 'rgba(0,166,90,0.5)',
                        pointBorderColor: 'rgba(0,166,90,0.9)',
                        pointBackgroundColor: 'rgba(0,166,90,0.2)',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(0,166,90,1)',
                        data: [],
                    }
                ]
            },
            options: {
                plugins: {
                    legend: {
                        display: false,
                    },
                },
                scales: {
                    x: {
                        display: true,
                        ticks: {
                            callback: function (dataLabel, index) {
                                var labels = this.chart.config.data.labels;
                                return labels.length <= 12 || index % 5 === 0 ? labels[index] : '';
                            }
                        },
                        grid: {
                            display: true,
                            color: 'rgba(0,0,0,.05)',
                            lineWidth: 1,
                        },
                    },
                    y: {
                        display: true,
                        ticks: {
                            stepSize: 1
                        },
                        grid: {
                            display: true,
                            color: 'rgba(0,0,0,.05)',
                            lineWidth: 1,
                        },
                    }
                },

                elements: {
                    line: {
                        borderWidth: 1,
                        tension: 0.3
                    },
                    point: {
                        pointStyle: 'circle',
                        radius: 4,
                        borderWidth: 1,
                        hitRadius: 20,
                        hoverRadius: 6,
                    },
                },
                maintainAspectRatio: false,
            }
        };

        function changeCsPeriod(period) {
            var csLabels = [];
            var csData = [];

            $.ajax({
                cache: false,
                type: "GET",
                url: "@Url.Action("LoadCustomerStatistics", "Customer")",
                data: {
                    period: period
                },
                success: function (data, textStatus, jqXHR) {
                    for (var i = 0; i < data.length; i++) {
                        csLabels.push(data[i].date);
                        csData.push(data[i].value);
                    }

                    if (!window.customerStatistics) {
                        csConfig.data.labels = csLabels;
                        csConfig.data.datasets[0].data = csData;
                        csConfig.data.scales =
                        window.customerStatistics = new Chart(document.getElementById("@prefix-chart").getContext("2d"), csConfig);
                    } else {
                        window.customerStatistics.config.data.labels = csLabels;
                        window.customerStatistics.config.data.datasets[0].data = csData;
                        window.customerStatistics.update();
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#loadCustomerStatisticsAlert").trigger("click");
                }
            });
        }

        $('#@(prefix)-card button[data-chart-role="toggle-chart"]').on('click', function () {
            var period = $(this).attr('data-chart-period');
            csCurrentPeriod = period;
            changeCsPeriod(period);
            $('#@(prefix)-card button[data-chart-role="toggle-chart"]').removeClass('bg-light-blue');
            $(this).addClass('bg-light-blue');
        });

        @if (!hideCard)
        {
            <text>
                $('#@(prefix)-card button[data-chart-role="toggle-chart"][data-chart-period="week"]').trigger('click');
            </text>
        }
    });
</script>