Conformance: Have activity Log Results chart, Effect done.

src/module/abbreviateNumber.js

@@ -0,0 +1,14 @@
+/**
+ * 將數字轉換成簡寫的形式（1k、1m、1b等）
+ * @param   {number} number
+ * @returns {string}
+ */
+export default function abbreviateNumber(number) {
+  const SI_SYMBOLS = ["", "k", "m", "b", "t"];
+  const tier = Math.log10(Math.abs(number)) / 3 | 0;
+  const suffix = SI_SYMBOLS[tier];
+  const scale = Math.pow(10, tier * 3);
+  const scaledNumber = number / scale;
+
+  return Math.round(scaledNumber) + suffix;
+}

src/module/setChartData.js

@@ -0,0 +1,67 @@
+import getMoment from 'moment';
+
+/**
+ * 將後端的 chart data 加入最大、最小值，折線圖
+ * @param   {array} baseData 後端給的 10 個時間點
+ * @param   {number} xMax 2022-05-23T18:00:00
+ * @param   {number} xMin 2022-05-23T08:00:00
+ * @returns {array} 可直接套入 chart.js 的 data
+ */
+export function setLineChartData(baseData, xMax, xMin) {
+  let data = baseData.map(i=>({x:i.x,y:i.y}))
+  // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
+  // x 值為 0 ~ 11,
+  // 將三的座標(ax, ay), (bx, by), (cx, cy)命名為 (a, b), (c, d), (e, f)
+  // 最小值: (f - b)(c - a) = (e - a)(d - b)，求 b = (ed - ad - fa - fc) / (e - c - a)
+  // 最大值: (f - b)(e - c) = (f - d)(e - a)，求 f = (be - bc -de + da) / (a - c)
+
+  // y 軸最小值
+  let a = 0;
+  let b;
+  let c = 1;
+  let d = baseData[0].y;
+  let e = 2;
+  let f = baseData[1].y;
+  b = (e*d - a*d - f*a - f*c) / (e - c - a)
+  b = b > 1 ? 1 : b < 0 ? 0 : b;
+
+  // y 軸最大值
+  let ma = 9;
+  let mb = baseData[8].y;
+  let mc = 10;
+  let md = baseData[9].y;
+  let me = 11;
+  let mf;
+  mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc);
+  mf = mf > 1 ? 1 : mf < 0 ? 0 : mf;
+
+  // 添加最小值
+  data.unshift({
+    x: xMin,
+    y: b,
+  })
+  // 添加最大值
+  data.push({
+    x: xMax,
+    y: mf,
+  })
+
+  return data;
+};
+/**
+ * 將後端的 chart data 加入最大、最小值，長條圖
+ * @param   {array} baseData 後端給的 10 個時間點
+ * @param   {number} xMax 2022-05-23T18:00:00
+ * @param   {number} xMin 2022-05-23T08:00:00
+ * @returns {array} 可直接套入 chart.js 的 data
+ */
+export function setBarChartData(baseData) {
+  let data = baseData.map(i =>{
+    return {
+      x: getMoment(i.x).format('YYYY/M/D hh:mm:ss'),
+      y: i.y
+    }
+  })
+  // console.log(data);
+  return data
+};