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

Apply repository-wide ESLint auto-fix formatting pass

Browse Source 
Co-Authored-By: Codex <codex@openai.com>
This commit is contained in:
依瑪貓
2026-03-08 12:11:57 +08:00
parent 7c48faaa3d
commit 847904c49b
172 changed files with 13629 additions and 9154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,47 @@
<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']">
<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']"
>
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">
<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"
>
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']">
<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']"
>
rebase
</span>
</li>
@@ -29,13 +54,22 @@
</div>
<!-- Sidebar: State -->
<div id='sidebar_state' class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
<div
id="sidebar_state"
class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute"
>
<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">
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
:class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
<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"
>
<span
class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
:class="[sidebarState ? 'text-primary' : 'text-neutral-500']"
>
info
</span>
</li>
@@ -43,13 +77,35 @@
</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>
<SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
<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="sidebarFilterRefComp"></SidebarFilter>
<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="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="sidebarFilterRefComp"
></SidebarFilter>
</template>
<script>
@@ -64,19 +120,19 @@
* statistics.
*/
import { useConformanceStore } from '@/stores/conformance';
import { useConformanceStore } from "@/stores/conformance";
export default {
async beforeRouteEnter(to, from, next) {
const isCheckPage = to.name.includes('Check');
const isCheckPage = to.name.includes("Check");
if (isCheckPage) {
const conformanceStore = useConformanceStore();
switch (to.params.type) {
case 'log':
case "log":
conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
break;
case 'filter':
case "filter":
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
break;
}
@@ -84,32 +140,32 @@ export default {
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';
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 props = defineProps(["type", "checkType", "checkId", "checkFileId"]);
const route = useRoute();
@@ -117,10 +173,28 @@ const route = useRoute();
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
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();
@@ -129,14 +203,14 @@ const mapPathStore = useMapPathStore();
const numberBeforeMapInRoute = computed(() => {
const path = route.path;
const segments = path.split('/');
const mapIndex = segments.findIndex(segment => segment.includes('map'));
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 match ? match[0] : "No number found";
}
return 'No map segment found';
return "No map segment found";
});
onBeforeMount(() => {
@@ -157,11 +231,11 @@ const bpmnData = ref({
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 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);
@@ -173,50 +247,54 @@ const sidebarFilterRefComp = ref(null);
const tooltip = {
sidebarView: {
value: 'Visualization Setting',
class: 'ml-1',
value: "Visualization Setting",
class: "ml-1",
pt: {
text: 'text-[10px] p-1'
}
text: "text-[10px] p-1",
},
},
sidebarTraces: {
value: 'Trace',
class: 'ml-1',
value: "Trace",
class: "ml-1",
pt: {
text: 'text-[10px] p-1'
}
text: "text-[10px] p-1",
},
},
sidebarFilter: {
value: 'Filter',
class: 'ml-1',
value: "Filter",
class: "ml-1",
pt: {
text: 'text-[10px] p-1'
}
text: "text-[10px] p-1",
},
},
sidebarState: {
value: 'Summary',
class: 'ml-1',
value: "Summary",
class: "ml-1",
pt: {
text: 'text-[10px] p-1'
}
text: "text-[10px] p-1",
},
},
};
// Computed
const sidebarLeftValue = computed(() => {
return sidebarView.value === true || sidebarTraces.value === true || sidebarFilter.value === true;
return (
sidebarView.value === true ||
sidebarTraces.value === true ||
sidebarFilter.value === true
);
});
// Watch
watch(sidebarView, (newValue) => {
if(newValue) {
if (newValue) {
sidebarFilter.value = false;
sidebarTraces.value = false;
}
});
watch(sidebarFilter, (newValue) => {
if(newValue) {
if (newValue) {
sidebarView.value = false;
sidebarState.value = false;
sidebarTraces.value = false;
@@ -225,7 +303,7 @@ watch(sidebarFilter, (newValue) => {
});
watch(sidebarTraces, (newValue) => {
if(newValue) {
if (newValue) {
sidebarView.value = false;
sidebarState.value = false;
sidebarFilter.value = false;
@@ -234,7 +312,7 @@ watch(sidebarTraces, (newValue) => {
});
watch(sidebarState, (newValue) => {
if(newValue) {
if (newValue) {
sidebarFilter.value = false;
sidebarTraces.value = false;
}
@@ -273,7 +351,7 @@ async function switchRank(rankValue) {
* @param {string} type - 'freq' or 'duration'.
* @param {string} option - The data option (e.g., 'total', 'average').
*/
async function switchDataLayerType(type, option){
async function switchDataLayerType(type, option) {
dataLayerType.value = type;
dataLayerOption.value = option;
createCy(mapType.value);
@@ -284,7 +362,7 @@ async function switchDataLayerType(type, option){
* @param {object} e - Object containing the trace id.
*/
async function switchTraceId(e) {
if(e.id == traceId.value) return;
if (e.id == traceId.value) return;
isLoading.value = true;
traceId.value = e.id;
await allMapDataStore.getTraceDetail();
@@ -299,21 +377,21 @@ async function switchTraceId(e) {
function setNodesData(mapData) {
const mapTypeVal = mapType.value;
const logFreq = {
"total": "",
"rel_freq": "",
"average": "",
"median": "",
"max": "",
"min": "",
"cases": ""
total: "",
rel_freq: "",
average: "",
median: "",
max: "",
min: "",
cases: "",
};
const logDuration = {
"total": "",
"rel_duration": "",
"average": "",
"median": "",
"max": "",
"min": "",
total: "",
rel_duration: "",
average: "",
median: "",
max: "",
min: "",
};
const gateway = {
parallel: "+",
@@ -322,63 +400,63 @@ function setNodesData(mapData) {
};
mapData.nodes = [];
const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
mapSource.vertices.forEach(node => {
const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
mapSource.vertices.forEach((node) => {
switch (node.type) {
case 'gateway':
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,
}
})
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;
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,
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,
}
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,
}
})
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;
}
});
@@ -391,26 +469,26 @@ function setNodesData(mapData) {
function setEdgesData(mapData) {
const mapTypeVal = mapType.value;
const logDuration = {
"total": "",
"rel_duration": "",
"average": "",
"median": "",
"max": "",
"min": "",
"cases": ""
total: "",
rel_duration: "",
average: "",
median: "",
max: "",
min: "",
cases: "",
};
mapData.edges = [];
const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
mapSource.edges.forEach(edge => {
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,
source: edge.tail,
target: edge.head,
freq: edge.freq,
duration: edge.duration === null ? logDuration : edge.duration,
style: "dotted",
lineWidth: 1,
},
});
});
@@ -421,20 +499,32 @@ function setEdgesData(mapData) {
* @param {string} type - 'processMap' or 'bpmn'.
*/
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 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){
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);
};
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,
);
}
}
/**
@@ -446,19 +536,30 @@ function setActivityBgImage(mapData) {
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]));
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++) {
for (let i = 0; i < ImgCapsules.length; i++) {
const startIdx = i * groupSize;
const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + 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 = {
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,
@@ -473,12 +574,12 @@ function setActivityBgImage(mapData) {
try {
const routeParams = route.params;
const file = route.meta.file;
const isCheckPage = route.name.includes('Check');
const isCheckPage = route.name.includes("Check");
isLoading.value = true;
switch (routeParams.type) {
case 'log':
if(!isCheckPage) {
case "log":
if (!isCheckPage) {
logId.value = routeParams.fileId;
baseLogId.value = routeParams.fileId;
} else {
@@ -486,15 +587,17 @@ function setActivityBgImage(mapData) {
baseLogId.value = file.parent.id;
}
break;
case 'filter':
if(!isCheckPage) {
case "filter":
if (!isCheckPage) {
createFilterId.value = routeParams.fileId;
} else {
createFilterId.value = file.parent.id;
}
await allMapDataStore.fetchFunnel(createFilterId.value);
isRuleData.value = Array.from(temporaryData.value);
ruleData.value = isRuleData.value.map(e => sidebarFilterRefComp.value.setRule(e));
ruleData.value = isRuleData.value.map((e) =>
sidebarFilterRefComp.value.setRule(e),
);
break;
}
await allMapDataStore.getAllMapData();
@@ -506,20 +609,20 @@ function setActivityBgImage(mapData) {
await allMapDataStore.getFilterParams();
await allMapDataStore.getTraceDetail();
emitter.on('saveModal', boolean => {
emitter.on("saveModal", (boolean) => {
sidebarView.value = boolean;
sidebarFilter.value = boolean;
sidebarTraces.value = boolean;
sidebarState.value = boolean;
});
emitter.on('leaveFilter', boolean => {
emitter.on("leaveFilter", (boolean) => {
sidebarView.value = boolean;
sidebarFilter.value = boolean;
sidebarTraces.value = boolean;
sidebarState.value = boolean;
});
} catch (error) {
console.error('Failed to initialize map:', error);
console.error("Failed to initialize map:", error);
} finally {
isLoading.value = false;
}

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

@@ -1,5 +1,10 @@
<template>
<Chart type="line" :data="primeVueSetDataState" :options="primeVueSetOptionsState" class="h-96" />
<Chart
type="line"
:data="primeVueSetDataState"
:options="primeVueSetOptionsState"
class="h-96"
/>
</template>
<script setup>
@@ -14,66 +19,66 @@
* occurrence data with Chart.js bar charts.
*/
import { ref, onMounted } from 'vue';
import { ref, onMounted } from "vue";
import {
setTimeStringFormatBaseOnTimeDifference,
mapTimestampToAxisTicksByFormat,
} from '@/module/timeLabel.js';
} from "@/module/timeLabel.js";
const knownScaleLineChartOptions = {
x: {
type: 'time',
const knownScaleLineChartOptions = {
x: {
type: "time",
title: {
display: true,
color: '#334155',
font: {
display: true,
color: "#334155",
font: {
size: 12,
lineHeight: 2
}
lineHeight: 2,
},
},
time: {
displayFormats: {
second: 'h:mm:ss', // ex: 1:11:11
minute: 'M/d h:mm', // ex: 1/1 1:11
hour: 'M/d h:mm', // ex: 1/1 1:11
day: 'M/d h', // ex: 1/1 1
month: 'y/M/d', // ex: 1911/1/1
},
displayFormats: {
second: "h:mm:ss", // ex: 1:11:11
minute: "M/d h:mm", // ex: 1/1 1:11
hour: "M/d h:mm", // ex: 1/1 1:11
day: "M/d h", // ex: 1/1 1
month: "y/M/d", // ex: 1911/1/1
},
},
ticks: {
display: true,
maxRotation: 0, // Do not rotate labels (range: 0~50)
color: '#64748b',
source: 'labels', // Dynamically display label count proportionally
display: true,
maxRotation: 0, // Do not rotate labels (range: 0~50)
color: "#64748b",
source: "labels", // Dynamically display label count proportionally
},
border: {
color: '#64748b',
color: "#64748b",
},
grid: {
tickLength: 0, // Prevent grid lines from extending beyond the axis
}
},
y: {
tickLength: 0, // Prevent grid lines from extending beyond the axis
},
},
y: {
beginAtZero: true, // Scale includes 0
title: {
display: true,
color: '#334155',
font: {
display: true,
color: "#334155",
font: {
size: 12,
lineHeight: 2
lineHeight: 2,
},
},
},
ticks:{
color: '#64748b',
padding: 8,
ticks: {
color: "#64748b",
padding: 8,
},
grid: {
color: '#64748b',
color: "#64748b",
},
border: {
display: false, // Hide the extra border line on the left side
display: false, // Hide the extra border line on the left side
},
},
},
};
const props = defineProps({
@@ -93,8 +98,8 @@ const props = defineProps({
const primeVueSetDataState = ref(null);
const primeVueSetOptionsState = ref(null);
const colorPrimary = ref('#0099FF');
const colorSecondary = ref('#FFAA44');
const colorPrimary = ref("#0099FF");
const colorSecondary = ref("#FFAA44");
/**
* Compare page and Performance have this same function.
@@ -103,13 +108,15 @@ const colorSecondary = ref('#FFAA44');
* @param customizeOptions.content
* @param customizeOptions.ticksOfXAxis
*/
const getCustomizedScaleOption = (whichScaleObj, {customizeOptions: {
content,
ticksOfXAxis,
},
}) => {
const getCustomizedScaleOption = (
whichScaleObj,
{ customizeOptions: { content, ticksOfXAxis } },
) => {
let resultScaleObj;
resultScaleObj = customizeScaleChartOptionTitleByContent(whichScaleObj, content);
resultScaleObj = customizeScaleChartOptionTitleByContent(
whichScaleObj,
content,
);
resultScaleObj = customizeScaleChartOptionTicks(resultScaleObj, ticksOfXAxis);
return resultScaleObj;
};
@@ -125,14 +132,14 @@ const customizeScaleChartOptionTicks = (scaleObjectToAlter, ticksOfXAxis) => {
...scaleObjectToAlter,
x: {
...scaleObjectToAlter.x,
ticks: {
...scaleObjectToAlter.x.ticks,
callback: function(value, index) {
// Customize x-axis time ticks based on different intervals
return ticksOfXAxis[index];
},
ticks: {
...scaleObjectToAlter.x.ticks,
callback: function (value, index) {
// Customize x-axis time ticks based on different intervals
return ticksOfXAxis[index];
},
},
},
};
};
@@ -154,21 +161,21 @@ const customizeScaleChartOptionTitleByContent = (whichScaleObj, content) => {
return {
...whichScaleObj,
x: {
...whichScaleObj.x,
title: {
...whichScaleObj.x.title,
text: content.x
}
x: {
...whichScaleObj.x,
title: {
...whichScaleObj.x.title,
text: content.x,
},
y: {
...whichScaleObj.y,
title: {
...whichScaleObj.y.title,
text: content.y
}
}
};
},
y: {
...whichScaleObj.y,
title: {
...whichScaleObj.y.title,
text: content.y,
},
},
};
};
/**
@@ -190,7 +197,7 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
// Consider the dimension of chartData.data
// When handling the Compare page case
if(pageName === "Compare"){
if (pageName === "Compare") {
datasetsPrimary = chartData.data[0].data;
datasetsSecondary = chartData.data[1].data;
@@ -210,9 +217,9 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
tension: 0, // Bezier curve tension
borderColor: colorSecondary,
pointBackgroundColor: colorSecondary,
}
},
];
xData = chartData.data[0].data.map(item => new Date(item.x).getTime());
xData = chartData.data[0].data.map((item) => new Date(item.x).getTime());
} else {
datasets = chartData.data;
datasetsArr = [
@@ -221,23 +228,25 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
data: datasets,
fill: false,
tension: 0, // Bezier curve tension
borderColor: '#0099FF',
}
borderColor: "#0099FF",
},
];
xData = chartData.data.map(item => new Date(item.x).getTime());
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, {
knownScaleLineChartOptions,
{
customizeOptions: {
content, ticksOfXAxis,
}
});
content,
ticksOfXAxis,
},
},
);
primeVueSetData = {
labels: xData,
@@ -251,20 +260,20 @@ const getLineChartPrimeVueSetting = (chartData, content, pageName) => {
top: 16,
left: 8,
right: 8,
}
},
},
plugins: {
legend: false, // Legend
tooltip: {
displayColors: true,
titleFont: {weight: 'normal'},
titleFont: { weight: "normal" },
callbacks: {
label: function(tooltipItem) {
// Get the data
const label = tooltipItem.dataset.label || '';
label: function (tooltipItem) {
// Get the data
const label = tooltipItem.dataset.label || "";
// Build the tooltip label with dataset color indicator
return `${label}: ${tooltipItem.parsed.y}`; // Use Unicode block to represent color
// Build the tooltip label with dataset color indicator
return `${label}: ${tooltipItem.parsed.y}`; // Use Unicode block to represent color
},
},
},

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

File diff suppressed because it is too large Load Diff