diff --git a/src/router/index.js b/src/router/index.js
index fefbfcf..30d7333 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,7 @@ import Upload from '@/views/Upload/index.vue';
 import Map from '@/views/Discover/Map/index.vue';
 import Conformance from '@/views/Discover/Conformance/index.vue';
 import Performance from '@/views/Discover/Performance/index.vue';
+import CompareDashboard from '@/views/Compare/Dashboard/index.vue';
 import MemberArea from '@/views/MemberArea/index.vue';
 import NotFound404 from '@/views/NotFound404.vue';
 
@@ -93,11 +94,11 @@ const routes = [
     name: "NotFound404",
     component: NotFound404,
   },
-  // {
-  //   path: "/discover/performance",
-  //   name: "Performance",
-  //   component: Performance,
-  // }
+  {
+    path: "/compare/dashboard",
+    name: "CompareDashboard",
+    component: CompareDashboard,
+  }
 ];
 
 const base_url = import.meta.env.BASE_URL;
diff --git a/src/views/Compare/Dashboard/data.js b/src/views/Compare/Dashboard/data.js
new file mode 100644
index 0000000..722a682
--- /dev/null
+++ b/src/views/Compare/Dashboard/data.js
@@ -0,0 +1,1622 @@
+export const compareDashboardData = {
+  "time": {
+    "avg_cycle_time": {
+      "data": [
+        {
+          "label": "random",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": 980217.631579
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 1000370.354839
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 911986.291667
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 1041865.814815
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 985414.78125
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 938087.73913
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 1074683.238095
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 1061845.913043
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 970119.423077
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 1060694.769231
+            }
+          ]
+        },
+        {
+          "label": "toComoare",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": null
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 930269.7
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 921961.666667
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 1034307.846154
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 982150.483871
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 937859.95
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 1067176.9
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 1045593.52381
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 948351.190476
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 1031107.318182
+            }
+          ]
+        }
+      ],
+      "x_axis": {
+        "min": "2022-01-03T00:56:25",
+        "max": "2022-12-31T01:32:42"
+      },
+      "y_axis": {
+        "min": 0,
+        "max": 1074683.238095
+      }
+    },
+    "avg_cycle_efficiency": {
+      "data": [
+        {
+          "label": "random",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": 0.952810727062303
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 0.9516609459556336
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 0.947511282981948
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 0.953723238628633
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 0.9529137699582065
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 0.9489519596406311
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 0.9538608171463852
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 0.9548918755379221
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 0.9469898402743924
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 0.9505515680779113
+            }
+          ]
+        },
+        {
+          "label": "toComoare",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": null
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 0.9502456491200848
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 0.949718913301548
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 0.9540153436167056
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 0.9531637852097744
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 0.949933400150816
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 0.953262857766933
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 0.954014369056754
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 0.9472440985939204
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 0.9483798488623648
+            }
+          ]
+        }
+      ],
+      "x_axis": {
+        "min": "2022-01-03T00:56:25",
+        "max": "2022-12-31T01:32:42"
+      },
+      "y_axis": {
+        "min": 0,
+        "max": 1
+      }
+    },
+    "avg_process_time": {
+      "data": [
+        {
+          "label": "random",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": 937071.842105
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 953769.903226
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 865759.25
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 994603.814815
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 939812.375
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 890924.565217
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 1026333.285714
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 1016383.608696
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 923610.730769
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 1011539.653846
+            }
+          ]
+        },
+        {
+          "label": "toComoare",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": null
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 885093.5
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 877379.52381
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 987793.961538
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 936999.16129
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 891295.15
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 1018502.65
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 1000133.142857
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 904404.047619
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 981292.454545
+            }
+          ]
+        }
+      ],
+      "x_axis": {
+        "min": "2022-01-03T00:56:25",
+        "max": "2022-12-31T01:32:42"
+      },
+      "y_axis": {
+        "min": 0,
+        "max": 1026333.285714
+      }
+    },
+    "avg_process_time_by_task": {
+      "data": [
+        {
+          "label": "random",
+          "data": [
+            {
+              "x": "a",
+              "y": 131148.320856
+            },
+            {
+              "x": "b",
+              "y": 136626.705882
+            },
+            {
+              "x": "c",
+              "y": 133260.041667
+            },
+            {
+              "x": "d",
+              "y": 132695.481328
+            },
+            {
+              "x": "e",
+              "y": 124443.590361
+            },
+            {
+              "x": "f",
+              "y": 127175.068273
+            },
+            {
+              "x": "g",
+              "y": 127628.964427
+            },
+            {
+              "x": "h",
+              "y": 128165.104294
+            },
+            {
+              "x": "i",
+              "y": 125586.248649
+            },
+            {
+              "x": "j",
+              "y": 191297.681818
+            },
+            {
+              "x": "k",
+              "y": 142538.479167
+            },
+            {
+              "x": "l",
+              "y": 138069.642857
+            }
+          ]
+        },
+        {
+          "label": "toComoare",
+          "data": [
+            {
+              "x": "a",
+              "y": 130363.993671
+            },
+            {
+              "x": "b",
+              "y": 130647.142857
+            },
+            {
+              "x": "c",
+              "y": 127024.725
+            },
+            {
+              "x": "d",
+              "y": 129689.021739
+            },
+            {
+              "x": "e",
+              "y": 121861.031579
+            },
+            {
+              "x": "f",
+              "y": 128356.531579
+            },
+            {
+              "x": "g",
+              "y": 124470.268041
+            },
+            {
+              "x": "h",
+              "y": 123307.991803
+            },
+            {
+              "x": "i",
+              "y": 127937.446043
+            },
+            {
+              "x": "j",
+              "y": null
+            },
+            {
+              "x": "k",
+              "y": 156410.897436
+            },
+            {
+              "x": "l",
+              "y": 135385.026144
+            }
+          ]
+        }
+      ],
+      "x_axis": {
+        "labels": [
+          "a",
+          "b",
+          "c",
+          "d",
+          "e",
+          "f",
+          "g",
+          "h",
+          "i",
+          "j",
+          "k",
+          "l"
+        ]
+      },
+      "y_axis": {
+        "min": 0,
+        "max": 156410.897436
+      }
+    },
+    "avg_waiting_time": {
+      "data": [
+        {
+          "label": "random",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": 43145.789474
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 46600.451613
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 46227.041667
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 47262
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 45602.40625
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 47163.173913
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 48349.952381
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 45462.304348
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 46508.692308
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 49155.115385
+            }
+          ]
+        },
+        {
+          "label": "toComoare",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": null
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 45176.2
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 44582.142857
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 46513.884615
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 45151.322581
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 46564.8
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 48674.25
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 45460.380952
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 43947.142857
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 49814.863636
+            }
+          ]
+        }
+      ],
+      "x_axis": {
+        "min": "2022-01-03T00:56:25",
+        "max": "2022-12-31T01:32:42"
+      },
+      "y_axis": {
+        "min": 0,
+        "max": 49814.863636
+      }
+    },
+    "avg_waiting_time_by_edge": {
+      "data": [
+        {
+          "label": "random",
+          "data": [
+            {
+              "x": [
+                "a",
+                "a"
+              ],
+              "y": 6446
+            },
+            {
+              "x": [
+                "a",
+                "d"
+              ],
+              "y": 7507.8
+            },
+            {
+              "x": [
+                "a",
+                "f"
+              ],
+              "y": 5966.8
+            },
+            {
+              "x": [
+                "a",
+                "g"
+              ],
+              "y": 5175.375
+            },
+            {
+              "x": [
+                "a",
+                "i"
+              ],
+              "y": 6291.333333
+            },
+            {
+              "x": [
+                "b",
+                "a"
+              ],
+              "y": 6802
+            },
+            {
+              "x": [
+                "b",
+                "b"
+              ],
+              "y": 3509
+            },
+            {
+              "x": [
+                "b",
+                "g"
+              ],
+              "y": 7283.727273
+            },
+            {
+              "x": [
+                "b",
+                "i"
+              ],
+              "y": 6278.2
+            },
+            {
+              "x": [
+                "c",
+                "g"
+              ],
+              "y": 11503
+            },
+            {
+              "x": [
+                "c",
+                "h"
+              ],
+              "y": 6819.978261
+            },
+            {
+              "x": [
+                "c",
+                "k"
+              ],
+              "y": 13494
+            },
+            {
+              "x": [
+                "d",
+                "c"
+              ],
+              "y": 11750
+            },
+            {
+              "x": [
+                "d",
+                "e"
+              ],
+              "y": 7165.741525
+            },
+            {
+              "x": [
+                "d",
+                "g"
+              ],
+              "y": 8087.666667
+            },
+            {
+              "x": [
+                "d",
+                "i"
+              ],
+              "y": 3619
+            },
+            {
+              "x": [
+                "e",
+                "a"
+              ],
+              "y": 7262.875
+            },
+            {
+              "x": [
+                "e",
+                "d"
+              ],
+              "y": 6765.5
+            },
+            {
+              "x": [
+                "e",
+                "f"
+              ],
+              "y": 7288.326271
+            },
+            {
+              "x": [
+                "e",
+                "g"
+              ],
+              "y": 14073
+            },
+            {
+              "x": [
+                "e",
+                "k"
+              ],
+              "y": 13620
+            },
+            {
+              "x": [
+                "e",
+                "l"
+              ],
+              "y": 3795
+            },
+            {
+              "x": [
+                "f",
+                "d"
+              ],
+              "y": 10125
+            },
+            {
+              "x": [
+                "f",
+                "e"
+              ],
+              "y": 3936
+            },
+            {
+              "x": [
+                "f",
+                "g"
+              ],
+              "y": 6984.864486
+            },
+            {
+              "x": [
+                "f",
+                "j"
+              ],
+              "y": 8172.772727
+            },
+            {
+              "x": [
+                "f",
+                "l"
+              ],
+              "y": 6675.375
+            },
+            {
+              "x": [
+                "g",
+                "c"
+              ],
+              "y": 2392
+            },
+            {
+              "x": [
+                "g",
+                "e"
+              ],
+              "y": 11883
+            },
+            {
+              "x": [
+                "g",
+                "f"
+              ],
+              "y": 5305.75
+            },
+            {
+              "x": [
+                "g",
+                "g"
+              ],
+              "y": 11411
+            },
+            {
+              "x": [
+                "g",
+                "h"
+              ],
+              "y": 7590.358974
+            },
+            {
+              "x": [
+                "g",
+                "i"
+              ],
+              "y": 7135.5
+            },
+            {
+              "x": [
+                "g",
+                "k"
+              ],
+              "y": 8113.822222
+            },
+            {
+              "x": [
+                "g",
+                "l"
+              ],
+              "y": 7452.894737
+            },
+            {
+              "x": [
+                "h",
+                "i"
+              ],
+              "y": 7289.611111
+            },
+            {
+              "x": [
+                "h",
+                "l"
+              ],
+              "y": 6945
+            },
+            {
+              "x": [
+                "i",
+                "a"
+              ],
+              "y": 8895
+            },
+            {
+              "x": [
+                "i",
+                "b"
+              ],
+              "y": 5872
+            },
+            {
+              "x": [
+                "i",
+                "c"
+              ],
+              "y": 5462
+            },
+            {
+              "x": [
+                "i",
+                "d"
+              ],
+              "y": 7711.462687
+            },
+            {
+              "x": [
+                "i",
+                "e"
+              ],
+              "y": 9128.666667
+            },
+            {
+              "x": [
+                "i",
+                "g"
+              ],
+              "y": 8648.333333
+            },
+            {
+              "x": [
+                "i",
+                "i"
+              ],
+              "y": 6343.4
+            },
+            {
+              "x": [
+                "i",
+                "k"
+              ],
+              "y": 3218
+            },
+            {
+              "x": [
+                "i",
+                "l"
+              ],
+              "y": 7190.90625
+            }
+          ]
+        },
+        {
+          "label": "toComoare",
+          "data": [
+            {
+              "x": [
+                "a",
+                "a"
+              ],
+              "y": 6446
+            },
+            {
+              "x": [
+                "a",
+                "d"
+              ],
+              "y": 7321.20979
+            },
+            {
+              "x": [
+                "a",
+                "f"
+              ],
+              "y": 5966.8
+            },
+            {
+              "x": [
+                "a",
+                "g"
+              ],
+              "y": 4392.833333
+            },
+            {
+              "x": [
+                "a",
+                "i"
+              ],
+              "y": 6291.333333
+            },
+            {
+              "x": [
+                "b",
+                "a"
+              ],
+              "y": 6802
+            },
+            {
+              "x": [
+                "b",
+                "b"
+              ],
+              "y": null
+            },
+            {
+              "x": [
+                "b",
+                "g"
+              ],
+              "y": null
+            },
+            {
+              "x": [
+                "b",
+                "i"
+              ],
+              "y": 5711.5
+            },
+            {
+              "x": [
+                "c",
+                "g"
+              ],
+              "y": 11503
+            },
+            {
+              "x": [
+                "c",
+                "h"
+              ],
+              "y": 7005.842105
+            },
+            {
+              "x": [
+                "c",
+                "k"
+              ],
+              "y": 13494
+            },
+            {
+              "x": [
+                "d",
+                "c"
+              ],
+              "y": 11750
+            },
+            {
+              "x": [
+                "d",
+                "e"
+              ],
+              "y": 7078.50838
+            },
+            {
+              "x": [
+                "d",
+                "g"
+              ],
+              "y": 8087.666667
+            },
+            {
+              "x": [
+                "d",
+                "i"
+              ],
+              "y": 3619
+            },
+            {
+              "x": [
+                "e",
+                "a"
+              ],
+              "y": 7220.666667
+            },
+            {
+              "x": [
+                "e",
+                "d"
+              ],
+              "y": 6765.5
+            },
+            {
+              "x": [
+                "e",
+                "f"
+              ],
+              "y": 7104.184358
+            },
+            {
+              "x": [
+                "e",
+                "g"
+              ],
+              "y": 14073
+            },
+            {
+              "x": [
+                "e",
+                "k"
+              ],
+              "y": 13620
+            },
+            {
+              "x": [
+                "e",
+                "l"
+              ],
+              "y": 3795
+            },
+            {
+              "x": [
+                "f",
+                "d"
+              ],
+              "y": 10125
+            },
+            {
+              "x": [
+                "f",
+                "e"
+              ],
+              "y": 3936
+            },
+            {
+              "x": [
+                "f",
+                "g"
+              ],
+              "y": 7016.139665
+            },
+            {
+              "x": [
+                "f",
+                "j"
+              ],
+              "y": null
+            },
+            {
+              "x": [
+                "f",
+                "l"
+              ],
+              "y": 5593.166667
+            },
+            {
+              "x": [
+                "g",
+                "c"
+              ],
+              "y": 2392
+            },
+            {
+              "x": [
+                "g",
+                "e"
+              ],
+              "y": 11883
+            },
+            {
+              "x": [
+                "g",
+                "f"
+              ],
+              "y": 5149.333333
+            },
+            {
+              "x": [
+                "g",
+                "g"
+              ],
+              "y": 11411
+            },
+            {
+              "x": [
+                "g",
+                "h"
+              ],
+              "y": 7638.952381
+            },
+            {
+              "x": [
+                "g",
+                "i"
+              ],
+              "y": 7135.5
+            },
+            {
+              "x": [
+                "g",
+                "k"
+              ],
+              "y": 8222.351351
+            },
+            {
+              "x": [
+                "g",
+                "l"
+              ],
+              "y": 7292.733333
+            },
+            {
+              "x": [
+                "h",
+                "i"
+              ],
+              "y": 7494.024793
+            },
+            {
+              "x": [
+                "h",
+                "l"
+              ],
+              "y": 6945
+            },
+            {
+              "x": [
+                "i",
+                "a"
+              ],
+              "y": 8895
+            },
+            {
+              "x": [
+                "i",
+                "b"
+              ],
+              "y": null
+            },
+            {
+              "x": [
+                "i",
+                "c"
+              ],
+              "y": 5462
+            },
+            {
+              "x": [
+                "i",
+                "d"
+              ],
+              "y": 7380.459459
+            },
+            {
+              "x": [
+                "i",
+                "e"
+              ],
+              "y": 10290.857143
+            },
+            {
+              "x": [
+                "i",
+                "g"
+              ],
+              "y": 8648.333333
+            },
+            {
+              "x": [
+                "i",
+                "i"
+              ],
+              "y": 7761.75
+            },
+            {
+              "x": [
+                "i",
+                "k"
+              ],
+              "y": null
+            },
+            {
+              "x": [
+                "i",
+                "l"
+              ],
+              "y": 7279.082353
+            }
+          ]
+        }
+      ],
+      "x_axis": {
+        "labels": [
+          [
+            "a",
+            "a"
+          ],
+          [
+            "a",
+            "d"
+          ],
+          [
+            "a",
+            "f"
+          ],
+          [
+            "a",
+            "g"
+          ],
+          [
+            "a",
+            "i"
+          ],
+          [
+            "b",
+            "a"
+          ],
+          [
+            "b",
+            "b"
+          ],
+          [
+            "b",
+            "g"
+          ],
+          [
+            "b",
+            "i"
+          ],
+          [
+            "c",
+            "g"
+          ],
+          [
+            "c",
+            "h"
+          ],
+          [
+            "c",
+            "k"
+          ],
+          [
+            "d",
+            "c"
+          ],
+          [
+            "d",
+            "e"
+          ],
+          [
+            "d",
+            "g"
+          ],
+          [
+            "d",
+            "i"
+          ],
+          [
+            "e",
+            "a"
+          ],
+          [
+            "e",
+            "d"
+          ],
+          [
+            "e",
+            "f"
+          ],
+          [
+            "e",
+            "g"
+          ],
+          [
+            "e",
+            "k"
+          ],
+          [
+            "e",
+            "l"
+          ],
+          [
+            "f",
+            "d"
+          ],
+          [
+            "f",
+            "e"
+          ],
+          [
+            "f",
+            "g"
+          ],
+          [
+            "f",
+            "j"
+          ],
+          [
+            "f",
+            "l"
+          ],
+          [
+            "g",
+            "c"
+          ],
+          [
+            "g",
+            "e"
+          ],
+          [
+            "g",
+            "f"
+          ],
+          [
+            "g",
+            "g"
+          ],
+          [
+            "g",
+            "h"
+          ],
+          [
+            "g",
+            "i"
+          ],
+          [
+            "g",
+            "k"
+          ],
+          [
+            "g",
+            "l"
+          ],
+          [
+            "h",
+            "i"
+          ],
+          [
+            "h",
+            "l"
+          ],
+          [
+            "i",
+            "a"
+          ],
+          [
+            "i",
+            "b"
+          ],
+          [
+            "i",
+            "c"
+          ],
+          [
+            "i",
+            "d"
+          ],
+          [
+            "i",
+            "e"
+          ],
+          [
+            "i",
+            "g"
+          ],
+          [
+            "i",
+            "i"
+          ],
+          [
+            "i",
+            "k"
+          ],
+          [
+            "i",
+            "l"
+          ]
+        ]
+      },
+      "y_axis": {
+        "min": 0,
+        "max": 14073
+      }
+    }
+  },
+  "freq": {
+    "cases": {
+      "data": [
+        {
+          "label": "random",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": 30
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 25
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 30
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 26
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 28
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 27
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 17
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 24
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 28
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 17
+            }
+          ]
+        },
+        {
+          "label": "toComoare",
+          "data": [
+            {
+              "x": "2022-01-21T03:22:13.850000",
+              "y": 0
+            },
+            {
+              "x": "2022-02-26T08:13:51.550000",
+              "y": 15
+            },
+            {
+              "x": "2022-04-03T13:05:29.250000",
+              "y": 26
+            },
+            {
+              "x": "2022-05-09T17:57:06.950000",
+              "y": 26
+            },
+            {
+              "x": "2022-06-14T22:48:44.650000",
+              "y": 27
+            },
+            {
+              "x": "2022-07-21T03:40:22.350000",
+              "y": 24
+            },
+            {
+              "x": "2022-08-26T08:32:00.050000",
+              "y": 15
+            },
+            {
+              "x": "2022-10-01T13:23:37.750000",
+              "y": 22
+            },
+            {
+              "x": "2022-11-06T18:15:15.450000",
+              "y": 24
+            },
+            {
+              "x": "2022-12-12T23:06:53.150000",
+              "y": 13
+            }
+          ]
+        }
+      ],
+      "x_axis": {
+        "min": "2022-01-03T00:56:25",
+        "max": "2022-12-31T01:32:42"
+      },
+      "y_axis": {
+        "min": 0,
+        "max": 30
+      }
+    },
+    "cases_by_task": {
+      "data": [
+        {
+          "label": "random",
+          "data": [
+            {
+              "x": "a",
+              "y": 184
+            },
+            {
+              "x": "b",
+              "y": 32
+            },
+            {
+              "x": "c",
+              "y": 48
+            },
+            {
+              "x": "d",
+              "y": 241
+            },
+            {
+              "x": "e",
+              "y": 249
+            },
+            {
+              "x": "f",
+              "y": 249
+            },
+            {
+              "x": "g",
+              "y": 250
+            },
+            {
+              "x": "h",
+              "y": 163
+            },
+            {
+              "x": "i",
+              "y": 175
+            },
+            {
+              "x": "j",
+              "y": 22
+            },
+            {
+              "x": "k",
+              "y": 48
+            },
+            {
+              "x": "l",
+              "y": 182
+            }
+          ]
+        },
+        {
+          "label": "toComoare",
+          "data": [
+            {
+              "x": "a",
+              "y": 155
+            },
+            {
+              "x": "b",
+              "y": 7
+            },
+            {
+              "x": "c",
+              "y": 40
+            },
+            {
+              "x": "d",
+              "y": 184
+            },
+            {
+              "x": "e",
+              "y": 190
+            },
+            {
+              "x": "f",
+              "y": 190
+            },
+            {
+              "x": "g",
+              "y": 191
+            },
+            {
+              "x": "h",
+              "y": 122
+            },
+            {
+              "x": "i",
+              "y": 131
+            },
+            {
+              "x": "k",
+              "y": 39
+            },
+            {
+              "x": "l",
+              "y": 153
+            }
+          ]
+        }
+      ],
+      "x_axis": {
+        "labels": [
+          "a",
+          "b",
+          "c",
+          "d",
+          "e",
+          "f",
+          "g",
+          "h",
+          "i",
+          "j",
+          "k",
+          "l"
+        ]
+      },
+      "y_axis": {
+        "min": 0,
+        "max": 250
+      }
+    }
+  }
+}
diff --git a/src/views/Compare/Dashboard/index.vue b/src/views/Compare/Dashboard/index.vue
new file mode 100644
index 0000000..440ebfe
--- /dev/null
+++ b/src/views/Compare/Dashboard/index.vue
@@ -0,0 +1,643 @@
+<template>
+  <main class="h-screen-main relative">
+    <div class="h-full relative bg-neutral-50">
+      <div class="flex justify-start items-start p-4 h-full">
+        <!-- tag -->
+        <aside class="border-r border-neutral-300 pr-4 mr-4 h-full sticky top-0 self-start">
+          <section class="px-2 space-y-2 w-56 h-full">
+            <div>
+              <p class="h2 text-base">Time Usage</p>
+              <ul class="list-disc list-inside text-sm leading-5 pl-3">
+                <li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
+              </ul>
+            </div>
+            <div>
+              <p class="h2 text-base">Frequency</p>
+              <ul class="list-disc list-inside text-sm leading-5 pl-3">
+                <li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}" @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">{{ item.label }}</a></li>
+              </ul>
+            </div>
+          </section>
+        </aside>
+        <!-- graph -->
+        <article class="w-full h-full overflow-x-hidden overflow-y-auto scrollbar scroll-smooth">
+          <section>
+            <p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">schedule</span>Time Usage</p>
+          </section>
+          <section>
+            <ul class="list-disc list-inside px-4 pl-7">
+              <li id="cycleTime" class="scroll-smooth">
+                <span class="inline-block py-4">Cycle Efficiency</span>
+                <ul>
+                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgCycleEfficiency.title }}</span>
+                    <Chart type="bar" :data="avgCycleEfficiencyData" :options="avgCycleEfficiencyOptions" class="h-96" />
+                  </li>
+                </ul>
+              </li>
+              <li id="processingTime">
+                <span class="inline-block py-4">Processing Time</span>
+                <ul>
+                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTime.title }}</span>
+                    <Chart type="line" :data="avgProcessTimeData" :options="avgProcessTimeOptions" class="h-96" />
+                  </li>
+                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgProcessTimeByTask.title }}</span>
+                    <Chart type="bar" :data="avgProcessTimeByTaskData" :options="avgProcessTimeByTaskOptions" class="h-[500px]" :style="{ height: avgProcessTimeByTaskHeight }"/>
+                  </li>
+                </ul>
+              </li>
+              <li id="waitingTime">
+                <span class="inline-block py-4">Waiting Time</span>
+                <ul>
+                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTime.title }}</span>
+                    <Chart type="line" :data="avgWaitingTimeData" :options="avgWaitingTimeOptions" class="h-96" />
+                  </li>
+                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}</span>
+                    <Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </section>
+          <section>
+            <p class="h2 px-4 border-b border-neutral-900"><span class="material-symbols-outlined mr-2 align-middle">moving</span>Frequency</p>
+            <ul class="list-disc list-inside px-4 pl-7">
+              <li id="cases">
+                <span class="inline-block py-4">Number of Cases</span>
+                <ul>
+                  <li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
+                    <Chart type="line" :data="freqData" :options="freqOptions" class="h-96" />
+                  </li>
+                  <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
+                    <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.casesByTask.title }}</span>
+                    <Chart type="bar" :data="casesByTaskData" :options="casesByTaskOptions" :style="{ height: casesByTaskHeight }" class="h-[500px]"/>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </section>
+        </article>
+      </div>
+    </div>
+    <!-- <StatusBar></StatusBar> -->
+  </main>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+import PerformanceStore from '@/stores/performance.js';
+// import StatusBar from '@/components/Discover/StatusBar.vue';
+import { setLineChartData } from '@/module/setChartData.js';
+import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
+import { compareDashboardData } from '@/views/Compare/Dashboard/data.js';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const performanceStore = PerformanceStore();
+    const { isLoading } = storeToRefs(loadingStore);
+    const { performanceData } = storeToRefs(performanceStore);
+
+    return { isLoading, performanceStore, performanceData }
+  },
+  // components: {
+  //   StatusBar,
+  // },
+  data() {
+    return {
+      timeUsageData: [
+        {tagId: '#cycleTime', label: 'Cycle Efficiency'},
+        {tagId: '#processingTime', label: 'Processing Time'},
+        {tagId: '#waitingTime', label: 'Waiting Time'},
+      ],
+      frequencyData: [
+        {tagId: '#cases', label: 'Number of Cases'},
+        // {tagId: '#trace', label: 'Number of Trace'},
+        // {tagId: '#resource', label: 'Resource'},
+      ],
+      contentData: {
+        avgCycleEfficiency: {title: 'Cycle Efficiency', x: 'Date', y: 'Cycle efficiency (%)'},
+        avgProcessTime: {title: 'Average Processing Time', x: 'Date', y: 'Processing time'},
+        avgProcessTimeByTask: {title: 'Average Processing Time by Activity', x: 'Processing time', y: 'Activity'},
+        avgWaitingTime: {title: 'Average Waiting Time', x: 'Date', y: 'Waiting time'},
+        avgWaitingTimeByEdge: {title: 'Average Waiting Time by Activity', x: 'Waiting time', y: 'Activity'},
+        freq: {title: 'New Cases', x: 'Date', y: 'Count'},
+        casesByTask: {title: 'Number of Cases by Activity', x: 'Times', y: 'Activity'},
+      },
+      isActive: null,
+      avgCycleTimeData: null,
+      avgCycleTimeOptions: null,
+      avgCycleEfficiencyData: null,
+      avgCycleEfficiencyOptions: null,
+      avgProcessTimeData: null,
+      avgProcessTimeOptions: null,
+      avgProcessTimeByTaskData: null,
+      avgProcessTimeByTaskOptions: null,
+      avgWaitingTimeData: null,
+      avgWaitingTimeOptions: null,
+      avgWaitingTimeByEdgeData: null,
+      avgWaitingTimeByEdgeOptions: null,
+      freqData: null,
+      freqOptions: null,
+      casesByTaskData: null,
+      casesByTaskOptions: null,
+      horizontalBarHeight: 500, // horizontal Bar default height
+      avgProcessTimeByTaskHeight: 500,
+      avgWaitingTimeByEdgeHeight: 500,
+      casesByTaskHeight: 500,
+      colorPrimary: '#0099FF',
+      colorSecondary: '#FFAA44',
+    }
+  },
+  methods: {
+    xLabelsData(valueData) {
+      let min = new Date(valueData.min).getTime();
+      let max = new Date(valueData.max).getTime();
+      let numPoints = 12;
+      let step = (max - min) / (numPoints - 1);
+      let data = [];
+      for(let i = 0; i< numPoints; i++) {
+        const x = min + i * step;
+        data.push(x);
+      }
+      return data;
+    },
+    getHorizontalBarHeight(chartData) {
+      const totalBars = chartData.x_axis.labels.length;
+      let horizontalBar = this.horizontalBarHeight;
+
+      if(totalBars > 10) horizontalBar = (totalBars - 10) * 16 * 2 + this.horizontalBarHeight;
+
+      return horizontalBar + 'px'
+    },
+    getLineChart(chartData, content) {
+      let datasetsPrimary = setLineChartData(chartData.data[0].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
+      let datasetsSecondary = setLineChartData(chartData.data[1].data, chartData.x_axis.max, chartData.x_axis.min, false, chartData.y_axis.max, chartData.y_axis.min);
+      let minX = chartData.x_axis.min;
+      let maxX = chartData.x_axis.max;
+      let maxY = chartData.y_axis.max;
+      let xData = this.xLabelsData(chartData.x_axis)
+      let labelPrimary = chartData.data[0].label;
+      let labelSecondary = chartData.data[1].label;
+      let setData = {};
+      let setOption = {};
+      const getMoment = (time)=> {
+        return this.$moment(time).format('YYYY/M/D hh:mm:ss')
+      };
+      const getSimpleTimeLabel = simpleTimeLabel;
+      const getFollowTimeLabel = followTimeLabel;
+
+      setData = {
+        labels: xData,
+        datasets: [
+          {
+            label: labelPrimary,
+            data: datasetsPrimary,
+            fill: false,
+            tension: 0, // 貝茲曲線張力
+            borderColor: this.colorPrimary,
+            pointBackgroundColor: this.colorPrimary,
+          },
+          {
+            label: labelSecondary,
+            data: datasetsSecondary,
+            fill: false,
+            tension: 0, // 貝茲曲線張力
+            borderColor: this.colorSecondary,
+            pointBackgroundColor: this.colorSecondary,
+          }
+        ]
+      };
+      setOption = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        plugins: {
+          legend: false, // 圖例
+          tooltip: {
+            // displayColors: false,
+            mode: 'index',
+            titleFont: {weight: 'normal'},
+            callbacks: {
+              title: function(context) {
+                return `${content.x}: ${getMoment(context[0].parsed.x)}`;
+              },
+              label: function(context) {
+                let value = getSimpleTimeLabel(context.parsed.y, 2);
+
+                switch (context.datasetIndex) {
+                  case 0: // Primary
+                    return `${labelPrimary}: ${value}`;
+                  case 1: // Secondary
+                    return `${labelSecondary}: ${value}`;
+                }
+              }
+            },
+          },
+          title: {
+            display: false,
+          },
+        },
+        scales: {
+          x: {
+            type: 'time',
+            min: minX,
+            max: maxX,
+            title: {
+              display: true,
+              text: content.x,
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              }
+            },
+            time: {
+              displayFormats: {
+                day: 'yyyy/M/d'
+              }
+            },
+            ticks: {
+              display: true,
+              maxRotation: 0, // 不旋轉 lable 0~50
+              color: '#64748b',
+              source: 'labels', // 依比例彈性顯示 label 數量
+            },
+            border: {
+              color: '#64748b',
+            },
+          },
+          y: {
+            beginAtZero: true, // scale 包含 0
+            title: {
+              display: true,
+              text: content.y,
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              },
+            },
+            ticks:{
+              color: '#64748b',
+              padding: 8,
+              callback: function (value, index, ticks) {
+                return getFollowTimeLabel(value, maxY, 1)
+              }
+            },
+            grid: {
+              color: '#64748b',
+            },
+            border: {
+              display: false, // 隱藏左側多出來的線
+            },
+          },
+        },
+      };
+
+      return [setData, setOption]
+    },
+    getBarChart(chartData, content) {
+      const maxX = chartData.x_axis.max;
+      const minX = chartData.x_axis.min;
+      const getMoment = (time)=> this.$moment(time).format('YYYY/M/D hh:mm:ss');
+      const getDateLabel = dateLabel;
+      let datasetsPrimary = chartData.data[0].data;
+      let xDataPrimary;
+      let yDataPrimary;
+      let labelPrimary = chartData.data[0].label;
+      let datasetsSecondary = chartData.data[1].data;
+      let xDataSecondary;
+      let yDataSecondary;
+      let labelSecondary = chartData.data[1].label;
+      let setData = {};
+      let setOption = {};
+
+      // 轉為百分比
+      datasetsPrimary = datasetsPrimary.map(value => {
+        return {
+          x: getMoment(value.x),
+          y: value.y === null ? null : value.y * 100
+        }
+      });
+      xDataPrimary = datasetsPrimary.map(i => i.x);
+      yDataPrimary = datasetsPrimary.map(i => i.y);
+      datasetsSecondary = datasetsSecondary.map(value => {
+        return {
+          x: getMoment(value.x),
+          y: value.y === null ? null : value.y * 100
+        }
+      });
+      xDataSecondary = datasetsSecondary.map(i => i.x);
+      yDataSecondary = datasetsSecondary.map(i => i.y);
+
+      setData = {
+        labels: xDataPrimary,
+        datasets: [
+          {
+            label: labelPrimary,
+            data: yDataPrimary,
+            backgroundColor: this.colorPrimary,
+          },
+          {
+            label: labelSecondary,
+            data: yDataSecondary,
+            backgroundColor: this.colorSecondary,
+          },
+        ]
+      };
+      setOption = {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        interaction: {
+          intersect: false,
+          mode: 'index', // 可顯示全部的 data label
+        },
+        plugins: {
+          legend: false, // 圖例
+          tooltip: {
+            // displayColors: false,
+            titleFont: {weight: 'normal'},
+            callbacks: {
+              title: function(context) {
+                return `${content.x}: ${context[0].label}`;
+              },
+              label: function(context) {
+                let value = context.parsed.y;
+
+                value = context.parsed.y === 0 ? 0 :
+                    context.parsed.y === null ? "n/a" :
+                    context.parsed.y.toFixed(2);
+                switch (context.datasetIndex) {
+                  case 0: // Primary
+                    return `${labelPrimary}: ${value}`;
+                  case 1: // Secondary
+                    return `${labelSecondary}: ${value}`;
+                }
+              }
+            },
+          },
+          title: {
+            display: false,
+          },
+        },
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: content.x,
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              }
+            },
+            ticks: {
+              display: true,
+              color: '#64748b',
+              callback: function(v, i, t) {
+                let label = xDataPrimary[i]
+                return getDateLabel(label, maxX, minX)
+              },
+            },
+            border: {
+              color: '#64748b',
+            },
+
+          },
+          y: {
+            beginAtZero: true, // scale 包含 0
+            title: {
+              display: true,
+              text: content.y,
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              },
+            },
+            ticks:{
+              color: '#64748b',
+              padding: 8,
+            },
+            grid: {
+              color: '#64748b',
+            },
+            border: {
+              display: false, // 隱藏左側多出來的線
+            },
+          },
+        },
+      };
+
+      return [setData, setOption]
+    },
+    getHorizontalBarChart(chartData, content, isSingle) {
+      const maxY = chartData.y_axis.max;
+      const getSimpleTimeLabel = simpleTimeLabel;
+      const getFollowTimeLabel = followTimeLabel;
+      const labelPrimary = chartData.data[0].label;
+      const labelSecondary = chartData.data[1].label;
+      let setData = {};
+      let setOption = {};
+
+      // 大到小排序: Primary 為主
+      const datasetsPrimary = chartData.data[0].data;
+      const datasetsSecondary = chartData.data[1].data;
+      datasetsPrimary.sort((a, b) => b.y - a.y);
+      datasetsSecondary.sort((a, b) => {
+          // Find the index of a.x in data1
+          let indexA = datasetsPrimary.findIndex(item => item.x === a.x);
+          // Find the index of b.x in data1
+          let indexB = datasetsPrimary.findIndex(item => item.x === b.x);
+
+          // Compare the indexes
+          return indexA - indexB;
+      });
+
+      // 找出排序後，分別拉出 x, y Data
+      const xData = datasetsPrimary.map(item => item.x);
+      const yDataPrimary = datasetsPrimary.map(item => item.y);
+      const yDataSecondary = datasetsSecondary.map(item => item.y);
+
+      setData = {
+        labels: xData,
+        datasets: [
+          {
+            label: labelPrimary,
+            data: yDataPrimary,
+            backgroundColor: this.colorPrimary,
+          },
+          {
+            label: labelSecondary,
+            data: yDataSecondary,
+            backgroundColor: this.colorSecondary,
+          },
+        ]
+      };
+      setOption = {
+        indexAxis: 'y',
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 16,
+            left: 8,
+            right: 8,
+          }
+        },
+        plugins: {
+          legend: false, // 圖例
+          tooltip: {
+            // displayColors: false,
+            mode: 'index', // 可顯示全部的 data label
+            titleFont: {weight: 'normal'},
+            callbacks: {
+              label: function(context) {
+                let value = context.parsed.y;
+
+                value = context.parsed.x === null ? "n/a" : getSimpleTimeLabel(context.parsed.x, 2);
+                switch (context.datasetIndex) {
+                  case 0: // Primary
+                    return `${labelPrimary}: ${value}`;
+                  case 1: // Secondary
+                    return `${labelSecondary}: ${value}`;
+                }
+              }
+            },
+          },
+          title: {
+            display: false,
+          },
+        },
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: content.x,
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              }
+            },
+            ticks: {
+              display: true,
+              maxRotation: 0, // 不旋轉 lable 0~50
+              color: '#64748b',
+              callback: function (value, index, ticks) {
+                return getFollowTimeLabel(value, maxY, 1)
+              }
+            },
+            grid: {
+              color: '#64748b',
+            },
+            border: {
+              display:false,
+            },
+          },
+          y: {
+            beginAtZero: true, // scale 包含 0
+            type: 'category',
+            title: {
+              display: true,
+              text: content.y,
+              color: '#334155',
+              font: {
+                size: 12,
+                lineHeight: 2
+              },
+            },
+            ticks:{
+              color: '#64748b',
+              padding: 8,
+            },
+            grid: {
+              display:false,
+              color: '#64748b',
+            },
+            border: {
+              display: false, // 隱藏左側多出來的線
+            },
+          },
+        },
+      };
+      if(isSingle) { // 設定一個活動的 y label、提示框文字
+        setOption.plugins.tooltip.callbacks.title = function(context) {
+          return `${content.y}: ${context[0].label}`;
+        };
+        setOption.scales.y.ticks.callback = function (value, index, ticks) {
+          let label = xData[index];
+          return label.length > 21 ? `${label.substring(0, 18)}...` : label
+        };
+      }else { // 設定「活動」到「活動」的 y label、提示框文字
+        setOption.plugins.tooltip.callbacks.title = function(context) {
+          return `${content.y}: ${context[0].label.replace(',', ' - ')}`
+        };
+        setOption.scales.y.ticks.callback = function (value, index, ticks) {
+          let label = xData[index];
+          let labelStart = label[0];
+          let labelEnd = label[1];
+
+          labelStart = labelStart.length > 10 ? `${labelStart.substring(0,7)}...` : labelStart;
+          labelEnd = labelEnd.length > 10 ? `${labelEnd.substring(0,7)}...` : labelEnd;
+          return labelStart + " - " + labelEnd
+        };
+      }
+
+      return [setData, setOption]
+    },
+  },
+  async created() {
+    this.isLoading = true; // moubeted 才停止 loading
+    // log: 695977238 ; filter: 746150051
+    // [{"log_id":695977238},{"filter_id":746150051}]
+    // 要判斷資料有無 null,問貓貓是哪個階層 null?
+    //  Activity 會有 0, null 的組合嗎?
+
+    // const routeParams = this.$route.params;
+    // console.log(routeParams);
+    // let id = routeParams.fileId;
+    // let type = routeParams.type;
+
+    // // 取得 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);
+    // 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);
+    // 停止 loading
+    this.isLoading = false;
+  },
+}
+</script>
+<style scoped>
+.active {
+  @apply text-primary
+}
+</style>
diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index a855623..f8cf5c9 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -542,7 +542,6 @@ export default {
   async created() {
     this.isLoading = true; // moubeted 才停止 loading
     const routeParams = this.$route.params;
-    console.log(routeParams);
     let id = routeParams.fileId;
     let type = routeParams.type;