105 lines
3.6 KiB
JavaScript
105 lines
3.6 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);
|
|
const rootStyle = getComputedStyle(document.documentElement);
|
|
const token = (name, fallback) => rootStyle.getPropertyValue(name).trim() || fallback;
|
|
|
|
// 與 design system page-group=analytics 對齊的暖色 palette
|
|
const chartPalette = {
|
|
caramel: token('--momo-page-chart-2', '#c96442'),
|
|
caramelSoft: token('--momo-warm-caramel-soft', 'rgba(201, 100, 66, 0.58)'),
|
|
honey: token('--momo-page-accent', '#c89043'),
|
|
honeySoft: token('--momo-page-accent-soft', 'rgba(200, 144, 67, 0.14)'),
|
|
rust: token('--momo-danger-text', '#7a3210'),
|
|
rustSoft: token('--momo-danger-bg', '#efd3c4')
|
|
};
|
|
|
|
Chart.defaults.color = token('--momo-text-secondary', '#6b6155');
|
|
Chart.defaults.borderColor = token('--momo-border-light', 'rgba(42, 37, 32, 0.10)');
|
|
Chart.defaults.font.family = token('--momo-font-family', "'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: chartPalette.caramelSoft,
|
|
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: chartPalette.honeySoft,
|
|
fill: true, tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
scales: { y: { beginAtZero: true } }
|
|
}
|
|
});
|
|
})();
|