Try your search with a different keyword or use * as a wildcard.
@{
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>