-
+
@@ -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 nodes
- // let edges
+ let graphId = document.getElementById(`${this.mapType}`);
+ let dataLayerType = this.dataLayerType;
+ 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, // 節點的資料
- edges: this.processMapData.edges, //edges, // 關係線的資料
+ nodes: nodesData, //nodes, // 節點的資料
+ 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 textFloat = this.dataLayerOption === 'rel_freq'? text + (optionValue * 100).toFixed(2) + "%" : text + optionValue.toFixed(2);
+ let textInt = dataLayerOption === 'rel_freq' ? text + optionValue * 100 + "%" : text + optionValue;
+ 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
+
+ return text
},
'text-opacity':0.7,
'background-color': 'data(backgroundColor)',
'border-color':'data(bordercolor)',
- 'border-width': function(node) {
- node.data('type') === 'activity' ? '1' : '2';
+ 'border-width':
+ 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) {
- node.data('type') === 'activity' ? 14 : 22;
+ 'font-size':
+ 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 edgeFloat = this.dataLayerOption === 'rel_freq' ? (optionValue * 100).toFixed(2) + "%" : optionValue.toFixed(2);
+ let edgeInt = dataLayerOption === 'rel_freq' ? optionValue * 100 + "%" : optionValue;
+ 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() {