cyroscape map done

src/module/timeLabel.js

@@ -0,0 +1,26 @@
+/**
+ * 將秒數轉換成帶有時間單位的格式
+ * @param   {number} Second
+ * @returns {string}        轉換完的格式(ex: 1 day, 6.8 hrs)
+ */
+export default function TimeLabel(Second) {
+  var day = 24 * 60 * 60
+  var hour = 60 * 60
+  var minutes = 60
+  var dd = Math.floor(Second / day)
+  var hh = Math.floor((Second % day) / hour)
+  var mm = Math.floor((Second % hour) / minutes)
+  if(dd > 0){
+      return dd + " days"
+  }
+  else if(hh > 0){
+      return hh + " hrs"
+  }
+  else if(mm > 0){
+      return mm + " mins"
+  }
+  if(Second == 0){
+      return Second + " sec"
+  }
+  return Second + " secs"
+}

src/views/Discover/index.vue

@@ -47,8 +47,8 @@
       <li class="mb-3">Data Layer Option: {{ dataLayerOption }}</li>
     </ul>
   </div>
-  <div class="flex min-w-full min-h-screen">
+  <div class="min-w-full min-h-screen">
-    <div :id="mapType" v-show="mapType"></div>
+    <div :id="mapType" class="min-w-full min-h-screen border"></div>
   </div>
 </template>
 
@@ -57,6 +57,7 @@ import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import Gradient from 'javascript-color-gradient'; // 多個色階產生器
+import TimeLabel from '@/module/timeLabel.js'; // 時間格式轉換器
 
 export default {
   setup() {
@@ -111,12 +112,16 @@ export default {
     }
   },
   methods: {
+    /**
+     * switch Data Layoer Type or Option.
+     * @param {string} e
+     */
     switchDataLayerType(e){
       if(e.target.type === 'radio') this.dataLayerType = e.target.value;
       else if(e.target.type === 'select-one') this.dataLayerOption = e.target.value;
     },
     /**
-     * 設定每個 node, edges 的樣式
+     * 設定每個 node, edges 的顏色與樣式
      */
     createColorGradient() {
       let gradientArray = [];
@@ -301,19 +306,25 @@ export default {
      * create and setting cytoscape
      */
     createCytoscape() {
-      let graphId = document.getElementById('cyto');
+      let graphId = document.getElementById(`${this.mapType}`);
-      // let nodes
+      let dataLayerType = this.dataLayerType;
-      // let edges
+      let dataLayerOption = this.dataLayerOption;
+      let nodesData = this.processMapData.nodes;
+      let edgesData = this.processMapData.edges;
+      let rank = this.rank;
+      console.log(nodesData);
+      console.log(edgesData);
+      console.log(rank);
 
       let cy = this.$cytoscape({
         container: graphId,
         elements: {
-          nodes: this.processMapData.nodes, //nodes, // 節點的資料
+          nodes: nodesData, //nodes, // 節點的資料
-          edges: this.processMapData.edges, //edges, // 關係線的資料
+          edges: edgesData, //edges, // 關係線的資料
         },
         layout: {
           name: 'klay',
-          rankDir: this.rank, // 直向 TB | 橫向 LR
+          rankDir: rank, // 直向 TB | 橫向 LR
         },
         style: [
           // 點擊 node 後改變的樣式
@@ -328,9 +339,10 @@ export default {
           {
             selector: 'node',
             style: {
-              'label': function(node) { // 節點要顯示的文字
+              'label':
+              function(node) { // 節點要顯示的文字
                 // node.data(this.dataLayerType+"."+this.dataLayerOption) 為原先陣列 node.data.key.value
-                let optionValue = node.data(`${this.dataLayerType}.${this.dataLayerOption}`);
+                let optionValue = node.data(`${dataLayerType}.${dataLayerOption}`);
                 let text = '';
 
                 // 文字超過 10 字尾巴要加「...」，style 要換兩行(\n 換行符號)
@@ -341,10 +353,10 @@ export default {
                 // 可使用 parseInt(整數) parseFloat(浮點數) 將字串轉為數字
                 // Relative 要轉為百分比 %
                 if(node.data('type') === 'activity') {
-                  switch(this.dataLayerType) {
+                  switch(dataLayerType) {
                     case 'freq': // Frequency
-                      let textInt = this.dataLayerOption === 'rel_freq' ? text + optionValue * 100 + "%" : text + optionValue;
+                      let textInt = dataLayerOption === 'rel_freq' ? text + optionValue * 100 + "%" : text + optionValue;
-                      let textFloat = this.dataLayerOption === 'rel_freq'? text + (optionValue * 100).toFixed(2) + "%" : text + optionValue.toFixed(2);
+                      let textFloat = dataLayerOption === 'rel_freq'? text + (optionValue * 100).toFixed(2) + "%" : text + optionValue.toFixed(2);
 
                       // 判斷是否為整數，若非整數要取小數點後面兩個值。
                       text = Math.trunc(optionValue) === optionValue ? textInt : textFloat;
@@ -358,17 +370,19 @@ export default {
                       let timeLabelFloat = text + TimeLabel(optionValue).toFixed(2);
                       let textTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
 
-                      text = this.dataLayerOption === 'rel_duration' ? textDurRel : textTimeLabel;
+                      text = dataLayerOption === 'rel_duration' ? textDurRel : textTimeLabel;
                       break;
                   }
                 }
+
                 return text
               },
               'text-opacity':0.7,
               'background-color': 'data(backgroundColor)',
               'border-color':'data(bordercolor)',
-              'border-width': function(node) {
+              'border-width':
-                node.data('type') === 'activity' ? '1' : '2';
+              function(node) {
+                return node.data('type') === 'activity' ? '1' : '2';
               },
               //'border-radius': '5',
               'shape':'data(shape)',
@@ -379,8 +393,9 @@ export default {
               'height': 'data(height)',
               'width': 'data(width)',
               'color': '#001933',
-              'font-size':function(node) {
+              'font-size':
-                node.data('type') === 'activity' ? 14 : 22;
+              function(node) {
+                return node.data('type') === 'activity' ? 14 : 22;
               },
             },
           },
@@ -389,17 +404,18 @@ export default {
             selector: 'edge',
             style: {
               'content': function(edge) { // 關係線顯示的文字
-                let optionValue = edge.data(`${this.dataLayerType}.${this.dataLayerOption}`);
+                let optionValue = edge.data(`${dataLayerType}.${dataLayerOption}`);
+                let result = '';
 
                 if(optionValue === '') return optionValue;
 
-                switch(this.dataLayerType) {
+                switch(dataLayerType) {
                   case 'freq':
-                    let edgeInt = this.dataLayerOption === 'rel_freq' ? optionValue * 100 + "%" : optionValue;
+                    let edgeInt = dataLayerOption === 'rel_freq' ? optionValue * 100 + "%" : optionValue;
-                    let edgeFloat = this.dataLayerOption === 'rel_freq' ? (optionValue * 100).toFixed(2) + "%" : optionValue.toFixed(2);
+                    let edgeFloat = dataLayerOption === 'rel_freq' ? (optionValue * 100).toFixed(2) + "%" : optionValue.toFixed(2);
 
                     // 判斷是否為整數，若非整數要取小數點後面兩個值。
-                    Math.trunc(optionValue) === optionValue ? edgeRelInt : edgeFloat;
+                    result = Math.trunc(optionValue) === optionValue ? edgeInt : edgeFloat;
                     break;
 
                   case 'duration': // Duration 除了 Relative 為百分比 % ，其他要轉變時間單位。
@@ -410,9 +426,10 @@ export default {
                     let timeLabelFloat = TimeLabel(optionValue).toFixed(2);
                     let edgeTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
 
-                    text = this.dataLayerOption === 'rel_duration' ? edgeDurRel : edgeTimeLabel;
+                    result = dataLayerOption === 'rel_duration' ? edgeDurRel : edgeTimeLabel;
                     break;
-                }
+                };
+                return result;
               },
               'curve-style': 'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier
               'target-arrow-shape': 'triangle', // 指向目標的箭頭形狀: 三角形
@@ -433,8 +450,9 @@ export default {
       await this.allMapDataStore.getAllMapData();
       this.setNodesData();
       this.setEdgesData();
-      // this.drawMap();
       this.createColorGradient();
+      this.createCytoscape();
+      // this.drawMap();
     }
   },
   created() {