Discover: cy node label set done

src/main.js

@@ -21,6 +21,7 @@ pinia.use(({ store }) => {
   store.$router = markRaw(router);
   store.$axios = markRaw(axios);
   store.$toast = markRaw(ToastPlugin);
+  store.$http = app.$http;
 });
 
 // can use `this.$moment` in Vue.js

src/stores/files.js

@@ -61,6 +61,7 @@ export default defineStore('filesStore', {
      */
     async fetchEventLog() {
       const api = '/api/logs';
+      // console.log(this);
 
       try {
         const response = await axios.get(api);

src/views/Discover/index.vue

@@ -13,6 +13,12 @@
       <li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="curveStyle = 'unbundled-bezier'">unbundled-bezier</li>
       <li class="p-2">curve style: {{ curveStyle }}</li>
     </ul>
+    <!-- 直向 TB | 橫向 LR -->
+    <ul class="m-3 flex">
+      <li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="rank = 'LR'">LR</li>
+      <li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="rank = 'TB'">TB</li>
+      <li class="p-2">rank: {{ rank }}</li>
+    </ul>
     <!-- Data Layer type -->
     <ul class="m-3" @change="switchDataLayerType($event)">
       <li class="flex mb-3">
@@ -100,7 +106,8 @@ export default {
       curveStyle:'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier
       mapType: 'processMap', // processMap | bpmn
       dataLayerType: 'freq', // freq | duration
-      dataLayerOption: 'total'
+      dataLayerOption: 'total',
+      rank: 'LR' // 直向 TB | 橫向 LR
     }
   },
   methods: {
@@ -109,7 +116,7 @@ export default {
       else if(e.target.type === 'select-one') this.dataLayerOption = e.target.value;
     },
     /**
-     * 設定每個 node, edges
+     * 設定每個 node, edges 的樣式
      */
     createColorGradient() {
       let gradientArray = [];
@@ -306,7 +313,7 @@ export default {
         },
         layout: {
           name: 'klay',
-          rankDir: 'LR' // 直向 TB | 橫向 LR
+          rankDir: this.rank, // 直向 TB | 橫向 LR
         },
         style: [
           // 點擊 node 後改變的樣式
@@ -323,54 +330,40 @@ export default {
             style: {
               'label': // 節點要顯示的文字
               function(node) {
+                // node.data(this.dataLayerType+"."+this.dataLayerOption) 為原先陣列 node.data.key.value
+                let optionValue = node.data(`${this.dataLayerType}.${this.dataLayerOption}`);
                 let text = '';
 
-                // 文字超過 10 字尾巴要加「...」，style 要空一行(\n 換行符號)
+                // 文字超過 10 字尾巴要加「...」，style 要換兩行(\n 換行符號)
-                text = node.data.label.length > 10 ? `${node.data.label.substr(0,10)}...\n\n` : `${node.data("label")}`;
+                // 使用 data() 是因為在 cytoscape 中從陣列轉為 function
+                text = node.data('label').length > 10 ? `${node.data('label').substr(0, 10)}...\n\n` : `${node.data('label')}\n\n`;
 
-                switch (node.data.type) {
+                // 在 element 中 activity 歸類在 default，所以要先判斷 node 是否為 activeity 才裝入文字。
-                  case 'activity':
+                // Relative 要轉為百分比 %
+                if(node.data('type') === 'activity') {
+                  switch(this.dataLayerType) {
+                    case 'freq': // Frequency
+                      let textInt = this.dataLayerOption === 'rel_freq' ? text + optionValue * 100 + "%" : text + optionValue;
+                      let textFloat = this.dataLayerOption === 'rel_freq'? text + (optionValue * 100).toFixed(2) + "%" : text + optionValue.toFixed(2);
 
-                    break;
+                      // 判斷是否為整數，若非整數要取小數點後面兩個值。
+                      text = Math.trunc(optionValue) === optionValue ? textInt : textFloat;
+                      break;
 
-                  default:
+                    case 'duration': // Duration 除了 Relative 為百分比 % ，其他要轉變時間單位。
-                    break;
+                      // Relative %
-                }
+                      let textDurRel = text + (optionValue * 100).toFixed(2) + "%";
-                if(node.data.type === 'activity'){
+                      // Timelabel
-                    if(key == "duration"){ //Duration
+                      let timeLabelInt = text + TimeLabel(optionValue);
-                        if(value == "rel_duration"){ // %
+                      let timeLabelFloat = text + TimeLabel(optionValue).toFixed(2);
-                            text = text + (parseFloat(node.data(key+"."+value))*100).toFixed(2) + "%"
+                      let textTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
-                        }
+
-                        else{ //Timelabel
+                      text = this.dataLayerOption === 'rel_duration' ? textDurRel : textTimeLabel;
-                            if(parseInt(node.data(key+"."+value))==node.data(key+"."+value)){ //Int
+                      break;
-                                text = text + TimeLabel(node.data(key+"."+value))
-                            }
-                            else{//Float
-                                text = text + TimeLabel(node.data(key+"."+value).toFixed(2))
-                            }
-                        }
-                    }
-                    else{ // Freq
-                        if(parseInt(node.data(key+"."+value))==node.data(key+"."+value)){ //Int
-                            if(value == "rel_freq"){
-                                text = text + node.data(key+"."+value)*100 + "%"
-                            }
-                            else{
-                                text = text + node.data(key+"."+value)
-                            }
-                        }
-                        else{ //Float
-                            if(value == "rel_freq"){
-                                text = text + (parseFloat(node.data(key+"."+value))*100).toFixed(2) + "%"
-                            }
-                            else{
-                                text = text + parseFloat(node.data(key+"."+value)).toFixed(2)
-                            }
-                        }
-                    }
                   }
+                }
                   return text
-                },
+              },
               'text-opacity':0.7,
               'background-color': 'data(backgroundColor)',
               'border-color':'data(bordercolor)',