Discover: cy edge style done

src/views/Discover/index.vue

@@ -328,8 +328,7 @@ 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 text = '';
@@ -339,6 +338,7 @@ export default {
                 text = node.data('label').length > 10 ? `${node.data('label').substr(0, 10)}...\n\n` : `${node.data('label')}\n\n`;
 
                 // 在 element 中 activity 歸類在 default，所以要先判斷 node 是否為 activeity 才裝入文字。
+                // 可使用 parseInt(整數) parseFloat(浮點數) 將字串轉為數字
                 // Relative 要轉為百分比 %
                 if(node.data('type') === 'activity') {
                   switch(this.dataLayerType) {
@@ -388,36 +388,30 @@ export default {
           {
             selector: 'edge',
             style: {
-              'content': function(edge) {
-                if(edge.data(key+"."+value) == ""){
-                    return edge.data(key+"."+value)
-                }
-                if(key == "duration"){ //Duration
-                    if(value == "rel_duration"){ // %
-                        return (parseFloat(edge.data(key+"."+value))*100).toFixed(2) + "%"
-                    }
-                    else{ //Timelabel
-                        if(parseInt(edge.data(key+"."+value))==edge.data(key+"."+value)){ //Int
-                            return TimeLabel(edge.data(key+"."+value))
-                        }
-                        else{//Float
-                            return TimeLabel(edge.data(key+"."+value).toFixed(2))
-                        }
-                    }
-                }
-                else{ // Freq
-                    if(parseInt(edge.data(key+"."+value))==edge.data(key+"."+value)){
-                        if(value == "rel_freq"){
-                            return edge.data(key+"."+value)*100 + "%"
-                        }
-                        return edge.data(key+"."+value)
-                    }
-                    else{
-                        if(value == "rel_freq"){
-                            return (parseFloat(edge.data(key+"."+value))*100).toFixed(2) + "%"
-                        }
-                        return parseFloat(edge.data(key+"."+value)).toFixed(2)
-                    }
+              'content': function(edge) { // 關係線顯示的文字
+                let optionValue = edge.data(`${this.dataLayerType}.${this.dataLayerOption}`);
+
+                if(optionValue === '') return optionValue;
+
+                switch(this.dataLayerType) {
+                  case 'freq':
+                    let edgeInt = this.dataLayerOption === 'rel_freq' ? optionValue * 100 + "%" : optionValue;
+                    let edgeFloat = this.dataLayerOption === 'rel_freq' ? (optionValue * 100).toFixed(2) + "%" : optionValue.toFixed(2);
+
+                    // 判斷是否為整數，若非整數要取小數點後面兩個值。
+                    Math.trunc(optionValue) === optionValue ? edgeRelInt : edgeFloat;
+                    break;
+
+                  case 'duration': // Duration 除了 Relative 為百分比 % ，其他要轉變時間單位。
+                    // Relative %
+                    let edgeDurRel = (optionValue * 100).toFixed(2) + "%";
+                    // Timelabel
+                    let timeLabelInt = TimeLabel(optionValue);
+                    let timeLabelFloat = TimeLabel(optionValue).toFixed(2);
+                    let edgeTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
+
+                    text = this.dataLayerOption === 'rel_duration' ? edgeDurRel : edgeTimeLabel;
+                    break;
                 }
               },
               'curve-style': 'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier