176 lines
5.8 KiB
JavaScript
176 lines
5.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const dataEl = document.getElementById('sodino-dashboard-data');
|
|
if (!dataEl) {
|
|
return;
|
|
}
|
|
|
|
let dashboardData;
|
|
try {
|
|
dashboardData = JSON.parse(dataEl.textContent || '{}');
|
|
} catch (e) {
|
|
return;
|
|
}
|
|
|
|
if (typeof Chart === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const salesChartContext = document.getElementById('sodinoSalesChart');
|
|
const discountChartContext = document.getElementById('sodinoDiscountChart');
|
|
const ruleChartContext = document.getElementById('sodinoRuleChart');
|
|
|
|
if (salesChartContext && dashboardData.salesChart) {
|
|
new Chart(salesChartContext.getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: dashboardData.salesChart.labels,
|
|
datasets: [
|
|
{
|
|
label: dashboardData.translations.afterApplying,
|
|
data: dashboardData.salesChart.after,
|
|
borderColor: '#0ea5e9',
|
|
backgroundColor: 'rgba(14, 165, 233, 0.15)',
|
|
fill: true,
|
|
tension: 0.35,
|
|
pointRadius: 3,
|
|
},
|
|
{
|
|
label: dashboardData.translations.beforeApplying,
|
|
data: dashboardData.salesChart.before,
|
|
borderColor: '#ef4444',
|
|
backgroundColor: 'rgba(239, 68, 68, 0.15)',
|
|
fill: true,
|
|
tension: 0.35,
|
|
pointRadius: 3,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: '#334155',
|
|
},
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: '#475569',
|
|
},
|
|
grid: {
|
|
color: 'rgba(148, 163, 184, 0.15)',
|
|
},
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: '#475569',
|
|
},
|
|
grid: {
|
|
color: 'rgba(148, 163, 184, 0.15)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
if (discountChartContext && dashboardData.summary) {
|
|
new Chart(discountChartContext.getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [dashboardData.translations.totalDiscount, dashboardData.translations.totalRevenue],
|
|
datasets: [
|
|
{
|
|
label: dashboardData.translations.discountEffect,
|
|
data: [dashboardData.summary.total_discount, dashboardData.summary.total_revenue],
|
|
backgroundColor: ['#fbbf24', '#0ea5e9'],
|
|
borderRadius: 999,
|
|
borderSkipped: false,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: '#475569',
|
|
},
|
|
grid: {
|
|
display: false,
|
|
},
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: '#475569',
|
|
},
|
|
grid: {
|
|
color: 'rgba(148, 163, 184, 0.15)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
if (ruleChartContext && dashboardData.rulePerformance) {
|
|
new Chart(ruleChartContext.getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: dashboardData.rulePerformance.names,
|
|
datasets: [
|
|
{
|
|
label: dashboardData.translations.ruleRevenue,
|
|
data: dashboardData.rulePerformance.revenue,
|
|
backgroundColor: '#0ea5e9',
|
|
borderRadius: 999,
|
|
},
|
|
{
|
|
label: dashboardData.translations.ruleDiscount,
|
|
data: dashboardData.rulePerformance.discount,
|
|
backgroundColor: '#f59e0b',
|
|
borderRadius: 999,
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
indexAxis: 'y',
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
color: '#475569',
|
|
},
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: '#475569',
|
|
},
|
|
grid: {
|
|
color: 'rgba(148, 163, 184, 0.15)',
|
|
},
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: '#475569',
|
|
},
|
|
grid: {
|
|
display: false,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
});
|