+
+
- -
+
-
track_changes
@@ -106,14 +28,15 @@
-
+
+
- -
+
-
info
@@ -121,6 +44,192 @@
+
+
+
+
+
+
+
+
+
+
+ -
+
Cases
+
+
+
{{ numberLabel(stats.cases.count) }} / {{ numberLabel(stats.cases.total) }}
+
+
+
{{ getPercentLabel(stats.cases.ratio) }}
+
+ -
+
Traces
+
+
+
{{ numberLabel(stats.traces.count) }} / {{ numberLabel(stats.traces.total) }}
+
+
+
{{ getPercentLabel(stats.traces.ratio) }}
+
+ -
+
Activity Instances
+
+
+
{{ numberLabel(stats.task_instances.count) }} / {{ numberLabel(stats.task_instances.total) }}
+
+
+
{{ getPercentLabel(stats.task_instances.ratio) }}
+
+ -
+
Activities
+
+
+
{{ numberLabel(stats.tasks.count) }} / {{ numberLabel(stats.tasks.total) }}
+
+
+
{{ getPercentLabel(stats.tasks.ratio) }}
+
+
+
+
+
Log Timeframe
+
{{ moment(stats.started_at
+ ) }}~{{ moment(stats.completed_at
+ ) }}
+
+
+
+
Case Duration
+
+ - {{ timeLabel(stats.case_duration.min) }}
+ - {{ timeLabel(stats.case_duration.average
+ ) }}
+ - {{ timeLabel(stats.case_duration.median) }}
+ - {{ timeLabel(stats.case_duration.max) }}
+
+
+
+
+
+
Most frequent
+
+ - Activity:
+
+ {{ value }}
+ ,
+
+
+ - Inbound connections:
+
+ {{ value }}
+ ,
+
+
+ - Outbound connections:
+
+ {{ value }}
+ ,
+
+
+
+
Most time-consuming
+
+ - Activity:
+
+ {{ value }}
+ ,
+
+
+ - Connection:
+
+
+ {{ value }}
+ 🡲
+
+ ,
+
+
+
+
+
+
+ - Self-loop
+ - Short-loop
+ - Shortest Trace
+ - Longest Trace
+ - Most Frequent Trace
+
+
+
+
+ - No data
+ -
+
+ {{ value }}
+ 🡲
+
+
+
+
+
+
+ - No data
+ -
+
+ {{ value }}
+ 🡲
+
+
+
+
+
+
+ - No data
+ -
+
+ {{ value }}
+ 🡲
+
+
+
+
+
+
+ - No data
+ -
+
+ {{ value }}
+ 🡲
+
+
+
+
+
+
+ - No data
+ -
+
+ {{ value }}
+ 🡲
+
+
+
+
+
+
+
+
+
@@ -128,22 +237,31 @@
import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import AllMapDataStore from '@/stores/allMapData.js';
-import cytoscapeMap from '@/module/cytoscapeMap.js' //
+import cytoscapeMap from '@/module/cytoscapeMap.js';
+import sidebarView from '@/components/Discover/sidebarView.vue';
+import getNumberLabel from '@/module/numberLabel.js';
+import getTimeLabel from '@/module/timeLabel.js';
+import getMoment from 'moment';
export default {
setup() {
const loadingStore = LoadingStore();
const allMapDataStore = AllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
- const { processMap, bpmn } = storeToRefs(allMapDataStore);
+ const { processMap, bpmn, stats, insights } = storeToRefs(allMapDataStore);
return {
isLoading,
processMap,
bpmn,
+ stats,
+ insights,
allMapDataStore,
}
},
+ components: {
+ sidebarView,
+ },
data() {
return {
processMapData: {
@@ -158,39 +276,56 @@ export default {
nodes: [],
edges: [],
},
- selectFrequency: [
- { value:"total", label:"Total", disabled:false, },
- { value:"rel_freq", label:"Relative", disabled:false, },
- { value:"average", label:"Average", disabled:false, },
- { value:"median", label:"Median", disabled:false, },
- { value:"max", label:"Max", disabled:false, },
- { value:"min", label:"Min", disabled:false, },
- { value:"cases", label:"Number of cases", disabled:false, },
- ],
- selectDuration:[
- { value:"total", label:"Total", disabled:false, },
- { value:"rel_duration", label:"Relative", disabled:false, },
- { value:"average", label:"Average", disabled:false, },
- { value:"median", label:"Median", disabled:false, },
- { value:"max", label:"Max", disabled:false, },
- { value:"min", label:"Min", disabled:false, },
- ],
curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
mapType: 'processMap', // processMap | bpmn
dataLayerType: 'freq', // freq | duration
dataLayerOption: 'total',
- selectedFreq: '',
- selectedDuration: '',
rank: 'LR', // 直向 TB | 橫向 LR
- visibleLeft: false, // SideBar
+ sidebarView: false, // SideBar: Visualization Setting
+ sidebarState: false, // SideBar: Summary & Insight
+ tab: 'summary',
+ valueCases: 0,
+ valueTraces: 0,
+ valueTaskInstances: 0,
+ valueTasks: 0,
+ active1: 0
}
},
methods: {
+ switchTab(tab) {
+ this.tab = tab;
+ },
+ timeLabel(time){
+ return getTimeLabel(time);
+ },
+ moment(time){
+ return getMoment(time).format('YYYY-MM-DD HH:mm');
+ },
+ numberLabel(num){
+ return getNumberLabel(num);
+ },
+ getPercentLabel(val){
+ if(val * 100 === 100) return `${val * 100}%`;
+ return `${(val * 100).toFixed(1)}%`;
+ },
+ show(){
+ this.valueCases = this.stats.cases.ratio * 100;
+ this.valueTraces= this.stats.traces.ratio * 100;
+ this.valueTaskInstances = this.stats.task_instances.ratio * 100;
+ this.valueTasks = this.stats.tasks.ratio * 100;
+ },
+ hide(){
+ this.valueCases = 0;
+ this.valueTraces= 0;
+ this.valueTaskInstances = 0;
+ this.valueTasks = 0;
+ },
/**
* switch map type
* @param {string} type processMap | bpmn
*/
switchMapType(type) {
+ // console.log(type);
this.mapType = type;
this.createCy(type);
},
@@ -215,23 +350,9 @@ export default {
* @param {string} e
* @param {string} type freq | duration
*/
- switchDataLayerType(e, type){
- let value = e.target.type === 'select-one'? e.target.value: 'total';
-
- switch (type) {
- case 'freq':
- this.dataLayerType = type;
- this.dataLayerOption = value;
- this.selectedFreq = value;
- break;
-
- case 'duration':
- this.dataLayerType = type;
- this.dataLayerOption = value;
- this.selectedDuration = value;
- break;
- };
-
+ switchDataLayerType(type, option){
+ this.dataLayerType = type;
+ this.dataLayerOption = option;
this.createCy(this.mapType);
},
/**
@@ -390,17 +511,14 @@ export default {