JSP 筆記 - 程式碼整合

這次記錄兩份程式碼整合後的結果，這部分卡關了一天，感謝同學熱心與解惑，有釐清一下思維，來記錄一下過程。

需求

這次需要將清單與圖表整合在一起，如上方圖片所示，並且圖表與選單的內容要同步顯示。

程式碼整合

主要要整合的是下方兩個片段程式碼，相關說明可以參考這篇。

選擇清單

select 清單判斷條件與資料處理。

function sortData(data, select) {
  if (select === "id") data.sort((x, y) => parseInt(x.id) - parseInt(y.id));
  else if (select === "process")
    data.sort((x, y) => parseFloat(y.process) - parseFloat(x.process)); //四捨五入，取小數點後兩位

  data.forEach((item) => {
    columns.push(parseFloat(item.process) / 100); //完成率資料取得小數點後兩位後，變百分比呈現
    category.push(item.name); //把參賽者資料推到參數中
  });
}

C3.js 圖表

要匯入圖表的條件，參數會帶入 C3 中執行，C3 圖表程式碼略過不貼上來。

let columns = ["完成率"]; //data 對應名稱與存放數據資料用
let category = []; //參賽者姓名資料

function sortC3(data) {
  data.sort((x, y) => parseFloat(y.process) - parseFloat(x.process)); //完成率資料排序，多到少
  data.forEach((item) => {
    columns.push(parseFloat(item.process) / 100); //完成率資料取得小數點後兩位後，變百分比呈現
    category.push(item.name); //把參賽者資料推到參數中
  });
}

整合前思考

誰是主要驅動的程式碼?

合併很單純的以為就是把兩個片段程式碼貼再一起，然後在 axios 裡面同步執行就可以了，可是兩者並無直接連動，所以要先決定哪一個才是主要驅動的程式碼，另一個只是跟隨其條件。

很直覺的操作是我要透過 select 選到想要的條件後，右邊圖表會跟著改變。

主要是 select 在控制

釐清 select 是主要的條件後，所以要把圖表整合到 select 裡面，兩者整合後就變成下方程式碼：

可見到中間區域的條件判斷使用的內容幾乎一樣。
所以只有把圖表要用的兩個變數拿過來用。
剩下的判斷與資料處理沿用清單的程式碼。
最後帶入 C3.js 圖表的函式。

function sortData(data, select) {
  let columns = ["完成率"]; //data 對應名稱與存放數據資料用
  let category = []; //參賽者姓名資料

  if (select === "id") data.sort((x, y) => parseInt(x.id) - parseInt(y.id));
  else if (select === "process")
    data.sort((x, y) => parseFloat(y.process) - parseFloat(x.process)); //四捨五入，取小數點後兩位

  data.forEach((item) => {
    columns.push(parseFloat(item.process) / 100); //完成率資料取得小數點後兩位後，變百分比呈現
    category.push(item.name); //把參賽者資料推到參數中
  });
  load(columns, category); //C3 的函式
}

最後就可以得到想要的結果了！

畫面處理

確認有資料有同步執行與顯示後，有牽扯到畫面就一定要提一下 CSS，這邊記錄一下重點。

HTML 架構

先看一下 HTML 架構，.wrap 是整個清單與圖表顯示的大區塊，當中又分成左右兩邊區塊，所以我要動的就是 .wrapLeft 跟 .wrapRight。

<main>
  <div class="main">
    <div class="wrap">
      <div class="wrapLeft">
        <select class=" select">
          <option value="id">依照 id 編號排序</option>
          <option value="process">依照完課率排序</option>
        </select>
        <div class="record"></div>
      </div>
      <div class="wrapRight">
        <div id="chart"></div>
      </div>
    </div>
  </div>
</main>

SCSS 樣式

要讓清單與圖表橫向排列，所以這邊要加上 display:flex;

.wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}

左右區塊只要加入百分比就會自動分開了。

.wrapLeft {
  width: 40%;
}

.wrapRight {
  width: 60%;
}

CodePen https://codepen.io/hnzxewqw/pen/NWxeoBq

結語

對於程式碼整合思考還要再熟練一點，有時候想得太複雜了，要在直覺一點。