---
# System prepended metadata

title: COMEBUY 資料視覺化系統使用說明書

---

本文為臺大資管團隊與長沂國際實業股份有限公司（COMEBUY）產學合作專案所開發之使用說明書，由專案團隊撰寫，可提供公司人員在未來實際使用系統時參考。

---

## 1. 數據查詢
### 1.1 基本搜尋
1. 時間範圍：選擇完日期後，系統會彈出可選擇時間的方框，預設為 00:00 ~ 23:59（全天），可根據需求選擇更詳細的時間區段。
2. 地區：
    ![](https://hackmd.io/_uploads/SJJUB7us2.png)
    - 預設為**全台**，點開全台後會彈出視窗選擇細分區域，若下層有被選擇則其所有上層會有 highlight 顯示，且僅能取消最下層。
        
        > e.g. 若選擇了「新店光明店」，則「北區」、「新北市」、「新店區」皆有 <text style="background-color:#1976D2;color:white;font-weight:bold; padding:2px">highlight</text> 顯示，且點選以上三者任意都不能取消「新店光明店」，<text style="color:red; font-weight:bold">唯一取消途徑是再次點選「新店光明店」</text>。
     - 搜尋功能：在搜尋框中輸入欲查詢名稱，會將每個層級中有符合的選項列出，**並呈現符合搜尋條件的最低子層級**。
        > e.g. 若輸入「光明店」，符合的條件有「三峽光明店」、「土城光明店」、「新店光明店」，則系統會列出：「北區 &rarr; 新北市 &rarr; 三峽區 &rarr; 三峽光明店」、「北區 &rarr; 新北市 &rarr; 土城區 &rarr; 土城光明店」、「北區 &rarr; 新北市 &rarr; 新店區 &rarr; 新店光明店」。
     - 快捷功能：
         - <text style="background-color:#ED6C02;color:white;font-weight:bold; padding:2px">全門市選取</text>：點選後會依照目前面板顯示選取全部門市
            > e.g. 若搜尋了「光明店」而改變面板，面板上只顯示「三峽光明店」、「土城光明店」、「新店光明店」，則按下<text style="background-color:#ED6C02;color:white;font-weight:bold; padding:2px">全門市選取</text>將指選取此三者。
        - <text style="background-color:#9C27B0;color:white;font-weight:bold; padding:2px">一鍵全選</text>：所有「非店家層級」展開後右手邊都會有<text style="background-color:#9C27B0;color:white;font-weight:bold; padding:2px">一鍵全選</text>，按下將會選取目前面板顯示下該層級之下一層級的所有選項。
        
            > e.g. 若按下「北市」的<text style="background-color:#9C27B0;color:white;font-weight:bold; padding:2px">一鍵全選</text>則會選取「新北市、台北市、新竹市...」；若搜尋了「光明店」而改變面板，面板上「北區」以下只有「新北市」，則僅會選取「新北市」。
        - <text style="background-color:#c62828;color:white;font-weight:bold; padding:2px">刪除已選項目</text>：在「已選擇」區域中，假如已選擇任一地區，在右上角會出現 :x:，按下可刪除所有項目並回到預設「全台」。
    - 已選擇區域：
        - 顯示目前已選擇區域，按叉叉可取消選取。
        - 防呆系統：系統僅能選擇相同層級的地區選項，若選擇不同層級則會出現錯誤提示。
        ![](https://hackmd.io/_uploads/SycMv7uin.png)
3. 品項：
    - 指定飲品：若選擇指定飲品則該飲品的飲品種類會顯示該飲品種類以降有被選擇；所該飲品種類以下所有飲品都被選擇，則也會有全部選擇的提示圖案。
    - 指定飲品種類：若選擇飲品種類，則類似快捷鍵功能：所有屬於該飲品種類的飲品都會被選取。
4. 甜冰口料：屬於額外條件。若有任一條件有被選擇會出現「分別飲品統整」
    - 甜口冰料皆有快捷建，不受已選擇項目影響，點擊並一鍵全選；而下一次則為一鍵取消。
    - <text style="color:red; font-weight:bold">分別飲品統整</text>：當切換為「分別飲品統整」，則所出現的數據分析會以<text style="font-weight:bold">指定飲品</text>為分母，反之則以<text style="font-weight:bold">全部飲品</text>為分母。
### 1.2 數據呈現：
1. 總表：呈現符合交易日期、門市名稱、飲品、額外條件之全品項總杯數、飲品杯數、杯數佔比、全品項總金額、飲品金額及金額佔比，默認順序為門市名稱、飲品、交易日期。
    #### 功能：
    - 排序：僅能按照單一欄位排序。
    - 篩選：僅能篩選單一欄位。
    - 匯出 csv 檔：基本上和系統上呈現的表格相似，僅額外條件無法呈現符合之選項。
2. 數據統計：將交易日期之時間段所有相應的數據加總
    #### 功能：
    - 排序：僅能按照單一欄位排序。
    - 篩選：僅能篩選單一欄位。
    - 匯出 csv 檔。
3. 過去若干年趨勢圖：呈現該選取時段歷年的銷量變化，點選圖例可隱藏特定類別，也可做呈現篩選（圖形、呈現數據、額外條件等等）。
    #### 可調整參數：
    - 年：從今年開始（包含今年）往前推 n 年所呈現的銷量變化
    - 數值：調整欲知道銷量數據
        - 杯數佔比
        - 金額佔比
        - 杯數
        - 金額
    - 圖形：呈現數值圖形
        - 長條圖
        - 折線圖
    - 顏色：可調整類別顏色
    - 額外條件：調整欲知道額外條件
4. 過去若干時段趨勢：呈現該選取時段同一區間往前推算之銷量變化趨勢，點選圖例可隱藏特定類別，也可做呈現篩選（圖形、呈現數據、額外條件等等）
    #### [可調整參數](#可調整參數：)：
    - 計算方式：類別計算方式
        - 分開計算
        - 合併計算
    
## 2. 資料修改
### 2.1 新增
1. 可新增之資料：地區、品項、甜度、冰塊、口味、加料
    - 甜度、冰塊、口味、加料輸入名稱即可新增
    
        ![](https://hackmd.io/_uploads/SJopFQ_i2.png)
    - 地區新增地區需一步步輸入層級，若要開闢新區，則選擇「其他」，並輸入該層級的名稱。舉例，公司在「北區，臺北市，大安區」開設「A1111 大安舉例店」。
    
        ![](https://hackmd.io/_uploads/HyDG9Xdoh.png)
    - 新增品項也需兩層輸入，若要開闢新類別，則選擇「其他」，並輸入該類別的名稱。舉例，公司打算新增類別「夏日冰爽茶」並販售「A1234 芒果冰沙」。
    
        ![](https://hackmd.io/_uploads/r1hV5X_s3.png)
### 2.2 編輯
1. 可編輯之資料：地區、品項、甜度、冰塊、口味、加料
    - 甜度、冰塊、口味、加料可直接選擇其中一種進行更改。
    
        ![](https://hackmd.io/_uploads/Hyosqmdi3.png)
    - 修改地區包含修改「區域、縣市、地方區域、分店名稱」，可以針對任一層級進行修改。舉例，欲將「北區」改名為「北北區」，「新店光明店」改為「新店光光店」或兩者同時更改。
        
        ![](https://hackmd.io/_uploads/rJIAqXds2.png)
    - 修改品項一樣包含修改「品項種類、品項名稱」，可以針對任一類別進行修改。舉例，欲將「原葉鮮萃茶」改名為「原葉茶」，「海神」改為「海霸王」或兩者同時更改。
    
        ![](https://hackmd.io/_uploads/Skcksmui3.png)