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

Discover: cy node label set done

Browse Source
This commit is contained in:
chiayin
2023-02-25 19:38:18 +08:00
parent 88aaf85922
commit 6fdeb3898f
3 changed files with 39 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main.js
View File

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

1
src/stores/files.js
View File

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

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

@@ -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 換行符號)
text = node.data.label.length > 10 ? `${node.data.label.substr(0,10)}...\n\n` : `${node.data("label")}`;
// 文字超過 10 字尾巴要加「...」，style 要換兩行(\n 換行符號)
// 使用 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) {
case 'activity':
// 在 element 中 activity 歸類在 default，所以要先判斷 node 是否為 activeity 才裝入文字。
// 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:
break;
}
if(node.data.type === 'activity'){
if(key == "duration"){ //Duration
if(value == "rel_duration"){ // %
text = text + (parseFloat(node.data(key+"."+value))*100).toFixed(2) + "%"
}
else{ //Timelabel
if(parseInt(node.data(key+"."+value))==node.data(key+"."+value)){ //Int
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)
}
}
}
case 'duration': // Duration 除了 Relative 為百分比 % ，其他要轉變時間單位。
// Relative %
let textDurRel = text + (optionValue * 100).toFixed(2) + "%";
// Timelabel
let timeLabelInt = text + TimeLabel(optionValue);
let timeLabelFloat = text + TimeLabel(optionValue).toFixed(2);
let textTimeLabel = Math.trunc(optionValue) === optionValue ? timeLabelInt : timeLabelFloat;
text = this.dataLayerOption === 'rel_duration' ? textDurRel : textTimeLabel;
break;
}
}
return text
},
},
'text-opacity':0.7,
'background-color': 'data(backgroundColor)',
'border-color':'data(bordercolor)',