imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cyroscape map done

Browse Source
This commit is contained in:
chiayin
2023-03-01 09:25:24 +08:00
parent 7e4d7b1e1f
commit cf2ec242aa
2 changed files with 72 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/module/timeLabel.js Normal file
View File

@@ -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"
}

74
src/views/Discover/index.vue
View File

@@ -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 :id="mapType" v-show="mapType"></div>
<div class="min-w-full min-h-screen">
<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 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() {