diff --git a/src/components/Discover/Map/Filter/TimeframesFilter.vue b/src/components/Discover/Map/Filter/TimeframesFilter.vue
index 5ae79c7..fd1099b 100644
--- a/src/components/Discover/Map/Filter/TimeframesFilter.vue
+++ b/src/components/Discover/Map/Filter/TimeframesFilter.vue
@@ -83,7 +83,7 @@ import getMoment from "moment";
const props = defineProps(["selectValue"]);
const allMapDataStore = useAllMapDataStore();
-const { filterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore);
+const { allFilterTimeframe, selectTimeFrame } = storeToRefs(allMapDataStore);
const selectRange = ref(1000); // Number of divisions for the selection range
const selectArea = ref(null);
@@ -120,8 +120,8 @@ watch(timeFrameStartEnd, (newValue) => {
// Compute slider data; time format: millisecond timestamps
const sliderData = computed(() => {
- const xAxisMin = new Date(filterTimeframe.value.x_axis.min).getTime();
- const xAxisMax = new Date(filterTimeframe.value.x_axis.max).getTime();
+ const xAxisMin = new Date(allFilterTimeframe.value.x_axis.min).getTime();
+ const xAxisMax = new Date(allFilterTimeframe.value.x_axis.max).getTime();
const range = xAxisMax - xAxisMin;
const step = range / selectRange.value;
const data = [];
@@ -135,9 +135,9 @@ const sliderData = computed(() => {
// Add the minimum and maximum values
const timeFrameData = computed(() => {
- if (!filterTimeframe.value?.data || filterTimeframe.value.data.length < 10)
+ if (!allFilterTimeframe.value?.data || allFilterTimeframe.value.data.length < 10)
return [];
- const data = filterTimeframe.value.data.map((i) => ({ x: i.x, y: i.y }));
+ const data = allFilterTimeframe.value.data.map((i) => ({ x: i.x, y: i.y }));
// See ./public/timeFrameSlope for the y-axis slope calculation diagram
// x values are 0 ~ 11,
// Name three coordinates (ax, ay), (bx, by), (cx, cy) as (a, b), (c, d), (e, f)
@@ -148,18 +148,18 @@ const timeFrameData = computed(() => {
const a = 0;
let b;
const c = 1;
- const d = filterTimeframe.value.data[0].y;
+ const d = allFilterTimeframe.value.data[0].y;
const e = 2;
- const f = filterTimeframe.value.data[1].y;
+ const f = allFilterTimeframe.value.data[1].y;
b = (e * d - a * d - f * a - f * c) / (e - c - a);
if (b < 0) {
b = 0;
}
// Y-axis maximum value
const ma = 9;
- const mb = filterTimeframe.value.data[8].y;
+ const mb = allFilterTimeframe.value.data[8].y;
const mc = 10;
- const md = filterTimeframe.value.data[9].y;
+ const md = allFilterTimeframe.value.data[9].y;
const me = 11;
let mf = (mb * me - mb * mc - md * me + md * ma) / (ma - mc);
if (mf < 0) {
@@ -168,12 +168,12 @@ const timeFrameData = computed(() => {
// Add the minimum value
data.unshift({
- x: filterTimeframe.value.x_axis.min_base,
+ x: allFilterTimeframe.value.x_axis.min_base,
y: b,
});
// Add the maximum value
data.push({
- x: filterTimeframe.value.x_axis.max_base,
+ x: allFilterTimeframe.value.x_axis.max_base,
y: mf,
});
@@ -181,8 +181,8 @@ const timeFrameData = computed(() => {
});
const labelsData = computed(() => {
- const min = new Date(filterTimeframe.value.x_axis.min_base).getTime();
- const max = new Date(filterTimeframe.value.x_axis.max_base).getTime();
+ const min = new Date(allFilterTimeframe.value.x_axis.min_base).getTime();
+ const max = new Date(allFilterTimeframe.value.x_axis.max_base).getTime();
const numPoints = 11;
const step = (max - min) / (numPoints - 1);
const data = [];
@@ -195,8 +195,8 @@ const labelsData = computed(() => {
watch(selectTimeFrame, (newValue, oldValue) => {
if (newValue.length === 0) {
- startTime.value = new Date(filterTimeframe.value.x_axis.min);
- endTime.value = new Date(filterTimeframe.value.x_axis.max);
+ startTime.value = new Date(allFilterTimeframe.value.x_axis.min);
+ endTime.value = new Date(allFilterTimeframe.value.x_axis.max);
selectArea.value = [0, selectRange.value];
resizeMask(chart.value);
}
@@ -247,7 +247,7 @@ function resizeRightMask(chartInstance, to) {
* Creates and renders the Chart.js area chart for timeframe data.
*/
function createChart() {
- const max = filterTimeframe.value.y_axis.max * 1.1;
+ const max = allFilterTimeframe.value.y_axis.max * 1.1;
const minX = timeFrameData.value[0]?.x;
const maxX = timeFrameData.value[timeFrameData.value.length - 1]?.x;
@@ -403,10 +403,10 @@ onMounted(() => {
// Slider
selectArea.value = [0, selectRange.value];
// Calendar
- startMinDate.value = new Date(filterTimeframe.value.x_axis.min);
- startMaxDate.value = new Date(filterTimeframe.value.x_axis.max);
- endMinDate.value = new Date(filterTimeframe.value.x_axis.min);
- endMaxDate.value = new Date(filterTimeframe.value.x_axis.max);
+ startMinDate.value = new Date(allFilterTimeframe.value.x_axis.min);
+ startMaxDate.value = new Date(allFilterTimeframe.value.x_axis.max);
+ endMinDate.value = new Date(allFilterTimeframe.value.x_axis.min);
+ endMaxDate.value = new Date(allFilterTimeframe.value.x_axis.max);
// Set the calendar range to match the timeline range
startTime.value = startMinDate.value;
endTime.value = startMaxDate.value;
diff --git a/src/components/Discover/Map/Filter/TraceFilter.vue b/src/components/Discover/Map/Filter/TraceFilter.vue
index 56a9d5d..dcb488b 100644
--- a/src/components/Discover/Map/Filter/TraceFilter.vue
+++ b/src/components/Discover/Map/Filter/TraceFilter.vue
@@ -146,8 +146,8 @@ const {
infinit404,
baseInfiniteStart,
baseTraces,
- baseTraceTaskSeq,
- baseCases,
+ allBaseTraceTaskSeq,
+ allBaseCase,
} = storeToRefs(allMapDataStore);
const { isLoading } = storeToRefs(loadingStore);
@@ -240,7 +240,7 @@ const caseData = computed(() => {
});
const columnData = computed(() => {
- const data = cloneDeep(baseCases.value);
+ const data = cloneDeep(allBaseCase.value);
let result = [
{ field: "id", header: "Case Id" },
{ field: "started_at", header: "Start time" },
@@ -378,7 +378,7 @@ function setNodesData() {
// Clear nodes to prevent accumulation on each render
processMap.value.nodes = [];
// Populate nodes with data returned from the API call
- baseTraceTaskSeq.value.forEach((node, index) => {
+ allBaseTraceTaskSeq.value.forEach((node, index) => {
processMap.value.nodes.push({
data: {
id: index,
@@ -398,7 +398,7 @@ function setNodesData() {
*/
function setEdgesData() {
processMap.value.edges = [];
- baseTraceTaskSeq.value.forEach((edge, index) => {
+ allBaseTraceTaskSeq.value.forEach((edge, index) => {
processMap.value.edges.push({
data: {
source: `${index}`,
@@ -431,7 +431,7 @@ function createCy() {
function handleScroll(event) {
if (
infinitMaxItems.value ||
- baseCases.value.length < 20 ||
+ allBaseCase.value.length < 20 ||
infiniteFinish.value === false
)
return;
@@ -452,7 +452,7 @@ async function fetchData() {
infiniteFinish.value = false;
baseInfiniteStart.value += 20;
await allMapDataStore.getBaseTraceDetail();
- infiniteData.value = [...infiniteData.value, ...baseCases.value];
+ infiniteData.value = [...infiniteData.value, ...allBaseCase.value];
infiniteFinish.value = true;
isLoading.value = false;
} catch (error) {
diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue
index 7ddeeba..b82d4b2 100644
--- a/src/components/Discover/Map/SidebarTraces.vue
+++ b/src/components/Discover/Map/SidebarTraces.vue
@@ -128,7 +128,7 @@ const {
infiniteStart,
traceId,
traces,
- traceTaskSeq,
+ allTraceTaskSeq,
infiniteFirstCases,
} = storeToRefs(allMapDataStore);
@@ -261,7 +261,7 @@ function setNodesData() {
// Clear nodes to prevent accumulation on each render
processMap.value.nodes = [];
// Populate nodes with data returned from the API call
- traceTaskSeq.value.forEach((node, index) => {
+ allTraceTaskSeq.value.forEach((node, index) => {
processMap.value.nodes.push({
data: {
id: index,
@@ -281,7 +281,7 @@ function setNodesData() {
*/
function setEdgesData() {
processMap.value.edges = [];
- traceTaskSeq.value.forEach((edge, index) => {
+ allTraceTaskSeq.value.forEach((edge, index) => {
processMap.value.edges.push({
data: {
source: `${index}`,
diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue
index 2638069..444b62e 100644
--- a/src/components/Discover/StatusBar.vue
+++ b/src/components/Discover/StatusBar.vue
@@ -167,7 +167,7 @@ import getMoment from "moment";
const route = useRoute();
const allMapDataStore = useAllMapDataStore();
-const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
+const { logId, allStats, createFilterId } = storeToRefs(allMapDataStore);
const isPanel = ref(false);
const statData = ref(null);
@@ -184,37 +184,37 @@ function getPercentLabel(val) {
/** Transforms raw stats into display-ready format with localized numbers and time labels. */
function getStatData() {
- if (!stats.value) return;
+ if (!allStats.value) return;
statData.value = {
cases: {
- count: stats.value.cases.count.toLocaleString("en-US"),
- total: stats.value.cases.total.toLocaleString("en-US"),
- ratio: getPercentLabel(stats.value.cases.ratio),
+ count: allStats.value.cases.count.toLocaleString("en-US"),
+ total: allStats.value.cases.total.toLocaleString("en-US"),
+ ratio: getPercentLabel(allStats.value.cases.ratio),
},
traces: {
- count: stats.value.traces.count.toLocaleString("en-US"),
- total: stats.value.traces.total.toLocaleString("en-US"),
- ratio: getPercentLabel(stats.value.traces.ratio),
+ count: allStats.value.traces.count.toLocaleString("en-US"),
+ total: allStats.value.traces.total.toLocaleString("en-US"),
+ ratio: getPercentLabel(allStats.value.traces.ratio),
},
task_instances: {
- count: stats.value.task_instances.count.toLocaleString("en-US"),
- total: stats.value.task_instances.total.toLocaleString("en-US"),
- ratio: getPercentLabel(stats.value.task_instances.ratio),
+ count: allStats.value.task_instances.count.toLocaleString("en-US"),
+ total: allStats.value.task_instances.total.toLocaleString("en-US"),
+ ratio: getPercentLabel(allStats.value.task_instances.ratio),
},
tasks: {
- count: stats.value.tasks.count.toLocaleString("en-US"),
- total: stats.value.tasks.total.toLocaleString("en-US"),
- ratio: getPercentLabel(stats.value.tasks.ratio),
+ count: allStats.value.tasks.count.toLocaleString("en-US"),
+ total: allStats.value.tasks.total.toLocaleString("en-US"),
+ ratio: getPercentLabel(allStats.value.tasks.ratio),
},
- started_at: getMoment(stats.value.started_at).format("YYYY-MM-DD HH:mm"),
- completed_at: getMoment(stats.value.completed_at).format(
+ started_at: getMoment(allStats.value.started_at).format("YYYY-MM-DD HH:mm"),
+ completed_at: getMoment(allStats.value.completed_at).format(
"YYYY-MM-DD HH:mm",
),
case_duration: {
- min: getTimeLabel(stats.value.case_duration.min),
- max: getTimeLabel(stats.value.case_duration.max),
- average: getTimeLabel(stats.value.case_duration.average),
- median: getTimeLabel(stats.value.case_duration.median),
+ min: getTimeLabel(allStats.value.case_duration.min),
+ max: getTimeLabel(allStats.value.case_duration.max),
+ average: getTimeLabel(allStats.value.case_duration.average),
+ median: getTimeLabel(allStats.value.case_duration.median),
},
};
}
diff --git a/src/stores/allMapData.ts b/src/stores/allMapData.ts
index 5b78a7a..3da74db 100644
--- a/src/stores/allMapData.ts
+++ b/src/stores/allMapData.ts
@@ -71,57 +71,18 @@ export const useAllMapDataStore = defineStore("allMapDataStore", {
processMap: (state) => {
return state.allProcessMap;
},
- bpmn: (state) => {
- return state.allBpmn;
- },
- stats: (state) => {
- return state.allStats;
- },
- insights: (state) => {
- return state.allInsights;
- },
traces: (state) => {
return [...state.allTrace].sort((x, y) => x.id - y.id);
},
baseTraces: (state) => {
return [...state.allBaseTrace].sort((x, y) => x.id - y.id);
},
- cases: (state) => {
- return state.allCase;
- },
- baseCases: (state) => {
- return state.allBaseCase;
- },
infiniteFirstCases: (state) => {
if (state.infiniteStart === 0) return state.allCase;
},
BaseInfiniteFirstCases: (state) => {
if (state.baseInfiniteStart === 0) return state.allBaseCase;
},
- traceTaskSeq: (state) => {
- return state.allTraceTaskSeq;
- },
- baseTraceTaskSeq: (state) => {
- return state.allBaseTraceTaskSeq;
- },
- // All tasks
- filterTasks: (state) => {
- return state.allFilterTask;
- },
- // form start to end tasks
- filterStartToEnd: (state) => {
- return state.allFilterStartToEnd;
- },
- // form end to start tasks
- filterEndToStart: (state) => {
- return state.allFilterEndToStart;
- },
- filterTimeframe: (state) => {
- return state.allFilterTimeframe;
- },
- filterTrace: (state) => {
- return state.allFilterTrace;
- },
filterAttrs: (state) => {
if (state.allFilterAttrs !== null) {
return state.allFilterAttrs.map((att) => {
@@ -155,9 +116,6 @@ export const useAllMapDataStore = defineStore("allMapDataStore", {
}
return [];
},
- allFunnels: (state) => {
- return state.allFunnelData;
- },
},
actions: {
/**
diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts
index a8973f2..a305607 100644
--- a/src/stores/mapPathStore.ts
+++ b/src/stores/mapPathStore.ts
@@ -163,8 +163,8 @@ export const useMapPathStore = defineStore('mapPathStore', {
}
},
async createInsightWithPath() {
- const { insights } = useAllMapDataStore();
- this.insights = { ...insights };
+ const { allInsights } = useAllMapDataStore();
+ this.insights = { ...allInsights };
this.startNode = this.cytoscape[this.processOrBPMN][this.curveType][this.directionType]?.nodes()
.filter(function (elem) {
return elem.data('label').toLowerCase() === 'start';
@@ -182,8 +182,8 @@ export const useMapPathStore = defineStore('mapPathStore', {
});
// Depth First Search from the starting node
this.depthFirstSearchCreatePath(this.startNode, [this.startNode], []);
- const { insights } = useAllMapDataStore();
- this.insights = { ...insights };
+ const { allInsights } = useAllMapDataStore();
+ this.insights = { ...allInsights };
this.matchGraphPathWithInsightsPath();
},
/**
diff --git a/src/views/Compare/MapCompare.vue b/src/views/Compare/MapCompare.vue
index 126a4c7..3b00db1 100644
--- a/src/views/Compare/MapCompare.vue
+++ b/src/views/Compare/MapCompare.vue
@@ -86,23 +86,23 @@
>
{
switch (node.type) {
case "gateway":
@@ -485,7 +485,7 @@ function setEdgesData(mapData) {
};
mapData.edges = [];
- const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
+ const mapSource = mapTypeVal === "processMap" ? processMap.value : allBpmn.value;
mapSource.edges.forEach((edge) => {
mapData.edges.push({
data: {
@@ -510,7 +510,7 @@ function setEdgesData(mapData) {
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;
+ const mapSource = type === "processMap" ? processMap.value : allBpmn.value;
if (mapSource.vertices.length !== 0) {
setNodesData(mapData);
diff --git a/src/views/Discover/Map/MapPage.vue b/src/views/Discover/Map/MapPage.vue
index 6ea6e28..21f58d7 100644
--- a/src/views/Discover/Map/MapPage.vue
+++ b/src/views/Discover/Map/MapPage.vue
@@ -86,22 +86,22 @@
>
{
switch (node.type) {
case "gateway":
@@ -477,7 +477,7 @@ function setEdgesData(mapData) {
};
mapData.edges = [];
- const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
+ const mapSource = mapTypeVal === "processMap" ? processMap.value : allBpmn.value;
mapSource.edges.forEach((edge) => {
mapData.edges.push({
data: {
@@ -499,7 +499,7 @@ function setEdgesData(mapData) {
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;
+ const mapSource = type === "processMap" ? processMap.value : allBpmn.value;
if (mapSource.vertices.length !== 0) {
setNodesData(mapData);