Conformance: Time Trend Chart incomplete.

2023-09-01 11:33:38 +08:00
parent 7ee1dac5b1
commit 49230c1b51
2 changed files with 114 additions and 76 deletions
--- a/src/components/Discover/Conformance/ConformanceResults.vue
+++ b/src/components/Discover/Conformance/ConformanceResults.vue
@@ -132,7 +132,7 @@
      <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" >
+        <div v-if="null" 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>
@@ -234,6 +234,7 @@ export default {
      loopNo: null,
      looptraceId: null,
      loopFirstCases: null,
+      selectDurationTime: null,
      tooltip: {
        results: {
          value: 'This page will perform a conformance check based on the filtering results of the map.',
@@ -373,20 +374,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,
-        }
+        // 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
+      // this.setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax); // 建立圖表 Time Chart.js
      return result;
    },
    /**
@@ -574,72 +575,101 @@ export default {
      // 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
-//     }
-// ]
+      data = [
+    {
+        x: 434,
+        y: 16
+    },
+    {
+        x: 13365,
+        y: 19
+    },
+    {
+        x: 39228,
+        y: 22
+    },
+    {
+        x: 65091,
+        y: 18
+    },
+    {
+        x: 90954,
+        y: 14
+    },
+    {
+        x: 116817,
+        y: 21
+    },
+    {
+        x: 142681,
+        y: 18
+    },
+    {
+        x: 168544,
+        y: 16
+    },
+    {
+        x: 194407,
+        y: 20
+    },
+    {
+        x: 220270,
+        y: 10
+    },
+    {
+        x: 246133,
+        y: 29
+    },
+    {
+        x: 259065,
+        y: 29
+    }
+]
+      const start = this.selectDurationTime[0] - 1;
+      const end = this.selectDurationTime[1] - 1;
+      const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined;
+      const outside = (ctx, value) => ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined;
+
      // console.log(xMax);
      // console.log(xMin);
      this.timeChartData = {
-        labels: [],
+        // labels: [],
+        // labels: [434, 13365, 39228, 65091, 90954, 116817, 142681, 168544, 194407, 220270, 246133, 259065],
        datasets: [
          {
-            label: 'Case',
+            label: 'Conforming',
            data: data,
-            fill: 'start',
-            showLine: false,
+            // data: [16,19,22,18,14,21,18,16,20,10,29,29],
+            fill: true,
+            // showLine: false,
            tension: 0.4,
            backgroundColor: 'rgba(0,153,255)',
            pointRadius: 0,
+            pointHitRadius: 0,
+            spanGaps: true,
+            segment: {
+              // backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(203, 213, 225)'),
+              // backgroundColor: ctx => inside(ctx, 'rgb(245,40,145)') || outside(ctx, 'rgb(250, 196, 224)'),
+              backgroundColor: ctx => console.log(ctx),
+             },
+      //        'cfm-primary': '#0099FF',
+      // 'cfm-secondary': '#FFAA44',
            x: 'x',
            y: 'y',
-          }
+          },
+          // {
+          //   label: 'Not Conforming',
+          //   // data: data,
+          //   data: [16,19,22,18,14,21,18,16,20,10,29,29],
+          //   // fill: true,
+          //   // showLine: false,
+          //   tension: 0.4,
+          //   backgroundColor: 'rgba(0,153,255)',
+          //   pointRadius: 0,
+          //   pointHitRadius: 0,
+          //   // x: 'x',
+          //   // y: 'y',
+          // },
        ]
      };

@@ -655,24 +685,18 @@ export default {
        },
        plugins: {
          legend: false, // 圖例
-          filler: {
-            propagate: false
-          },
-          title: false
+          tooltip: false,
        },
        // animation: {
        //   onComplete: e => {
        //     this.resizeMask(e.chart);
        //   }
        // },
-        // interaction: {
-        //   intersect: true,
-        // },
        scales: {
          x: {
            type: 'time',
            ticks: {
-              autoSkip: false,
+              // autoSkip: false,
              maxRotation: 0, // 不旋轉 lable 0~50
              color: '#334155',
              display: true,
@@ -680,6 +704,11 @@ export default {
            grid: {
              display: false, // 隱藏 x 軸網格
            },
+            title: {
+              display: true,
+              text: 'Time',
+              color: 'rgba(100,116,139)',
+            },
          },
          y: {
            beginAtZero: true, // scale 包含 0
@@ -690,10 +719,16 @@ export default {
            },
            grid: {
              color: 'rgba(100,116,139)',
+              drawTicks: false // 隱藏左側多的空間
            },
            border: {
              display: false, // 隱藏左側多出來的線
-            }
+            },
+            title: {
+              display: true,
+              text: 'Occurrences',
+              color: 'rgba(100,116,139)',
+            },
          },
        },
      };
@@ -703,7 +738,9 @@ export default {
    this.$emitter.on('coverPlate', boolean => {
      this.isCoverPlate = boolean;
    });
-    this.setTimeChartData();
+    // this.$emitter.on('timeRangeMaxMin', data => this.selectDurationTime = data);
+    // this.selectDurationTime = { min: 86834, max: 176265};
+    // this.setTimeChartData();
  },
 }
 </script>
--- a/src/components/Discover/Conformance/ConformanceSidebar.vue
+++ b/src/components/Discover/Conformance/ConformanceSidebar.vue
@@ -235,6 +235,7 @@ export default {
        min: this.selectTimeRangeMin,
        max: this.selectTimeRangeMax
      };
+      this.$emitter.emit('timeRangeMaxMin', this.selectDurationTime);
      console.log('this.selectDurationTime', this.selectDurationTime);

      switch (this.selectedRuleType) {