257 lines
8.3 KiB
JavaScript
257 lines
8.3 KiB
JavaScript
/* ════════════════════════════════════════════════════════
|
|
* page-growth.js
|
|
* growth_analysis.html 的 Chart.js 圖表
|
|
* Chart.js 由 analysis-chart-theme.js 懶載入，避免首屏阻塞。
|
|
* ════════════════════════════════════════════════════════ */
|
|
(function () {
|
|
'use strict';
|
|
|
|
let chartsRendered = false;
|
|
|
|
function readGrowthData() {
|
|
const node = document.getElementById('chart-data');
|
|
if (!node) return null;
|
|
try {
|
|
return JSON.parse(node.textContent || '{}');
|
|
} catch (error) {
|
|
console.error('[growth_analysis] chart data parse failed:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const data = readGrowthData();
|
|
if (!data) return;
|
|
|
|
const rootStyle = getComputedStyle(document.documentElement);
|
|
const token = (name, fallback) => rootStyle.getPropertyValue(name).trim() || fallback;
|
|
|
|
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')
|
|
};
|
|
const chartInstances = [];
|
|
|
|
function rememberChart(chart) {
|
|
if (chart) chartInstances.push(chart);
|
|
return chart;
|
|
}
|
|
|
|
function stabilizeCharts() {
|
|
window.requestAnimationFrame(() => {
|
|
chartInstances.forEach(chart => {
|
|
if (!chart) return;
|
|
if (typeof chart.resize === 'function') chart.resize();
|
|
if (typeof chart.update === 'function') chart.update('none');
|
|
});
|
|
window.dispatchEvent(new Event('resize'));
|
|
});
|
|
}
|
|
|
|
function formatShort(value, mode) {
|
|
const n = Number(value || 0);
|
|
if (mode === 'pct') return `${n.toFixed(1)}%`;
|
|
if (mode === 'currency') return `$${Math.round(n).toLocaleString()}`;
|
|
return Math.round(n).toLocaleString();
|
|
}
|
|
|
|
function renderHtmlBars(canvasId, labels, values, options = {}) {
|
|
const canvas = document.getElementById(canvasId);
|
|
const wrap = canvas ? canvas.closest('.ga-chart-card__body') : null;
|
|
if (!wrap || wrap.querySelector('.ga-chart-fallback')) return;
|
|
const pairs = (labels || []).map((label, index) => ({
|
|
label: String(label || ''),
|
|
value: Number((values || [])[index] || 0)
|
|
})).filter(item => Number.isFinite(item.value));
|
|
if (!pairs.length) return;
|
|
const max = Math.max(...pairs.map(item => Math.abs(item.value)), 1);
|
|
wrap.classList.add('has-html-chart');
|
|
canvas.setAttribute('aria-hidden', 'true');
|
|
|
|
const chart = document.createElement('div');
|
|
chart.className = 'ga-chart-fallback';
|
|
pairs.forEach(item => {
|
|
const bar = document.createElement('div');
|
|
bar.className = `ga-chart-fallback__bar ${item.value < 0 ? 'is-negative' : ''}`;
|
|
bar.style.setProperty('--bar-h', `${Math.max(4, Math.round(Math.abs(item.value) / max * 100))}%`);
|
|
const label = document.createElement('span');
|
|
label.textContent = item.label;
|
|
const value = document.createElement('strong');
|
|
value.textContent = formatShort(item.value, options.mode);
|
|
bar.append(label, value);
|
|
chart.appendChild(bar);
|
|
});
|
|
wrap.appendChild(chart);
|
|
}
|
|
|
|
function renderHtmlChartFallbacks() {
|
|
renderHtmlBars('revenueChart', data.labels, data.revenue, { mode: 'currency' });
|
|
renderHtmlBars('momChart', data.labels, data.mom, { mode: 'pct' });
|
|
renderHtmlBars('aovChart', data.labels, data.aov, { mode: 'currency' });
|
|
renderHtmlBars('marginChart', data.labels, data.margin_rate, { mode: 'pct' });
|
|
}
|
|
|
|
function loadChartJs() {
|
|
if (window.EwoooCChartTheme && window.EwoooCChartTheme.loadChartJs) {
|
|
return window.EwoooCChartTheme.loadChartJs();
|
|
}
|
|
if (window.Chart) return Promise.resolve(window.Chart);
|
|
return Promise.reject(new Error('Chart.js loader unavailable'));
|
|
}
|
|
|
|
function renderCharts() {
|
|
if (chartsRendered) return;
|
|
chartsRendered = true;
|
|
|
|
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");
|
|
|
|
const revenueEl = document.getElementById('revenueChart');
|
|
const momEl = document.getElementById('momChart');
|
|
const aovEl = document.getElementById('aovChart');
|
|
const marginEl = document.getElementById('marginChart');
|
|
if (!revenueEl || !momEl || !aovEl || !marginEl) return;
|
|
|
|
rememberChart(new Chart(revenueEl, {
|
|
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: '成長率 (%)' }
|
|
}
|
|
}
|
|
}
|
|
}));
|
|
|
|
rememberChart(new Chart(momEl, {
|
|
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 } }
|
|
}
|
|
}));
|
|
|
|
rememberChart(new Chart(aovEl, {
|
|
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 } }
|
|
}
|
|
}));
|
|
|
|
rememberChart(new Chart(marginEl, {
|
|
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 } }
|
|
}
|
|
}));
|
|
stabilizeCharts();
|
|
renderHtmlChartFallbacks();
|
|
}
|
|
|
|
function bootCharts() {
|
|
document.documentElement.dataset.growthCharts = 'loading';
|
|
loadChartJs()
|
|
.then(() => {
|
|
renderCharts();
|
|
document.documentElement.dataset.growthCharts = 'ready';
|
|
})
|
|
.catch(error => {
|
|
document.documentElement.dataset.growthCharts = 'error';
|
|
document.documentElement.dataset.growthChartsError = error && error.message ? error.message : String(error);
|
|
console.error('[growth_analysis] Chart.js 載入失敗:', error);
|
|
});
|
|
}
|
|
|
|
function scheduleChartBoot() {
|
|
window.setTimeout(bootCharts, 0);
|
|
}
|
|
|
|
function observeCharts() {
|
|
const targets = Array.from(document.querySelectorAll('.ga-chart-card'));
|
|
if (!targets.length) return;
|
|
if (!('IntersectionObserver' in window)) {
|
|
bootCharts();
|
|
return;
|
|
}
|
|
|
|
const observer = new IntersectionObserver(entries => {
|
|
if (!entries.some(entry => entry.isIntersecting)) return;
|
|
observer.disconnect();
|
|
bootCharts();
|
|
}, { rootMargin: '220px 0px' });
|
|
|
|
targets.forEach(target => observer.observe(target));
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', scheduleChartBoot, { once: true });
|
|
} else {
|
|
scheduleChartBoot();
|
|
}
|
|
})();
|