feat: Compare Dashboard API done.

src/components/Navbar.vue

@@ -184,6 +184,13 @@ export default {
               break;
           }
           break;
+        case 'COMPARE':
+          switch(name) {
+            case 'CompareDashboard':
+              this.isActive = 'DASHBOARD'
+              break;
+          }
+          break;
       }
       // if(this.navViewName === 'DISCOVER') {
       //   if(name === 'Map' || name === 'CheckMap') this.isActive = 'MAP';

src/router/index.js

@@ -88,9 +88,15 @@ const routes = [
         ]
       },
       {
-        path: "/compare/dashboard",
-        name: "CompareDashboard",
-        component: CompareDashboard,
+        path: "/compare",
+        name: "Compare",
+        children: [
+          {
+            path: "/compare/dashboard/:primaryType/:primaryId/:secondaryType/:secondaryId",
+            name: "CompareDashboard",
+            component: CompareDashboard,
+          }
+        ]
       }
     ]
   },
@@ -99,11 +105,6 @@ const routes = [
     name: "NotFound404",
     component: NotFound404,
   },
-  // {
-  //   path: "/compare/dashboard",
-  //   name: "CompareDashboard",
-  //   component: CompareDashboard,
-  // }
 ];
 
 const base_url = import.meta.env.BASE_URL;

src/stores/compare.js

@@ -0,0 +1,31 @@
+import { defineStore } from "pinia";
+import apiError from '@/module/apiError.js';
+
+export default defineStore('compareStore', {
+  state: () => ({
+    allCompareDashboardData: null,
+  }),
+  getters: {
+    compareDashboardData: state => {
+      return state.allCompareDashboardData;
+    },
+  },
+  actions: {
+    /**
+     * Get Performance
+     * @param { array } queryParams
+     */
+    async getCompare(queryParams) {
+      // encodeURIComponent 函數用於將字串中的特殊字符進行編碼，以確保 URL 的正確性。
+      const queryString = JSON.stringify(queryParams);
+      const api = `/api/compare?datasets=${encodeURIComponent(queryString)}`;
+
+      try {
+        const response = await this.$axios.get(api);
+        this.allCompareDashboardData = response.data;
+      } catch(error) {
+        apiError(error, 'Failed to load the Compare.');
+      }
+    }
+  },
+})

src/stores/performance.js

@@ -1,7 +1,4 @@
 import { defineStore } from "pinia";
-// import moment from "moment";
-// import { Decimal } from 'decimal.js';
-// import abbreviateNumber from '@/module/abbreviateNumber.js';
 import apiError from '@/module/apiError.js';
 
 export default defineStore('performanceStore', {

src/views/Compare/Dashboard/index.vue

@@ -100,20 +100,20 @@
 <script>
 import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
-import PerformanceStore from '@/stores/performance.js';
+import CompareStore from '@/stores/compare.js';
 import SidebarStates from '@/components/Compare/SidebarStates.vue';
 import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
-import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
+// import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
 
 export default {
   setup() {
     const loadingStore = LoadingStore();
-    const performanceStore = PerformanceStore();
+    const compareStore = CompareStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { performanceData } = storeToRefs(performanceStore);
+    const { compareDashboardData } = storeToRefs(compareStore);
 
-    return { isLoading, performanceStore, performanceData }
+    return { isLoading, compareStore, compareDashboardData }
   },
   components: {
     SidebarStates,
@@ -625,33 +625,41 @@ export default {
   },
   async created() {
     this.isLoading = true; // moubeted 才停止 loading
-    // log: 695977238 ; filter: 746150051
-    // [{"log_id":695977238},{"filter_id":746150051}]
-    // 要判斷資料有無 null,問貓貓是哪個階層 null?
-    //  Activity 會有 0, null 的組合嗎?
-    //  Activity 有 j, 無 j ?
 
-    // const routeParams = this.$route.params;
-    // console.log(routeParams);
-    // let id = routeParams.fileId;
-    // let type = routeParams.type;
+    const routeParams = this.$route.params;
+    const primaryType = routeParams.primaryType;
+    const secondaryType = routeParams.secondaryType;
+    const primaryId = routeParams.primaryId;
+    const secondaryId = routeParams.secondaryId;
+    const typeMap = {
+      'log': 'log_id',
+      'filter': 'filter_id'
+    };
+    const primaryTypeParam = typeMap[primaryType];
+    const secondaryTypeParam = typeMap[secondaryType];
+    const queryParams = [
+      { [primaryTypeParam]: primaryId },
+      { [secondaryTypeParam]: secondaryId }
+    ];
 
-    // // 取得 Performance Data
-    // await this.performanceStore.getPerformance(type, id);
-    this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(compareDashboardData.time.avg_process_time_by_task);
-    this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(compareDashboardData.time.avg_waiting_time_by_edge);
-    this.casesByTaskHeight = await this.getHorizontalBarHeight(compareDashboardData.freq.cases_by_task);
+    // 取得 Compare Data
+    await this.compareStore.getCompare(queryParams);
+    this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_process_time_by_task);
+    this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_waiting_time_by_edge);
+    this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task);
     // create chart
-    [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
-    [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
-    [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
-    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
-    [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
-    [this.freqData, this.freqOptions] = this.getLineChart(compareDashboardData.freq.cases, this.contentData.freq);
-    [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true);
+    [this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
+    [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
+    [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
+    [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
+    [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
+    [this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq);
+    [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true);
+  },
+  mounted() {
     // 停止 loading
     this.isLoading = false;
-  },
+  }
 }
 </script>
 <style scoped>

src/views/Files/index.vue

@@ -71,7 +71,7 @@
             <span v-show="secondaryDragData.length > 0" class="material-symbols-outlined material-fill bg-neutral-10 text-neutral-500 block rounded-full absolute -top-[5%] -right-[5%] cursor-pointer hover:text-danger" @click="secondaryDragDelete
             ">do_not_disturb_on</span>
           </div>
-          <button class="btn btn-sm" :class="this.isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'" :disabled="isCompareDisabledButton">Compare</button>
+          <button class="btn btn-sm" :class="this.isCompareDisabledButton ? 'btn-disable' : 'btn-c-primary'" :disabled="isCompareDisabledButton" @click="compareSubmit">Compare</button>
         </div>
       </section>
       <!-- Recently Used -->
@@ -502,6 +502,18 @@
         this.compareData.unshift(this.secondaryDragData[0]);
         this.secondaryDragData.length = 0;
       },
+      /**
+       * Enter the Compare page
+       */
+       compareSubmit() {
+        const primaryType = this.primaryDragData[0].type;
+        const secondaryType = this.secondaryDragData[0].type;
+        const primaryId = this.primaryDragData[0].id;
+        const secondaryId = this.secondaryDragData[0].id;
+        const params = { primaryType: primaryType, primaryId: primaryId, secondaryType: secondaryType, secondaryId: secondaryId };
+
+        this.$router.push({name: 'CompareDashboard', params: params});
+      },
       /**
        *
        * @param {event} event choose columnType item