1526 lines
70 KiB
HTML
1526 lines
70 KiB
HTML
{% extends 'ewoooc_base.html' %}
|
||
{% block title %}月份總表數據分析 - WOOO TECH{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
|
||
<style>
|
||
.monthly-analysis-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
}
|
||
|
||
.monthly-analysis-hero {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 16px;
|
||
align-items: center;
|
||
padding: 22px;
|
||
border: 1px solid var(--momo-border-strong);
|
||
border-radius: 8px;
|
||
background:
|
||
radial-gradient(circle at 18px 18px, rgba(42, 37, 32, 0.12) 1px, transparent 1px),
|
||
linear-gradient(135deg, rgba(242, 178, 90, 0.22), rgba(255, 255, 255, 0.94) 46%, rgba(42, 37, 32, 0.06));
|
||
background-size: 18px 18px, auto;
|
||
box-shadow: var(--momo-shadow-soft);
|
||
}
|
||
|
||
.monthly-analysis-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: 0;
|
||
color: var(--momo-text-strong);
|
||
font-family: var(--momo-font-display);
|
||
font-size: clamp(1.45rem, 2vw, 2.08rem);
|
||
font-weight: 800;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.monthly-analysis-title i {
|
||
color: var(--momo-warm-caramel) !important;
|
||
}
|
||
|
||
.monthly-version-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
border: 1px solid rgba(42, 37, 32, 0.14);
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
color: var(--momo-text-muted);
|
||
font-family: var(--momo-font-mono);
|
||
font-size: 0.78rem;
|
||
font-weight: 800;
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.card {
|
||
border: 1px solid var(--momo-border-subtle) !important;
|
||
border-radius: 8px;
|
||
box-shadow: var(--momo-shadow-soft);
|
||
margin-bottom: 1.5rem;
|
||
background: rgba(255, 255, 255, 0.84);
|
||
}
|
||
|
||
.card-header {
|
||
background: rgba(250, 247, 240, 0.88) !important;
|
||
border-bottom: 1px solid var(--momo-border-subtle);
|
||
font-weight: 700;
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.filter-section {
|
||
background:
|
||
radial-gradient(circle at 14px 14px, rgba(42, 37, 32, 0.1) 1px, transparent 1px),
|
||
linear-gradient(135deg, rgba(42, 37, 32, 0.94), rgba(68, 54, 40, 0.9));
|
||
background-size: 16px 16px, auto;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
color: white;
|
||
margin-bottom: 2rem;
|
||
box-shadow: var(--momo-shadow-medium);
|
||
}
|
||
|
||
.form-label {
|
||
font-weight: 600;
|
||
font-size: 0.85rem;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
|
||
/* 模擬業績分析頁面的 Dropdown 樣式 */
|
||
.custom-dropdown-btn {
|
||
background-color: white !important;
|
||
border: 1px solid #dee2e6 !important;
|
||
text-align: left;
|
||
position: relative;
|
||
padding: 0.75rem 1.25rem;
|
||
border-radius: 8px;
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
color: #2c3e50;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.custom-dropdown-btn::after {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.stat-card {
|
||
border-left: 4px solid var(--momo-warm-caramel) !important;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.kpi-value {
|
||
font-size: 2.2rem;
|
||
font-weight: 800;
|
||
color: var(--momo-text-strong);
|
||
font-family: var(--momo-font-mono);
|
||
}
|
||
|
||
.small {
|
||
font-size: 1rem !important;
|
||
}
|
||
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
z-index: 9999;
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.monthly-analysis-page .table thead th,
|
||
.monthly-analysis-page .table-light th {
|
||
background: rgba(250, 247, 240, 0.96) !important;
|
||
color: var(--momo-text-muted);
|
||
font-weight: 800;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.monthly-analysis-hero {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block ewooo_content %}
|
||
<div id="loadingOverlay" class="loading-overlay">
|
||
<div class="spinner-border text-primary" role="status"></div>
|
||
</div>
|
||
|
||
<div class="monthly-analysis-page">
|
||
{% include 'components/_analysis_report_tabs.html' %}
|
||
<section class="monthly-analysis-hero">
|
||
<div>
|
||
<h1 class="monthly-analysis-title"><i class="fas fa-chart-pie me-2 text-primary"></i>月份總表數據分析</h1>
|
||
<p class="text-muted mb-0 mt-2">以資料庫 `monthly_summary_analysis` 的月結資料，檢視業績、毛利、YoY 與品牌/區域/價格帶結構。</p>
|
||
</div>
|
||
<div class="monthly-version-pill">
|
||
<i class="fas fa-database"></i>
|
||
<span>{{ system_version }}</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════ 進階篩選器 (對標業績分析) ═══════ -->
|
||
<div class="filter-section">
|
||
<div class="row g-3">
|
||
<div class="col-md-2">
|
||
<label class="form-label"><i class="fas fa-calendar-alt me-1"></i> 年份</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle" type="button" id="btnYear"
|
||
data-bs-toggle="dropdown">
|
||
選擇年份
|
||
</button>
|
||
<ul class="dropdown-menu w-100" id="listYear" style="max-height: 300px; overflow-y: auto;">
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('year', '')">全部年份</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<label class="form-label"><i class="fas fa-calendar-day me-1"></i> 月份</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle" type="button" id="btnMonth"
|
||
data-bs-toggle="dropdown">
|
||
選擇月份
|
||
</button>
|
||
<ul class="dropdown-menu w-100" id="listMonth" style="max-height: 300px; overflow-y: auto;">
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('month', '')">全部月份</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<label class="form-label"><i class="fas fa-map-marker-alt me-1"></i> 區名稱</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle" type="button" id="btnArea"
|
||
data-bs-toggle="dropdown">
|
||
所有區域
|
||
</button>
|
||
<ul class="dropdown-menu w-100" id="listArea" style="max-height: 300px; overflow-y: auto;">
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('area', '')">所有區域</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<label class="form-label"><i class="fas fa-truck me-1"></i> 廠商名稱</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle" type="button" id="btnVendor"
|
||
data-bs-toggle="dropdown">
|
||
所有及廠商
|
||
</button>
|
||
<ul class="dropdown-menu w-100" id="listVendor" style="max-height: 300px; overflow-y: auto;">
|
||
<li class="px-2 py-1"><input type="text" class="form-control form-control-sm"
|
||
placeholder="搜尋..." onkeyup="filterList(this)"></li>
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('vendor', '')">所有廠商</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<label class="form-label"><i class="fas fa-exchange-alt me-1"></i> 借採轉</label>
|
||
<div class="dropdown">
|
||
<button class="btn btn-light custom-dropdown-btn dropdown-toggle" type="button" id="btnTrade"
|
||
data-bs-toggle="dropdown">
|
||
所有類別
|
||
</button>
|
||
<ul class="dropdown-menu w-100" id="listTrade">
|
||
<li><a class="dropdown-item" href="#" onclick="selectFilter('trade', '')">所有類別</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-1 d-flex align-items-end">
|
||
<button class="btn btn-warning w-100 fw-bold" onclick="fetchData()">
|
||
<i class="fas fa-sync-alt"></i> 刷新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════ 商業洞察 (Top 3 Highlights) ═══════ -->
|
||
<div class="row g-3 mb-4" id="highlightsRow" style="display: none;">
|
||
<div class="col-md-4">
|
||
<div class="card h-100 border-0 shadow-sm overflow-hidden">
|
||
<div class="card-header bg-primary text-white py-2">
|
||
<h6 class="mb-0 small fw-bold"><i class="fas fa-trophy me-1"></i> 業績貢獻王 (Top 3 Brands)</h6>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-hover mb-0">
|
||
<tbody id="revHighlightsBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card h-100 border-0 shadow-sm overflow-hidden">
|
||
<div class="card-header bg-success text-white py-2">
|
||
<h6 class="mb-0 small fw-bold"><i class="fas fa-coins me-1"></i> 獲利金雞母 (Top 3 Brands)</h6>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-hover mb-0">
|
||
<tbody id="profitHighlightsBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card h-100 border-0 shadow-sm overflow-hidden">
|
||
<div class="card-header bg-warning text-dark py-2">
|
||
<h6 class="mb-0 small fw-bold"><i class="fas fa-fire me-1"></i> 人氣引流款 (Top 3 Brands)</h6>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<table class="table table-sm table-hover mb-0">
|
||
<tbody id="volHighlightsBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════ 年度對比趨勢 (YoY Timeline) ═══════ -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-history me-2 text-primary"></i>年度 YoY 業績對比分析 (本期 vs
|
||
去年同期)</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="yoyTrendChart" style="height: 400px;"></div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="yoyTrendChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════ 廠商排行與類別分佈 ═══════ -->
|
||
<div class="row mb-4">
|
||
<div class="col-lg-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-building me-2 text-primary"></i>Top 50 廠商獲利能力排行</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="vendorRankingChart" style="height: 900px;"></div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="vendorRankingChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-header">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-chart-pie me-2 text-primary"></i>全站類別業績分佈 (Top 12)
|
||
</h6>
|
||
</div>
|
||
<div class="card-body text-center">
|
||
<div id="divisionDistChart" style="height: 350px;"></div>
|
||
<div id="divisionDistChartTable" class="mt-2" style="max-height: 200px; overflow-y: auto;">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="divisionDistChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm h-100">
|
||
<div class="card-header">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-tags me-2 text-primary"></i>價格帶業績貢獻比例</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="priceRangeChart" style="height: 350px;"></div>
|
||
<div class="table-responsive mt-2">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="priceRangeChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 柱狀折線對比圖 (主圖) -->
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card mb-4">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-chart-line me-2 text-primary"></i>年度月份業績對比趨勢</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="compareChart" style="height: 400px;"></div>
|
||
<div id="compareChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="compareChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-th me-2 text-primary"></i>品牌策略 BCG 矩陣 (銷量 vs 毛利率)</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="bcgMatrixChart" style="height: 400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-braille me-2 text-primary"></i>價格 vs 銷售量分佈散佈圖</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="priceVolumeScatterChart" style="height: 400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-lg-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-th-large me-2 text-primary"></i>分類與月份淡旺季業績熱力圖</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="seasonalityHeatmapChart" style="height: 400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-lg-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header">
|
||
<h6 class="mb-0 fw-bold"><i class="fas fa-map me-2 text-primary"></i>區名稱全站銷售排行 (Area Ranking)
|
||
</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="areaRankingChart" style="height: 400px;"></div>
|
||
<div class="table-responsive mt-3">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="areaRankingChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 專屬對比圖 (特定區域) -->
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card mb-4 border-info shadow-sm">
|
||
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-0 fw-bold text-info"><i class="fas fa-layer-group me-2"></i>開架保養 & 臉部清潔 (合併業績)
|
||
</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="specialChart" style="height: 400px;"></div>
|
||
<div id="specialChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="specialChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 身體保養專屬對比圖 -->
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card mb-4 border-success shadow-sm">
|
||
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-0 fw-bold text-success"><i class="fas fa-magic me-2"></i>身體保養 (年度業績分析)</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="bodyCareChart" style="height: 400px;"></div>
|
||
<div id="bodyCareChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="bodyCareChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 彩妝/指彩 & 精油擴香 專屬對比圖 -->
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card mb-4 border-warning shadow-sm">
|
||
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-0 fw-bold text-warning"><i class="fas fa-palette me-2"></i>彩妝/指彩 & 精油擴香 (合併業績)
|
||
</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="makeupFragranceChart" style="height: 400px;"></div>
|
||
<div id="makeupFragranceChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="makeupFragranceChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 私密保養 & 嬰幼洗沐 專屬對比圖 -->
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card mb-4 border-danger shadow-sm">
|
||
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
||
<h6 class="mb-0 fw-bold text-danger"><i class="fas fa-heartbeat me-2"></i>私密保養 & 嬰幼洗沐 (合併業績)
|
||
</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="privacyInfantChart" style="height: 400px;"></div>
|
||
<div id="privacyInfantChartDataTable" class="mt-2">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-sm text-center mb-0 small"
|
||
style="border-color: #dee2e6;">
|
||
<tbody id="privacyInfantChartTableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 數據列表 -->
|
||
<div class="card shadow-sm mb-5">
|
||
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
|
||
<h5 class="card-title mb-0 fw-bold"><i class="fas fa-list me-2"></i>資料明細</h5>
|
||
<a href="/system_settings" class="btn btn-sm btn-outline-primary"><i
|
||
class="fas fa-plus me-1"></i>匯入數據</a>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table id="summaryTable" class="table table-hover align-middle" style="width:100%">
|
||
<thead class="bg-light text-secondary small">
|
||
<tr>
|
||
<th>年/月</th>
|
||
<th>處別</th>
|
||
<th>區名稱</th>
|
||
<th>PM</th>
|
||
<th>品牌</th>
|
||
<th>廠商</th>
|
||
<th>交易</th>
|
||
<th>銷售額(本月)</th>
|
||
<th>YoY</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
|
||
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||
<script>
|
||
let table;
|
||
let compareChart = echarts.init(document.getElementById('compareChart'));
|
||
let yoyTrendChart = echarts.init(document.getElementById('yoyTrendChart'));
|
||
let vendorRankingChart = echarts.init(document.getElementById('vendorRankingChart'));
|
||
let divisionDistChart = echarts.init(document.getElementById('divisionDistChart'));
|
||
let priceRangeChart = echarts.init(document.getElementById('priceRangeChart'));
|
||
let bcgMatrixChart = echarts.init(document.getElementById('bcgMatrixChart'));
|
||
let priceVolumeScatterChart = echarts.init(document.getElementById('priceVolumeScatterChart'));
|
||
let seasonalityHeatmapChart = echarts.init(document.getElementById('seasonalityHeatmapChart'));
|
||
let areaRankingChart = echarts.init(document.getElementById('areaRankingChart'));
|
||
|
||
let specialChart = echarts.init(document.getElementById('specialChart'));
|
||
let bodyCareChart = echarts.init(document.getElementById('bodyCareChart'));
|
||
let makeupFragranceChart = echarts.init(document.getElementById('makeupFragranceChart'));
|
||
let privacyInfantChart = echarts.init(document.getElementById('privacyInfantChart'));
|
||
let currentFilters = {
|
||
year: '', month: '', area: '', vendor: '', trade: ''
|
||
};
|
||
|
||
$(document).ready(function () {
|
||
table = $('#summaryTable').DataTable({
|
||
language: { url: "//cdn.datatables.net/plug-ins/1.11.5/i18n/zh-HANT.json" },
|
||
pageLength: 20,
|
||
order: [[0, 'desc'], [7, 'desc']],
|
||
columnDefs: [
|
||
{ targets: [7], className: 'text-end fw-bold' },
|
||
{ targets: 8, className: 'text-center' }
|
||
]
|
||
});
|
||
|
||
window.addEventListener('resize', () => {
|
||
compareChart.resize();
|
||
yoyTrendChart.resize();
|
||
vendorRankingChart.resize();
|
||
divisionDistChart.resize();
|
||
priceRangeChart.resize();
|
||
bcgMatrixChart.resize();
|
||
priceVolumeScatterChart.resize();
|
||
seasonalityHeatmapChart.resize();
|
||
areaRankingChart.resize();
|
||
specialChart.resize();
|
||
bodyCareChart.resize();
|
||
makeupFragranceChart.resize();
|
||
privacyInfantChart.resize();
|
||
});
|
||
|
||
fetchData();
|
||
});
|
||
|
||
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(res => res.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
console.log('API Data:', data);
|
||
updateUI(data);
|
||
updateFilters(data.filters);
|
||
}
|
||
$('#loadingOverlay').hide();
|
||
})
|
||
.catch(err => {
|
||
console.error(err);
|
||
$('#loadingOverlay').hide();
|
||
});
|
||
|
||
fetchSpecialChartData();
|
||
}
|
||
|
||
function fetchSpecialChartData() {
|
||
// 固定抓取 開架保養 與 臉部清潔
|
||
let url1 = `/api/monthly_summary_data?area_name=${encodeURIComponent('開架保養,臉部清潔')}&limit=1`;
|
||
fetch(url1)
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
renderExcelChart(specialChart, 'specialChartTableBody', data.trend);
|
||
}
|
||
});
|
||
|
||
// 固定抓取 身體保養
|
||
let url2 = `/api/monthly_summary_data?area_name=${encodeURIComponent('身體保養')}&limit=1`;
|
||
fetch(url2)
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
renderExcelChart(bodyCareChart, 'bodyCareChartTableBody', data.trend);
|
||
}
|
||
});
|
||
|
||
// 固定抓取 彩妝/指彩 與 精油擴香
|
||
let url3 = `/api/monthly_summary_data?area_name=${encodeURIComponent('彩妝/指彩,精油擴香')}&limit=1`;
|
||
fetch(url3)
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
renderExcelChart(makeupFragranceChart, 'makeupFragranceChartTableBody', data.trend);
|
||
}
|
||
});
|
||
|
||
// 固定抓取 私密保養 與 嬰幼洗沐
|
||
let url4 = `/api/monthly_summary_data?area_name=${encodeURIComponent('私密保養,嬰幼洗沐')}&limit=1`;
|
||
fetch(url4)
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
renderExcelChart(privacyInfantChart, 'privacyInfantChartTableBody', data.trend);
|
||
}
|
||
});
|
||
}
|
||
|
||
function selectFilter(type, value, recordText) {
|
||
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();
|
||
}
|
||
|
||
function updateUI(data) {
|
||
// KPI 更新
|
||
$('#totalRows').text(data.total_rows.toLocaleString());
|
||
$('#totalMonths').text(data.total_months);
|
||
|
||
const k = data.kpis;
|
||
$('#kpiSales').text('$' + k.sales.toLocaleString());
|
||
$('#kpiProfit').text('$' + k.profit.toLocaleString());
|
||
$('#kpiMargin').text(k.margin);
|
||
$('#kpiVol').text(k.vol.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);
|
||
|
||
// Phase 17: 更新新增的進階圖表
|
||
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); // Reuse BCG data for demo scatter
|
||
renderSeasonalityHeatmap(seasonalityHeatmapChart, data.heatmap_data);
|
||
renderAreaRankingChart(areaRankingChart, 'areaRankingChartTableBody', data.area_ranking);
|
||
}
|
||
|
||
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');
|
||
}
|
||
|
||
function renderExcelChart(chartInstance, tableBodyId, trend) {
|
||
// 解析趨勢數據：今/明兩年對比
|
||
const years = [...new Set(trend.map(t => t.date.split('/')[0]))].sort().reverse();
|
||
const currYear = years[0] || new Date().getFullYear().toString();
|
||
const prevYear = (parseInt(currYear) - 1).toString();
|
||
|
||
const months = Array.from({ length: 12 }, (_, i) => (i + 1).toString());
|
||
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;
|
||
});
|
||
|
||
// 計算 YoY
|
||
for (let i = 0; i < 12; i++) {
|
||
if (prevData[i] > 0) {
|
||
yoyData[i] = parseFloat(((currData[i] - prevData[i]) / prevData[i] * 100).toFixed(1));
|
||
}
|
||
}
|
||
|
||
// 更新底標數據表格 (Excel Style)
|
||
let tableHtml = `
|
||
<tr>
|
||
<td style="width: 100px; background: #f8f9fa; font-weight: bold;">月份</td>
|
||
${months.map(m => `<td style="font-weight: bold; background: #f8f9fa; font-size: 1rem;">${m}</td>`).join('')}
|
||
</tr>
|
||
<tr>
|
||
<td class="text-start ps-2" style="font-size: 1rem;"><span style="display:inline-block; width:12px; height:12px; background:#6366f1; margin-right:5px;"></span>${currYear}</td>
|
||
${currData.map(v => `<td style="font-size: 1rem;">${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}
|
||
</tr>
|
||
<tr>
|
||
<td class="text-start ps-2" style="font-size: 1rem;"><span style="display:inline-block; width:12px; height:12px; background:#10b981; margin-right:5px;"></span>${prevYear}</td>
|
||
${prevData.map(v => `<td style="font-size: 1rem;">${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}
|
||
</tr>
|
||
<tr>
|
||
<td class="text-start ps-2" style="font-size: 1rem;"><i class="fas fa-minus" style="color:#94a3b8; margin-right:5px;"></i>YOY</td>
|
||
${yoyData.map((v, i) => `<td style="font-size: 1rem;">${(currData[i] > 0 || prevData[i] > 0) ? v + '%' : '-'}</td>`).join('')}
|
||
</tr>
|
||
`;
|
||
$(`#${tableBodyId}`).html(tableHtml);
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' }
|
||
},
|
||
legend: {
|
||
data: [`${currYear}`, `${prevYear}`, 'YOY'],
|
||
bottom: 0,
|
||
show: false
|
||
},
|
||
grid: { left: '80', right: '50', top: '50', bottom: '20' },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: months,
|
||
axisLabel: { show: false },
|
||
axisTick: { show: true }
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '業績',
|
||
axisLabel: { formatter: (v) => v.toLocaleString() },
|
||
splitLine: { lineStyle: { type: 'dashed' } }
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: 'YoY',
|
||
axisLabel: { formatter: '{value}%' },
|
||
splitLine: { show: false }
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: `${currYear}`,
|
||
type: 'bar',
|
||
data: currData,
|
||
itemStyle: { color: '#6366f1' },
|
||
barMaxWidth: 20,
|
||
label: { show: true, position: 'top', fontSize: 16, fontWeight: 'bold', formatter: (p) => p.value ? (p.value / 10000).toFixed(0) + '萬' : '' }
|
||
},
|
||
{
|
||
name: `${prevYear}`,
|
||
type: 'bar',
|
||
data: prevData,
|
||
itemStyle: { color: '#10b981' },
|
||
barMaxWidth: 20,
|
||
label: { show: true, 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,
|
||
itemStyle: { color: '#94a3b8' },
|
||
lineStyle: { width: 2 },
|
||
symbol: 'circle', symbolSize: 6,
|
||
label: {
|
||
show: true,
|
||
position: 'bottom',
|
||
fontSize: 16,
|
||
fontWeight: 'bold',
|
||
formatter: (p) => p.value ? p.value + '%' : ''
|
||
}
|
||
}
|
||
]
|
||
};
|
||
chartInstance.setOption(option);
|
||
}
|
||
|
||
function filterList(input) {
|
||
const filter = input.value.toLowerCase();
|
||
const list = input.closest('ul').querySelectorAll('li:not(:first-child)');
|
||
list.forEach(li => {
|
||
const text = li.textContent || li.innerText;
|
||
li.style.display = text.toLowerCase().indexOf(filter) > -1 ? "" : "none";
|
||
});
|
||
}
|
||
|
||
// Phase 17: 渲染函式實作
|
||
|
||
function updateHighlights(highlights) {
|
||
if (!highlights || (!highlights.rev_top.length && !highlights.profit_top.length)) {
|
||
$('#highlightsRow').hide();
|
||
return;
|
||
}
|
||
$('#highlightsRow').show();
|
||
|
||
const renderTable = (id, list, prefix = '') => {
|
||
const tbody = $(`#${id}`);
|
||
tbody.empty();
|
||
list.forEach((item, idx) => {
|
||
tbody.append(`
|
||
<tr>
|
||
<td class="ps-3"><span class="badge bg-secondary rounded-pill me-2">${idx + 1}</span>${item.name}</td>
|
||
<td class="text-end pe-3 fw-bold">${prefix}${item.value.toLocaleString()}</td>
|
||
</tr>
|
||
`);
|
||
});
|
||
};
|
||
|
||
renderTable('revHighlightsBody', highlights.rev_top, '$');
|
||
renderTable('profitHighlightsBody', highlights.profit_top, '$');
|
||
renderTable('volHighlightsBody', highlights.vol_top, '');
|
||
}
|
||
|
||
function renderYoYTrendChart(chart, tableId, data) {
|
||
// 邏輯類似 renderExcelChart 但專門處理後端傳來的 yoy_trend 格式
|
||
if (!data || !data.length) return;
|
||
|
||
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] || '本期';
|
||
const prevYearStr = '去年同期';
|
||
|
||
let tableHtml = `
|
||
<tr>
|
||
<td style="width: 100px; background: #f8f9fa; font-weight: bold;">月份</td>
|
||
${dates.map(m => `<td style="font-weight: bold; background: #f8f9fa;">${m}</td>`).join('')}
|
||
</tr>
|
||
<tr>
|
||
<td class="text-start ps-2"><span style="display:inline-block; width:12px; height:12px; background:#6366f1; margin-right:5px;"></span>${currYearStr}</td>
|
||
${currData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}
|
||
</tr>
|
||
<tr>
|
||
<td class="text-start ps-2"><span style="display:inline-block; width:12px; height:12px; background:#d1d5db; margin-right:5px;"></span>${prevYearStr}</td>
|
||
${yoaData.map(v => `<td>${v > 0 ? v.toLocaleString() : '-'}</td>`).join('')}
|
||
</tr>
|
||
`;
|
||
$(`#${tableId}`).html(tableHtml);
|
||
|
||
const option = {
|
||
tooltip: { trigger: 'axis' },
|
||
grid: { left: '60', right: '30', top: '40', bottom: '20' },
|
||
legend: { data: [currYearStr, prevYearStr], bottom: 0 },
|
||
xAxis: { type: 'category', data: dates },
|
||
yAxis: { type: 'value', axisLabel: { formatter: v => (v / 10000).toFixed(0) + '萬' } },
|
||
series: [
|
||
{
|
||
name: currYearStr, type: 'line', data: currData,
|
||
itemStyle: { color: '#6366f1' }, lineStyle: { width: 3 }, showSymbol: false, areaStyle: { opacity: 0.1 }
|
||
},
|
||
{
|
||
name: prevYearStr, type: 'line', data: yoaData,
|
||
itemStyle: { color: '#d1d5db' }, lineStyle: { type: 'dashed' }, showSymbol: false
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option);
|
||
}
|
||
|
||
function renderDivisionDistChart(chart, tableId, data) {
|
||
if (!data || !data.length) return;
|
||
|
||
// 計算各年度總業績
|
||
const total24 = data.reduce((sum, d) => sum + (d.sales_2024 || 0), 0);
|
||
const total25 = data.reduce((sum, d) => sum + (d.sales_2025 || 0), 0);
|
||
|
||
// 準備圓餅圖資料
|
||
const pieData2024 = data.map(d => ({
|
||
name: d.name,
|
||
value: d.sales_2024 || 0
|
||
})).filter(d => d.value > 0);
|
||
|
||
const pieData2025 = data.map(d => ({
|
||
name: d.name,
|
||
value: d.sales_2025 || 0
|
||
})).filter(d => d.value > 0);
|
||
|
||
const option = {
|
||
title: [
|
||
{ text: '2024 年', left: '23%', top: '5%', textAlign: 'center', textStyle: { fontSize: 16, fontWeight: 'bold', color: '#ea580c' } },
|
||
{ text: '2025 年', left: '73%', top: '5%', textAlign: 'center', textStyle: { fontSize: 16, fontWeight: 'bold', color: '#0284c7' } }
|
||
],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (p) {
|
||
return `<strong>${p.name}</strong><br/>業績: ${(p.value / 10000).toFixed(0)}萬<br/>佔比: ${p.percent.toFixed(1)}%`;
|
||
}
|
||
},
|
||
legend: {
|
||
type: 'scroll',
|
||
orient: 'horizontal',
|
||
bottom: 0,
|
||
textStyle: { fontSize: 12, fontWeight: 'bold' }
|
||
},
|
||
series: [
|
||
{
|
||
name: '2024 年',
|
||
type: 'pie',
|
||
radius: ['30%', '60%'],
|
||
center: ['25%', '55%'],
|
||
data: pieData2024,
|
||
itemStyle: {
|
||
color: function (params) {
|
||
const colors = ['#f97316', '#ea580c', '#c2410c', '#fb923c', '#fdba74', '#fed7aa', '#dc2626', '#ef4444', '#f87171', '#fca5a5', '#b91c1c', '#991b1b'];
|
||
return colors[params.dataIndex % colors.length];
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
fontSize: 11,
|
||
fontWeight: 'bold',
|
||
formatter: p => `${p.name}\n${(p.value / 10000).toFixed(0)}萬\n${p.percent.toFixed(1)}%`
|
||
},
|
||
emphasis: {
|
||
itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
|
||
}
|
||
},
|
||
{
|
||
name: '2025 年',
|
||
type: 'pie',
|
||
radius: ['30%', '60%'],
|
||
center: ['75%', '55%'],
|
||
data: pieData2025,
|
||
itemStyle: {
|
||
color: function (params) {
|
||
const colors = ['#0ea5e9', '#0284c7', '#0369a1', '#38bdf8', '#7dd3fc', '#bae6fd', '#14b8a6', '#0d9488', '#2dd4bf', '#5eead4', '#0f766e', '#115e59'];
|
||
return colors[params.dataIndex % colors.length];
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
fontSize: 11,
|
||
fontWeight: 'bold',
|
||
formatter: p => `${p.name}\n${(p.value / 10000).toFixed(0)}萬\n${p.percent.toFixed(1)}%`
|
||
},
|
||
emphasis: {
|
||
itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
|
||
}
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option);
|
||
}
|
||
|
||
function renderPriceRangeChart(chart, tableId, data) {
|
||
if (!data || !data.length) return;
|
||
|
||
// 定義價格帶順序
|
||
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 totalSales2024 = data.reduce((sum, item) => sum + (item.sales_2024 || 0), 0);
|
||
const totalSales2025 = data.reduce((sum, item) => sum + (item.sales_2025 || 0), 0);
|
||
|
||
const option = {
|
||
title: { text: '', left: 'center' },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' },
|
||
formatter: function (params) {
|
||
let res = params[0].name + '<br/>';
|
||
params.forEach(param => {
|
||
const val = param.value || 0;
|
||
const total = param.seriesName.includes('2024') ? totalSales2024 : totalSales2025;
|
||
const pct = total > 0 ? (val / total * 100).toFixed(1) + '%' : '0.0%';
|
||
res += `${param.marker} ${param.seriesName}: ${val.toLocaleString()} (${pct})<br/>`;
|
||
});
|
||
return res;
|
||
}
|
||
},
|
||
legend: { data: ['2024 銷售', '2025 銷售'], bottom: 0, textStyle: { fontSize: 13, fontWeight: 'bold' } },
|
||
grid: { left: '3%', right: '4%', bottom: '12%', top: '15%', containLabel: true },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.map(d => d.range),
|
||
axisLabel: { interval: 0, fontSize: 13, fontWeight: 'bold' }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '銷售額',
|
||
nameTextStyle: { fontSize: 12, fontWeight: 'bold' },
|
||
axisLabel: { formatter: v => (v / 10000).toFixed(0) + '萬', fontSize: 12 }
|
||
},
|
||
series: [
|
||
{
|
||
name: '2024 銷售',
|
||
type: 'bar',
|
||
data: data.map(d => d.sales_2024 || 0),
|
||
itemStyle: { color: '#94a3b8' },
|
||
barWidth: 30,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
fontSize: 12,
|
||
fontWeight: 'bold',
|
||
color: '#475569',
|
||
formatter: function (p) {
|
||
const val = p.value || 0;
|
||
const pct = totalSales2024 > 0 ? (val / totalSales2024 * 100).toFixed(1) + '%' : '';
|
||
const amt = (val / 10000).toFixed(0) + '萬';
|
||
return pct + '\n' + amt;
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: '2025 銷售',
|
||
type: 'bar',
|
||
data: data.map(d => d.sales_2025 || 0),
|
||
itemStyle: { color: '#8b5cf6' },
|
||
barWidth: 30,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
fontSize: 12,
|
||
fontWeight: 'bold',
|
||
color: '#6d28d9',
|
||
formatter: function (p) {
|
||
const val = p.value || 0;
|
||
const pct = totalSales2025 > 0 ? (val / totalSales2025 * 100).toFixed(1) + '%' : '';
|
||
const amt = (val / 10000).toFixed(0) + '萬';
|
||
return pct + '\n' + amt;
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option);
|
||
|
||
// 移除表格 (清空容器)
|
||
$(`#${tableId}`).parent().html('');
|
||
}
|
||
|
||
function renderBCGMatrixChart(chart, data) {
|
||
// X: 毛利率 (Margin), Y: 銷售額 (Sales), Size: 銷量 (Vol)
|
||
if (!data || !data.length) return;
|
||
|
||
const seriesData = data.map(d => [
|
||
d.margin, // X
|
||
d.sales, // Y
|
||
d.qty, // Size
|
||
d.name // Name
|
||
]);
|
||
|
||
const option = {
|
||
tooltip: {
|
||
formatter: function (param) {
|
||
return `<div style="font-weight:bold">${param.value[3]}</div>
|
||
<div>毛利率: ${param.value[0]}%</div>
|
||
<div>銷售額: $${param.value[1].toLocaleString()}</div>
|
||
<div>銷量: ${param.value[2].toLocaleString()}</div>`;
|
||
}
|
||
},
|
||
grid: { left: '80', right: '50', top: '30', bottom: '30' },
|
||
xAxis: { name: '毛利率(%)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
|
||
yAxis: { name: '業績($)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
|
||
series: [
|
||
{
|
||
type: 'scatter',
|
||
data: seriesData,
|
||
symbolSize: function (data) {
|
||
// 簡單縮放：根號銷量 / 係數
|
||
return Math.sqrt(data[2]) * 1.5;
|
||
},
|
||
itemStyle: {
|
||
color: function (p) {
|
||
// 依據象限給色 (假設 30% 毛利, $50萬 業績為分界)
|
||
if (p.value[0] >= 30 && p.value[1] >= 500000) return '#10b981'; // Star
|
||
if (p.value[0] < 30 && p.value[1] >= 500000) return '#f59e0b'; // Cow
|
||
if (p.value[0] >= 30 && p.value[1] < 500000) return '#6366f1'; // Question
|
||
return '#ef4444'; // Dog
|
||
},
|
||
opacity: 0.7,
|
||
borderColor: '#fff',
|
||
borderWidth: 1
|
||
},
|
||
markLine: {
|
||
silent: true,
|
||
data: [
|
||
{ xAxis: 30, lineStyle: { color: '#999', type: 'solid' }, label: { formatter: '高獲利線 (30%)' } },
|
||
{ yAxis: 500000, lineStyle: { color: '#999', type: 'solid' }, label: { formatter: '高營收線 ($50萬)' } }
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option);
|
||
}
|
||
|
||
function renderScatterChart(chart, data) {
|
||
// Reusing BCG data for Price (calc) vs Volume
|
||
if (!data || !data.length) return;
|
||
|
||
const seriesData = data.map(d => {
|
||
const avgPrice = d.qty > 0 ? Math.round(d.sales / d.qty) : 0;
|
||
return [
|
||
avgPrice, // X: Price
|
||
d.qty, // Y: Volume
|
||
d.sales, // Size: Sales
|
||
d.name
|
||
];
|
||
});
|
||
|
||
const option = {
|
||
tooltip: {
|
||
formatter: function (param) {
|
||
return `<div style="font-weight:bold">${param.value[3]}</div>
|
||
<div>均價: $${param.value[0]}</div>
|
||
<div>銷量: ${param.value[1].toLocaleString()}</div>
|
||
<div>業績: $${param.value[2].toLocaleString()}</div>`;
|
||
}
|
||
},
|
||
grid: { left: '60', right: '50', top: '30', bottom: '30' },
|
||
xAxis: { name: '均價($)', type: 'value', splitLine: { show: false } },
|
||
yAxis: { name: '銷量', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
|
||
series: [
|
||
{
|
||
type: 'scatter',
|
||
data: seriesData,
|
||
symbolSize: function (data) {
|
||
return Math.log(data[2]) * 3; // Log scale size based on sales
|
||
},
|
||
itemStyle: { color: '#ec4899', opacity: 0.6 }
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option);
|
||
}
|
||
|
||
function renderVendorRankingChart(chart, tableId, data) {
|
||
if (!data || !data.length) return;
|
||
// 取前 20 名做圖表
|
||
const chartData = data.slice().reverse(); // 反轉讓第一名在上面
|
||
|
||
const option = {
|
||
title: { text: '', left: 'center' },
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
legend: { data: ['2024 銷售額', '2025 銷售額'], bottom: 0, textStyle: { fontSize: 15, fontWeight: 'bold' } },
|
||
grid: { left: '160', right: '110', top: '20', bottom: '45' },
|
||
xAxis: {
|
||
type: 'value',
|
||
axisLabel: { formatter: v => (v / 10000).toFixed(0) + '萬', fontSize: 14, fontWeight: 'bold' }
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: chartData.map(d => d.name),
|
||
axisLabel: { width: 150, overflow: 'truncate', interval: 0, fontSize: 14, fontWeight: 'bold' }
|
||
},
|
||
series: [
|
||
{
|
||
name: '2024 銷售額', type: 'bar',
|
||
data: chartData.map(d => d.sales_2024 || 0),
|
||
itemStyle: { color: '#94a3b8' },
|
||
barWidth: 18,
|
||
barGap: '0%',
|
||
barCategoryGap: '75%',
|
||
label: {
|
||
show: true,
|
||
position: 'insideRight',
|
||
fontSize: 13,
|
||
fontWeight: 'bold',
|
||
color: '#fff',
|
||
textShadowColor: 'rgba(0,0,0,0.5)',
|
||
textShadowBlur: 2,
|
||
formatter: p => p.value > 0 ? (p.value / 10000).toFixed(0) + '萬' : ''
|
||
}
|
||
},
|
||
{
|
||
name: '2025 銷售額', type: 'bar',
|
||
data: chartData.map(d => d.sales_2025 || 0),
|
||
itemStyle: { color: '#3b82f6' },
|
||
barWidth: 18,
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
color: '#1d4ed8',
|
||
formatter: p => p.value > 0 ? (p.value / 10000).toFixed(0) + '萬' : ''
|
||
}
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option);
|
||
|
||
// 表格渲染 (顯示 Top 20)
|
||
// 欄位順序：排名、廠商名稱、總銷售額、銷售額YoY、2024銷售額、2025銷售額、總毛利額、毛利額YoY、2024毛利額、2025毛利額
|
||
let tableHtml = `
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th class="align-middle">排名</th>
|
||
<th class="align-middle">廠商名稱</th>
|
||
<th class="align-middle text-end">總銷售額</th>
|
||
<th class="align-middle text-end">銷售額 YoY</th>
|
||
<th class="align-middle text-end">2024 銷售額</th>
|
||
<th class="align-middle text-end">2025 銷售額</th>
|
||
<th class="align-middle text-end">總毛利額</th>
|
||
<th class="align-middle text-end">毛利額 YoY</th>
|
||
<th class="align-middle text-end">2024 毛利額</th>
|
||
<th class="align-middle text-end">2025 毛利額</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
`;
|
||
data.forEach((d, i) => {
|
||
const sales24 = d.sales_2024 || 0;
|
||
const sales25 = d.sales_2025 || 0;
|
||
const profit24 = d.profit_2024 || 0;
|
||
const profit25 = d.profit_2025 || 0;
|
||
|
||
const salesYoY = sales24 > 0 ? ((sales25 - sales24) / sales24 * 100).toFixed(1) + '%' : '-';
|
||
const profitYoY = profit24 > 0 ? ((profit25 - profit24) / profit24 * 100).toFixed(1) + '%' : '-';
|
||
|
||
const salesYoYClass = sales24 > 0 && (sales25 - sales24) >= 0 ? 'text-danger' : (sales24 > 0 ? 'text-success' : '');
|
||
const profitYoYClass = profit24 > 0 && (profit25 - profit24) >= 0 ? 'text-danger' : (profit24 > 0 ? 'text-success' : '');
|
||
|
||
tableHtml += `
|
||
<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 ${salesYoYClass}">${salesYoY}</td>
|
||
<td class="text-end text-muted">${sales24.toLocaleString()}</td>
|
||
<td class="text-end text-primary fw-bold">${sales25.toLocaleString()}</td>
|
||
<td class="text-end fw-bold">${d.profit.toLocaleString()}</td>
|
||
<td class="text-end fw-bold ${profitYoYClass}">${profitYoY}</td>
|
||
<td class="text-end text-muted">${profit24.toLocaleString()}</td>
|
||
<td class="text-end text-success fw-bold">${profit25.toLocaleString()}</td>
|
||
</tr>
|
||
`;
|
||
});
|
||
tableHtml += `</tbody>`;
|
||
$(`#${tableId}`).parent().html(`<table class="table table-bordered table-hover table-sm text-center mb-0 small" style="white-space: nowrap;">${tableHtml}</table>`);
|
||
}
|
||
|
||
function renderSeasonalityHeatmap(chart, data) {
|
||
if (!data || !data.length) return;
|
||
|
||
// X軸: 月份 1-12
|
||
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
|
||
|
||
// 取得所有區域名稱 (按銷售量排序)
|
||
const areaSales = {};
|
||
data.forEach(d => {
|
||
if (!areaSales[d.category]) areaSales[d.category] = 0;
|
||
areaSales[d.category] += d.sales;
|
||
});
|
||
const areas = Object.keys(areaSales).sort((a, b) => areaSales[b] - areaSales[a]);
|
||
|
||
// Y軸: 年度+區域 (2025 在上, 2024 在下)
|
||
const yAxisLabels = [];
|
||
[2025, 2024].forEach(year => {
|
||
areas.forEach(area => {
|
||
yAxisLabels.push(`${year} ${area}`);
|
||
});
|
||
});
|
||
|
||
// 構建熱力圖數據 [xIndex, yIndex, value]
|
||
const heatmapData = [];
|
||
data.forEach(d => {
|
||
const xIndex = d.month - 1;
|
||
const yLabel = `${d.year} ${d.category}`;
|
||
const yIndex = yAxisLabels.indexOf(yLabel);
|
||
if (xIndex >= 0 && xIndex < 12 && yIndex >= 0) {
|
||
heatmapData.push([xIndex, yIndex, d.sales]);
|
||
}
|
||
});
|
||
|
||
const maxSales = Math.max(...data.map(d => d.sales), 1);
|
||
|
||
const option = {
|
||
title: { text: '', left: 'center' },
|
||
tooltip: {
|
||
position: 'top',
|
||
formatter: p => {
|
||
const monthName = months[p.value[0]];
|
||
const categoryYear = yAxisLabels[p.value[1]];
|
||
const sales = p.value[2];
|
||
return `<strong>${categoryYear}</strong><br/>${monthName}<br/>業績: <strong>${(sales / 10000).toFixed(0)}萬</strong>`;
|
||
}
|
||
},
|
||
grid: { height: '75%', top: '5%', bottom: '18%', left: '15%', right: '3%' },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: months,
|
||
splitArea: { show: true },
|
||
axisLabel: { fontSize: 14, fontWeight: 'bold' }
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: yAxisLabels,
|
||
splitArea: { show: true },
|
||
axisLabel: { fontSize: 14, fontWeight: 'bold' }
|
||
},
|
||
visualMap: {
|
||
min: 0,
|
||
max: maxSales,
|
||
calculable: true,
|
||
orient: 'horizontal',
|
||
left: 'center',
|
||
bottom: '0%',
|
||
textStyle: { fontSize: 12 },
|
||
inRange: { color: ['#fef3c7', '#fbbf24', '#f59e0b', '#d97706', '#b45309'] }
|
||
},
|
||
series: [{
|
||
type: 'heatmap',
|
||
data: heatmapData,
|
||
label: {
|
||
show: true,
|
||
fontSize: 12,
|
||
fontWeight: 'bold',
|
||
formatter: function (p) {
|
||
const val = p.value[2];
|
||
return (val / 10000).toFixed(0) + '萬';
|
||
}
|
||
},
|
||
emphasis: {
|
||
itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' }
|
||
}
|
||
}]
|
||
};
|
||
chart.setOption(option);
|
||
}
|
||
|
||
function renderAreaRankingChart(chart, tableId, data) {
|
||
if (!data || !data.length) return;
|
||
// 按總業績排序
|
||
data.sort((a, b) => b.sales - a.sales);
|
||
|
||
const option = {
|
||
title: { text: '', left: 'center' },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' },
|
||
formatter: function (params) {
|
||
let res = params[0].name + '<br/>';
|
||
params.forEach(param => {
|
||
const val = param.value || 0;
|
||
res += `${param.marker} ${param.seriesName}: ${val.toLocaleString()}<br/>`;
|
||
});
|
||
return res;
|
||
}
|
||
},
|
||
legend: { data: ['2024 業績', '2025 業績'], bottom: 0, textStyle: { fontSize: 14 } },
|
||
grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: data.map(d => d.name),
|
||
axisLabel: { interval: 0, fontSize: 14, fontWeight: 'bold' }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '業績',
|
||
axisLabel: { formatter: v => (v / 10000).toFixed(0) + '萬', fontSize: 13 }
|
||
},
|
||
series: [
|
||
{
|
||
name: '2024 業績',
|
||
type: 'bar',
|
||
data: data.map(d => d.sales_2024 || 0),
|
||
itemStyle: { color: '#94a3b8' },
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
formatter: p => (p.value / 10000).toFixed(0) + '萬'
|
||
}
|
||
},
|
||
{
|
||
name: '2025 業績',
|
||
type: 'bar',
|
||
data: data.map(d => d.sales_2025 || 0),
|
||
itemStyle: { color: '#14b8a6' }, // 青色
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
formatter: p => (p.value / 10000).toFixed(0) + '萬'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
chart.setOption(option);
|
||
|
||
// 表格渲染
|
||
let tableHtml = `
|
||
<thead class="table-light"><tr><th>排名</th><th>區名稱</th><th>業績</th></tr></thead><tbody>
|
||
`;
|
||
data.forEach((d, i) => {
|
||
tableHtml += `<tr><td>${i + 1}</td><td class="text-start">${d.name}</td><td class="text-end fw-bold">$${d.sales.toLocaleString()}</td></tr>`;
|
||
});
|
||
tableHtml += `</tbody>`;
|
||
$(`#${tableId}`).parent().html(`<table class="table table-bordered table-hover table-sm text-center mb-0 small">${tableHtml}</table>`);
|
||
}
|
||
</script>
|
||
{% endblock %}
|