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

Migrate all Vue components from Options API to <script setup>

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
依瑪貓
2026-03-06 17:10:06 +08:00
parent a619be7881
commit 3b7b6ae859
61 changed files with 10835 additions and 11750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/views/Discover/Conformance/index.vue
View File

@@ -8,95 +8,13 @@
</main>
</template>
<script>
import { storeToRefs } from 'pinia';
import { useLoadingStore } from '@/stores/loading';
import { useConformanceStore } from '@/stores/conformance';
import StatusBar from '@/components/Discover/StatusBar.vue';
import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
export default {
setup() {
const loadingStore = useLoadingStore();
const conformanceStore = useConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence,
selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData,
conformanceTempReportData, conformanceFileName,
} = storeToRefs(conformanceStore);
return { isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType,
selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo,
conformanceRuleData, conformanceTempReportData, conformanceFileName
};
},
components: {
StatusBar,
ConformanceResults,
ConformanceSidebar,
},
async created() {
this.isLoading = true;
const params = this.$route.params;
const file = this.$route.meta.file;
const isCheckPage = this.$route.name.includes('Check');
if(!isCheckPage) {
switch (params.type) {
case 'log': // FILES page 來的 log
this.conformanceLogId = params.fileId;
break;
case 'filter': // FILES page 來的 filter
this.conformanceFilterId = params.fileId;
break;
}
} else {
switch (params.type) {
case 'log': // FILES page 來的已存檔 rule(log-check)
this.conformanceLogId = file.parent.id;
this.conformanceFileName = file.name;
break;
case 'filter': // FILES page 來的已存檔 rule(filter-check)
this.conformanceFilterId = file.parent.id;
this.conformanceFileName = file.name;
break;
}
await this.conformanceStore.getConformanceReport();
}
await this.conformanceStore.getConformanceParams();
// 給 rule 檔取得 ShowBar 一些時間
setTimeout(() => this.isLoading = false, 500);
},
mounted() {
this.selectedRuleType = 'Have activity';
this.selectedActivitySequence = 'Start & End';
this.selectedMode = 'Directly follows';
this.selectedProcessScope = 'End to end';
this.selectedActSeqMore = 'All';
this.selectedActSeqFromTo = 'From';
},
beforeUnmount() {
// 離開 conformance 時將 id 為 null，避免污染其他檔案
this.conformanceLogId = null;
this.conformanceFilterId = null;
this.conformanceLogCreateCheckId = null;
this.conformanceFilterCreateCheckId = null;
this.conformanceRuleData = null;
this.conformanceFileName = null;
},
async beforeRouteEnter(to, from, next) {
const isCheckPage = to.name.includes('Check');
if (isCheckPage) {
const conformanceStore = useConformanceStore();
// Save token in Headers.
// (?:^|.;\s)：匹配 "luciaToken" 之前的內容，允許它在字符串開頭或某個分號之後。
// luciaToken\s=\s**：匹配 "luciaToken="，並忽略兩邊的空格。
// ([^;]*)：捕獲 "luciaToken" 的值，直到遇到下一個分號或字符串結尾。
// .*$：匹配剩餘的字符，確保完整的提取。
// |^.*$：在找不到 "luciaToken" 的情況下，匹配整個字符串。
switch (to.params.type) {
case 'log':
conformanceStore.setConformanceLogCreateCheckId(to.params.fileId);
@@ -106,9 +24,84 @@ export default {
break;
}
await conformanceStore.getConformanceReport();
to.meta.file = await conformanceStore.conformanceTempReportData?.file; // 將 file data 存到 route 給 Navbar, StatusBar 使用
to.meta.file = await conformanceStore.conformanceTempReportData?.file;
}
next();
}
}
</script>
<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useLoadingStore } from '@/stores/loading';
import { useConformanceStore } from '@/stores/conformance';
import StatusBar from '@/components/Discover/StatusBar.vue';
import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
const route = useRoute();
// Stores
const loadingStore = useLoadingStore();
const conformanceStore = useConformanceStore();
const { isLoading } = storeToRefs(loadingStore);
const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence,
selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData,
conformanceTempReportData, conformanceFileName,
} = storeToRefs(conformanceStore);
// Created logic
(async () => {
isLoading.value = true;
const params = route.params;
const file = route.meta.file;
const isCheckPage = route.name.includes('Check');
if(!isCheckPage) {
switch (params.type) {
case 'log':
conformanceLogId.value = params.fileId;
break;
case 'filter':
conformanceFilterId.value = params.fileId;
break;
}
} else {
switch (params.type) {
case 'log':
conformanceLogId.value = file.parent.id;
conformanceFileName.value = file.name;
break;
case 'filter':
conformanceFilterId.value = file.parent.id;
conformanceFileName.value = file.name;
break;
}
await conformanceStore.getConformanceReport();
}
await conformanceStore.getConformanceParams();
setTimeout(() => isLoading.value = false, 500);
})();
// Mounted
onMounted(() => {
selectedRuleType.value = 'Have activity';
selectedActivitySequence.value = 'Start & End';
selectedMode.value = 'Directly follows';
selectedProcessScope.value = 'End to end';
selectedActSeqMore.value = 'All';
selectedActSeqFromTo.value = 'From';
});
onBeforeUnmount(() => {
conformanceLogId.value = null;
conformanceFilterId.value = null;
conformanceLogCreateCheckId.value = null;
conformanceFilterCreateCheckId.value = null;
conformanceRuleData.value = null;
conformanceFileName.value = null;
});
</script>

904
src/views/Discover/Map/Map.vue
View File

@@ -1,29 +1,22 @@
<template>
<!-- Sidebar: Switch data type -->
<div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10"
:class="sidebarLeftValue ? 'bg-neutral-50' : ''">
<div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="sidebarLeftValue? 'bg-neutral-50':''">
<ul class="space-y-4 flex flex-col justify-center items-center">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
hover:border-primary" @click="sidebarView = !sidebarView" :class="{ 'border-primary': sidebarView }"
v-tooltip="tooltip.sidebarView">
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
:class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
hover:border-primary" @click="sidebarView = !sidebarView" :class="{'border-primary': sidebarView}" v-tooltip="tooltip.sidebarView">
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
track_changes
</span>
</li>
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{ 'border-primary': sidebarFilter }"
v-tooltip="tooltip.sidebarFilter">
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
:class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{'border-primary': sidebarFilter}" v-tooltip="tooltip.sidebarFilter">
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
tornado
</span>
</li>
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50
drop-shadow hover:border-primary" @click="sidebarTraces = !sidebarTraces"
:class="{ 'border-primary': sidebarTraces }" v-tooltip="tooltip.sidebarTraces">
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
:class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
drop-shadow hover:border-primary" @click="sidebarTraces = !sidebarTraces" :class="{'border-primary': sidebarTraces}" v-tooltip="tooltip.sidebarTraces">
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5" :class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
rebase
</span>
</li>
@@ -40,7 +33,7 @@
<ul class="flex flex-col justify-center items-center">
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer
bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
:class="{ 'border-primary': sidebarState }" id="iconState" v-tooltip.left="tooltip.sidebarState">
:class="{'border-primary': sidebarState}" id="iconState" v-tooltip.left="tooltip.sidebarState">
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
:class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
info
@@ -50,486 +43,19 @@
</div>
<!-- Sidebar Model -->
<SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles"
@switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType"></SidebarView>
<SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank"
@switch-data-layer-type="switchDataLayerType" ></SidebarView>
<SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
<SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesView">
</SidebarTraces>
<SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesViewRef"></SidebarTraces>
<SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
:filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
@submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRef"></SidebarFilter>
@submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRefComp"></SidebarFilter>
</template>
<script>
import { onBeforeMount, computed, } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import { useLoadingStore } from '@/stores/loading';
import { useAllMapDataStore } from '@/stores/allMapData';
import { useConformanceStore } from '@/stores/conformance';
import cytoscapeMap from '@/module/cytoscapeMap.js';
import { useCytoscapeStore } from '@/stores/cytoscapeStore';
import { useMapPathStore } from '@/stores/mapPathStore';
import SidebarView from '@/components/Discover/Map/SidebarView.vue';
import SidebarState from '@/components/Discover/Map/SidebarState.vue';
import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
import ImgCapsule1 from '@/assets/capsule1.svg';
import ImgCapsule2 from '@/assets/capsule2.svg';
import ImgCapsule3 from '@/assets/capsule3.svg';
import ImgCapsule4 from '@/assets/capsule4.svg';
const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
export default {
setup() {
const loadingStore = useLoadingStore();
const allMapDataStore = useAllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
const route = useRoute();
const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
postRuleData
} = storeToRefs(allMapDataStore);
const cytoscapeStore = useCytoscapeStore();
const { setCurrentGraphId } = cytoscapeStore;
const numberBeforeMapInRoute = computed(() => {
// 取得當前路由的路徑
const path = route.path;
// 使用斜線分割路徑
const segments = path.split('/');
// 查找包含 'map' 的片段索引
const mapIndex = segments.findIndex(segment => segment.includes('map'));
if (mapIndex > 0) {
// 定位到 'map' 片段的左邊片段
const previousSegment = segments[mapIndex - 1];
// 萃取左邊片段中的數字
const match = previousSegment.match(/\d+/);
return match ? match[0] : 'No number found';
}
return 'No map segment found';
});
onBeforeMount(() => {
setCurrentGraphId(numberBeforeMapInRoute);
});
return {
isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces,
baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe,
filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData,
ruleData, allMapDataStore, cases, postRuleData,
setCurrentGraphId,
};
},
props: ['type', 'checkType', 'checkId', 'checkFileId'], // 來自 router 的 props
components: {
SidebarView,
SidebarState,
SidebarTraces,
SidebarFilter,
},
data() {
return {
processMapData: {
startId: 0,
endId: 1,
nodes: [],
edges: [],
},
bpmnData: {
startId: 0,
endId: 1,
nodes: [],
edges: [],
},
cytoscapeGraph: null,
curveStyle: 'unbundled-bezier', // unbundled-bezier | taxi
mapType: 'processMap', // processMap | bpmn
mapPathStore: useMapPathStore(),
dataLayerType: 'freq', // freq | duration
dataLayerOption: 'total',
rank: 'LR', // 直向 TB | 橫向 LR
traceId: 1,
sidebarView: false, // SideBar: Visualization Setting
sidebarState: false, // SideBar: Summary & Insight
sidebarTraces: false, // SideBar: Traces
sidebarFilter: false, // SideBar: Filter
infiniteFirstCases: null,
startNodeId: -1,
endNodeId: -1,
tooltip: {
sidebarView: {
value: 'Visualization Setting',
class: 'ml-1',
pt: {
text: 'text-[10px] p-1'
}
},
sidebarTraces: {
value: 'Trace',
class: 'ml-1',
pt: {
text: 'text-[10px] p-1'
}
},
sidebarFilter: {
value: 'Filter',
class: 'ml-1',
pt: {
text: 'text-[10px] p-1'
}
},
sidebarState: {
value: 'Summary',
class: 'ml-1',
pt: {
text: 'text-[10px] p-1'
}
},
}
}
},
computed: {
sidebarLeftValue: function () {
const result = this.sidebarView === true || this.sidebarTraces === true || this.sidebarFilter === true;
return result;
}
},
watch: {
sidebarView: function (newValue) {
if (newValue) {
this.sidebarFilter = false;
this.sidebarTraces = false;
}
},
sidebarFilter: function (newValue) {
if (newValue) {
this.sidebarView = false;
this.sidebarState = false;
this.sidebarTraces = false;
this.sidebarState = false;
}
},
sidebarTraces: function (newValue) {
if (newValue) {
this.sidebarView = false;
this.sidebarState = false;
this.sidebarFilter = false;
this.sidebarState = false;
}
},
sidebarState: function (newValue) {
if (newValue) {
this.sidebarFilter = false;
this.sidebarTraces = false;
}
},
},
methods: {
/**
* switch map type
* @param {string} type 'processMap' | 'bpmn'，可傳入以上任一。
*/
async switchMapType(type) {
this.mapType = type;
this.createCy(type);
},
/**
* switch curve style
* @param {string} style 直角 'unbundled-bezier' | 'taxi'，可傳入以上任一。
*/
async switchCurveStyles(style) {
this.curveStyle = style;
this.createCy(this.mapType);
},
/**
* switch rank
* @param {string} rank 直向 'TB' | 橫向 'LR'，可傳入以上任一。
*/
async switchRank(rank) {
this.rank = rank;
this.createCy(this.mapType);
},
/**
* switch Data Layoer Type or Option.
* @param {string} type freq | duration
* @param {string} option 下拉選單中的選項
*/
async switchDataLayerType(type, option) {
this.dataLayerType = type;
this.dataLayerOption = option;
this.createCy(this.mapType);
},
/**
* switch trace id and data
* @param {event} e input 傳入的事件
*/
async switchTraceId(e) {
if (e.id == this.traceId) return;
// 超過 1000 筆要 loading 畫面
this.isLoading = true; // 都要 loading 畫面
this.traceId = e.id;
await this.allMapDataStore.getTraceDetail();
this.$refs.tracesView.createCy();
this.isLoading = false;
},
/**
* 將 element nodes 資料彙整
* @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。
*/
setNodesData(mapData) {
const mapType = this.mapType;
const logFreq = {
"total": "",
"rel_freq": "",
"average": "",
"median": "",
"max": "",
"min": "",
"cases": ""
};
const logDuration = {
"total": "",
"rel_duration": "",
"average": "",
"median": "",
"max": "",
"min": "",
};
// BPMN 才有 gateway 類別
const gateway = {
parallel: "+",
exclusive: "x",
inclusive: "o",
};
// 避免每次渲染都重複累加
mapData.nodes = [];
// 將 api call 回來的資料帶進 node
this[mapType].vertices.forEach(node => {
switch (node.type) {
// add type of 'bpmn gateway' node
case 'gateway':
mapData.nodes.push({
data: {
id: node.id,
type: node.type,
label: gateway[node.gateway_type],
height: 60,
width: 60,
backgroundColor: '#FFF',
bordercolor: '#003366',
shape: "diamond",
freq: logFreq,
duration: logDuration,
}
})
break;
// add type of 'event' node
case 'event':
if (node.event_type === 'start') {
mapData.startId = node.id;
this.startNodeId = node.id;
}
else if (node.event_type === 'end') {
mapData.endId = node.id;
this.endNodeId = node.id;
}
mapData.nodes.push({
data: {
id: node.id,
type: node.type,
label: node.event_type,
height: 48,
width: 48,
backgroundColor: '#FFFFFF',
bordercolor: '#0F172A',
textColor: '#FF3366',
shape: "ellipse",
freq: logFreq,
duration: logDuration,
}
});
break;
// add type of 'activity' node
default:
mapData.nodes.push({
data: {
id: node.id,
type: node.type,
label: node.label,
height: 48,
width: 216,
textColor: '#0F172A',
backgroundColor: 'rgba(0, 0, 0, 0)',
borderradius: 999,
shape: "round-rectangle",
freq: node.freq,
duration: node.duration,
backgroundOpacity: 0,
borderOpacity: 0,
}
})
break;
}
});
},
/**
* 將 element edges 資料彙整
* @param {object} type 'processMapData' | 'bpmnData'，可傳入以上任一。
*/
setEdgesData(mapData) {
const mapType = this.mapType;
//add event duration is empty
const logDuration = {
"total": "",
"rel_duration": "",
"average": "",
"median": "",
"max": "",
"min": "",
"cases": ""
};
mapData.edges = [];
this[mapType].edges.forEach(edge => {
mapData.edges.push({
data: {
source: edge.tail,
target: edge.head,
freq: edge.freq,
duration: edge.duration === null ? logDuration : edge.duration,
// Don't know why but tail is related to start and head is related to end
edgeStyle: edge.tail === this.startNodeId || edge.head === this.endNodeId ? 'dotted' : 'solid',
lineWidth: 1,
},
});
});
},
/**
* create cytoscape's map
* @param {string} type this.mapType 'processMap' | 'bpmn'，可傳入以上任一。
*/
async createCy(type) {
const graphId = document.getElementById('cy');
const mapData = type === 'processMap' ? this.processMapData : this.bpmnData;
if (this[type].vertices.length !== 0) {
this.setNodesData(mapData);
this.setEdgesData(mapData);
this.setActivityBgImage(mapData);
this.cytoscapeGraph = await cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
const processOrBPMN = this.mapType === 'processMap' ? 'process' : 'bpmn';
const curveType = this.curveStyle === 'taxi' ? 'elbow' : 'curved';
const directionType = this.rank === 'LR' ? 'horizontal' : 'vertical';
await this.mapPathStore.setCytoscape(this.cytoscapeGraph, processOrBPMN, curveType, directionType);
};
},
setActivityBgImage(mapData) {
const nodes = mapData.nodes;
// 一組有多少個activities
const groupSize = Math.floor(nodes.length / ImgCapsules.length);
let nodeOptionArr = [];
const leveledGroups = []; // 每一個level會使用不同的膠囊圖片
// 設定除了 start, end 的 node 顏色
// 找出 type activity's node
const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
// 找出除了 start, end 以外所有的 node 的 option value
activityNodeArray.forEach(node => nodeOptionArr.push(node.data[this.dataLayerType][this.dataLayerOption]));
// 將node的option值從小到大排序(映對色階淺到深)
nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
for (let i = 0; i < ImgCapsules.length; i++) {
const startIdx = i * groupSize;
const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
}
for (let level = 0; level < leveledGroups.length; level++) {
leveledGroups[level].forEach(option => {
// 考慮可能有名次一樣的情形
const curNodes = activityNodeArray.filter(activityNode => activityNode.data[this.dataLayerType][this.dataLayerOption] === option);
curNodes.forEach(curNode => {
curNode.data = {
...curNode.data,
nodeImageUrl: ImgCapsules[level],
level,
};
});
});
}
},
},
async created() {
const routeParams = this.$route.params;
const file = this.$route.meta.file;
const isCheckPage = this.$route.name.includes('Check');
// 先 loading 再執行以下程式
this.isLoading = true;
// Log 檔前往 Map Log 頁, Filter 檔前往 Map Filter 頁
switch (routeParams.type) {
case 'log':
if (!isCheckPage) {
this.logId = await routeParams.fileId;
this.baseLogId = await routeParams.fileId;
} else {
this.logId = await file.parent.id;
this.baseLogId = await file.parent.id;
}
break;
case 'filter':
if (!isCheckPage) {
this.createFilterId = await routeParams.fileId;
} else {
this.createFilterId = await file.parent.id;
}
// 取得 logID 和上次儲存的 Funnel
await this.allMapDataStore.fetchFunnel(this.createFilterId);
this.isRuleData = await Array.from(this.temporaryData);
this.ruleData = await this.isRuleData.map(e => this.$refs.sidebarFilterRef.setRule(e));
break;
}
// 取得 logId 後才 call api
await this.allMapDataStore.getAllMapData();
await this.allMapDataStore.getAllTrace();
// log、filter 檔切換過程中， trace id 不同，將初始 trace id 設定為該檔案的 trace 幣一筆資料的 id。
this.traceId = await this.traces[0]?.id;
this.baseTraceId = await this.baseTraces[0]?.id;
await this.createCy(this.mapType);
await this.allMapDataStore.getFilterParams();
await this.allMapDataStore.getTraceDetail();
// 執行完後才取消 loading
this.isLoading = false;
// 存檔 Modal 打開時，側邊欄要關閉
this.$emitter.on('saveModal', boolean => {
this.sidebarView = boolean;
this.sidebarFilter = boolean;
this.sidebarTraces = boolean;
this.sidebarState = boolean;
});
this.$emitter.on('leaveFilter', boolean => {
this.sidebarView = boolean;
this.sidebarFilter = boolean;
this.sidebarTraces = boolean;
this.sidebarState = boolean;
});
},
beforeUnmount() {
this.logId = null;
this.createFilterId = null;
this.tempFilterId = null;
this.temporaryData = [];
this.postRuleData = [];
this.ruleData = [];
},
async beforeRouteEnter(to, from, next) {
const isCheckPage = to.name.includes('Check');
@@ -544,9 +70,413 @@ export default {
break;
}
await conformanceStore.getConformanceReport(true);
to.meta.file = conformanceStore.routeFile; // 將 file data 存到 route
to.meta.file = conformanceStore.routeFile;
}
next();
}
}
</script>
<script setup>
import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useLoadingStore } from '@/stores/loading';
import { useAllMapDataStore } from '@/stores/allMapData';
import cytoscapeMap from '@/module/cytoscapeMap.js';
import { useCytoscapeStore } from '@/stores/cytoscapeStore';
import { useMapPathStore } from '@/stores/mapPathStore';
import emitter from '@/utils/emitter';
import SidebarView from '@/components/Discover/Map/SidebarView.vue';
import SidebarState from '@/components/Discover/Map/SidebarState.vue';
import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
import ImgCapsule1 from '@/assets/capsule1.svg';
import ImgCapsule2 from '@/assets/capsule2.svg';
import ImgCapsule3 from '@/assets/capsule3.svg';
import ImgCapsule4 from '@/assets/capsule4.svg';
const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
const props = defineProps(['type', 'checkType', 'checkId', 'checkFileId']);
const route = useRoute();
// Stores
const loadingStore = useLoadingStore();
const allMapDataStore = useAllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
postRuleData
} = storeToRefs(allMapDataStore);
const cytoscapeStore = useCytoscapeStore();
const { setCurrentGraphId } = cytoscapeStore;
const mapPathStore = useMapPathStore();
const numberBeforeMapInRoute = computed(() => {
const path = route.path;
const segments = path.split('/');
const mapIndex = segments.findIndex(segment => segment.includes('map'));
if (mapIndex > 0) {
const previousSegment = segments[mapIndex - 1];
const match = previousSegment.match(/\d+/);
return match ? match[0] : 'No number found';
}
return 'No map segment found';
});
onBeforeMount(() => {
setCurrentGraphId(numberBeforeMapInRoute);
});
// Data
const processMapData = ref({
startId: 0,
endId: 1,
nodes: [],
edges: [],
});
const bpmnData = ref({
startId: 0,
endId: 1,
nodes: [],
edges: [],
});
const cytoscapeGraph = ref(null);
const curveStyle = ref('unbundled-bezier');
const mapType = ref('processMap');
const dataLayerType = ref('freq');
const dataLayerOption = ref('total');
const rank = ref('LR');
const localTraceId = ref(1);
const sidebarView = ref(false);
const sidebarState = ref(false);
const sidebarTraces = ref(false);
const sidebarFilter = ref(false);
const infiniteFirstCases = ref(null);
const tracesViewRef = ref(null);
const sidebarFilterRefComp = ref(null);
const tooltip = {
sidebarView: {
value: 'Visualization Setting',
class: 'ml-1',
pt: {
text: 'text-[10px] p-1'
}
},
sidebarTraces: {
value: 'Trace',
class: 'ml-1',
pt: {
text: 'text-[10px] p-1'
}
},
sidebarFilter: {
value: 'Filter',
class: 'ml-1',
pt: {
text: 'text-[10px] p-1'
}
},
sidebarState: {
value: 'Summary',
class: 'ml-1',
pt: {
text: 'text-[10px] p-1'
}
},
};
// Computed
const sidebarLeftValue = computed(() => {
return sidebarView.value === true || sidebarTraces.value === true || sidebarFilter.value === true;
});
// Watch
watch(sidebarView, (newValue) => {
if(newValue) {
sidebarFilter.value = false;
sidebarTraces.value = false;
}
});
watch(sidebarFilter, (newValue) => {
if(newValue) {
sidebarView.value = false;
sidebarState.value = false;
sidebarTraces.value = false;
sidebarState.value = false;
}
});
watch(sidebarTraces, (newValue) => {
if(newValue) {
sidebarView.value = false;
sidebarState.value = false;
sidebarFilter.value = false;
sidebarState.value = false;
}
});
watch(sidebarState, (newValue) => {
if(newValue) {
sidebarFilter.value = false;
sidebarTraces.value = false;
}
});
// Methods
async function switchMapType(type) {
mapType.value = type;
createCy(type);
}
async function switchCurveStyles(style) {
curveStyle.value = style;
createCy(mapType.value);
}
async function switchRank(rankValue) {
rank.value = rankValue;
createCy(mapType.value);
}
async function switchDataLayerType(type, option){
dataLayerType.value = type;
dataLayerOption.value = option;
createCy(mapType.value);
}
async function switchTraceId(e) {
if(e.id == traceId.value) return;
isLoading.value = true;
traceId.value = e.id;
await allMapDataStore.getTraceDetail();
tracesViewRef.value.createCy();
isLoading.value = false;
}
function setNodesData(mapData) {
const mapTypeVal = mapType.value;
const logFreq = {
"total": "",
"rel_freq": "",
"average": "",
"median": "",
"max": "",
"min": "",
"cases": ""
};
const logDuration = {
"total": "",
"rel_duration": "",
"average": "",
"median": "",
"max": "",
"min": "",
};
const gateway = {
parallel: "+",
exclusive: "x",
inclusive: "o",
};
mapData.nodes = [];
const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
mapSource.vertices.forEach(node => {
switch (node.type) {
case 'gateway':
mapData.nodes.push({
data:{
id:node.id,
type:node.type,
label:gateway[node.gateway_type],
height:60,
width:60,
backgroundColor:'#FFF',
bordercolor:'#003366',
shape:"diamond",
freq:logFreq,
duration:logDuration,
}
})
break;
case 'event':
if(node.event_type === 'start') mapData.startId = node.id;
else if(node.event_type === 'end') mapData.endId = node.id;
mapData.nodes.push({
data:{
id:node.id,
type:node.type,
label:node.event_type,
height: 48,
width: 48,
backgroundColor:'#FFFFFF',
bordercolor:'#0F172A',
textColor: '#FF3366',
shape:"ellipse",
freq:logFreq,
duration:logDuration,
}
});
break;
default:
mapData.nodes.push({
data:{
id:node.id,
type:node.type,
label:node.label,
height: 48,
width: 216,
textColor: '#0F172A',
backgroundColor:'rgba(0, 0, 0, 0)',
borderradius: 999,
shape:"round-rectangle",
freq:node.freq,
duration:node.duration,
backgroundOpacity: 0,
borderOpacity: 0,
}
})
break;
}
});
}
function setEdgesData(mapData) {
const mapTypeVal = mapType.value;
const logDuration = {
"total": "",
"rel_duration": "",
"average": "",
"median": "",
"max": "",
"min": "",
"cases": ""
};
mapData.edges = [];
const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
mapSource.edges.forEach(edge => {
mapData.edges.push({
data: {
source:edge.tail,
target:edge.head,
freq:edge.freq,
duration:edge.duration === null ? logDuration : edge.duration,
style:'dotted',
lineWidth:1,
},
});
});
}
async function createCy(type) {
const graphId = document.getElementById('cy');
const mapData = type === 'processMap'? processMapData.value: bpmnData.value;
const mapSource = type === 'processMap' ? processMap.value : bpmn.value;
if(mapSource.vertices.length !== 0){
setNodesData(mapData);
setEdgesData(mapData);
setActivityBgImage(mapData);
cytoscapeGraph.value = await cytoscapeMap(mapData, dataLayerType.value, dataLayerOption.value, curveStyle.value, rank.value, graphId);
const processOrBPMN = mapType.value === 'processMap' ? 'process' : 'bpmn';
const curveType = curveStyle.value === 'taxi' ? 'elbow' : 'curved';
const directionType = rank.value === 'LR' ? 'horizontal' : 'vertical';
await mapPathStore.setCytoscape(cytoscapeGraph.value, processOrBPMN, curveType, directionType);
};
}
function setActivityBgImage(mapData) {
const nodes = mapData.nodes;
const groupSize = Math.floor(nodes.length / ImgCapsules.length);
let nodeOptionArr = [];
const leveledGroups = [];
const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
activityNodeArray.forEach(node => nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]));
nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
for(let i = 0; i < ImgCapsules.length; i++) {
const startIdx = i * groupSize;
const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
}
for(let level = 0; level < leveledGroups.length; level++) {
leveledGroups[level].forEach(option => {
const curNodes = activityNodeArray.filter(activityNode => activityNode.data[dataLayerType.value][dataLayerOption.value] === option);
curNodes.forEach(curNode => {
curNode.data = {
...curNode.data,
nodeImageUrl: ImgCapsules[level],
level,
};
});
});
}
}
// Created logic
(async () => {
const routeParams = route.params;
const file = route.meta.file;
const isCheckPage = route.name.includes('Check');
isLoading.value = true;
switch (routeParams.type) {
case 'log':
if(!isCheckPage) {
logId.value = await routeParams.fileId;
baseLogId.value = await routeParams.fileId;
} else {
logId.value = await file.parent.id;
baseLogId.value = await file.parent.id;
}
break;
case 'filter':
if(!isCheckPage) {
createFilterId.value = await routeParams.fileId;
} else {
createFilterId.value = await file.parent.id;
}
await allMapDataStore.fetchFunnel(createFilterId.value);
isRuleData.value = await Array.from(temporaryData.value);
ruleData.value = await isRuleData.value.map(e => sidebarFilterRefComp.value.setRule(e));
break;
}
await allMapDataStore.getAllMapData();
await allMapDataStore.getAllTrace();
traceId.value = await traces.value[0]?.id;
baseTraceId.value = await baseTraces.value[0]?.id;
await createCy(mapType.value);
await allMapDataStore.getFilterParams();
await allMapDataStore.getTraceDetail();
isLoading.value = false;
emitter.on('saveModal', boolean => {
sidebarView.value = boolean;
sidebarFilter.value = boolean;
sidebarTraces.value = boolean;
sidebarState.value = boolean;
});
emitter.on('leaveFilter', boolean => {
sidebarView.value = boolean;
sidebarFilter.value = boolean;
sidebarTraces.value = boolean;
sidebarState.value = boolean;
});
})();
onBeforeUnmount(() => {
logId.value = null;
createFilterId.value = null;
temporaryData.value = [];
postRuleData.value = [];
ruleData.value = [];
});
</script>

420
src/views/Discover/Performance/FreqChart.vue
View File

@@ -2,7 +2,7 @@
<Chart type="line" :data="primeVueSetDataState" :options="primeVueSetOptionsState" class="h-96" />
</template>
<script>
<script setup>
import { ref, onMounted } from 'vue';
import {
setTimeStringFormatBaseOnTimeDifference,
@@ -65,220 +65,208 @@ y: {
},
};
// 試著把 chart 獨立成一個 vue component
// 企圖防止 PrimeVue 誤用其他圖表 option 值的 bug
export default {
props: {
chartData: {
type: Object,
const props = defineProps({
chartData: {
type: Object,
},
content: {
type: Object,
},
yUnit: {
type: String,
},
pageName: {
type: String,
},
});
const primeVueSetDataState = ref(null);
const primeVueSetOptionsState = ref(null);
const colorPrimary = ref('#0099FF');
const colorSecondary = ref('#FFAA44');
/**
* Compare page and Performance have this same function.
* @param whichScaleObj PrimeVue scale option object to reference to
* @param customizeOptions
* @param customizeOptions.content
* @param customizeOptions.ticksOfXAxis
*/
const getCustomizedScaleOption = (whichScaleObj, {customizeOptions: {
content,
ticksOfXAxis,
},
content: {
type: Object,
},
yUnit: {
type: String,
},
pageName: {
type: String,
},
},
setup(props) {
const primeVueSetDataState = ref(null);
const primeVueSetOptionsState = ref(null);
const colorPrimary = ref('#0099FF');
const colorSecondary = ref('#FFAA44');
/**
* Compare page and Performance have this same function.
* @param whichScaleObj PrimeVue scale option object to reference to
* @param customizeOptions
* @param customizeOptions.content
* @param customizeOptions.ticksOfXAxis
*/
const getCustomizedScaleOption = (whichScaleObj, {customizeOptions: {
content,
ticksOfXAxis,
},
}) => {
let resultScaleObj;
resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
return resultScaleObj;
};
/**
* Compare page and Performance have this same function.
* @param {object} scaleObjectToAlter this object follows the format of prive vue chart
* @param {Array<string>} ticksOfXAxis For example, ['05/06', '05,07', '05/08']
* or ['08:03:01', '08:11:18', '09:03:41', ], and so on.
*/
const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
return {
...scaleObjectToAlter,
x: {
...scaleObjectToAlter.x,
ticks: {
...scaleObjectToAlter.x.ticks,
callback: function(value, index) {
// 根據不同的級距客製化 x 軸的時間刻度
return ticksOfXAxis[index];
},
},
},
};
};
/** Compare page and Performance have this same function.
* 在一個基本的物件上加以客製化這個物件，客製化的參照來源是 content 的內容
* 之所以有辦法這樣撰寫，是因為我們知道物件的順序是先 x 再 title 再 text
* This function alters the title property of known scales object of Chart option
* This is based on the fact that we know the order must be x -> title -> text.
* @param {object} whichScaleObj PrimeVue scale option object to reference to
* @param content whose property includes x and y and stand for titles
*
* @returns { object } an object modified with two titles
*/
const customizeScaleChartOptionTitleByContent = (whichScaleObj, content) => {
if (!content) {
// Early return
return whichScaleObj;
}
return {
...whichScaleObj,
x: {
...whichScaleObj.x,
title: {
...whichScaleObj.x.title,
text: content.x
}
},
y: {
...whichScaleObj.y,
title: {
...whichScaleObj.y.title,
text: content.y
}
}
};
};
const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
let datasetsArr;
let datasets;
let datasetsPrimary; // For Compare page case
let datasetsSecondary; // For Compare page case
const minX = chartData?.x_axis?.min;
const maxX = chartData?.x_axis?.max;
let xData;
let primeVueSetData = {};
let primeVueSetOption = {};
// 考慮 chartData.data 的dimension
// 當我們遇到了 Compare 頁面的案例
if(pageName === "Compare"){
datasetsPrimary = chartData.data[0].data;
datasetsSecondary = chartData.data[1].data;
datasetsArr = [
{
label: chartData.data[0].label,
data: datasetsPrimary,
fill: false,
tension: 0, // 貝茲曲線張力
borderColor: colorPrimary,
pointBackgroundColor: colorPrimary,
},
{
label: chartData.data[1].label,
data: datasetsSecondary,
fill: false,
tension: 0, // 貝茲曲線張力
borderColor: colorSecondary,
pointBackgroundColor: colorSecondary,
}
];
xData = chartData.data[0].data.map(item => new Date(item.x).getTime());
} else {
datasets = chartData.data;
datasetsArr = [
{
label: content.title,
data: datasets,
fill: false,
tension: 0, // 貝茲曲線張力
borderColor: '#0099FF',
}
];
xData = chartData.data.map(item => new Date(item.x).getTime());
}
// Customize X axis ticks due to different differences between min and max of data group
// Compare page and Performance page share the same logic
const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
const customizedScaleOption = getCustomizedScaleOption(
knownScaleLineChartOptions, {
customizeOptions: {
content, ticksOfXAxis,
}
});
primeVueSetData = {
labels: xData,
datasets: datasetsArr,
};
primeVueSetOption = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 16,
left: 8,
right: 8,
}
},
plugins: {
legend: false, // 圖例
tooltip: {
displayColors: true,
titleFont: {weight: 'normal'},
callbacks: {
label: function(tooltipItem) {
// 取得數據
const label = tooltipItem.dataset.label || '';
// 建立一個小方塊顯示顏色
return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
},
},
},
title: {
display: false,
},
},
scales: customizedScaleOption,
};
primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
return value; //這裡的Y軸刻度沒有後綴代表時間的英文字母
};
primeVueSetDataState.value = primeVueSetData;
primeVueSetOptionsState.value = primeVueSetOption;
};
onMounted(() => {
getLineChartPrimeVueSetting(props.chartData, props.content, props.pageName);
});
return {
...props,
primeVueSetDataState,
primeVueSetOptionsState,
};
}
}) => {
let resultScaleObj;
resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
return resultScaleObj;
};
</script>
/**
* Compare page and Performance have this same function.
* @param {object} scaleObjectToAlter this object follows the format of prive vue chart
* @param {Array<string>} ticksOfXAxis For example, ['05/06', '05,07', '05/08']
* or ['08:03:01', '08:11:18', '09:03:41', ], and so on.
*/
const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
return {
...scaleObjectToAlter,
x: {
...scaleObjectToAlter.x,
ticks: {
...scaleObjectToAlter.x.ticks,
callback: function(value, index) {
// 根據不同的級距客製化 x 軸的時間刻度
return ticksOfXAxis[index];
},
},
},
};
};
/** Compare page and Performance have this same function.
* 在一個基本的物件上加以客製化這個物件，客製化的參照來源是 content 的內容
* 之所以有辦法這樣撰寫，是因為我們知道物件的順序是先 x 再 title 再 text
* This function alters the title property of known scales object of Chart option
* This is based on the fact that we know the order must be x -> title -> text.
* @param {object} whichScaleObj PrimeVue scale option object to reference to
* @param content whose property includes x and y and stand for titles
*
* @returns { object } an object modified with two titles
*/
const customizeScaleChartOptionTitleByContent = (whichScaleObj, content) => {
if (!content) {
// Early return
return whichScaleObj;
}
return {
...whichScaleObj,
x: {
...whichScaleObj.x,
title: {
...whichScaleObj.x.title,
text: content.x
}
},
y: {
...whichScaleObj.y,
title: {
...whichScaleObj.y.title,
text: content.y
}
}
};
};
const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
let datasetsArr;
let datasets;
let datasetsPrimary; // For Compare page case
let datasetsSecondary; // For Compare page case
const minX = chartData?.x_axis?.min;
const maxX = chartData?.x_axis?.max;
let xData;
let primeVueSetData = {};
let primeVueSetOption = {};
// 考慮 chartData.data 的dimension
// 當我們遇到了 Compare 頁面的案例
if(pageName === "Compare"){
datasetsPrimary = chartData.data[0].data;
datasetsSecondary = chartData.data[1].data;
datasetsArr = [
{
label: chartData.data[0].label,
data: datasetsPrimary,
fill: false,
tension: 0, // 貝茲曲線張力
borderColor: colorPrimary,
pointBackgroundColor: colorPrimary,
},
{
label: chartData.data[1].label,
data: datasetsSecondary,
fill: false,
tension: 0, // 貝茲曲線張力
borderColor: colorSecondary,
pointBackgroundColor: colorSecondary,
}
];
xData = chartData.data[0].data.map(item => new Date(item.x).getTime());
} else {
datasets = chartData.data;
datasetsArr = [
{
label: content.title,
data: datasets,
fill: false,
tension: 0, // 貝茲曲線張力
borderColor: '#0099FF',
}
];
xData = chartData.data.map(item => new Date(item.x).getTime());
}
// Customize X axis ticks due to different differences between min and max of data group
// Compare page and Performance page share the same logic
const formatToSet = setTimeStringFormatBaseOnTimeDifference(minX, maxX);
const ticksOfXAxis = mapTimestampToAxisTicksByFormat(xData, formatToSet);
const customizedScaleOption = getCustomizedScaleOption(
knownScaleLineChartOptions, {
customizeOptions: {
content, ticksOfXAxis,
}
});
primeVueSetData = {
labels: xData,
datasets: datasetsArr,
};
primeVueSetOption = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
top: 16,
left: 8,
right: 8,
}
},
plugins: {
legend: false, // 圖例
tooltip: {
displayColors: true,
titleFont: {weight: 'normal'},
callbacks: {
label: function(tooltipItem) {
// 取得數據
const label = tooltipItem.dataset.label || '';
// 建立一個小方塊顯示顏色
return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
},
},
},
title: {
display: false,
},
},
scales: customizedScaleOption,
};
primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
return value; //這裡的Y軸刻度沒有後綴代表時間的英文字母
};
primeVueSetDataState.value = primeVueSetData;
primeVueSetOptionsState.value = primeVueSetOption;
};
onMounted(() => {
getLineChartPrimeVueSetting(props.chartData, props.content, props.pageName);
});
</script>

1491
src/views/Discover/Performance/index.vue
View File

File diff suppressed because it is too large Load Diff