105 lines
3.3 KiB
JavaScript
105 lines
3.3 KiB
JavaScript
/* ════════════════════════════════════════════════════════
|
|
* page-growth.js — Turn C
|
|
* growth_analysis.html 的 Chart.js 圖表
|
|
* 依賴 analysis-chart-theme.js 統一字型/border/暖色 palette
|
|
* ════════════════════════════════════════════════════════ */
|
|
(function () {
|
|
'use strict';
|
|
|
|
const data = JSON.parse(document.getElementById('chart-data').textContent);
|
|
|
|
// 與 design system page-group=analytics 對齊的暖色 palette
|
|
const chartPalette = {
|
|
caramel: 'rgba(201, 100, 66, 1)',
|
|
caramelSoft: 'rgba(201, 100, 66, 0.58)',
|
|
honey: 'rgba(184, 132, 22, 1)',
|
|
honeySoft: 'rgba(184, 132, 22, 0.58)',
|
|
rust: 'rgba(181, 52, 47, 1)',
|
|
rustSoft: 'rgba(181, 52, 47, 0.48)',
|
|
mahogany: 'rgba(143, 69, 48, 1)',
|
|
mahoganySoft: 'rgba(143, 69, 48, 0.12)'
|
|
};
|
|
|
|
Chart.defaults.color = '#6f665a';
|
|
Chart.defaults.borderColor = 'rgba(126, 111, 92, 0.18)';
|
|
Chart.defaults.font.family = "'Noto Sans TC', 'Inter', system-ui, sans-serif";
|
|
|
|
// 1) Revenue + YoY
|
|
new Chart(document.getElementById('revenueChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.labels,
|
|
datasets: [
|
|
{ label: '月營收 ($)', data: data.revenue,
|
|
backgroundColor: chartPalette.caramelSoft, order: 2 },
|
|
{ label: 'YoY 年增率 (%)', data: data.yoy, type: 'line',
|
|
borderColor: chartPalette.rust, borderWidth: 2,
|
|
yAxisID: 'y1', order: 1, tension: 0.3 }
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
scales: {
|
|
y: { beginAtZero: true, title: { display: true, text: '金額 ($)' } },
|
|
y1: { position: 'right', grid: { drawOnChartArea: false },
|
|
title: { display: true, text: '成長率 (%)' } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// 2) MoM
|
|
new Chart(document.getElementById('momChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.labels,
|
|
datasets: [{
|
|
label: 'MoM 月增率 (%)',
|
|
data: data.mom,
|
|
backgroundColor: ctx => ctx.raw >= 0 ? chartPalette.honeySoft : chartPalette.rustSoft
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
|
|
// 3) AOV
|
|
new Chart(document.getElementById('aovChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.labels,
|
|
datasets: [{
|
|
label: '平均客單價 ($)',
|
|
data: data.aov,
|
|
borderColor: chartPalette.caramel,
|
|
backgroundColor: 'rgba(201, 100, 66, 0.12)',
|
|
fill: true, tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
scales: { y: { beginAtZero: true } }
|
|
}
|
|
});
|
|
|
|
// 4) Margin
|
|
new Chart(document.getElementById('marginChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.labels,
|
|
datasets: [{
|
|
label: '毛利率 (%)',
|
|
data: data.margin_rate,
|
|
borderColor: chartPalette.honey,
|
|
backgroundColor: 'rgba(184, 132, 22, 0.12)',
|
|
fill: true, tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
scales: { y: { beginAtZero: true } }
|
|
}
|
|
});
|
|
})();
|