feat: Implement upsell functionality with repository and service layers
This commit is contained in:
175
admin/js/dashboard.js
Normal file
175
admin/js/dashboard.js
Normal file
@@ -0,0 +1,175 @@
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user