298 lines
11 KiB
JavaScript
298 lines
11 KiB
JavaScript
(function ($) {
|
|
|
|
function format_amount(amount) {
|
|
return currencySymbol.replace(/[0-9.,]+/, amount);
|
|
}
|
|
|
|
$(window).on('load', function () {
|
|
|
|
if (document.getElementById('ppress-report-revenue')) {
|
|
|
|
$('#ppress-mode-filter select').on('change', function () {
|
|
$('#ppress-date-filters').toggle(this.value === 'custom');
|
|
}).trigger('change');
|
|
|
|
const revenueConfig = {
|
|
type: 'line',
|
|
data: {
|
|
labels: revenueStat.label,
|
|
datasets: revenueStat.dataset
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
stacked: false,
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
// https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, ticks) {
|
|
return format_amount(value);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
let label = context.dataset.label || '';
|
|
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += format_amount(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
const taxesConfig = {
|
|
type: 'line',
|
|
data: {
|
|
labels: taxesStat.label,
|
|
datasets: taxesStat.dataset
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
stacked: false,
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
// https://www.chartjs.org/docs/latest/samples/scale-options/ticks.html
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, ticks) {
|
|
return format_amount(value);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
let label = context.dataset.label || '';
|
|
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += format_amount(context.parsed.y);
|
|
}
|
|
return label;
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
const ordersConfig = {
|
|
type: 'line',
|
|
data: {
|
|
labels: orderStat.label,
|
|
datasets: orderStat.dataset
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
stacked: false,
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
position: 'left',
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
const refundConfig = {
|
|
type: 'line',
|
|
data: {
|
|
labels: refundStat.label,
|
|
datasets: refundStat.dataset
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
stacked: false,
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
const topPlanConfig = {
|
|
type: 'line',
|
|
data: {
|
|
labels: topPlansStat.label,
|
|
datasets: topPlansStat.dataset
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
stacked: false,
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
stacked: true,
|
|
position: 'left',
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
position: 'right',
|
|
// grid line settings
|
|
grid: {
|
|
drawOnChartArea: false, // only want the grid lines for one axis to show up
|
|
},
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, ticks) {
|
|
return format_amount(value);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
let label = context.dataset.label || '';
|
|
|
|
if (label) label += ': ';
|
|
|
|
if (context.parsed.y !== null) {
|
|
|
|
if (context.dataset.borderColor === 'rgb(255, 99, 132)') {
|
|
label += format_amount(context.parsed.y);
|
|
} else {
|
|
label += context.parsed.y;
|
|
}
|
|
}
|
|
return label;
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
const paymentMethodsConfig = {
|
|
type: 'line',
|
|
data: {
|
|
labels: paymentMethodsStat.label,
|
|
datasets: paymentMethodsStat.dataset
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
stacked: false,
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
stacked: true,
|
|
position: 'left',
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
position: 'right',
|
|
// grid line settings
|
|
grid: {
|
|
drawOnChartArea: false, // only want the grid lines for one axis to show up
|
|
},
|
|
ticks: {
|
|
// Include a dollar sign in the ticks
|
|
callback: function (value, index, ticks) {
|
|
return format_amount(value);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
let label = context.dataset.label || '';
|
|
|
|
if (label) label += ': ';
|
|
|
|
if (context.parsed.y !== null) {
|
|
|
|
if (context.dataset.borderColor === 'rgb(255, 99, 132)') {
|
|
label += format_amount(context.parsed.y);
|
|
} else {
|
|
label += context.parsed.y;
|
|
}
|
|
}
|
|
return label;
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
new Chart(document.getElementById('ppress-report-revenue'), revenueConfig);
|
|
new Chart(document.getElementById('ppress-report-orders'), ordersConfig);
|
|
if ($('#ppress-report-tax').length > 0) {
|
|
new Chart(document.getElementById('ppress-report-tax'), taxesConfig);
|
|
}
|
|
new Chart(document.getElementById('ppress-report-refunds'), refundConfig);
|
|
new Chart(document.getElementById('ppress-report-top-plans'), topPlanConfig);
|
|
new Chart(document.getElementById('ppress-report-payment-methods'), paymentMethodsConfig);
|
|
}
|
|
});
|
|
|
|
})(jQuery); |