503 lines
30 KiB
JavaScript
503 lines
30 KiB
JavaScript
/* ════════════════════════════════════════════════════════
|
||
* page-monthly-summary.js — Turn C
|
||
* ────────────────────────────────────────────────────────
|
||
* monthly_summary_analysis.html 的 ECharts + DataTable 邏輯
|
||
*
|
||
* 注意：依賴 analysis-chart-theme.js 對 echarts.init 的攔截，
|
||
* 它會自動把 option.color 換成 .momo-app[data-page-group] 的
|
||
* --momo-page-chart-* 暖色調 palette，因此本檔保留原 itemStyle.color
|
||
* 邏輯時，會被自動覆寫；分類/條件配色（如 BCG 象限）保持顯式指定。
|
||
* ════════════════════════════════════════════════════════ */
|
||
(function () {
|
||
'use strict';
|
||
|
||
let table;
|
||
let compareChart, yoyTrendChart, vendorRankingChart, divisionDistChart, priceRangeChart;
|
||
let bcgMatrixChart, priceVolumeScatterChart, seasonalityHeatmapChart, areaRankingChart;
|
||
let specialChart, bodyCareChart, makeupFragranceChart, privacyInfantChart;
|
||
|
||
let currentFilters = { year: '', month: '', area: '', vendor: '', trade: '' };
|
||
const compactMediaQuery = window.matchMedia('(max-width: 768px)');
|
||
|
||
function isCompactViewport() {
|
||
return compactMediaQuery.matches;
|
||
}
|
||
|
||
$(function () {
|
||
compareChart = echarts.init(document.getElementById('compareChart'));
|
||
yoyTrendChart = echarts.init(document.getElementById('yoyTrendChart'));
|
||
vendorRankingChart = echarts.init(document.getElementById('vendorRankingChart'));
|
||
divisionDistChart = echarts.init(document.getElementById('divisionDistChart'));
|
||
priceRangeChart = echarts.init(document.getElementById('priceRangeChart'));
|
||
bcgMatrixChart = echarts.init(document.getElementById('bcgMatrixChart'));
|
||
priceVolumeScatterChart = echarts.init(document.getElementById('priceVolumeScatterChart'));
|
||
seasonalityHeatmapChart = echarts.init(document.getElementById('seasonalityHeatmapChart'));
|
||
areaRankingChart = echarts.init(document.getElementById('areaRankingChart'));
|
||
specialChart = echarts.init(document.getElementById('specialChart'));
|
||
bodyCareChart = echarts.init(document.getElementById('bodyCareChart'));
|
||
makeupFragranceChart = echarts.init(document.getElementById('makeupFragranceChart'));
|
||
privacyInfantChart = echarts.init(document.getElementById('privacyInfantChart'));
|
||
|
||
table = $('#summaryTable').DataTable({
|
||
language: { url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/zh-HANT.json' },
|
||
autoWidth: false,
|
||
deferRender: true,
|
||
pageLength: 20,
|
||
order: [[0, 'desc'], [7, 'desc']],
|
||
columnDefs: [
|
||
{ targets: [7], className: 'text-end fw-bold' },
|
||
{ targets: 8, className: 'text-center' }
|
||
]
|
||
});
|
||
|
||
window.addEventListener('resize', () => {
|
||
[compareChart, yoyTrendChart, vendorRankingChart, divisionDistChart, priceRangeChart,
|
||
bcgMatrixChart, priceVolumeScatterChart, seasonalityHeatmapChart, areaRankingChart,
|
||
specialChart, bodyCareChart, makeupFragranceChart, privacyInfantChart]
|
||
.forEach(c => c && c.resize());
|
||
});
|
||
const refreshForViewport = () => fetchData();
|
||
if (compactMediaQuery.addEventListener) {
|
||
compactMediaQuery.addEventListener('change', refreshForViewport);
|
||
} else if (compactMediaQuery.addListener) {
|
||
compactMediaQuery.addListener(refreshForViewport);
|
||
}
|
||
|
||
fetchData();
|
||
});
|
||
|
||
// ── API ───────────────────────────────────────────────
|
||
function fetchData() {
|
||
$('#loadingOverlay').css('display', 'flex');
|
||
let url = `/api/monthly_summary_data?limit=2000`;
|
||
if (currentFilters.year) url += `&year=${currentFilters.year}`;
|
||
if (currentFilters.month) url += `&month=${currentFilters.month}`;
|
||
if (currentFilters.area) url += `&area_name=${encodeURIComponent(currentFilters.area)}`;
|
||
if (currentFilters.vendor) url += `&vendor=${encodeURIComponent(currentFilters.vendor)}`;
|
||
if (currentFilters.trade) url += `&trade_type=${encodeURIComponent(currentFilters.trade)}`;
|
||
|
||
fetch(url).then(r => r.json()).then(data => {
|
||
if (data.status === 'success') { updateUI(data); updateFilters(data.filters); }
|
||
$('#loadingOverlay').hide();
|
||
}).catch(err => { console.error(err); $('#loadingOverlay').hide(); });
|
||
|
||
fetchSpecialChartData();
|
||
}
|
||
|
||
function fetchSpecialChartData() {
|
||
const pairs = [
|
||
['開架保養,臉部清潔', specialChart, 'specialChartTableBody'],
|
||
['身體保養', bodyCareChart, 'bodyCareChartTableBody'],
|
||
['彩妝/指彩,精油擴香', makeupFragranceChart, 'makeupFragranceChartTableBody'],
|
||
['私密保養,嬰幼洗沐', privacyInfantChart, 'privacyInfantChartTableBody']
|
||
];
|
||
pairs.forEach(([area, chart, tbody]) => {
|
||
fetch(`/api/monthly_summary_trend?area_name=${encodeURIComponent(area)}`)
|
||
.then(r => r.json())
|
||
.then(d => { if (d.status === 'success') renderExcelChart(chart, tbody, d.trend); })
|
||
.catch(err => console.error('monthly special trend failed', err));
|
||
});
|
||
}
|
||
|
||
// ── Filter ────────────────────────────────────────────
|
||
function selectFilter(type, value) {
|
||
currentFilters[type] = value;
|
||
const btnMap = { year:'btnYear', month:'btnMonth', area:'btnArea', vendor:'btnVendor', trade:'btnTrade' };
|
||
const defaultMap = { year:'選擇年份', month:'選擇月份', area:'所有區域', vendor:'所有廠商', trade:'所有類別' };
|
||
$(`#${btnMap[type]}`).text(value || defaultMap[type]);
|
||
fetchData();
|
||
}
|
||
window.selectFilter = selectFilter;
|
||
|
||
function filterList(input) {
|
||
const filter = input.value.toLowerCase();
|
||
const list = input.closest('ul').querySelectorAll('li:not(:first-child)');
|
||
list.forEach(li => {
|
||
const t = (li.textContent || li.innerText).toLowerCase();
|
||
li.style.display = t.indexOf(filter) > -1 ? '' : 'none';
|
||
});
|
||
}
|
||
window.filterList = filterList;
|
||
|
||
function updateFilters(f) {
|
||
const populate = (id, list, type) => {
|
||
const el = $(id);
|
||
if (el.children().length > 1) return;
|
||
list.forEach(v => el.append(`<li><a class="dropdown-item" href="#" onclick="selectFilter('${type}', '${v}')">${v}</a></li>`));
|
||
};
|
||
populate('#listYear', f.years, 'year');
|
||
populate('#listMonth', f.months.map(String).sort((a,b) => a - b), 'month');
|
||
populate('#listArea', f.areas, 'area');
|
||
populate('#listTrade', f.trades, 'trade');
|
||
populate('#listVendor', f.vendors, 'vendor');
|
||
}
|
||
|
||
// ── UI updates ────────────────────────────────────────
|
||
function updateUI(data) {
|
||
$('#totalRows').text(data.total_rows.toLocaleString());
|
||
$('#totalMonths').text(data.total_months);
|
||
|
||
const k = data.kpis || {};
|
||
$('#kpiSales').text('$' + (k.sales || 0).toLocaleString());
|
||
$('#kpiProfit').text('$' + (k.profit || 0).toLocaleString());
|
||
$('#kpiMargin').text(k.margin || '-');
|
||
$('#kpiVol').text((k.vol || 0).toLocaleString());
|
||
|
||
if (k.sales_yoa > 0) {
|
||
const yoy = ((k.sales - k.sales_yoa) / k.sales_yoa * 100).toFixed(1);
|
||
const cls = yoy >= 0 ? 'text-danger' : 'text-success';
|
||
$('#kpiSalesYoY').html(`<span class="${cls} fw-bold"><i class="fas fa-caret-up"></i> ${yoy}%</span> vs 去年同期`);
|
||
} else { $('#kpiSalesYoY').text('-'); }
|
||
|
||
table.clear();
|
||
(data.rows || []).forEach(row => {
|
||
const sales = row.sales_amt_curr || 0;
|
||
const prevYear = row.sales_amt_yoa || 0;
|
||
let yoyHtml = '-';
|
||
if (prevYear > 0) {
|
||
const yoy = ((sales - prevYear) / prevYear * 100).toFixed(1);
|
||
const cls = yoy >= 0 ? 'text-danger' : 'text-success';
|
||
yoyHtml = `<span class="${cls} fw-bold">${yoy > 0 ? '+' : ''}${yoy}%</span>`;
|
||
}
|
||
table.row.add([
|
||
`${row.year}/${row.month}`, row.division, row.area_name || '-', row.pm_name || '-',
|
||
`<span class="text-primary fw-600">${row.brand_name}</span>`,
|
||
`<span class="small text-muted">${row.vendor_name}</span>`,
|
||
`<span class="badge bg-light text-dark border">${row.trade_type || '-'}</span>`,
|
||
sales.toLocaleString(), yoyHtml
|
||
]);
|
||
});
|
||
table.draw();
|
||
|
||
renderExcelChart(compareChart, 'compareChartTableBody', data.trend);
|
||
updateHighlights(data.highlights);
|
||
renderYoYTrendChart(yoyTrendChart, 'yoyTrendChartTableBody', data.yoy_trend);
|
||
renderVendorRankingChart(vendorRankingChart, 'vendorRankingChartTableBody', data.vendor_ranking);
|
||
renderDivisionDistChart(divisionDistChart, 'divisionDistChartTableBody', data.division_dist);
|
||
renderPriceRangeChart(priceRangeChart, 'priceRangeChartTableBody', data.price_contribution);
|
||
renderBCGMatrixChart(bcgMatrixChart, data.bcg_data);
|
||
renderScatterChart(priceVolumeScatterChart, data.bcg_data);
|
||
renderSeasonalityHeatmap(seasonalityHeatmapChart, data.heatmap_data);
|
||
renderAreaRankingChart(areaRankingChart, 'areaRankingChartTableBody', data.area_ranking);
|
||
}
|
||
|
||
// ── Highlights (Top 3) ────────────────────────────────
|
||
function updateHighlights(h) {
|
||
if (!h || (!h.rev_top.length && !h.profit_top.length)) { $('#highlightsRow').hide(); return; }
|
||
$('#highlightsRow').show();
|
||
const r = (id, list, prefix='') => {
|
||
const t = $(`#${id}`); t.empty();
|
||
list.forEach((it, i) => t.append(`<tr><td class="ps-3"><span class="badge bg-secondary rounded-pill me-2">${i+1}</span>${it.name}</td><td class="text-end pe-3 fw-bold">${prefix}${it.value.toLocaleString()}</td></tr>`));
|
||
};
|
||
r('revHighlightsBody', h.rev_top, '$');
|
||
r('profitHighlightsBody', h.profit_top, '$');
|
||
r('volHighlightsBody', h.vol_top, '');
|
||
}
|
||
|
||
// ── Excel-style 主對比圖 ─────────────────────────────
|
||
function renderExcelChart(chart, tableBodyId, trend) {
|
||
if (!trend) return;
|
||
const compact = isCompactViewport();
|
||
const years = [...new Set(trend.map(t => t.date.split('/')[0]))].sort().reverse();
|
||
const currYear = years[0] || String(new Date().getFullYear());
|
||
const prevYear = String(parseInt(currYear) - 1);
|
||
const months = Array.from({ length: 12 }, (_, i) => String(i + 1));
|
||
const currData = new Array(12).fill(0);
|
||
const prevData = new Array(12).fill(0);
|
||
const yoyData = new Array(12).fill(0);
|
||
trend.forEach(t => {
|
||
const [y, m] = t.date.split('/');
|
||
if (y === currYear) currData[parseInt(m) - 1] = t.sales;
|
||
if (y === prevYear) prevData[parseInt(m) - 1] = t.sales;
|
||
});
|
||
for (let i = 0; i < 12; i++) {
|
||
if (prevData[i] > 0) yoyData[i] = parseFloat(((currData[i] - prevData[i]) / prevData[i] * 100).toFixed(1));
|
||
}
|
||
|
||
const C1 = 'var(--momo-warm-caramel, #c96442)';
|
||
const C2 = 'var(--momo-warm-olive, #6f7a4a)';
|
||
const CM = 'var(--momo-text-tertiary, #94a3b8)';
|
||
|
||
const tableHtml = `
|
||
<tr><td class="ms-cmp__hd">月份</td>${months.map(m => `<td class="ms-cmp__mh">${m}</td>`).join('')}</tr>
|
||
<tr><td class="text-start ps-2"><span class="ms-cmp__sw" style="background:${C1}"></span>${currYear}</td>${currData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}</tr>
|
||
<tr><td class="text-start ps-2"><span class="ms-cmp__sw" style="background:${C2}"></span>${prevYear}</td>${prevData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}</tr>
|
||
<tr><td class="text-start ps-2"><i class="fas fa-minus" style="color:${CM};margin-right:5px;"></i>YOY</td>${yoyData.map((v, i) => `<td>${(currData[i] > 0 || prevData[i] > 0) ? v + '%' : '-'}</td>`).join('')}</tr>`;
|
||
$(`#${tableBodyId}`).html(tableHtml);
|
||
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
legend: { data: [currYear, prevYear, 'YOY'], bottom: 0, show: false },
|
||
grid: {
|
||
left: compact ? '42' : '80',
|
||
right: compact ? '16' : '50',
|
||
top: compact ? '26' : '50',
|
||
bottom: compact ? '28' : '20'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: months,
|
||
axisLabel: { show: compact, interval: 0, fontSize: 10 },
|
||
axisTick: { show: true }
|
||
},
|
||
yAxis: [
|
||
{ type: 'value', name: compact ? '' : '業績', axisLabel: { formatter: v => compact ? (v/10000).toFixed(0) + '萬' : v.toLocaleString(), fontSize: compact ? 10 : 12 }, splitLine: { lineStyle: { type: 'dashed' } } },
|
||
{ type: 'value', name: compact ? '' : 'YoY', axisLabel: { formatter: '{value}%', fontSize: compact ? 10 : 12 }, splitLine: { show: false } }
|
||
],
|
||
series: [
|
||
{ name: currYear, type: 'bar', data: currData, barMaxWidth: compact ? 12 : 20,
|
||
label: { show: !compact, position: 'top', fontSize: 16, fontWeight: 'bold', formatter: p => p.value ? (p.value/10000).toFixed(0) + '萬' : '' } },
|
||
{ name: prevYear, type: 'bar', data: prevData, barMaxWidth: compact ? 12 : 20,
|
||
label: { show: !compact, position: 'top', fontSize: 16, fontWeight: 'bold', formatter: p => p.value ? (p.value/10000).toFixed(0) + '萬' : '' } },
|
||
{ name: 'YOY', type: 'line', yAxisIndex: 1, data: yoyData, smooth: true,
|
||
lineStyle: { width: compact ? 1.5 : 2 }, symbol: 'circle', symbolSize: compact ? 4 : 6,
|
||
label: { show: !compact, position: 'bottom', fontSize: 16, fontWeight: 'bold', formatter: p => p.value ? p.value + '%' : '' } }
|
||
]
|
||
});
|
||
}
|
||
|
||
// ── YoY Trend ─────────────────────────────────────────
|
||
function renderYoYTrendChart(chart, tableId, data) {
|
||
if (!data || !data.length) return;
|
||
const compact = isCompactViewport();
|
||
const dates = data.map(d => d.date.split('/')[1] + '月');
|
||
const currData = data.map(d => d.curr);
|
||
const yoaData = data.map(d => d.yoa);
|
||
const years = [...new Set(data.map(d => d.date.split('/')[0]))];
|
||
const currYearStr = years[0] || '本期';
|
||
|
||
let html = `
|
||
<tr><td class="ms-cmp__hd">月份</td>${dates.map(m => `<td class="ms-cmp__mh">${m}</td>`).join('')}</tr>
|
||
<tr><td class="text-start ps-2"><span class="ms-cmp__sw ms-cmp__sw--accent"></span>${currYearStr}</td>${currData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}</tr>
|
||
<tr><td class="text-start ps-2"><span class="ms-cmp__sw ms-cmp__sw--muted"></span>去年同期</td>${yoaData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}</tr>`;
|
||
$(`#${tableId}`).html(html);
|
||
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis' },
|
||
grid: { left: compact ? '42' : '60', right: compact ? '14' : '30', top: compact ? '24' : '40', bottom: compact ? '26' : '20' },
|
||
legend: { data: [currYearStr, '去年同期'], bottom: 0, show: !compact },
|
||
xAxis: { type: 'category', data: dates, axisLabel: { fontSize: compact ? 10 : 12 } },
|
||
yAxis: { type: 'value', axisLabel: { formatter: v => (v/10000).toFixed(0) + '萬', fontSize: compact ? 10 : 12 } },
|
||
series: [
|
||
{ name: currYearStr, type: 'line', data: currData, lineStyle: { width: 3 }, showSymbol: false, areaStyle: { opacity: 0.12 } },
|
||
{ name: '去年同期', type: 'line', data: yoaData, lineStyle: { type: 'dashed' }, showSymbol: false }
|
||
]
|
||
});
|
||
}
|
||
|
||
// ── 類別分佈 (雙圓餅) ─────────────────────────────────
|
||
function renderDivisionDistChart(chart, _tableId, data) {
|
||
if (!data || !data.length) return;
|
||
const compact = isCompactViewport();
|
||
const pie = key => data.map(d => ({ name: d.name, value: d[key] || 0 })).filter(d => d.value > 0);
|
||
chart.setOption({
|
||
title: [
|
||
{ text: '2024 年', left: '23%', top: compact ? '2%' : '5%', textAlign: 'center', textStyle: { fontSize: compact ? 12 : 16, fontWeight: 'bold' } },
|
||
{ text: '2025 年', left: '73%', top: compact ? '2%' : '5%', textAlign: 'center', textStyle: { fontSize: compact ? 12 : 16, fontWeight: 'bold' } }
|
||
],
|
||
tooltip: { trigger: 'item', formatter: p => `<strong>${p.name}</strong><br/>業績: ${(p.value/10000).toFixed(0)}萬<br/>佔比: ${p.percent.toFixed(1)}%` },
|
||
legend: { type: 'scroll', orient: 'horizontal', bottom: 0, show: !compact, textStyle: { fontSize: 12, fontWeight: 'bold' } },
|
||
series: [
|
||
{ name: '2024 年', type: 'pie', radius: compact ? ['36%', '58%'] : ['30%', '60%'], center: ['25%', compact ? '53%' : '55%'], data: pie('sales_2024'),
|
||
label: { show: !compact, fontSize: 11, fontWeight: 'bold', formatter: p => `${p.name}\n${(p.value/10000).toFixed(0)}萬\n${p.percent.toFixed(1)}%` } },
|
||
{ name: '2025 年', type: 'pie', radius: compact ? ['36%', '58%'] : ['30%', '60%'], center: ['75%', compact ? '53%' : '55%'], data: pie('sales_2025'),
|
||
label: { show: !compact, fontSize: 11, fontWeight: 'bold', formatter: p => `${p.name}\n${(p.value/10000).toFixed(0)}萬\n${p.percent.toFixed(1)}%` } }
|
||
]
|
||
});
|
||
}
|
||
|
||
// ── 價格帶 ────────────────────────────────────────────
|
||
function renderPriceRangeChart(chart, tableId, data) {
|
||
if (!data || !data.length) return;
|
||
const compact = isCompactViewport();
|
||
const order = ['0-499','500-999','1,000-1,999','2,000-4,999','5,000-9,999','10,000+'];
|
||
data.sort((a,b) => order.indexOf(a.range) - order.indexOf(b.range));
|
||
const t24 = data.reduce((s, x) => s + (x.sales_2024 || 0), 0);
|
||
const t25 = data.reduce((s, x) => s + (x.sales_2025 || 0), 0);
|
||
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },
|
||
formatter: ps => ps[0].name + '<br/>' + ps.map(p => {
|
||
const v = p.value || 0;
|
||
const total = p.seriesName.includes('2024') ? t24 : t25;
|
||
const pct = total > 0 ? (v/total*100).toFixed(1) + '%' : '0.0%';
|
||
return `${p.marker} ${p.seriesName}: ${v.toLocaleString()} (${pct})`;
|
||
}).join('<br/>')
|
||
},
|
||
legend: { data: ['2024 銷售', '2025 銷售'], bottom: 0, show: !compact, textStyle: { fontSize: 13, fontWeight: 'bold' } },
|
||
grid: { left: compact ? '2%' : '3%', right: compact ? '2%' : '4%', bottom: compact ? '18%' : '12%', top: compact ? '8%' : '15%', containLabel: true },
|
||
xAxis: { type: 'category', data: data.map(d => d.range), axisLabel: { interval: 0, rotate: compact ? 32 : 0, fontSize: compact ? 10 : 13, fontWeight: 'bold' } },
|
||
yAxis: { type: 'value', name: compact ? '' : '銷售額', nameTextStyle: { fontSize: 12, fontWeight: 'bold' },
|
||
axisLabel: { formatter: v => (v/10000).toFixed(0) + '萬', fontSize: compact ? 10 : 12 } },
|
||
series: ['2024','2025'].map((y) => ({
|
||
name: y + ' 銷售', type: 'bar', barWidth: compact ? 13 : 30,
|
||
data: data.map(d => d['sales_' + y] || 0),
|
||
label: { show: !compact, position: 'top', fontSize: 12, fontWeight: 'bold',
|
||
formatter: p => {
|
||
const v = p.value || 0;
|
||
const total = y === '2024' ? t24 : t25;
|
||
const pct = total > 0 ? (v/total*100).toFixed(1) + '%' : '';
|
||
return pct + '\n' + (v/10000).toFixed(0) + '萬';
|
||
}
|
||
}
|
||
}))
|
||
});
|
||
$(`#${tableId}`).parent().html('');
|
||
}
|
||
|
||
// ── BCG 矩陣（4 象限顯式配色） ───────────────────────
|
||
function renderBCGMatrixChart(chart, data) {
|
||
if (!data || !data.length) return;
|
||
const compact = isCompactViewport();
|
||
const C_STAR = 'var(--momo-warm-olive, #6f7a4a)';
|
||
const C_COW = 'var(--momo-warm-honey, #c89043)';
|
||
const C_QUESTION = 'var(--momo-warm-caramel, #c96442)';
|
||
const C_DOG = 'var(--momo-warm-mahogany, #7a3b2c)';
|
||
chart.setOption({
|
||
tooltip: { formatter: p => `<div style="font-weight:bold">${p.value[3]}</div><div>毛利率: ${p.value[0]}%</div><div>銷售額: $${p.value[1].toLocaleString()}</div><div>銷量: ${p.value[2].toLocaleString()}</div>` },
|
||
grid: { left: compact ? '46' : '80', right: compact ? '16' : '50', top: compact ? '18' : '30', bottom: compact ? '34' : '30' },
|
||
xAxis: { name: compact ? '' : '毛利率(%)', type: 'value', axisLabel: { fontSize: compact ? 10 : 12 }, splitLine: { lineStyle: { type: 'dashed' } } },
|
||
yAxis: { name: compact ? '' : '業績($)', type: 'value', axisLabel: { formatter: v => compact ? (v/10000).toFixed(0) + '萬' : v.toLocaleString(), fontSize: compact ? 10 : 12 }, splitLine: { lineStyle: { type: 'dashed' } } },
|
||
series: [{
|
||
type: 'scatter',
|
||
data: data.map(d => [d.margin, d.sales, d.qty, d.name]),
|
||
symbolSize: d => Math.min(compact ? 52 : 96, Math.max(compact ? 8 : 10, Math.sqrt(Math.max(d[2], 1)) * (compact ? 0.35 : 0.75))),
|
||
itemStyle: {
|
||
color: p => {
|
||
if (p.value[0] >= 30 && p.value[1] >= 500000) return C_STAR;
|
||
if (p.value[0] < 30 && p.value[1] >= 500000) return C_COW;
|
||
if (p.value[0] >= 30 && p.value[1] < 500000) return C_QUESTION;
|
||
return C_DOG;
|
||
},
|
||
opacity: 0.78, borderColor: '#fff8ef', borderWidth: 1
|
||
},
|
||
markLine: { silent: true, data: [
|
||
{ xAxis: 30, lineStyle: { color: '#999' }, label: { show: !compact, formatter: '高獲利線 (30%)' } },
|
||
{ yAxis: 500000, lineStyle: { color: '#999' }, label: { show: !compact, formatter: '高營收線 ($50萬)' } }
|
||
] }
|
||
}]
|
||
});
|
||
}
|
||
|
||
// ── 散佈圖（價/量） ──────────────────────────────────
|
||
function renderScatterChart(chart, data) {
|
||
if (!data || !data.length) return;
|
||
const compact = isCompactViewport();
|
||
const series = data.map(d => {
|
||
const avg = d.qty > 0 ? Math.round(d.sales / d.qty) : 0;
|
||
return [avg, d.qty, d.sales, d.name];
|
||
});
|
||
chart.setOption({
|
||
tooltip: { formatter: p => `<div style="font-weight:bold">${p.value[3]}</div><div>均價: $${p.value[0]}</div><div>銷量: ${p.value[1].toLocaleString()}</div><div>業績: $${p.value[2].toLocaleString()}</div>` },
|
||
grid: { left: compact ? '42' : '60', right: compact ? '16' : '50', top: compact ? '18' : '30', bottom: compact ? '32' : '30' },
|
||
xAxis: { name: compact ? '' : '均價($)', type: 'value', axisLabel: { fontSize: compact ? 10 : 12 }, splitLine: { show: false } },
|
||
yAxis: { name: compact ? '' : '銷量', type: 'value', axisLabel: { fontSize: compact ? 10 : 12 }, splitLine: { lineStyle: { type: 'dashed' } } },
|
||
series: [{ type: 'scatter', data: series, symbolSize: d => Math.min(compact ? 36 : 64, Math.max(compact ? 6 : 8, Math.log(Math.max(d[2],1)) * (compact ? 1.35 : 2))), itemStyle: { opacity: 0.65 } }]
|
||
});
|
||
}
|
||
|
||
// ── 廠商排行 ──────────────────────────────────────────
|
||
function renderVendorRankingChart(chart, tableId, data) {
|
||
if (!data || !data.length) return;
|
||
const compact = isCompactViewport();
|
||
const cd = data.slice().reverse();
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
legend: { data: ['2024 銷售額', '2025 銷售額'], bottom: 0, show: !compact, textStyle: { fontSize: 15, fontWeight: 'bold' } },
|
||
grid: { left: compact ? '86' : '160', right: compact ? '18' : '110', top: compact ? '10' : '20', bottom: compact ? '28' : '45' },
|
||
xAxis: { type: 'value', axisLabel: { formatter: v => (v/10000).toFixed(0) + '萬', fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
|
||
yAxis: { type: 'category', data: cd.map(d => d.name), axisLabel: { width: compact ? 78 : 150, overflow: 'truncate', interval: 0, fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
|
||
series: [
|
||
{ name: '2024 銷售額', type: 'bar', data: cd.map(d => d.sales_2024 || 0), barWidth: compact ? 10 : 18, barGap: '0%', barCategoryGap: compact ? '70%' : '75%',
|
||
label: { show: !compact, position: 'insideRight', fontSize: 13, fontWeight: 'bold', color: '#fff8ef', textShadowColor: 'rgba(42,37,32,0.5)', textShadowBlur: 2,
|
||
formatter: p => p.value > 0 ? (p.value/10000).toFixed(0) + '萬' : '' } },
|
||
{ name: '2025 銷售額', type: 'bar', data: cd.map(d => d.sales_2025 || 0), barWidth: compact ? 10 : 18,
|
||
label: { show: !compact, position: 'right', fontSize: 14, fontWeight: 'bold',
|
||
formatter: p => p.value > 0 ? (p.value/10000).toFixed(0) + '萬' : '' } }
|
||
]
|
||
});
|
||
|
||
let html = `<thead class="table-light"><tr>
|
||
<th>排名</th><th>廠商名稱</th><th class="text-end">總銷售額</th><th class="text-end">銷售額 YoY</th>
|
||
<th class="text-end">2024 銷售額</th><th class="text-end">2025 銷售額</th>
|
||
<th class="text-end">總毛利額</th><th class="text-end">毛利額 YoY</th>
|
||
<th class="text-end">2024 毛利額</th><th class="text-end">2025 毛利額</th></tr></thead><tbody>`;
|
||
data.forEach((d, i) => {
|
||
const s24 = d.sales_2024 || 0, s25 = d.sales_2025 || 0, p24 = d.profit_2024 || 0, p25 = d.profit_2025 || 0;
|
||
const sYoY = s24 > 0 ? ((s25-s24)/s24*100).toFixed(1)+'%' : '-';
|
||
const pYoY = p24 > 0 ? ((p25-p24)/p24*100).toFixed(1)+'%' : '-';
|
||
const sCls = s24 > 0 && (s25-s24) >= 0 ? 'text-danger' : (s24 > 0 ? 'text-success' : '');
|
||
const pCls = p24 > 0 && (p25-p24) >= 0 ? 'text-danger' : (p24 > 0 ? 'text-success' : '');
|
||
html += `<tr>
|
||
<td>${i+1}</td>
|
||
<td class="text-start text-truncate" style="max-width:200px;">${d.name}</td>
|
||
<td class="text-end fw-bold">${d.sales.toLocaleString()}</td>
|
||
<td class="text-end fw-bold ${sCls}">${sYoY}</td>
|
||
<td class="text-end text-muted">${s24.toLocaleString()}</td>
|
||
<td class="text-end text-primary fw-bold">${s25.toLocaleString()}</td>
|
||
<td class="text-end fw-bold">${d.profit.toLocaleString()}</td>
|
||
<td class="text-end fw-bold ${pCls}">${pYoY}</td>
|
||
<td class="text-end text-muted">${p24.toLocaleString()}</td>
|
||
<td class="text-end text-success fw-bold">${p25.toLocaleString()}</td></tr>`;
|
||
});
|
||
html += `</tbody>`;
|
||
$(`#${tableId}`).parent().html(`<table class="table table-bordered table-hover table-sm text-center mb-0 small" style="white-space:nowrap;">${html}</table>`);
|
||
}
|
||
|
||
// ── 季節熱力圖 ────────────────────────────────────────
|
||
function renderSeasonalityHeatmap(chart, data) {
|
||
if (!data || !data.length) return;
|
||
const compact = isCompactViewport();
|
||
const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
|
||
const areaSales = {};
|
||
data.forEach(d => { areaSales[d.category] = (areaSales[d.category] || 0) + d.sales; });
|
||
const areas = Object.keys(areaSales).sort((a,b) => areaSales[b] - areaSales[a]);
|
||
const yLabels = [];
|
||
[2025, 2024].forEach(y => areas.forEach(a => yLabels.push(`${y} ${a}`)));
|
||
const heatmap = [];
|
||
data.forEach(d => {
|
||
const xi = d.month - 1, yi = yLabels.indexOf(`${d.year} ${d.category}`);
|
||
if (xi >= 0 && xi < 12 && yi >= 0) heatmap.push([xi, yi, d.sales]);
|
||
});
|
||
const max = Math.max(...data.map(d => d.sales), 1);
|
||
chart.setOption({
|
||
tooltip: { position: 'top',
|
||
formatter: p => `<strong>${yLabels[p.value[1]]}</strong><br/>${months[p.value[0]]}<br/>業績: <strong>${(p.value[2]/10000).toFixed(0)}萬</strong>` },
|
||
grid: { height: compact ? '72%' : '75%', top: compact ? '3%' : '5%', bottom: compact ? '20%' : '18%', left: compact ? '72' : '15%', right: compact ? '5' : '3%' },
|
||
xAxis: { type: 'category', data: months, splitArea: { show: true }, axisLabel: { fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
|
||
yAxis: { type: 'category', data: yLabels, splitArea: { show: true }, axisLabel: { width: compact ? 66 : 120, overflow: 'truncate', fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
|
||
visualMap: { min: 0, max, calculable: true, orient: 'horizontal', left: 'center', bottom: '0%', textStyle: { fontSize: compact ? 10 : 12 },
|
||
inRange: { color: ['#fef3c7', '#f5c98a', '#e3a560', '#c96442', '#7a3b2c'] } },
|
||
series: [{ type: 'heatmap', data: heatmap,
|
||
label: { show: !compact, fontSize: 12, fontWeight: 'bold', formatter: p => (p.value[2]/10000).toFixed(0) + '萬' },
|
||
emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.45)' } } }]
|
||
});
|
||
}
|
||
|
||
// ── 區域排行 ──────────────────────────────────────────
|
||
function renderAreaRankingChart(chart, tableId, data) {
|
||
if (!data || !data.length) return;
|
||
const compact = isCompactViewport();
|
||
data.sort((a,b) => b.sales - a.sales);
|
||
chart.setOption({
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },
|
||
formatter: ps => ps[0].name + '<br/>' + ps.map(p => `${p.marker} ${p.seriesName}: ${(p.value || 0).toLocaleString()}`).join('<br/>') },
|
||
legend: { data: ['2024 業績', '2025 業績'], bottom: 0, show: !compact, textStyle: { fontSize: 14 } },
|
||
grid: { left: compact ? '2%' : '3%', right: compact ? '2%' : '4%', bottom: compact ? '20%' : '10%', top: compact ? '8%' : '10%', containLabel: true },
|
||
xAxis: { type: 'category', data: data.map(d => d.name), axisLabel: { interval: 0, rotate: compact ? 28 : 0, fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
|
||
yAxis: { type: 'value', name: compact ? '' : '業績', axisLabel: { formatter: v => (v/10000).toFixed(0) + '萬', fontSize: compact ? 10 : 13 } },
|
||
series: ['2024','2025'].map(y => ({
|
||
name: y + ' 業績', type: 'bar', data: data.map(d => d['sales_' + y] || 0),
|
||
label: { show: !compact, position: 'top', fontSize: 14, fontWeight: 'bold', formatter: p => (p.value/10000).toFixed(0) + '萬' }
|
||
}))
|
||
});
|
||
let html = `<thead class="table-light"><tr><th>排名</th><th>區名稱</th><th>業績</th></tr></thead><tbody>`;
|
||
data.forEach((d, i) => { html += `<tr><td>${i+1}</td><td class="text-start">${d.name}</td><td class="text-end fw-bold">$${d.sales.toLocaleString()}</td></tr>`; });
|
||
html += `</tbody>`;
|
||
$(`#${tableId}`).parent().html(`<table class="table table-bordered table-hover table-sm text-center mb-0 small">${html}</table>`);
|
||
}
|
||
|
||
// 公開 fetchData 給 onclick 使用
|
||
window.fetchData = fetchData;
|
||
})();
|