Conformance: Time Trend Chart Scales-y Option done.

src/components/Discover/Conformance/ConformanceResults.vue

@@ -132,11 +132,13 @@
       <p class="h2 text-base">Non-conformance Issues</p>
       <div class="flex gap-4 w-full">
         <!-- Issues chart -->
-        <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full" v-if="null">
+        <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full" >
+          <!-- v-if="data.timeTrend.chart == null" -->
           <p class="h2 pl-2 flex justify-between items-center">
             <span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
-            <span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
+            <span class="text-2xl"><span class="text-cfm-secondary">{{ data.timeTrend.not_conforming }}</span>/{{ data.timeTrend.total }}</span>
           </p>
+          <Chart type="line" :data="timeChartData" :options="timeChartOptions" class=""/>
         </div>
         <!-- Issues list -->
         <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
@@ -210,7 +212,12 @@ export default {
           tasks: null,
         },
         loops: null,
-        issues: 'reset'
+        issues: 'reset',
+        timeTrend: {
+          not_conforming: '--',
+          total: '--',
+          chart: {},
+        },
       },
       isCoverPlate: false,
       issuesModal: false,
@@ -219,6 +226,8 @@ export default {
       rateChartOptions: null,
       casesChartData: null,
       casesChartOptions: null,
+      timeChartData: null,
+      timeChartOptions: null,
       issuesNo: null,
       traceId: null,
       firstCases: null,
@@ -334,7 +343,7 @@ export default {
         charts: {
           rate: {
             rate: rate,
-            data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min),
+            data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min, true),
             xMax: getMoment(data.charts.rate.x_axis.max).format('YYYY/M/D'),
             xMin: getMoment(data.charts.rate.x_axis.min).format('YYYY/M/D'),
           },
@@ -364,9 +373,20 @@ export default {
         },
         loops: isNullLoops(data.loops),
         issues: isNullIsssue(data.issues),
+        timeTrend: {
+          not_conforming: getNumberLabel(data.counts.not_conforming),
+          total: getNumberLabel(sum),
+          chart: setLineChartData(data.charts.time.data, data.charts.time.x_axis.max, data.charts.time.x_axis.min, false, data.charts.time.y_axis.max, data.charts.time.y_axis.min),
+          xMax: data.charts.time.x_axis.max,
+          xMin: data.charts.time.x_axis.min,
+          yMax: data.charts.time.y_axis.max,
+          yMin: data.charts.time.y_axis.min,
+        }
       };
+
       this.setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js
       this.setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, data.charts.cases.x_axis.max, data.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js
+      this.setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax); // 建立圖表 Time Chart.js
       return result;
     },
     /**
@@ -546,11 +566,144 @@ export default {
         },
       };
     },
+    /**
+     * time chart
+     */
+    setTimeChartData(data, xMax, xMin, yMax, yMin) {
+      console.log(data);
+      // let max = yMax * 1.1;
+      let max = 29 * 1.1;
+
+//       data = [
+//     {
+//         "x": 434,
+//         "y": 16
+//     },
+//     {
+//         "x": 13365.55,
+//         "y": 19
+//     },
+//     {
+//         "x": 39228.649999999994,
+//         "y": 22
+//     },
+//     {
+//         "x": 65091.75,
+//         "y": 18
+//     },
+//     {
+//         "x": 90954.84999999999,
+//         "y": 14
+//     },
+//     {
+//         "x": 116817.95,
+//         "y": 21
+//     },
+//     {
+//         "x": 142681.05,
+//         "y": 18
+//     },
+//     {
+//         "x": 168544.15,
+//         "y": 16
+//     },
+//     {
+//         "x": 194407.25,
+//         "y": 20
+//     },
+//     {
+//         "x": 220270.34999999998,
+//         "y": 10
+//     },
+//     {
+//         "x": 246133.44999999998,
+//         "y": 29
+//     },
+//     {
+//         "x": 259065,
+//         "y": 29
+//     }
+// ]
+      // console.log(xMax);
+      // console.log(xMin);
+      this.timeChartData = {
+        labels: [],
+        datasets: [
+          {
+            label: 'Case',
+            data: data,
+            fill: 'start',
+            showLine: false,
+            tension: 0.4,
+            backgroundColor: 'rgba(0,153,255)',
+            pointRadius: 0,
+            x: 'x',
+            y: 'y',
+          }
+        ]
+      };
+
+      this.timeChartOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        plugins: {
+          legend: false, // 圖例
+          filler: {
+            propagate: false
+          },
+          title: false
+        },
+        // animation: {
+        //   onComplete: e => {
+        //     this.resizeMask(e.chart);
+        //   }
+        // },
+        // interaction: {
+        //   intersect: true,
+        // },
+        scales: {
+          x: {
+            type: 'time',
+            ticks: {
+              autoSkip: false,
+              maxRotation: 0, // 不旋轉 lable 0~50
+              color: '#334155',
+              display: true,
+            },
+            grid: {
+              display: false, // 隱藏 x 軸網格
+            },
+          },
+          y: {
+            beginAtZero: true, // scale 包含 0
+            max: max,
+            ticks: { // 設定間隔數值
+              display: false, // 隱藏數值，只顯示格線
+              stepSize: max / 4,
+            },
+            grid: {
+              color: 'rgba(100,116,139)',
+            },
+            border: {
+              display: false, // 隱藏左側多出來的線
+            }
+          },
+        },
+      };
+    },
   },
   created() {
     this.$emitter.on('coverPlate', boolean => {
       this.isCoverPlate = boolean;
     });
+    this.setTimeChartData();
   },
 }
 </script>

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -235,6 +235,7 @@ export default {
         min: this.selectTimeRangeMin,
         max: this.selectTimeRangeMax
       };
+      console.log('this.selectDurationTime', this.selectDurationTime);
 
       switch (this.selectedRuleType) {
         case 'Have activity': // Rule Type 選 Have activity 的行為

src/module/setChartData.js

@@ -5,9 +5,11 @@ import getMoment from 'moment';
  * @param   {array} baseData 後端給的 10 個時間點
  * @param   {number} xMax 2022-05-23T18:00:00
  * @param   {number} xMin 2022-05-23T08:00:00
+ * @param   {number} yMax case
+ * @param   {number} yMin case
  * @returns {array} 可直接套入 chart.js 的 data
  */
-export function setLineChartData(baseData, xMax, xMin) {
+export function setLineChartData(baseData, xMax, xMin, isPercent, yMax, yMin) {
   let data = baseData.map(i=>({x:i.x,y:i.y}))
   // y 軸斜率計算請參考 ./public/timeFrameSlope 的圖
   // x 值為 0 ~ 11,
@@ -23,7 +25,8 @@ export function setLineChartData(baseData, xMax, xMin) {
   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;
+  if(isPercent) b = b >= 1 ? 1 : b <= 0 ? 0 : b;
+  else b = b >= yMax ? yMax : b <= yMin ? yMin : b;
 
   // y 軸最大值
   let ma = 9;
@@ -33,7 +36,8 @@ export function setLineChartData(baseData, xMax, xMin) {
   let me = 11;
   let mf;
   mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc);
-  mf = mf > 1 ? 1 : mf < 0 ? 0 : mf;
+  if(isPercent) mf = mf >= 1 ? 1 : mf <= 0 ? 0 : mf;
+  else mf = mf >= yMax ? yMax : mf <= yMin ? yMin : mf;
 
   // 添加最小值
   data.unshift({