@@ -462,5 +470,6 @@
+
{% endblock %}
diff --git a/templates/sales_analysis.html b/templates/sales_analysis.html
index 3a63ad3..8140b46 100644
--- a/templates/sales_analysis.html
+++ b/templates/sales_analysis.html
@@ -858,6 +858,7 @@
+
{% if not error %}
{% set empty_chart_data = {'labels': [], 'values': [], 'chart_values': [], 'metric_label': ''} %}
diff --git a/tests/test_chart_fallback_contract.py b/tests/test_chart_fallback_contract.py
index 4ee07d0..5c3ba21 100644
--- a/tests/test_chart_fallback_contract.py
+++ b/tests/test_chart_fallback_contract.py
@@ -46,6 +46,11 @@ def test_chart_theme_has_cdn_timeout_and_fallback_sources():
assert "cdn.jsdelivr.net/npm/chart.js@4.4.6" in script
assert "unpkg.com/chart.js@4.4.6" in script
assert "cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.6" in script
+ assert "!Array.isArray(ds.backgroundColor)" in script
+ assert "!Array.isArray(ds.borderColor)" in script
+ assert script.index("...originalScale") < script.index("border: { color: theme.faint")
+ assert "callback: v => formatNumber(v)" not in script
+ assert "autoSkip: true" in script
def test_sales_chart_runtime_guard_rejects_axis_only_canvases():
@@ -55,3 +60,68 @@ def test_sales_chart_runtime_guard_rejects_axis_only_canvases():
assert "colorPixels" in script
assert "has no colored chart marks" in script
assert "has no non-zero dataset values" in script
+
+
+def test_all_analysis_pages_have_runtime_chart_integrity_contracts():
+ script = (ROOT / "scripts" / "check_analysis_chart_integrity.js").read_text(encoding="utf-8")
+
+ for route in (
+ "/daily_sales?month=2026-04",
+ "/growth_analysis?start_month=2026-04&end_month=2026-04",
+ "/sales_analysis?start_date=2026-04-01&end_date=2026-04-30",
+ "/monthly_summary_analysis?start_month=2026-04&end_month=2026-04",
+ ):
+ assert route in script
+ for viewport in ("1440, height: 1000", "1024, height: 900", "390, height: 844"):
+ assert viewport in script
+ assert "loading overlay remains visible" in script
+ assert "has no colored chart marks" in script
+ assert "extreme percent values are not bounded with traceable markers" in script
+ assert "single point is not visibly emphasized" in script
+ assert "hides drawable payload behind an empty state" in script
+ assert "analysis tab lost the active period" in script
+ assert "rendered numeric indexes instead of product labels" in script
+ assert "contains labels outside the selected April period" in script
+ assert "explicitEmpty" in script
+
+
+def test_analysis_chart_failure_states_are_explicit_and_bounded():
+ sales = (ROOT / "web/static/js/page-sales-analysis.js").read_text(encoding="utf-8")
+ daily = (ROOT / "web/static/js/page-daily-sales.js").read_text(encoding="utf-8")
+ growth = (ROOT / "web/static/js/page-growth.js").read_text(encoding="utf-8")
+ monthly = (ROOT / "web/static/js/page-monthly-summary.js").read_text(encoding="utf-8")
+
+ assert "document.documentElement.dataset.salesCharts = 'ready'" in sales
+ assert "series.chart_values" in sales
+ assert "renderChartEmpty(bcgEl" in sales
+ assert "renderChartEmpty(hmEl" in sales
+ assert "originalValue" in daily
+ assert "clippedCount" in daily
+ assert "function dateAxis(element)" in daily
+ assert "overlapping date ticks" in (ROOT / "scripts/check_analysis_chart_integrity.js").read_text(encoding="utf-8")
+ assert "beginAtZero: true" in growth
+ assert "pointRadiusFor" in growth
+ assert "REQUEST_TIMEOUT_MS" in monthly
+ assert "activeFetchController.abort()" in monthly
+ assert "const refreshForViewport = () => {" in monthly
+ assert "const refreshForViewport = () => fetchData()" not in monthly
+ assert "dataset.monthlyCharts = 'ready'" in monthly
+ assert "safeHtmlText(p.value[3])" in monthly
+ assert "safeHtmlText(ps[0].name)" in monthly
+
+
+def test_analysis_tables_use_local_traditional_chinese_language_contract():
+ helper = (ROOT / "web/static/js/datatables-zh-hant.js").read_text(encoding="utf-8")
+ assert "window.EwoooCDataTableLanguage" in helper
+ assert "沒有符合條件的資料" in helper
+
+ assets = [
+ ROOT / "web/static/js/page-daily-sales.js",
+ ROOT / "web/static/js/page-sales-analysis.js",
+ ROOT / "web/static/js/page-monthly-summary.js",
+ ROOT / "templates/abc_analysis_detail.html",
+ ]
+ for asset in assets:
+ source = asset.read_text(encoding="utf-8")
+ assert "cdn.datatables.net/plug-ins" not in source
+ assert "EwoooCDataTableLanguage()" in source
diff --git a/tests/test_sales_chart_data_contract.py b/tests/test_sales_chart_data_contract.py
new file mode 100644
index 0000000..61100b1
--- /dev/null
+++ b/tests/test_sales_chart_data_contract.py
@@ -0,0 +1,37 @@
+import pandas as pd
+
+from routes.sales_routes import _build_top_product_chart_data
+
+
+def test_top_product_chart_aggregates_sku_rows_before_ranking():
+ rows = pd.DataFrame(
+ [
+ {'pid': 'P1', 'name': '同名商品', 'amount': 100},
+ {'pid': 'P1', 'name': '同名商品', 'amount': 50},
+ {'pid': 'P2', 'name': '同名商品', 'amount': 90},
+ {'pid': 'P3', 'name': '獨立商品', 'amount': 200},
+ {'pid': 'P4', 'name': '零業績商品', 'amount': 0},
+ ]
+ )
+
+ result = _build_top_product_chart_data(rows, 'pid', 'name', 'amount', 'amount')
+
+ assert result['chart_values'] == [200.0, 150.0, 90.0]
+ assert result['labels'] == ['獨立商品', '同名商品 [P1]', '同名商品 [P2]']
+ assert result['metric_label'] == '銷售金額 ($)'
+
+
+def test_top_product_chart_returns_explicit_empty_contract():
+ result = _build_top_product_chart_data(
+ pd.DataFrame(columns=['name', 'amount']),
+ None,
+ 'name',
+ 'amount',
+ 'qty',
+ )
+
+ assert result == {
+ 'labels': [],
+ 'chart_values': [],
+ 'metric_label': '銷售數量',
+ }
diff --git a/web/static/css/page-daily-sales.css b/web/static/css/page-daily-sales.css
index 1557be4..d309163 100644
--- a/web/static/css/page-daily-sales.css
+++ b/web/static/css/page-daily-sales.css
@@ -1018,6 +1018,14 @@
letter-spacing: 0;
}
+.chart-scale-note {
+ margin: 8px 0 0;
+ color: var(--momo-text-muted);
+ font-size: 11px;
+ line-height: 1.4;
+ text-align: right;
+}
+
.chart-fallback-bars {
position: absolute;
inset: 0;
diff --git a/web/static/css/page-monthly-summary-bem.css b/web/static/css/page-monthly-summary-bem.css
index 0eae8c4..4c9bdce 100644
--- a/web/static/css/page-monthly-summary-bem.css
+++ b/web/static/css/page-monthly-summary-bem.css
@@ -183,6 +183,15 @@
font-size: var(--momo-text-body-sm, 13px);
line-height: 1.5;
}
+
+.ms-period-empty--error {
+ border-left-color: var(--momo-danger-text, #8f4530);
+ background: var(--momo-danger-bg, #f6e4dc);
+}
+
+.ms-period-empty--error i {
+ color: var(--momo-danger-text, #8f4530);
+}
.ms-filter-group__label {
display: flex; align-items: center; gap: 6px;
font-family: var(--momo-font-display);
@@ -472,7 +481,7 @@
}
#vendorRankingChart {
- height: 620px !important;
+ height: 460px !important;
}
#divisionDistChart,
diff --git a/web/static/css/page-sales-analysis-bem.css b/web/static/css/page-sales-analysis-bem.css
index 984c692..9335cc7 100644
--- a/web/static/css/page-sales-analysis-bem.css
+++ b/web/static/css/page-sales-analysis-bem.css
@@ -429,6 +429,38 @@
width: 100%;
}
+.sa-chart-shell > canvas {
+ display: block;
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.sa-chart-shell.chart-empty-active > canvas {
+ display: none !important;
+}
+
+.sa-chart-empty {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-content: center;
+ gap: 6px;
+ padding: 20px;
+ color: var(--momo-text-muted);
+ text-align: center;
+}
+
+.sa-chart-empty strong {
+ color: var(--momo-text-strong);
+ font-size: 15px;
+}
+
+.sa-chart-empty span {
+ max-width: 38rem;
+ font-size: 13px;
+ line-height: 1.5;
+}
+
/* ---------- Vendor table ---------- */
.sa-vendor-table { max-height: 560px; overflow-y: auto; }
.sa-vendor-table__profit {
diff --git a/web/static/js/analysis-chart-theme.js b/web/static/js/analysis-chart-theme.js
index 630e625..ec59f9a 100644
--- a/web/static/js/analysis-chart-theme.js
+++ b/web/static/js/analysis-chart-theme.js
@@ -122,11 +122,11 @@
return;
}
- if (typeof ds.backgroundColor !== 'function') {
+ if (typeof ds.backgroundColor !== 'function' && !Array.isArray(ds.backgroundColor)) {
ds.backgroundColor =
t === 'line' ? alpha(color, ds.fill ? 0.18 : 0.0) : alpha(color, 0.78);
}
- if (typeof ds.borderColor !== 'function') ds.borderColor = color;
+ if (typeof ds.borderColor !== 'function' && !Array.isArray(ds.borderColor)) ds.borderColor = color;
ds.borderWidth = ds.borderWidth || (t === 'line' ? 2 : 1);
ds.borderRadius = ds.borderRadius ?? (t === 'bar' ? 3 : undefined);
@@ -195,28 +195,28 @@
const scales = config.options.scales || {};
Object.keys(scales).forEach(k => {
+ const originalScale = scales[k];
scales[k] = {
- border: { color: theme.faint, ...(scales[k].border || {}) },
+ ...originalScale,
+ border: { color: theme.faint, ...(originalScale.border || {}) },
grid: {
color: theme.faint,
tickColor: 'transparent',
drawBorder: false,
- ...(scales[k].grid || {})
+ ...(originalScale.grid || {})
},
ticks: {
color: theme.muted,
maxRotation: isCompact() ? 0 : 30,
- autoSkip: isCompact(),
+ autoSkip: true,
maxTicksLimit: isCompact() ? 5 : 8,
font: {
family: theme.mono,
size: isCompact() ? 10 : 11,
weight: '500'
},
- callback: v => formatNumber(v),
- ...(scales[k].ticks || {})
- },
- ...scales[k]
+ ...(originalScale.ticks || {})
+ }
};
});
config.options.scales = scales;
@@ -313,6 +313,7 @@
const tuneAxis = axis => {
if (!axis || typeof axis !== 'object') return axis;
return {
+ ...axis,
axisLine: { lineStyle: { color: theme.faint }, ...(axis.axisLine || {}) },
axisTick: { lineStyle: { color: theme.faint }, ...(axis.axisTick || {}) },
axisLabel: {
@@ -324,8 +325,7 @@
splitLine: {
lineStyle: { color: theme.faint, type: 'dashed' },
...(axis.splitLine || {})
- },
- ...axis
+ }
};
};
const tuneAxisList = axes => {
diff --git a/web/static/js/datatables-zh-hant.js b/web/static/js/datatables-zh-hant.js
new file mode 100644
index 0000000..c818304
--- /dev/null
+++ b/web/static/js/datatables-zh-hant.js
@@ -0,0 +1,31 @@
+(function () {
+ const language = {
+ processing: '處理中...',
+ loadingRecords: '載入中...',
+ lengthMenu: '每頁顯示 _MENU_ 筆',
+ zeroRecords: '沒有符合條件的資料',
+ emptyTable: '目前沒有可顯示的資料',
+ info: '顯示第 _START_ 至 _END_ 筆,共 _TOTAL_ 筆',
+ infoEmpty: '顯示第 0 至 0 筆,共 0 筆',
+ infoFiltered: '(從 _MAX_ 筆資料中篩選)',
+ search: '搜尋:',
+ paginate: {
+ first: '第一頁',
+ previous: '上一頁',
+ next: '下一頁',
+ last: '最後一頁'
+ },
+ aria: {
+ sortAscending: ':升冪排列',
+ sortDescending: ':降冪排列'
+ }
+ };
+
+ window.EwoooCDataTableLanguage = function () {
+ return {
+ ...language,
+ paginate: { ...language.paginate },
+ aria: { ...language.aria }
+ };
+ };
+})();
diff --git a/web/static/js/page-daily-sales.js b/web/static/js/page-daily-sales.js
index 01867d5..8e3cdf7 100644
--- a/web/static/js/page-daily-sales.js
+++ b/web/static/js/page-daily-sales.js
@@ -145,7 +145,7 @@
function axisPercent(title) {
return {
- beginAtZero: false,
+ beginAtZero: true,
grace: '12%',
title: { display: !isCompact(), text: title },
ticks: { callback: value => formatMetric(value, 'pct') },
@@ -158,6 +158,75 @@
};
}
+ function dateAxis(element) {
+ const shell = element && element.closest('.chart-container');
+ const width = shell ? shell.getBoundingClientRect().width : window.innerWidth;
+ const maxTicksLimit = width < 440 ? 4 : width < 640 ? 6 : isCompact() ? 5 : 10;
+ return {
+ grid: { display: false },
+ ticks: {
+ autoSkip: true,
+ maxTicksLimit,
+ minRotation: 0,
+ maxRotation: 0
+ }
+ };
+ }
+
+ function buildBoundedPercentSeries(seriesList) {
+ const absoluteValues = seriesList
+ .flatMap(series => Array.isArray(series) ? series : [])
+ .map(Number)
+ .filter(value => Number.isFinite(value) && Math.abs(value) > 1e-9)
+ .map(Math.abs)
+ .sort((a, b) => a - b);
+ const quantileIndex = Math.floor(Math.max(0, absoluteValues.length - 1) * 0.9);
+ const robustExtent = absoluteValues[quantileIndex] || 0;
+ const limit = Math.min(100, Math.max(20, Math.ceil(robustExtent / 10) * 10 || 20));
+ let clippedCount = 0;
+ const series = seriesList.map(values => (Array.isArray(values) ? values : []).map((value, index) => {
+ if (value === null || value === undefined || !Number.isFinite(Number(value))) return null;
+ const originalValue = Number(value);
+ const clipped = Math.abs(originalValue) > limit;
+ if (clipped) clippedCount += 1;
+ return {
+ x: safe.labels[index],
+ y: clipped ? Math.sign(originalValue) * limit : originalValue,
+ originalValue,
+ clipped
+ };
+ }));
+ return { series, limit, clippedCount };
+ }
+
+ function renderPercentScaleNote(canvasId, bounded) {
+ const canvas = document.getElementById(canvasId);
+ const wrap = canvas ? canvas.closest('.chart-container') : null;
+ const host = wrap ? wrap.parentElement : null;
+ if (!host) return;
+ let note = host.querySelector(`.chart-scale-note[data-for="${canvasId}"]`);
+ if (!bounded.clippedCount) {
+ if (note) note.remove();
+ return;
+ }
+ if (!note) {
+ note = document.createElement('p');
+ note.className = 'chart-scale-note';
+ note.dataset.for = canvasId;
+ host.appendChild(note);
+ }
+ note.textContent = `${bounded.clippedCount} 個極端值以 ±${bounded.limit}% 邊界標記;完整值保留於提示。`;
+ }
+
+ function percentTooltipValue(context) {
+ const raw = context.raw;
+ const original = raw && typeof raw === 'object' && Number.isFinite(Number(raw.originalValue))
+ ? Number(raw.originalValue)
+ : context.parsed.y;
+ const suffix = raw && raw.clipped ? '(圖上邊界)' : '';
+ return `${formatMetric(original, 'pct')}${suffix}`;
+ }
+
function renderHtmlBars(canvasId, labels, values, options = {}) {
const canvas = document.getElementById(canvasId);
const wrap = canvas ? canvas.closest('.chart-container') : null;
@@ -267,8 +336,14 @@
tension: 0.34,
cubicInterpolationMode: 'monotone',
fill: false,
- pointRadius: context => context.dataIndex === context.dataset.data.length - 1 ? 3 : 1.6,
- pointHoverRadius: 5,
+ pointRadius: context => {
+ if (context.raw && context.raw.clipped) return 5;
+ if (context.dataset.data.length === 1) return 6;
+ return context.dataIndex === context.dataset.data.length - 1 ? 3 : 1.6;
+ },
+ pointStyle: context => context.raw && context.raw.clipped ? 'triangle' : 'circle',
+ pointRotation: context => context.raw && context.raw.clipped && Number(context.raw.originalValue) < 0 ? 180 : 0,
+ pointHoverRadius: 6,
pointHitRadius: 12,
yAxisID
};
@@ -334,7 +409,7 @@
}
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 10 } },
+ x: dateAxis(el),
y: { type: 'linear', position: 'left', ...axisMoney('業績 / 毛利') },
y1: {
type: 'linear', position: 'right', ...axisMoney('客單價'),
@@ -358,15 +433,20 @@
return;
}
+ const bounded = buildBoundedPercentSeries([
+ safe.dod_revenue, safe.dod_profit, safe.dod_avg_price, safe.dod_qty
+ ]);
+ renderPercentScaleNote('dodChart', bounded);
+
rememberChart(new Chart(el, {
type: 'line',
data: {
labels: safe.labels,
datasets: [
- makeLineDataset('業績 DoD%', safe.dod_revenue, palette.caramel),
- makeLineDataset('毛利 DoD%', safe.dod_profit, palette.honey),
- makeLineDataset('客單 DoD%', safe.dod_avg_price, palette.mahogany),
- makeLineDataset('銷量 DoD%', safe.dod_qty, palette.olive)
+ makeLineDataset('業績 DoD%', bounded.series[0], palette.caramel),
+ makeLineDataset('毛利 DoD%', bounded.series[1], palette.honey),
+ makeLineDataset('客單 DoD%', bounded.series[2], palette.mahogany),
+ makeLineDataset('銷量 DoD%', bounded.series[3], palette.olive)
]
},
options: {
@@ -377,12 +457,12 @@
legend: { position: isCompact() ? 'bottom' : 'top' },
tooltip: {
callbacks: {
- label: ctx => `${ctx.dataset.label}: ${formatMetric(ctx.parsed.y, 'pct')}`
+ label: ctx => `${ctx.dataset.label}: ${percentTooltipValue(ctx)}`
}
}
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 10 } },
+ x: dateAxis(el),
y: axisPercent('DoD 成長率')
}
}
@@ -398,15 +478,20 @@
return;
}
+ const bounded = buildBoundedPercentSeries([
+ safe.wow_revenue, safe.wow_profit, safe.wow_avg_price, safe.wow_qty
+ ]);
+ renderPercentScaleNote('wowChart', bounded);
+
rememberChart(new Chart(el, {
type: 'line',
data: {
labels: safe.labels,
datasets: [
- makeWowDataset('業績 WoW%', safe.wow_revenue, palette.caramel),
- makeWowDataset('毛利 WoW%', safe.wow_profit, palette.honey),
- makeWowDataset('客單 WoW%', safe.wow_avg_price, palette.mahogany),
- makeWowDataset('銷量 WoW%', safe.wow_qty, palette.olive)
+ makeWowDataset('業績 WoW%', bounded.series[0], palette.caramel),
+ makeWowDataset('毛利 WoW%', bounded.series[1], palette.honey),
+ makeWowDataset('客單 WoW%', bounded.series[2], palette.mahogany),
+ makeWowDataset('銷量 WoW%', bounded.series[3], palette.olive)
]
},
options: {
@@ -423,13 +508,13 @@
if (i < 7 || v === 0) {
return `${ctx.dataset.label}: 無對比資料(需上週同日數據)`;
}
- return `${ctx.dataset.label}: ${formatMetric(v, 'pct')}`;
+ return `${ctx.dataset.label}: ${percentTooltipValue(ctx)}`;
}
}
}
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 10 } },
+ x: dateAxis(el),
y: axisPercent('WoW 成長率')
}
}
@@ -514,7 +599,7 @@
tooltip: { callbacks: { label: ctx => `${ctx.dataset.label}: ${formatMetric(ctx.parsed.y, 'pct')}` } }
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 10 } },
+ x: dateAxis(el),
y: axisPercent('毛利率')
}
}
@@ -573,7 +658,7 @@
}
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 10 } },
+ x: dateAxis(el),
y: { beginAtZero: true, title: { display: !isCompact(), text: '銷量' } },
y1: {
position: 'right',
@@ -697,7 +782,7 @@
}
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 10 } },
+ x: dateAxis(el),
y: { beginAtZero: true, title: { display: !isCompact(), text: '風險 SKU 數' } },
y1: {
position: 'right',
@@ -823,9 +908,9 @@
$('#categoryTable').DataTable({
order: [[2, 'desc']],
pageLength: 25,
- language: {
- url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/zh-HANT.json'
- }
+ language: typeof window.EwoooCDataTableLanguage === 'function'
+ ? window.EwoooCDataTableLanguage()
+ : {}
});
}
diff --git a/web/static/js/page-growth.js b/web/static/js/page-growth.js
index bef17fb..7fbd86a 100644
--- a/web/static/js/page-growth.js
+++ b/web/static/js/page-growth.js
@@ -87,13 +87,22 @@
function pctAxis(title) {
return {
- beginAtZero: false,
+ beginAtZero: true,
grace: '12%',
title: { display: !isCompact(), text: title },
ticks: { callback: value => formatMetric(value, 'pct') }
};
}
+ function isSinglePoint(series) {
+ return Array.isArray(series) &&
+ series.filter(value => value !== null && value !== undefined && Number.isFinite(Number(value))).length === 1;
+ }
+
+ function pointRadiusFor(series) {
+ return isSinglePoint(series) ? 6 : 2;
+ }
+
function renderHtmlBars(canvasId, labels, values, options = {}) {
const canvas = document.getElementById(canvasId);
const wrap = canvas ? canvas.closest('.ga-chart-card__body') : null;
@@ -203,8 +212,8 @@
order: 1,
tension: 0.34,
cubicInterpolationMode: 'monotone',
- pointRadius: 2,
- pointHoverRadius: 5
+ pointRadius: pointRadiusFor(data.yoy),
+ pointHoverRadius: 6
}
]
},
@@ -224,7 +233,7 @@
}
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 } },
+ x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 }, offset: data.labels.length === 1 },
y: moneyAxis('月營收'),
y1: {
position: 'right',
@@ -260,7 +269,7 @@
tooltip: { callbacks: { label: ctx => formatMetric(ctx.parsed.y, 'pct') } }
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 } },
+ x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 }, offset: data.labels.length === 1 },
y: pctAxis('MoM 月增率')
}
}
@@ -282,8 +291,8 @@
fill: true,
tension: 0.36,
cubicInterpolationMode: 'monotone',
- pointRadius: 2,
- pointHoverRadius: 5
+ pointRadius: pointRadiusFor(data.aov),
+ pointHoverRadius: 6
}]
},
options: {
@@ -295,7 +304,7 @@
tooltip: { callbacks: { label: ctx => formatMetric(ctx.parsed.y, 'currency') } }
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 } },
+ x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 }, offset: data.labels.length === 1 },
y: moneyAxis('平均單價')
}
}
@@ -317,8 +326,8 @@
fill: true,
tension: 0.36,
cubicInterpolationMode: 'monotone',
- pointRadius: 2,
- pointHoverRadius: 5
+ pointRadius: pointRadiusFor(data.margin_rate),
+ pointHoverRadius: 6
}]
},
options: {
@@ -330,7 +339,7 @@
tooltip: { callbacks: { label: ctx => formatMetric(ctx.parsed.y, 'pct') } }
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 } },
+ x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 }, offset: data.labels.length === 1 },
y: pctAxis('毛利率')
}
}
@@ -364,8 +373,8 @@
yAxisID: 'y1',
tension: 0.34,
cubicInterpolationMode: 'monotone',
- pointRadius: 2,
- pointHoverRadius: 5
+ pointRadius: pointRadiusFor(data.competitor_gap_pct),
+ pointHoverRadius: 6
}
]
},
@@ -385,7 +394,7 @@
}
},
scales: {
- x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 } },
+ x: { grid: { display: false }, ticks: { maxTicksLimit: isCompact() ? 5 : 8 }, offset: data.labels.length === 1 },
y: {
beginAtZero: true,
title: { display: !isCompact(), text: '風險 SKU 數' }
diff --git a/web/static/js/page-monthly-summary.js b/web/static/js/page-monthly-summary.js
index e99e4c9..1f863c0 100644
--- a/web/static/js/page-monthly-summary.js
+++ b/web/static/js/page-monthly-summary.js
@@ -15,6 +15,11 @@
let compareChart, yoyTrendChart, vendorRankingChart, divisionDistChart, priceRangeChart;
let bcgMatrixChart, priceVolumeScatterChart, seasonalityHeatmapChart, areaRankingChart;
let specialChart, bodyCareChart, makeupFragranceChart, privacyInfantChart;
+ let activeFetchController = null;
+ let fetchRunId = 0;
+ let lastMainData = null;
+ const lastSpecialData = new Map();
+ const REQUEST_TIMEOUT_MS = 20000;
const initialParams = new URLSearchParams(window.location.search);
let currentFilters = {
@@ -32,6 +37,22 @@
return compactMediaQuery.matches;
}
+ function cssColor(name, fallback) {
+ return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+ }
+
+ function decodeText(value) {
+ const textarea = document.createElement('textarea');
+ textarea.innerHTML = String(value ?? '');
+ return textarea.value;
+ }
+
+ function safeHtmlText(value) {
+ const span = document.createElement('span');
+ span.textContent = decodeText(value);
+ return span.innerHTML;
+ }
+
$(function () {
compareChart = echarts.init(document.getElementById('compareChart'));
yoyTrendChart = echarts.init(document.getElementById('yoyTrendChart'));
@@ -48,7 +69,9 @@
privacyInfantChart = echarts.init(document.getElementById('privacyInfantChart'));
table = $('#summaryTable').DataTable({
- language: { url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/zh-HANT.json' },
+ language: typeof window.EwoooCDataTableLanguage === 'function'
+ ? window.EwoooCDataTableLanguage()
+ : {},
autoWidth: false,
deferRender: true,
pageLength: 20,
@@ -65,7 +88,12 @@
specialChart, bodyCareChart, makeupFragranceChart, privacyInfantChart]
.forEach(c => c && c.resize());
});
- const refreshForViewport = () => fetchData();
+ const refreshForViewport = () => {
+ if (lastMainData) updateUI(lastMainData);
+ lastSpecialData.forEach(({ chart, tbody, payload }) => {
+ renderExcelChart(chart, tbody, payload.trend, payload.period);
+ });
+ };
if (compactMediaQuery.addEventListener) {
compactMediaQuery.addEventListener('change', refreshForViewport);
} else if (compactMediaQuery.addListener) {
@@ -109,36 +137,98 @@
});
}
- function fetchData() {
- $('#loadingOverlay').css('display', 'flex');
- const url = `/api/monthly_summary_data?${buildFilterParams({ limit: '2000' }).toString()}`;
-
- fetch(url).then(r => r.json()).then(data => {
- if (data.status === 'success') {
- updateUI(data);
- updateFilters(data.filters);
- updateAnalysisTabLinks(data.period);
- }
- $('#loadingOverlay').hide();
- }).catch(err => { console.error(err); $('#loadingOverlay').hide(); });
-
- fetchSpecialChartData();
+ function setReportError(message = '') {
+ const state = document.getElementById('monthlyReportErrorState');
+ if (!state) return;
+ state.hidden = !message;
+ const detail = document.getElementById('monthlyReportErrorMessage');
+ if (detail) detail.textContent = message;
}
- function fetchSpecialChartData() {
+ async function fetchJson(url, { signal, timeoutMs = REQUEST_TIMEOUT_MS } = {}) {
+ const controller = new AbortController();
+ const relayAbort = () => controller.abort();
+ if (signal) {
+ if (signal.aborted) controller.abort();
+ else signal.addEventListener('abort', relayAbort, { once: true });
+ }
+ const timeout = window.setTimeout(() => controller.abort(), timeoutMs);
+ try {
+ const response = await fetch(url, { signal: controller.signal });
+ if (!response.ok) throw new Error(`HTTP ${response.status}`);
+ return await response.json();
+ } finally {
+ window.clearTimeout(timeout);
+ if (signal) signal.removeEventListener('abort', relayAbort);
+ }
+ }
+
+ async function fetchData() {
+ const runId = ++fetchRunId;
+ if (activeFetchController) activeFetchController.abort();
+ const controller = new AbortController();
+ activeFetchController = controller;
+ document.documentElement.dataset.monthlyCharts = 'loading';
+ setReportError();
+ $('#loadingOverlay').css('display', 'flex');
+ const url = `/api/monthly_summary_data?${buildFilterParams({ limit: '2000' }).toString()}`;
+ const specialPromise = fetchSpecialChartData(controller.signal, runId);
+
+ try {
+ const data = await fetchJson(url, { signal: controller.signal });
+ if (runId !== fetchRunId) return;
+ if (data.status !== 'success') throw new Error(data.message || '月結資料回應失敗');
+ lastMainData = data;
+ updateUI(data);
+ updateFilters(data.filters);
+ updateAnalysisTabLinks(data.period);
+ document.documentElement.dataset.monthlyCharts = 'ready';
+ } catch (error) {
+ if (runId !== fetchRunId) return;
+ const timedOut = error && error.name === 'AbortError';
+ const message = timedOut
+ ? '月結資料載入逾時,已停止本次請求;請稍後重新整理。'
+ : '月結資料暫時無法載入,圖表已停止更新。';
+ setReportError(message);
+ document.documentElement.dataset.monthlyCharts = 'error';
+ document.documentElement.dataset.monthlyChartsError = error && error.message ? error.message : String(error);
+ console.error('[monthly-summary] main data failed', error);
+ } finally {
+ if (runId === fetchRunId) $('#loadingOverlay').hide();
+ }
+
+ await specialPromise;
+ if (runId === fetchRunId) {
+ activeFetchController = null;
+ }
+ }
+
+ async function fetchSpecialChartData(signal, runId) {
+ document.documentElement.dataset.monthlySpecialCharts = 'loading';
const pairs = [
['開架保養,臉部清潔', specialChart, 'specialChartTableBody'],
['身體保養', bodyCareChart, 'bodyCareChartTableBody'],
['彩妝/指彩,精油擴香', makeupFragranceChart, 'makeupFragranceChartTableBody'],
['私密保養,嬰幼洗沐', privacyInfantChart, 'privacyInfantChartTableBody']
];
- pairs.forEach(([area, chart, tbody]) => {
+ await Promise.all(pairs.map(async ([area, chart, tbody]) => {
const params = buildFilterParams({ areaOverride: area });
- fetch(`/api/monthly_summary_trend?${params.toString()}`)
- .then(r => r.json())
- .then(d => { if (d.status === 'success') renderExcelChart(chart, tbody, d.trend, d.period); })
- .catch(err => console.error('monthly special trend failed', err));
- });
+ try {
+ const payload = await fetchJson(`/api/monthly_summary_trend?${params.toString()}`, {
+ signal,
+ timeoutMs: 12000
+ });
+ if (runId !== fetchRunId) return;
+ if (payload.status !== 'success') throw new Error(payload.message || '區域趨勢回應失敗');
+ lastSpecialData.set(area, { chart, tbody, payload });
+ renderExcelChart(chart, tbody, payload.trend, payload.period);
+ } catch (error) {
+ if (runId !== fetchRunId || (signal && signal.aborted)) return;
+ renderChartEmpty(chart, tbody, '此區域趨勢暫時無法載入。');
+ console.error('[monthly-summary] special trend failed', area, error);
+ }
+ }));
+ if (runId === fetchRunId) document.documentElement.dataset.monthlySpecialCharts = 'ready';
}
// ── Filter ────────────────────────────────────────────
@@ -150,7 +240,7 @@
}
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]);
+ $(`#${btnMap[type]}`).text(decodeText(value || defaultMap[type]));
syncFilterUrl();
fetchData();
}
@@ -194,7 +284,19 @@
const populate = (id, list, type) => {
const el = $(id);
if (el.children().length > 1) return;
- list.forEach(v => el.append(`${v}`));
+ list.forEach(value => {
+ const item = document.createElement('li');
+ const link = document.createElement('a');
+ link.className = 'dropdown-item';
+ link.href = '#';
+ link.textContent = decodeText(value);
+ link.addEventListener('click', event => {
+ event.preventDefault();
+ selectFilter(type, value);
+ });
+ item.appendChild(link);
+ el.append(item);
+ });
};
populate('#listYear', f.years, 'year');
populate('#listMonth', f.months.map(String).sort((a,b) => a - b), 'month');
@@ -208,11 +310,11 @@
vendor: currentFilters.vendor || '所有廠商',
trade: currentFilters.trade || '所有類別'
};
- $('#btnYear').text(labels.year);
- $('#btnMonth').text(labels.month);
- $('#btnArea').text(labels.area);
- $('#btnVendor').text(labels.vendor);
- $('#btnTrade').text(labels.trade);
+ $('#btnYear').text(decodeText(labels.year));
+ $('#btnMonth').text(decodeText(labels.month));
+ $('#btnArea').text(decodeText(labels.area));
+ $('#btnVendor').text(decodeText(labels.vendor));
+ $('#btnTrade').text(decodeText(labels.trade));
}
// ── UI updates ────────────────────────────────────────
@@ -259,10 +361,10 @@
yoyHtml = `${yoy > 0 ? '+' : ''}${yoy}%`;
}
table.row.add([
- `${row.year}/${row.month}`, row.division, row.area_name || '-', row.pm_name || '-',
- `${row.brand_name}`,
- `${row.vendor_name}`,
- `${row.trade_type || '-'}`,
+ `${row.year}/${row.month}`, safeHtmlText(row.division), safeHtmlText(row.area_name || '-'), safeHtmlText(row.pm_name || '-'),
+ `${safeHtmlText(row.brand_name)}`,
+ `${safeHtmlText(row.vendor_name)}`,
+ `${safeHtmlText(row.trade_type || '-')}`,
sales.toLocaleString(), yoyHtml
]);
});
@@ -305,7 +407,7 @@
$('#highlightsRow').show();
const r = (id, list, prefix='') => {
const t = $(`#${id}`); t.empty();
- list.forEach((it, i) => t.append(`| ${i+1}${it.name} | ${prefix}${it.value.toLocaleString()} |
`));
+ list.forEach((it, i) => t.append(`| ${i+1}${safeHtmlText(it.name)} | ${prefix}${it.value.toLocaleString()} |
`));
};
r('revHighlightsBody', h.rev_top, '$');
r('profitHighlightsBody', h.profit_top, '$');
@@ -348,9 +450,9 @@
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 C1 = cssColor('--momo-warm-caramel', '#c96442');
+ const C2 = cssColor('--momo-warm-olive', '#6f7a4a');
+ const CM = cssColor('--momo-text-tertiary', '#94a3b8');
const tableHtml = `
| 月份 | ${months.map(m => `${m} | `).join('')}
@@ -433,13 +535,13 @@
const compact = isCompactViewport();
const previousLabel = period.previous_label || `${period.previous_year || ''} 年`;
const currentLabel = period.label || `${period.current_year || ''} 年`;
- const pie = key => data.map(d => ({ name: d.name, value: d[key] || 0 })).filter(d => d.value > 0);
+ const pie = key => data.map(d => ({ name: decodeText(d.name), value: d[key] || 0 })).filter(d => d.value > 0);
chart.setOption({
title: [
{ text: previousLabel, left: '23%', top: compact ? '2%' : '5%', textAlign: 'center', textStyle: { fontSize: compact ? 12 : 16, fontWeight: 'bold' } },
{ text: currentLabel, left: '73%', top: compact ? '2%' : '5%', textAlign: 'center', textStyle: { fontSize: compact ? 12 : 16, fontWeight: 'bold' } }
],
- tooltip: { trigger: 'item', formatter: p => `${p.name}
業績: ${(p.value/10000).toFixed(0)}萬
佔比: ${p.percent.toFixed(1)}%` },
+ tooltip: { trigger: 'item', formatter: p => `${safeHtmlText(p.name)}
業績: ${(p.value/10000).toFixed(0)}萬
佔比: ${p.percent.toFixed(1)}%` },
legend: { type: 'scroll', orient: 'horizontal', bottom: 0, show: !compact, textStyle: { fontSize: 12, fontWeight: 'bold' } },
series: [
{ name: previousLabel, type: 'pie', radius: compact ? ['36%', '58%'] : ['30%', '60%'], center: ['25%', compact ? '53%' : '55%'], data: pie('sales_previous'),
@@ -467,11 +569,11 @@
chart.setOption({
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },
- formatter: ps => ps[0].name + '
' + ps.map(p => {
+ formatter: ps => safeHtmlText(ps[0].name) + '
' + ps.map(p => {
const v = p.value || 0;
const total = p.seriesName === previousLabel ? previousTotal : currentTotal;
const pct = total > 0 ? (v/total*100).toFixed(1) + '%' : '0.0%';
- return `${p.marker} ${p.seriesName}: ${v.toLocaleString()} (${pct})`;
+ return `${p.marker} ${safeHtmlText(p.seriesName)}: ${v.toLocaleString()} (${pct})`;
}).join('
')
},
legend: { data: [previousLabel, currentLabel], bottom: 0, show: !compact, textStyle: { fontSize: 13, fontWeight: 'bold' } },
@@ -506,18 +608,18 @@
}
chart.clear();
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)';
+ const C_STAR = cssColor('--momo-warm-olive', '#6f7a4a');
+ const C_COW = cssColor('--momo-warm-honey', '#c89043');
+ const C_QUESTION = cssColor('--momo-warm-caramel', '#c96442');
+ const C_DOG = cssColor('--momo-warm-mahogany', '#7a3b2c');
chart.setOption({
- tooltip: { formatter: p => `${p.value[3]}
毛利率: ${p.value[0]}%
銷售額: $${p.value[1].toLocaleString()}
銷量: ${p.value[2].toLocaleString()}
` },
+ tooltip: { formatter: p => `${safeHtmlText(p.value[3])}
毛利率: ${p.value[0]}%
銷售額: $${p.value[1].toLocaleString()}
銷量: ${p.value[2].toLocaleString()}
` },
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]),
+ data: data.map(d => [d.margin, d.sales, d.qty, decodeText(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 => {
@@ -546,10 +648,10 @@
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];
+ return [avg, d.qty, d.sales, decodeText(d.name)];
});
chart.setOption({
- tooltip: { formatter: p => `${p.value[3]}
均價: $${p.value[0]}
銷量: ${p.value[1].toLocaleString()}
業績: $${p.value[2].toLocaleString()}
` },
+ tooltip: { formatter: p => `${safeHtmlText(p.value[3])}
均價: $${p.value[0]}
銷量: ${p.value[1].toLocaleString()}
業績: $${p.value[2].toLocaleString()}
` },
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' } } },
@@ -566,14 +668,22 @@
chart.clear();
const compact = isCompactViewport();
const cd = data.slice().reverse();
+ const visibleCount = compact ? 10 : 18;
+ const zoomStart = cd.length > visibleCount
+ ? Math.max(0, 100 - (visibleCount / cd.length * 100))
+ : 0;
const previousLabel = period.previous_label || '去年同期';
const currentLabel = period.label || '本期';
chart.setOption({
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: [previousLabel, currentLabel], 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' },
+ grid: { left: compact ? '86' : '160', right: compact ? '34' : '120', top: compact ? '10' : '20', bottom: compact ? '28' : '45' },
+ dataZoom: cd.length > visibleCount ? [
+ { type: 'inside', yAxisIndex: 0, start: zoomStart, end: 100 },
+ { type: 'slider', yAxisIndex: 0, start: zoomStart, end: 100, right: 3, width: 10, showDetail: false }
+ ] : [],
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' } },
+ yAxis: { type: 'category', data: cd.map(d => decodeText(d.name)), axisLabel: { width: compact ? 78 : 150, overflow: 'truncate', interval: 0, fontSize: compact ? 10 : 14, fontWeight: 'bold' } },
series: [
{ name: previousLabel, type: 'bar', data: cd.map(d => d.sales_previous || 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,
@@ -598,7 +708,7 @@
const pCls = previousProfit > 0 && (currentProfit-previousProfit) >= 0 ? 'text-danger' : (previousProfit > 0 ? 'text-success' : '');
html += `
| ${i+1} |
- ${d.name} |
+ ${safeHtmlText(d.name)} |
${d.sales.toLocaleString()} |
${sYoY} |
${previousSales.toLocaleString()} |
@@ -622,20 +732,23 @@
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; });
+ data.forEach(d => {
+ const category = decodeText(d.category);
+ areaSales[category] = (areaSales[category] || 0) + d.sales;
+ });
const areas = Object.keys(areaSales).sort((a,b) => areaSales[b] - areaSales[a]);
const yLabels = [];
const years = [...new Set(data.map(d => Number(d.year)))].sort((a, b) => b - a);
years.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}`);
+ const xi = d.month - 1, yi = yLabels.indexOf(`${d.year} ${decodeText(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 => `${yLabels[p.value[1]]}
${months[p.value[0]]}
業績: ${(p.value[2]/10000).toFixed(0)}萬` },
+ formatter: p => `${safeHtmlText(yLabels[p.value[1]])}
${months[p.value[0]]}
業績: ${(p.value[2]/10000).toFixed(0)}萬` },
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' } },
@@ -660,10 +773,10 @@
data.sort((a,b) => b.sales - a.sales);
chart.setOption({
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' },
- formatter: ps => ps[0].name + '
' + ps.map(p => `${p.marker} ${p.seriesName}: ${(p.value || 0).toLocaleString()}`).join('
') },
+ formatter: ps => safeHtmlText(ps[0].name) + '
' + ps.map(p => `${p.marker} ${safeHtmlText(p.seriesName)}: ${(p.value || 0).toLocaleString()}`).join('
') },
legend: { data: [previousLabel, currentLabel], 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' } },
+ xAxis: { type: 'category', data: data.map(d => decodeText(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: [
{ label: previousLabel, key: 'sales_previous' },
@@ -674,7 +787,7 @@
}))
});
let html = `| 排名 | 區名稱 | 業績 |
|---|
`;
- data.forEach((d, i) => { html += `| ${i+1} | ${d.name} | $${d.sales.toLocaleString()} |
`; });
+ data.forEach((d, i) => { html += `| ${i+1} | ${safeHtmlText(d.name)} | $${d.sales.toLocaleString()} |
`; });
html += ``;
$(`#${tableId}`).parent().html(``);
}
diff --git a/web/static/js/page-sales-analysis.js b/web/static/js/page-sales-analysis.js
index d40ecd3..662c186 100644
--- a/web/static/js/page-sales-analysis.js
+++ b/web/static/js/page-sales-analysis.js
@@ -131,8 +131,55 @@
const baseGrid = { color: mix(INK, 8), drawBorder: false };
const baseTicks = { color: MUTED, font: { family: getComputedStyle(document.documentElement).fontFamily } };
+ const hasDrawableValues = (values) => Array.isArray(values) && values.some((value) => {
+ if (value && typeof value === 'object') {
+ return Object.values(value).some(item => Number.isFinite(Number(item)) && Math.abs(Number(item)) > 1e-9);
+ }
+ return Number.isFinite(Number(value)) && Math.abs(Number(value)) > 1e-9;
+ });
+
+ const chartValues = (series) => {
+ if (!series || typeof series !== 'object') return [];
+ if (Array.isArray(series.values) && series.values.length) return series.values;
+ return Array.isArray(series.chart_values) ? series.chart_values : [];
+ };
+
+ const renderChartEmpty = (canvas, message) => {
+ if (!canvas) return null;
+ const shell = canvas.closest('.sa-chart-shell');
+ if (!shell) return null;
+ shell.classList.add('chart-empty-active');
+ canvas.setAttribute('aria-hidden', 'true');
+ let empty = shell.querySelector('.sa-chart-empty');
+ if (!empty) {
+ empty = document.createElement('div');
+ empty.className = 'sa-chart-empty';
+ const title = document.createElement('strong');
+ title.textContent = '尚無可繪製資料';
+ const detail = document.createElement('span');
+ empty.append(title, detail);
+ shell.appendChild(empty);
+ }
+ empty.querySelector('span').textContent = message;
+ return null;
+ };
+
+ const prepareChartCanvas = (canvas) => {
+ if (!canvas) return;
+ const shell = canvas.closest('.sa-chart-shell');
+ if (shell) {
+ shell.classList.remove('chart-empty-active');
+ shell.querySelector('.sa-chart-empty')?.remove();
+ }
+ canvas.removeAttribute('aria-hidden');
+ };
+
const horizontalBar = (canvas, labels, values, label, fmt) => {
- if (!canvas || !labels || !labels.length) return null;
+ if (!canvas) return null;
+ if (!Array.isArray(labels) || !labels.length || !hasDrawableValues(values)) {
+ return renderChartEmpty(canvas, '所選期間沒有可比較的排行資料。');
+ }
+ prepareChartCanvas(canvas);
return new Chart(canvas, {
type: 'bar',
data: {
@@ -152,14 +199,27 @@
},
scales: {
x: { grid: baseGrid, ticks: { ...baseTicks, callback: (v) => fmt ? fmt(v) : v.toLocaleString() } },
- y: { grid: { display: false }, ticks: baseTicks }
+ y: {
+ grid: { display: false },
+ ticks: {
+ ...baseTicks,
+ callback(value) {
+ const text = String(this.getLabelForValue(value) || '');
+ return text.length > 28 ? `${text.slice(0, 28)}...` : text;
+ }
+ }
+ }
}
}
});
};
const doughnut = (canvas, labels, values) => {
- if (!canvas || !labels || !labels.length) return null;
+ if (!canvas) return null;
+ if (!Array.isArray(labels) || !labels.length || !hasDrawableValues(values)) {
+ return renderChartEmpty(canvas, '所選期間沒有可計算的類別占比。');
+ }
+ prepareChartCanvas(canvas);
return new Chart(canvas, {
type: 'doughnut',
data: {
@@ -188,7 +248,12 @@
};
const lineTrend = (canvas, labels, values, label, fmt) => {
- if (!canvas || !labels || !labels.length) return null;
+ if (!canvas) return null;
+ if (!Array.isArray(labels) || !labels.length || !hasDrawableValues(values)) {
+ return renderChartEmpty(canvas, '所選期間沒有可繪製的趨勢資料。');
+ }
+ prepareChartCanvas(canvas);
+ const singlePoint = labels.length === 1;
return new Chart(canvas, {
type: 'line',
data: {
@@ -197,7 +262,7 @@
borderColor: ACCENT,
backgroundColor: mix(ACCENT, 14),
tension: 0.34, fill: true, pointBackgroundColor: ACCENT,
- pointRadius: 3, pointHoverRadius: 5, borderWidth: 2.5
+ pointRadius: singlePoint ? 6 : 3, pointHoverRadius: 6, borderWidth: 2.5
}]
},
options: {
@@ -207,7 +272,7 @@
tooltip: { callbacks: { label: (c) => fmt ? fmt(c.parsed.y) : c.parsed.y.toLocaleString() } }
},
scales: {
- x: { grid: { display: false }, ticks: baseTicks },
+ x: { grid: { display: false }, ticks: baseTicks, offset: singlePoint },
y: { grid: baseGrid, ticks: { ...baseTicks, callback: (v) => fmt ? fmt(v) : v.toLocaleString() }, beginAtZero: true }
}
}
@@ -215,7 +280,11 @@
};
const verticalBar = (canvas, labels, values, label, fmt) => {
- if (!canvas || !labels || !labels.length) return null;
+ if (!canvas) return null;
+ if (!Array.isArray(labels) || !labels.length || !hasDrawableValues(values)) {
+ return renderChartEmpty(canvas, '所選期間沒有可繪製的分布資料。');
+ }
+ prepareChartCanvas(canvas);
return new Chart(canvas, {
type: 'bar',
data: {
@@ -230,7 +299,7 @@
plugins: { legend: { display: false }, tooltip: { callbacks: { label: (c) => fmt ? fmt(c.parsed.y) : c.parsed.y.toLocaleString() } } },
scales: {
x: { grid: { display: false }, ticks: baseTicks },
- y: { grid: baseGrid, ticks: { ...baseTicks, callback: (v) => fmt ? fmt(v) : v.toLocaleString() } }
+ y: { beginAtZero: true, grid: baseGrid, ticks: { ...baseTicks, callback: (v) => fmt ? fmt(v) : v.toLocaleString() } }
}
}
});
@@ -274,7 +343,7 @@
if (data.barData) {
horizontalBar(
document.getElementById('barChart'),
- data.barData.labels, data.barData.values,
+ data.barData.labels, chartValues(data.barData),
data.barData.label || '銷售',
data.barData.is_money ? fmtMoney : fmtNum
);
@@ -283,12 +352,13 @@
// 2. Category doughnut
if (data.categoryData) {
doughnut(document.getElementById('categoryChart'),
- data.categoryData.labels, data.categoryData.values);
+ data.categoryData.labels, chartValues(data.categoryData));
}
// 3. Treemap
const treemapEl = document.getElementById('treemapChart');
if (treemapEl && data.treemapData && data.treemapData.length) {
+ prepareChartCanvas(treemapEl);
new Chart(treemapEl, {
type: 'treemap',
data: {
@@ -317,18 +387,21 @@
}
}
});
+ } else {
+ renderChartEmpty(treemapEl, '所選期間沒有可建立板塊分布的商品業績。');
}
// 4. Price distribution (vertical bar)
if (data.priceDistData) {
verticalBar(document.getElementById('priceDistChart'),
- data.priceDistData.labels, data.priceDistData.values,
+ data.priceDistData.labels, chartValues(data.priceDistData),
'業績', fmtMoney);
}
// 5. Scatter
const scEl = document.getElementById('scatterChart');
if (scEl && data.scatterData && data.scatterData.length) {
+ prepareChartCanvas(scEl);
new Chart(scEl, {
type: 'scatter',
data: {
@@ -351,11 +424,14 @@
}
}
});
+ } else {
+ renderChartEmpty(scEl, '所選期間沒有同時具備價格與銷量的商品資料。');
}
// 6. BCG matrix
const bcgEl = document.getElementById('bcgChart');
if (bcgEl && data.bcgData && data.bcgData.points && data.bcgData.points.length) {
+ prepareChartCanvas(bcgEl);
const pts = data.bcgData.points;
const xMid = data.bcgData.x_median || 0;
const yMid = data.bcgData.y_median || 0;
@@ -385,11 +461,15 @@
},
plugins: [bcgQuadrants(xMid, yMid)]
});
+ } else {
+ renderChartEmpty(bcgEl, '所選期間缺少可計算毛利率與銷量的商品資料。');
}
// 7. Seasonality heatmap (matrix-style via grouped bars stacked – fallback)
const seasEl = document.getElementById('seasonalityChart');
- if (seasEl && data.seasonalityData && data.seasonalityData.matrix) {
+ const seasonalityMatrix = data.seasonalityData && data.seasonalityData.matrix;
+ if (seasEl && Array.isArray(seasonalityMatrix) && seasonalityMatrix.some(hasDrawableValues)) {
+ prepareChartCanvas(seasEl);
const cats = data.seasonalityData.categories;
const months = data.seasonalityData.months;
// build datasets: one per category
@@ -411,43 +491,56 @@
}
}
});
+ } else {
+ renderChartEmpty(seasEl, '至少需要兩個月份的分類業績才能判讀淡旺季。');
}
// 8. Marketing — discount + coupon
+ const discountCanvas = document.getElementById('mktDiscountChart');
+ const couponCanvas = document.getElementById('mktCouponChart');
if (data.marketingData) {
if (data.marketingData.discount) {
- horizontalBar(document.getElementById('mktDiscountChart'),
+ horizontalBar(discountCanvas,
data.marketingData.discount.labels, data.marketingData.discount.values,
'折扣業績', fmtMoney);
+ } else {
+ renderChartEmpty(discountCanvas, '所選期間沒有折扣活動業績。');
}
if (data.marketingData.coupon) {
- horizontalBar(document.getElementById('mktCouponChart'),
+ horizontalBar(couponCanvas,
data.marketingData.coupon.labels, data.marketingData.coupon.values,
'折價券業績', fmtMoney);
+ } else {
+ renderChartEmpty(couponCanvas, '所選期間沒有折價券活動業績。');
}
+ } else {
+ renderChartEmpty(discountCanvas, '所選期間沒有折扣活動業績。');
+ renderChartEmpty(couponCanvas, '所選期間沒有折價券活動業績。');
}
// 9. Time-dimension trends
if (data.monthlyData) {
lineTrend(document.getElementById('monthlyChart'),
- data.monthlyData.labels, data.monthlyData.values, '月業績', fmtMoney);
+ data.monthlyData.labels, chartValues(data.monthlyData), '月業績', fmtMoney);
}
if (data.weeklyData) {
lineTrend(document.getElementById('weeklyChart'),
- data.weeklyData.labels, data.weeklyData.values, '週業績', fmtMoney);
+ data.weeklyData.labels, chartValues(data.weeklyData), '週業績', fmtMoney);
}
if (data.dowData) {
verticalBar(document.getElementById('dowChart'),
- data.dowData.labels, data.dowData.values, '日業績', fmtMoney);
+ data.dowData.labels, chartValues(data.dowData), '日業績', fmtMoney);
}
if (data.hourlyData) {
verticalBar(document.getElementById('hourlyChart'),
- data.hourlyData.labels, data.hourlyData.values, '時業績', fmtMoney);
+ data.hourlyData.labels, chartValues(data.hourlyData), '時業績', fmtMoney);
}
// 10. Heatmap (DOW × Hour) — stacked bar fallback
const hmEl = document.getElementById('heatmapChart');
- if (hmEl && data.heatmapData && data.heatmapData.matrix) {
+ const heatmapMatrix = data.heatmapData && data.heatmapData.matrix;
+ if (hmEl && Array.isArray(heatmapMatrix) && heatmapMatrix.some(hasDrawableValues)) {
+ prepareChartCanvas(hmEl);
const dows = data.heatmapData.dows || ['週一','週二','週三','週四','週五','週六','週日'];
const hours = data.heatmapData.hours || Array.from({length: 24}, (_, i) => `${i}:00`);
const datasets = hours.map((h, i) => ({
@@ -468,6 +561,8 @@
}
}
});
+ } else {
+ renderChartEmpty(hmEl, '所選期間沒有可交叉分析的星期與小時資料。');
}
};
@@ -504,6 +599,11 @@
const ctx = document.getElementById('yoy-chart');
if (yoyChart) yoyChart.destroy();
+ if (!breakdown.length || (!hasDrawableValues(breakdown.map(row => row.year1_value)) && !hasDrawableValues(breakdown.map(row => row.year2_value)))) {
+ renderChartEmpty(ctx, '所選期間與比較年度沒有可繪製的月別資料。');
+ return;
+ }
+ prepareChartCanvas(ctx);
yoyChart = new Chart(ctx, {
type: 'line',
data: {
@@ -525,7 +625,10 @@
}
});
})
- .catch(e => console.warn('[yoy] fetch failed', e));
+ .catch(e => {
+ console.warn('[yoy] fetch failed', e);
+ renderChartEmpty(document.getElementById('yoy-chart'), '年度比較資料暫時無法載入。');
+ });
};
// ─── DataTable ─────────────────────────────────────────
@@ -557,25 +660,35 @@
processing: true, serverSide: false,
pageLength: 25, lengthMenu: [10, 25, 50, 100],
order: [[$tbl.find('thead th').length - 1, 'desc']],
- language: { url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/zh-HANT.json' },
+ language: typeof window.EwoooCDataTableLanguage === 'function'
+ ? window.EwoooCDataTableLanguage()
+ : {},
columnDefs: [{ targets: '_all', defaultContent: '—' }]
});
};
// ─── Boot ──────────────────────────────────────────────
const boot = () => {
- initFlatpickr();
- const data = readData();
- if (data) buildCharts(data);
- initDataTable();
- if (typeof window.loadYoYData === 'function' && document.getElementById('yoy-chart')) {
- try { window.loadYoYData(); } catch (e) { /* silent */ }
+ document.documentElement.dataset.salesCharts = 'loading';
+ try {
+ initFlatpickr();
+ const data = readData();
+ if (data) buildCharts(data);
+ initDataTable();
+ if (typeof window.loadYoYData === 'function' && document.getElementById('yoy-chart')) {
+ window.loadYoYData();
+ }
+ if (window.bootstrap) {
+ document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
+ }
+ document.documentElement.dataset.salesCharts = 'ready';
+ } catch (error) {
+ document.documentElement.dataset.salesCharts = 'error';
+ document.documentElement.dataset.salesChartsError = error && error.message ? error.message : String(error);
+ console.error('[sales-analysis] chart boot failed:', error);
+ } finally {
+ hideLoading();
}
- // tooltips
- if (window.bootstrap) {
- document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
- }
- hideLoading();
};
// Show loading on form submit