Refine dashboard charts and branding

index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="light">
+  <link rel="icon" type="image/png" href="https://storage.googleapis.com/msgsndr/lW87lVmHdMr8CFmSlKXl/media/68402c8a28def01375942a3a.png">
   <title>TTSHOP 销售看板</title>
   <style>
     :root {
@@ -143,13 +144,18 @@
     <section class="charts" id="charts" aria-label="数据图表" hidden>
       <article class="chart-card">
         <h2>总体趋势</h2>
-        <p id="overview-description">按日期汇总</p>
+        <p id="overview-description">按日期汇总 Commission 与 GMV</p>
-        <div class="chart" id="overview-chart" role="img" aria-label="按日期汇总的 Commission 和 GMV 图表"></div>
+        <div class="chart" id="overview-chart" role="img" aria-label="按日期汇总的 Commission 柱状图和 GMV 折线图"></div>
       </article>
       <article class="chart-card">
-        <h2>LinkName 趋势</h2>
+        <h2>LinkName Commission 趋势</h2>
-        <p id="link-description">按日期和 LinkName 汇总</p>
+        <p id="link-commission-description">按日期和 LinkName 堆积显示 Commission</p>
-        <div class="chart" id="link-chart" role="img" aria-label="按日期和 LinkName 汇总的 Commission 和 GMV 图表"></div>
+        <div class="chart" id="link-commission-chart" role="img" aria-label="按日期和 LinkName 堆积的 Commission 折线图"></div>
+      </article>
+      <article class="chart-card">
+        <h2>LinkName GMV 趋势</h2>
+        <p id="link-gmv-description">按日期和 LinkName 堆积显示 GMV</p>
+        <div class="chart" id="link-gmv-chart" role="img" aria-label="按日期和 LinkName 堆积的 GMV 柱状图"></div>
       </article>
     </section>
   </main>
@@ -191,9 +197,11 @@
         error: document.getElementById('error-state'),
         charts: document.getElementById('charts'),
         overviewDescription: document.getElementById('overview-description'),
-        linkDescription: document.getElementById('link-description'),
+        linkCommissionDescription: document.getElementById('link-commission-description'),
+        linkGmvDescription: document.getElementById('link-gmv-description'),
         overview: document.getElementById('overview-chart'),
-        link: document.getElementById('link-chart')
+        linkCommission: document.getElementById('link-commission-chart'),
+        linkGmv: document.getElementById('link-gmv-chart')
       };
       var state = { rawRecords: [], sourceCurrencies: [], selectedCurrency: '', latestDate: null, dateOnlyRows: 0, invalidCurrencyRows: 0 };
 
@@ -452,28 +460,46 @@
         var dates = aggregated.dates.map(function (item) { return item.date.label; });
         var commissionAxisName = 'Commission (' + state.selectedCurrency + ')';
         var gmvAxisName = 'GMV (' + state.selectedCurrency + ')';
-        var yAxes = [
+        var dualAxes = [
           { type: 'value', name: commissionAxisName, nameLocation: 'middle', nameGap: 52 },
           { type: 'value', name: gmvAxisName, nameLocation: 'middle', nameGap: 58 }
         ];
-        var common = { animation: false, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, formatter: tooltipFormatter }, grid: { left: 70, right: 76, top: 52, bottom: 62 }, xAxis: makeCommonXAxis(dates), yAxis: yAxes };
+        var common = { animation: false, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, formatter: tooltipFormatter }, grid: { left: 70, right: 76, top: 52, bottom: 62 }, xAxis: makeCommonXAxis(dates) };
         var overviewSeries = [
-          { name: 'Commission', type: 'line', yAxisIndex: 0, smooth: true, symbol: 'circle', symbolSize: 6, data: aggregated.dates.map(function (item) { return item.commission; }) },
+          { name: 'Commission', type: 'bar', yAxisIndex: 0, barMaxWidth: 34, data: aggregated.dates.map(function (item) { return item.commission; }) },
-          { name: 'GMV', type: 'bar', yAxisIndex: 1, stack: 'gmv-total', barMaxWidth: 34, data: aggregated.dates.map(function (item) { return item.gmv; }) }
+          { name: 'GMV', type: 'line', yAxisIndex: 1, smooth: true, symbol: 'circle', symbolSize: 6, data: aggregated.dates.map(function (item) { return item.gmv; }) }
         ];
         var links = Array.from(aggregated.byLink.keys()).sort(function (a, b) { return a.localeCompare(b); });
-        var linkSeries = [];
+        var linkCommissionSeries = [];
+        var linkGmvSeries = [];
         links.forEach(function (linkName) {
           var linkDates = aggregated.byLink.get(linkName);
-          linkSeries.push({ name: linkName + ' · Commission', type: 'line', yAxisIndex: 0, stack: 'commission-by-link', smooth: true, symbol: 'circle', symbolSize: 5, data: dates.map(function (_, index) { var item = aggregated.dates[index]; var value = linkDates.get(item.date.key); return value ? value.commission : 0; }) });
+          var values = dates.map(function (_, index) {
-          linkSeries.push({ name: linkName + ' · GMV', type: 'bar', yAxisIndex: 1, stack: 'gmv-by-link', barMaxWidth: 34, data: dates.map(function (_, index) { var item = aggregated.dates[index]; var value = linkDates.get(item.date.key); return value ? value.gmv : 0; }) });
+            var item = aggregated.dates[index];
+            var value = linkDates.get(item.date.key);
+            return value || { commission: 0, gmv: 0 };
+          });
+          linkCommissionSeries.push({ name: linkName + ' · Commission', type: 'line', stack: 'commission-by-link', smooth: true, symbol: 'circle', symbolSize: 5, data: values.map(function (value) { return value.commission; }) });
+          linkGmvSeries.push({ name: linkName + ' · GMV', type: 'bar', stack: 'gmv-by-link', barMaxWidth: 34, data: values.map(function (value) { return value.gmv; }) });
+        });
+        var commissionChart = Object.assign({}, common, {
+          yAxis: [{ type: 'value', name: commissionAxisName, nameLocation: 'middle', nameGap: 52 }],
+          legend: { type: 'scroll', top: 2, data: linkCommissionSeries.map(function (series) { return series.name; }) },
+          series: linkCommissionSeries
+        });
+        var gmvChart = Object.assign({}, common, {
+          yAxis: [{ type: 'value', name: gmvAxisName, nameLocation: 'middle', nameGap: 52 }],
+          legend: { type: 'scroll', top: 2, data: linkGmvSeries.map(function (series) { return series.name; }) },
+          series: linkGmvSeries
         });
         disposeCharts();
-        charts = [echarts.init(elements.overview), echarts.init(elements.link)];
+        charts = [echarts.init(elements.overview), echarts.init(elements.linkCommission), echarts.init(elements.linkGmv)];
-        charts[0].setOption(Object.assign({}, common, { color: ['#2563eb', '#f59e0b'], legend: { type: 'scroll', top: 2, data: ['Commission', 'GMV'] }, series: overviewSeries }));
+        charts[0].setOption(Object.assign({}, common, { yAxis: dualAxes, color: ['#2563eb', '#f59e0b'], legend: { type: 'scroll', top: 2, data: ['Commission', 'GMV'] }, series: overviewSeries }));
-        charts[1].setOption(Object.assign({}, common, { legend: { type: 'scroll', top: 2, data: linkSeries.map(function (series) { return series.name; }) }, series: linkSeries }));
+        charts[1].setOption(commissionChart);
-        elements.overviewDescription.textContent = '按日期汇总 · 主轴 ' + commissionAxisName + ' · 副轴 ' + gmvAxisName;
+        charts[2].setOption(gmvChart);
-        elements.linkDescription.textContent = '按日期和 LinkName 堆积 · 主轴 ' + commissionAxisName + ' · 副轴 ' + gmvAxisName;
+        elements.overviewDescription.textContent = '按日期汇总 · Commission 柱状图使用主轴 · GMV 折线图使用副轴 · ' + state.selectedCurrency;
+        elements.linkCommissionDescription.textContent = '按日期和 LinkName 堆积 · Commission 折线图 · 主轴 ' + commissionAxisName;
+        elements.linkGmvDescription.textContent = '按日期和 LinkName 堆积 · GMV 柱状图 · 主轴 ' + gmvAxisName;
       }
 
       function showEmpty(message) {