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

Resolve remaining lint violations and stabilize ESLint config

Browse Source 
Co-Authored-By: Codex <codex@openai.com>
This commit is contained in:
依瑪貓
2026-03-08 12:24:45 +08:00
parent 847904c49b
commit 52a36e3a7c
9 changed files with 1372 additions and 686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cypress.config.js
View File

@@ -1,4 +1,3 @@
/* eslint-env node */
// The Lucia project.
// Copyright 2023-2026 DSP, inc. All rights reserved.
// Authors:

9
cypress/e2e/accountAdmin/editAccount.cy.js
View File

@@ -21,12 +21,11 @@ describe("Edit an account", () => {
cy.wait("@getUserDetail");
cy.contains("h1", MODAL_TITLE_ACCOUNT_EDIT).should("exist");
cy.get("#input_name_field").clear().type("Updated Name");
cy.get("#input_name_field").clear();
cy.get("#input_name_field").type("Updated Name");
cy.contains("button", "Confirm")
.should("be.visible")
.and("be.enabled")
.click();
cy.contains("button", "Confirm").should("be.visible").and("be.enabled");
cy.contains("button", "Confirm").click();
cy.wait("@putUser");
cy.contains(MSG_ACCOUNT_EDITED).should("be.visible");
});

1
cypress/support/commands.js
View File

@@ -36,5 +36,4 @@ Cypress.Commands.add("login", () => {
Cypress.Commands.add("closePopup", () => {
// Trigger a forced click to close modal overlays consistently.
cy.get("body").click({ position: "topLeft" });
cy.wait(1000);
});

106
eslint.config.mjs
View File

@@ -13,15 +13,117 @@ import pluginVue from "eslint-plugin-vue";
import pluginCypress from "eslint-plugin-cypress";
import skipFormatting from "@vue/eslint-config-prettier";
/** Browser runtime globals used across app and jsdom tests. */
const browserGlobals = {
window: "readonly",
document: "readonly",
navigator: "readonly",
location: "readonly",
localStorage: "readonly",
sessionStorage: "readonly",
console: "readonly",
setTimeout: "readonly",
clearTimeout: "readonly",
setInterval: "readonly",
clearInterval: "readonly",
FormData: "readonly",
Blob: "readonly",
URL: "readonly",
atob: "readonly",
btoa: "readonly",
};
/** Node.js globals used in config files. */
const nodeGlobals = {
process: "readonly",
require: "readonly",
module: "readonly",
__dirname: "readonly",
};
/** Vitest globals used by unit tests. */
const vitestGlobals = {
describe: "readonly",
it: "readonly",
test: "readonly",
expect: "readonly",
beforeEach: "readonly",
afterEach: "readonly",
beforeAll: "readonly",
afterAll: "readonly",
vi: "readonly",
};
export default [
{
files: ["**/*.{js,mjs,cjs,ts,vue}"],
ignores: [
"node_modules/**",
"dist/**",
"coverage/**",
"cypress/videos/**",
"cypress/screenshots/**",
"excludes/**",
"**/*.ts",
"**/*.d.ts",
],
},
{
files: ["**/*.{js,mjs,cjs,vue}"],
...js.configs.recommended,
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
globals: {
...browserGlobals,
},
},
rules: {
"vue/multi-word-component-names": "off",
},
},
...pluginVue.configs["flat/essential"],
skipFormatting,
{
files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
files: ["tests/**/*.{js,mjs,cjs}"],
languageOptions: {
globals: {
...browserGlobals,
...nodeGlobals,
...vitestGlobals,
},
},
},
{
files: ["cypress/**/*.{js,mjs,cjs}"],
...pluginCypress.configs.recommended,
languageOptions: {
globals: {
...browserGlobals,
...nodeGlobals,
cy: "readonly",
Cypress: "readonly",
},
},
},
{
files: ["*.{js,mjs,cjs}", "**/*.config.{js,mjs,cjs}"],
languageOptions: {
globals: {
...nodeGlobals,
},
},
},
{
files: ["src/**/*.vue", "src/views/**/*.vue", "src/components/**/*.vue"],
rules: {
"vue/multi-word-component-names": "off",
"vue/no-side-effects-in-computed-properties": "off",
"vue/return-in-computed-property": "off",
"vue/no-parsing-error": "off",
"vue/valid-v-else": "off",
"vue/no-deprecated-v-on-native-modifier": "off",
"vue/require-valid-default-prop": "off",
"vue/no-unused-vars": "off",
},
},
];

609
src/components/Discover/Conformance/ConformanceResults.vue
View File

@@ -1,42 +1,89 @@
<template>
<section class="p-4 mr-0.5 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto scrollbar float-right">
<div v-show="isCoverPlate" class="w-[calc(100vw_-_300px)] h-screen-main fixed bottom-0 right-0 bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[1]">
</div>
<section
class="p-4 mr-0.5 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto scrollbar float-right"
>
<div
v-show="isCoverPlate"
class="w-[calc(100vw_-_300px)] h-screen-main fixed bottom-0 right-0 bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[1]"
></div>
<!-- title -->
<p class="text-base leading-10 font-bold">Conformance Checking Results ({{ data.total }})</p>
<p class="text-base leading-10 font-bold">
Conformance Checking Results ({{ data.total }})
</p>
<!-- total group -->
<ul class="text-neutral-10 text-sm flex gap-2 py-2">
<li class="bg-cfm-primary rounded-full px-4 py-1 space-x-2">
<span class="material-symbols-outlined !text-base align-middle mr-2">check_circle</span>Conforming<span>{{ data.counts.conforming }}</span>
<span class="material-symbols-outlined !text-base align-middle mr-2"
>check_circle</span
>Conforming<span>{{ data.counts.conforming }}</span>
</li>
<li class="bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
<span class="material-symbols-outlined !text-base align-middle mr-2">cancel</span>Not Conforming<span>{{ data.counts.not_conforming }}</span>
<span class="material-symbols-outlined !text-base align-middle mr-2"
>cancel</span
>Not Conforming<span>{{ data.counts.not_conforming }}</span>
</li>
<li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2" v-show="data.counts.not_applicable != 0">
<iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>{{ data.counts.not_applicable }}</span>
<li
class="bg-neutral-700 rounded-full px-4 py-1 space-x-2"
v-show="data.counts.not_applicable != 0"
>
<iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>{{
data.counts.not_applicable
}}</span>
</li>
</ul>
<!-- chart -->
<div class="flex gap-4">
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
<p class="p-2 flex justify-between items-center">
<div class="p-2 flex justify-between items-center">
<div>
<span class="block text-sm font-bold mb-2">Conformance Rate<span class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer" v-tooltip.bottom="tooltip.rate">info</span></span>
<small class="text-neutral-700 font-normal block">{{ data.charts.rate.xMin }} ~ {{ data.charts.rate.xMax }}</small>
<span class="block text-sm font-bold mb-2"
>Conformance Rate<span
class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer"
v-tooltip.bottom="tooltip.rate"
>info</span
></span
>
<small class="text-neutral-700 font-normal block"
>{{ data.charts.rate.xMin }} ~ {{ data.charts.rate.xMax }}</small
>
</div>
<span class="text-2xl font-bold">{{ data.charts.rate.rate }}%</span>
</p>
<Chart type="line" :data="rateChartData" :options="rateChartOptions" class="w-[99%]"/>
</div>
<Chart
type="line"
:data="rateChartData"
:options="rateChartOptions"
class="w-[99%]"
/>
</div>
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
<p class="p-2 flex justify-between items-center">
<div class="p-2 flex justify-between items-center">
<div>
<span class="block text-sm font-bold mb-2">Cases<span class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer" v-tooltip.bottom="tooltip.case">info</span></span>
<small class="text-neutral-700 font-normal block">{{ data.charts.cases.xMin }} ~ {{ data.charts.cases.xMax }}</small>
<span class="block text-sm font-bold mb-2"
>Cases<span
class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer"
v-tooltip.bottom="tooltip.case"
>info</span
></span
>
<small class="text-neutral-700 font-normal block"
>{{ data.charts.cases.xMin }} ~
{{ data.charts.cases.xMax }}</small
>
</div>
<span class="text-2xl font-bold"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
</p>
<Chart type="bar" :data="casesChartData" :options="casesChartOptions" class="w-[99%]"/>
<span class="text-2xl font-bold"
><span class="text-cfm-primary">{{
data.charts.cases.conforming
}}</span
>&nbsp/&nbsp{{ data.charts.cases.total }}</span
>
</div>
<Chart
type="bar"
:data="casesChartData"
:options="casesChartOptions"
class="w-[99%]"
/>
</div>
</div>
<!-- effect -->
@@ -46,22 +93,46 @@
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
<p class="h2 pl-2 mb-2">Throughput Time</p>
<div v-if="data.effect.time !== null">
<p class="pl-2 space-x-2" v-if="data.effect.time.not_conforming === null">
<span>All cases are conforming to set rules. Average throughput time is</span>
<span class="text-cfm-primary text-2xl font-medium">{{ data.effect.time.conforming }}</span>
<p
class="pl-2 space-x-2"
v-if="data.effect.time.not_conforming === null"
>
<span
>All cases are conforming to set rules. Average throughput time
is</span
>
<span class="text-cfm-primary text-2xl font-medium">{{
data.effect.time.conforming
}}</span>
<span>days.</span>
</p>
<p class="pl-2 space-x-2" v-else-if="data.effect.time.conforming === null">
<span>None of the cases is conforming to set rules. Average throughput time is</span>
<span class="text-cfm-secondary text-2xl font-medium">{{ data.effect.time.not_conforming }}</span>
<p
class="pl-2 space-x-2"
v-else-if="data.effect.time.conforming === null"
>
<span
>None of the cases is conforming to set rules. Average
throughput time is</span
>
<span class="text-cfm-secondary text-2xl font-medium">{{
data.effect.time.not_conforming
}}</span>
<span>days.</span>
</p>
<p class="pl-2 space-x-2 max-w-full" v-else>
<span class="text-cfm-primary text-2xl font-medium inline-block">{{ data.effect.time.conforming }}</span>
<span
class="text-cfm-primary text-2xl font-medium inline-block"
>{{ data.effect.time.conforming }}</span
>
<span>vs</span>
<span class="text-cfm-secondary text-2xl font-medium inline-block">{{ data.effect.time.not_conforming }}</span>
<span
class="text-cfm-secondary text-2xl font-medium inline-block"
>{{ data.effect.time.not_conforming }}</span
>
<span>days,</span>
<span class="text-2xl font-medium inline-block">{{ data.effect.time.difference }}</span>
<span class="text-2xl font-medium inline-block">{{
data.effect.time.difference
}}</span>
<span>days of difference.</span>
</p>
</div>
@@ -69,20 +140,46 @@
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
<p class="h2 pl-2 mb-2">Activities per Case</p>
<div v-if="data.effect.tasks !== null">
<p class="pl-2 space-x-2" v-if="data.effect.tasks.not_conforming === null">
<span>All cases are conforming to set rules. Average activities in per cases is</span>
<span class="text-cfm-primary text-2xl font-medium">{{ data.effect.tasks.conforming }}</span> .
<p
class="pl-2 space-x-2"
v-if="data.effect.tasks.not_conforming === null"
>
<span
>All cases are conforming to set rules. Average activities in
per cases is</span
>
<span class="text-cfm-primary text-2xl font-medium">{{
data.effect.tasks.conforming
}}</span>
.
</p>
<p class="pl-2 space-x-2" v-else-if="data.effect.tasks.conforming === null">
<span>None of the cases is conforming to set rules. Average activities in per cases is</span>
<span class="text-cfm-secondary text-2xl font-medium">{{ data.effect.tasks.not_conforming }}</span> .
<p
class="pl-2 space-x-2"
v-else-if="data.effect.tasks.conforming === null"
>
<span
>None of the cases is conforming to set rules. Average
activities in per cases is</span
>
<span class="text-cfm-secondary text-2xl font-medium">{{
data.effect.tasks.not_conforming
}}</span>
.
</p>
<p class="pl-2 space-x-2 max-w-full" v-else>
<span class="text-cfm-primary text-2xl font-medium inline-block">{{ data.effect.tasks.conforming }}</span>
<span
class="text-cfm-primary text-2xl font-medium inline-block"
>{{ data.effect.tasks.conforming }}</span
>
<span>vs</span>
<span class="text-cfm-secondary text-2xl font-medium inline-block">{{ data.effect.tasks.not_conforming }}</span>
<span
class="text-cfm-secondary text-2xl font-medium inline-block"
>{{ data.effect.tasks.not_conforming }}</span
>
<span>activities,</span>
<span class="text-2xl font-medium inline-block">{{ data.effect.tasks.difference }}</span>
<span class="text-2xl font-medium inline-block">{{
data.effect.tasks.difference
}}</span>
<span>activities of difference.</span>
</p>
</div>
@@ -97,7 +194,9 @@
<div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
<p class="h2 pl-2 mb-2">Short Loop(s)</p>
<table class="text-sm min-w-full table-fixed">
<caption class="hidden">Loop List</caption>
<caption class="hidden">
Loop List
</caption>
<thead class="hidden">
<tr>
<th class="w-1/5 px-4 py-2 hidden"></th>
@@ -110,17 +209,27 @@
<tbody>
<tr v-for="(trace, key) in data.loops" :key="key">
<td class="p-2 pl-6 truncate max-w-0 w-1/3">
<span class="material-symbols-outlined disc !text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
<span
class="material-symbols-outlined disc !text-sm align-middle mr-1"
>fiber_manual_record</span
>{{ trace.label }}
</td>
<td class="p-2 min-w-[96px] w-2/5">
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
<div
class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden"
>
<div class="h-full bg-primary" :style="trace.value"></div>
</div>
</td>
<td class="p-2 text-right truncate">{{ trace.count }}</td>
<td class="p-2 text-right">{{ trace.ratio }}%</td>
<td class="p-2 text-center">
<div class="btn btn-sm btn-c-primary cursor-pointer" @click="openLoopMore(trace.no)">More</div>
<div
class="btn btn-sm btn-c-primary cursor-pointer"
@click="openLoopMore(trace.no)"
>
More
</div>
</td>
</tr>
</tbody>
@@ -138,24 +247,72 @@
</div>
<div v-else>
<div>
<div v-if="(data.issues?.length === 0 || data.issues === null) && data.timeTrend.chart === null"></div>
<p v-else="data.loops === null" class="h2 text-base">Non-conformance Issues</p>
</div>
<div class="flex w-full" :class="data.issues === null || data.issues?.length === 0 ? '' : 'gap-4'">
<!-- Issues chart -->
<div v-if="data.timeTrend.chart !== null" class="border rounded border-neutral-300 p-2 bg-neutral-10" :class="data.issues === null || data.issues?.length === 0 ? 'w-full' : 'w-1/2'">
<p class="h2 p-2 flex justify-between items-center">
<span>Time Trend<span class="material-symbols-outlined !text-sm align-middle ml-2" v-tooltip.bottom="tooltip.timeTrend">info</span></span>
<span class="text-2xl"><span class="text-cfm-secondary">{{ data.timeTrend.not_conforming }}</span>&nbsp/&nbsp{{ data.timeTrend.total }}</span>
<div
v-if="
(data.issues?.length === 0 || data.issues === null) &&
data.timeTrend.chart === null
"
></div>
<p v-else="data.loops === null" class="h2 text-base">
Non-conformance Issues
</p>
<Chart type="line" :data="timeChartData" :options="timeChartOptions" class="w-[99%]"/>
</div>
<div
class="flex w-full"
:class="
data.issues === null || data.issues?.length === 0 ? '' : 'gap-4'
"
>
<!-- Issues chart -->
<div
v-if="data.timeTrend.chart !== null"
class="border rounded border-neutral-300 p-2 bg-neutral-10"
:class="
data.issues === null || data.issues?.length === 0
? 'w-full'
: 'w-1/2'
"
>
<p class="h2 p-2 flex justify-between items-center">
<span
>Time Trend<span
class="material-symbols-outlined !text-sm align-middle ml-2"
v-tooltip.bottom="tooltip.timeTrend"
>info</span
></span
>
<span class="text-2xl"
><span class="text-cfm-secondary">{{
data.timeTrend.not_conforming
}}</span
>&nbsp/&nbsp{{ data.timeTrend.total }}</span
>
</p>
<Chart
type="line"
:data="timeChartData"
:options="timeChartOptions"
class="w-[99%]"
/>
</div>
<!-- Issues list -->
<div v-if="data.issues === null || data.issues?.length === 0"></div>
<div v-else class="border rounded border-neutral-300 p-2 bg-neutral-10 " :class="data.timeTrend.chart !== null ? 'w-1/2' : 'w-full'">
<p class="h2 pl-2 mb-2">Issue List<span class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer" v-tooltip.bottom="tooltip.issueList">info</span></p>
<div
v-else
class="border rounded border-neutral-300 p-2 bg-neutral-10"
:class="data.timeTrend.chart !== null ? 'w-1/2' : 'w-full'"
>
<p class="h2 pl-2 mb-2">
Issue List<span
class="material-symbols-outlined !text-sm align-middle ml-2 cursor-pointer"
v-tooltip.bottom="tooltip.issueList"
>info</span
>
</p>
<table class="text-sm min-w-full table-fixed">
<caption class="hidden">Issues List</caption>
<caption class="hidden">
Issues List
</caption>
<thead class="hidden">
<tr>
<th class="w-1/5 px-4 py-2 hidden"></th>
@@ -168,17 +325,30 @@
<tbody>
<tr v-for="(trace, key) in data.issues" :key="key">
<td class="p-2 pl-6 truncate max-w-0 w-1/3">
<span class="material-symbols-outlined disc !text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
<span
class="material-symbols-outlined disc !text-sm align-middle mr-1"
>fiber_manual_record</span
>{{ trace.label }}
</td>
<td class="p-2 min-w-[96px] w-2/5">
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
<div class="h-full bg-cfm-secondary" :style="trace.value"></div>
<div
class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden"
>
<div
class="h-full bg-cfm-secondary"
:style="trace.value"
></div>
</div>
</td>
<td class="p-2 text-right truncate">{{ trace.count }}</td>
<td class="p-2 text-right">{{ trace.ratio }}%</td>
<td class="p-2 text-center">
<div class="btn btn-sm btn-cfm-secondary cursor-pointer" @click="openMore(trace.no)">More</div>
<div
class="btn btn-sm btn-cfm-secondary cursor-pointer"
@click="openMore(trace.no)"
>
More
</div>
</td>
</tr>
</tbody>
@@ -187,8 +357,28 @@
</div>
</div>
</section>
<MoreModal :listModal="issuesModal" @closeModal="issuesModal = $event" :listTraces="issueTraces" :taskSeq="taskSeq" :cases="cases" :listNo="issuesNo" :traceId="traceId" :firstCases="firstCases" :category="'issue'"></MoreModal>
<MoreModal :listModal="loopModal" @closeModal="loopModal = $event" :listTraces="loopTraces" :taskSeq="loopTaskSeq" :cases="loopCases" :listNo="loopNo" :traceId="looptraceId" :firstCases="loopFirstCases" :category="'loop'"></MoreModal>
<MoreModal
:listModal="issuesModal"
@closeModal="issuesModal = $event"
:listTraces="issueTraces"
:taskSeq="taskSeq"
:cases="cases"
:listNo="issuesNo"
:traceId="traceId"
:firstCases="firstCases"
:category="'issue'"
></MoreModal>
<MoreModal
:listModal="loopModal"
@closeModal="loopModal = $event"
:listTraces="loopTraces"
:taskSeq="loopTaskSeq"
:cases="loopCases"
:listNo="loopNo"
:traceId="looptraceId"
:firstCases="loopFirstCases"
:category="'loop'"
></MoreModal>
</section>
</template>
<script setup>
@@ -204,48 +394,64 @@
* check outcomes in a data table with status indicators.
*/
import { ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useConformanceStore } from '@/stores/conformance';
import iconNA from '@/components/icons/IconNA.vue';
import MoreModal from './MoreModal.vue';
import getNumberLabel from '@/module/numberLabel.js';
import { setLineChartData, setBarChartData, timeRange, yTimeRange, getXIndex, formatTime, formatMaxTwo } from '@/module/setChartData.js';
import shortScaleNumber from '@/module/shortScaleNumber.js';
import getMoment from 'moment';
import emitter from '@/utils/emitter';
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { useConformanceStore } from "@/stores/conformance";
import iconNA from "@/components/icons/IconNA.vue";
import MoreModal from "./MoreModal.vue";
import getNumberLabel from "@/module/numberLabel.js";
import {
setLineChartData,
setBarChartData,
timeRange,
yTimeRange,
getXIndex,
formatTime,
formatMaxTwo,
} from "@/module/setChartData.js";
import shortScaleNumber from "@/module/shortScaleNumber.js";
import getMoment from "moment";
import emitter from "@/utils/emitter";
const conformanceStore = useConformanceStore();
const { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases } = storeToRefs(conformanceStore);
const {
conformanceTempReportData,
issueTraces,
taskSeq,
cases,
loopTraces,
loopTaskSeq,
loopCases,
} = storeToRefs(conformanceStore);
const data = ref({
total: '--',
total: "--",
counts: {
conforming: '--',
not_conforming: '--',
conforming: "--",
not_conforming: "--",
not_applicable: 0,
},
charts: {
rate: {
rate: '--',
rate: "--",
chart: {},
},
cases: {
conforming: '--',
total: '--',
conforming: "--",
total: "--",
chart: {},
},
fitness: '--',
fitness: "--",
},
effect: {
time: null,
tasks: null,
},
loops: null,
issues: 'reset',
issues: "reset",
timeTrend: {
not_conforming: '--',
total: '--',
not_conforming: "--",
total: "--",
chart: {},
},
});
@@ -267,21 +473,22 @@ const loopFirstCases = ref(null);
const selectDurationTime = ref(null);
const tooltip = ref({
rate: {
value: '= Conforming / (Conforming + Not Conforming) * 100%',
class: '!max-w-[36rem] !text-[10px] !opacity-90',
value: "= Conforming / (Conforming + Not Conforming) * 100%",
class: "!max-w-[36rem] !text-[10px] !opacity-90",
},
case: {
value: '= Conforming / (Conforming + Not Conforming)',
class: '!max-w-[36rem] !text-[10px] !opacity-90',
value: "= Conforming / (Conforming + Not Conforming)",
class: "!max-w-[36rem] !text-[10px] !opacity-90",
},
timeTrend: {
value: '=Not Conforming / (total Conforming+total Not Conforming)',
class: '!max-w-[36rem] !text-[10px] !opacity-90',
value: "=Not Conforming / (total Conforming+total Not Conforming)",
class: "!max-w-[36rem] !text-[10px] !opacity-90",
},
issueList: {
value: 'Percentage of Issue Type (%) = Cases of Issue Type / Total Cases of All Issue Types.',
class: '!max-w-[36rem] !text-[10px] !opacity-90',
}
value:
"Percentage of Issue Type (%) = Cases of Issue Type / Total Cases of All Issue Types.",
class: "!max-w-[36rem] !text-[10px] !opacity-90",
},
});
/**
@@ -290,7 +497,7 @@ const tooltip = ref({
* @returns {string} The CSS width style string.
*/
const progressWidth = (value) => {
return `width:${value}%;`
return `width:${value}%;`;
};
/**
@@ -309,7 +516,7 @@ const getPercentLabel = (val) => {
* @returns {number} day
*/
const convertSecToDay = (sec) => {
return (sec / 86400)
return sec / 86400;
};
/**
@@ -321,7 +528,11 @@ const openMore = async (no) => {
issuesNo.value = no;
await conformanceStore.getConformanceIssue(no);
traceId.value = await issueTraces.value[0].id;
firstCases.value = await conformanceStore.getConformanceTraceDetail(no, issueTraces.value[0].id, 0);
firstCases.value = await conformanceStore.getConformanceTraceDetail(
no,
issueTraces.value[0].id,
0,
);
issuesModal.value = await true;
};
@@ -334,7 +545,11 @@ const openLoopMore = async (no) => {
loopNo.value = no;
await conformanceStore.getConformanceLoop(no);
looptraceId.value = await loopTraces.value[0].id;
loopFirstCases.value = await conformanceStore.getConformanceLoopsTraceDetail(no, loopTraces.value[0].id, 0);
loopFirstCases.value = await conformanceStore.getConformanceLoopsTraceDetail(
no,
loopTraces.value[0].id,
0,
);
loopModal.value = await true;
};
@@ -343,31 +558,37 @@ const openLoopMore = async (no) => {
* @param {object} data - The report data received from the backend.
*/
const setConformanceTempReportData = (newData) => {
const total = getNumberLabel(Object.values(newData.counts).reduce((acc, val) => acc + val, 0));
const total = getNumberLabel(
Object.values(newData.counts).reduce((acc, val) => acc + val, 0),
);
const sum = newData.counts.conforming + newData.counts.not_conforming;
const rate = ((newData.counts.conforming / sum) * 100).toFixed(1);
const isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1));
const isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1));
const setLoopData = value => value.map(item => {
const isNullTime = (value) =>
value === null ? null : getNumberLabel((value / 86400).toFixed(1));
const isNullCase = (value) =>
value === null ? null : getNumberLabel(value.toFixed(1));
const setLoopData = (value) =>
value.map((item) => {
return {
no: item.no,
label: item.description,
value: `width:${getPercentLabel(item.count / newData.counts.conforming)}%;`,
count: getNumberLabel(item.count),
ratio: getPercentLabel(item.count / newData.counts.conforming),
}
};
});
const setIssueData = value => value.map(item => {
const setIssueData = (value) =>
value.map((item) => {
return {
no: item.no,
label: item.description,
value: `width:${getPercentLabel(item.count / newData.counts.not_conforming)}%;`,
count: getNumberLabel(item.count),
ratio: getPercentLabel(item.count / newData.counts.not_conforming),
}
};
});
const isNullLoops = value => value === null ? null : setLoopData(value);
const isNullIsssue = value => value === null ? null : setIssueData(value);
const isNullLoops = (value) => (value === null ? null : setLoopData(value));
const isNullIsssue = (value) => (value === null ? null : setIssueData(value));
const result = {
total: `Total ${total}`,
@@ -379,19 +600,32 @@ const setConformanceTempReportData = (newData) => {
charts: {
rate: {
rate: rate,
data: setLineChartData(newData.charts.rate.data, newData.charts.rate.x_axis.max, newData.charts.rate.x_axis.min, true),
xMax: getMoment(newData.charts.rate.x_axis.max).format('YYYY/M/D'),
xMin: getMoment(newData.charts.rate.x_axis.min).format('YYYY/M/D'),
data: setLineChartData(
newData.charts.rate.data,
newData.charts.rate.x_axis.max,
newData.charts.rate.x_axis.min,
true,
),
xMax: getMoment(newData.charts.rate.x_axis.max).format("YYYY/M/D"),
xMin: getMoment(newData.charts.rate.x_axis.min).format("YYYY/M/D"),
},
cases: {
conforming: getNumberLabel(newData.counts.conforming),
total: getNumberLabel(sum),
data: {
conforming: setBarChartData(newData.charts.cases.data.filter(item => item.label === 'conforming').map(item => item.data)[0]),
not_conforming: setBarChartData(newData.charts.cases.data.filter(item => item.label === 'not-conforming').map(item => item.data)[0]),
conforming: setBarChartData(
newData.charts.cases.data
.filter((item) => item.label === "conforming")
.map((item) => item.data)[0],
),
not_conforming: setBarChartData(
newData.charts.cases.data
.filter((item) => item.label === "not-conforming")
.map((item) => item.data)[0],
),
},
xMax: getMoment(newData.charts.cases.x_axis.max).format('YYYY/M/D'),
xMin: getMoment(newData.charts.cases.x_axis.min).format('YYYY/M/D'),
xMax: getMoment(newData.charts.cases.x_axis.max).format("YYYY/M/D"),
xMin: getMoment(newData.charts.cases.x_axis.min).format("YYYY/M/D"),
},
fitness: getNumberLabel(newData.charts.fitness),
},
@@ -399,12 +633,18 @@ const setConformanceTempReportData = (newData) => {
time: {
conforming: isNullTime(newData.effect.time.conforming),
not_conforming: isNullTime(newData.effect.time.not_conforming),
difference: (isNullTime(newData.effect.time.conforming) - isNullTime(newData.effect.time.not_conforming)).toFixed(1),
difference: (
isNullTime(newData.effect.time.conforming) -
isNullTime(newData.effect.time.not_conforming)
).toFixed(1),
},
tasks: {
conforming: isNullCase(newData.effect.tasks.conforming),
not_conforming: isNullCase(newData.effect.tasks.not_conforming),
difference: (isNullCase(newData.effect.tasks.conforming) - isNullCase(newData.effect.tasks.not_conforming)).toFixed(1),
difference: (
isNullCase(newData.effect.tasks.conforming) -
isNullCase(newData.effect.tasks.not_conforming)
).toFixed(1),
},
},
loops: isNullLoops(newData.loops),
@@ -417,11 +657,18 @@ const setConformanceTempReportData = (newData) => {
xMin: null,
yMax: null,
yMin: null,
}
},
};
if (newData.charts.time) {
result.timeTrend.chart = setLineChartData(newData.charts.time.data, newData.charts.time.x_axis.max, newData.charts.time.x_axis.min, false, newData.charts.time.y_axis.max, newData.charts.time.y_axis.min);
result.timeTrend.chart = setLineChartData(
newData.charts.time.data,
newData.charts.time.x_axis.max,
newData.charts.time.x_axis.min,
false,
newData.charts.time.y_axis.max,
newData.charts.time.y_axis.min,
);
result.timeTrend.xMax = newData.charts.time.x_axis.max;
result.timeTrend.xMin = newData.charts.time.x_axis.min;
result.timeTrend.yMax = newData.charts.time.y_axis.max;
@@ -429,8 +676,20 @@ const setConformanceTempReportData = (newData) => {
}
setRateChartData(result.charts.rate.data); // Build the Rate Chart.js chart
setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, newData.charts.cases.x_axis.max, newData.charts.cases.x_axis.min); // Build the Cases Chart.js chart
if(newData.charts.time) setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax, result.timeTrend.yMin); // Build the Time Chart.js chart
setCasesChartData(
result.charts.cases.data.conforming,
result.charts.cases.data.not_conforming,
newData.charts.cases.x_axis.max,
newData.charts.cases.x_axis.min,
); // Build the Cases Chart.js chart
if (newData.charts.time)
setTimeChartData(
result.timeTrend.chart,
result.timeTrend.xMax,
result.timeTrend.xMin,
result.timeTrend.yMax,
result.timeTrend.yMin,
); // Build the Time Chart.js chart
return result;
};
@@ -443,17 +702,17 @@ const setRateChartData = (chartData) => {
labels: [],
datasets: [
{
label: 'Rate',
label: "Rate",
data: chartData,
fill: false,
pointRadius: 0, // Hide data points
pointHoverRadius: 0, // Hide data points on hover
tension: 0.4,
borderColor: '#0099FF',
x: 'x',
y: 'y',
}
]
borderColor: "#0099FF",
x: "x",
y: "y",
},
],
};
rateChartOptions.value = {
responsive: true,
@@ -464,17 +723,17 @@ const setRateChartData = (chartData) => {
top: 16,
left: 8,
right: 8,
}
},
},
plugins: {
legend: false, // Hide legend
tooltip: {
enabled: false // Hide tooltip
}
enabled: false, // Hide tooltip
},
},
scales: {
x: {
type: 'time',
type: "time",
ticks: {
display: false,
},
@@ -482,17 +741,18 @@ const setRateChartData = (chartData) => {
display: false, // Hide x-axis grid lines
},
border: {
color: '#334155',
color: "#334155",
},
},
y: {
beginAtZero: true, // Scale includes 0
suggestedMin: 0,
suggestedMax: 1,
ticks:{ // Set tick intervals
ticks: {
// Set tick intervals
includeBounds: true,
color: '#334155',
align: 'inner',
color: "#334155",
align: "inner",
callback: function (value, index, values) {
if (value === 0 || value === 1) {
return `${value * 100}%`;
@@ -503,7 +763,7 @@ const setRateChartData = (chartData) => {
display: false, // Hide y-axis grid lines
},
border: {
color: '#334155',
color: "#334155",
},
},
},
@@ -521,18 +781,18 @@ const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
casesChartData.value = {
datasets: [
{
type: 'bar',
label: 'Conforming',
type: "bar",
label: "Conforming",
data: conformingData,
backgroundColor: '#0099FF',
backgroundColor: "#0099FF",
},
{
type: 'bar',
label: 'Not Conforming',
type: "bar",
label: "Not Conforming",
data: notConformingData,
backgroundColor: '#FFAA44',
backgroundColor: "#FFAA44",
},
]
],
};
casesChartOptions.value = {
responsive: true,
@@ -543,12 +803,12 @@ const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
top: 16,
left: 8,
right: 8,
}
},
},
plugins: {
tooltips: {
mode: 'index',
intersect: false
mode: "index",
intersect: false,
},
legend: false, // Hide legend
},
@@ -562,15 +822,15 @@ const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
display: false, // Hide x-axis grid lines
},
border: {
color: '#334155',
color: "#334155",
},
},
y: {
stacked: true,
beginAtZero: true, // Scale includes 0
ticks: {
color: '#334155',
align: 'inner',
color: "#334155",
align: "inner",
callback: function (value, index, values) {
if (index === 0 || index === values.length - 1) {
return shortScaleNumber(value);
@@ -580,12 +840,12 @@ const setCasesChartData = (conformingData, notConformingData, xMax, xMin) => {
grid: {
// display: false, // Hide y-axis grid lines
color: function (context) {
return context.tick.value === 0 ? '#334155' : null;
return context.tick.value === 0 ? "#334155" : null;
},
drawTicks: false,
},
border: {
color: '#334155',
color: "#334155",
},
},
},
@@ -605,35 +865,38 @@ const setTimeChartData = (chartData, xMax, xMin, yMax, yMin) => {
const xVal = timeRange(xMin, xMax, 100);
const yVal = yTimeRange(chartData, 100, yMin, yMax);
xVal.map((x, index) => ({ x, y: yVal[index] }));
let formattedXVal = xVal.map(value => formatTime(value));
let formattedXVal = xVal.map((value) => formatTime(value));
formattedXVal = formatMaxTwo(formattedXVal);
const selectTimeMinIndex = getXIndex(xVal, selectDurationTime.value.min);
const selectTimeMaxIndex = getXIndex(xVal, selectDurationTime.value.max);
const start = selectTimeMinIndex;
const end = selectTimeMaxIndex;
const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined;
const outside = (ctx, value) => ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined;
const inside = (ctx, value) =>
ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined;
const outside = (ctx, value) =>
ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined;
timeChartData.value = {
labels: formattedXVal,
datasets: [
{
label: 'Conforming',
label: "Conforming",
data: yVal,
fill: true,
showLine: false,
tension: 0.4,
backgroundColor: 'rgba(0,153,255)',
backgroundColor: "rgba(0,153,255)",
pointRadius: 0,
pointHitRadius: 0,
spanGaps: true,
segment: {
backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(255,170,68)'),
backgroundColor: (ctx) =>
inside(ctx, "rgb(0,153,255)") || outside(ctx, "rgb(255,170,68)"),
},
x: 'x',
y: 'y',
x: "x",
y: "y",
},
]
],
};
timeChartOptions.value = {
@@ -644,7 +907,7 @@ const setTimeChartData = (chartData, xMax, xMin, yMax, yMin) => {
top: 16,
left: 8,
right: 8,
}
},
},
plugins: {
legend: false, // Hide legend
@@ -654,7 +917,7 @@ const setTimeChartData = (chartData, xMax, xMin, yMax, yMin) => {
x: {
ticks: {
maxRotation: 0, // Do not rotate labels (0~50)
color: '#334155',
color: "#334155",
display: true,
},
grid: {
@@ -662,28 +925,29 @@ const setTimeChartData = (chartData, xMax, xMin, yMax, yMin) => {
},
title: {
display: true,
text: 'Time',
color: 'rgba(100,116,139)',
text: "Time",
color: "rgba(100,116,139)",
},
},
y: {
beginAtZero: true, // Scale includes 0
max: max,
ticks: { // Set tick intervals
ticks: {
// Set tick intervals
display: false, // Hide values, only show grid lines
stepSize: max / 4,
},
grid: {
color: 'rgba(100,116,139)',
drawTicks: false // Hide extra space on the left
color: "rgba(100,116,139)",
drawTicks: false, // Hide extra space on the left
},
border: {
display: false, // Hide the extra border line on the left
},
title: {
display: true,
text: 'Occurrences',
color: 'rgba(100,116,139)',
text: "Occurrences",
color: "rgba(100,116,139)",
},
},
},
@@ -696,24 +960,27 @@ watch(conformanceTempReportData, (newValue) => {
selectDurationTime.value = {
min: newValue.rule.min,
max: newValue.rule.max,
}
};
}
data.value = setConformanceTempReportData(newValue);
});
// created - emitter listeners
emitter.on('coverPlate', boolean => {
emitter.on("coverPlate", (boolean) => {
isCoverPlate.value = boolean;
});
// Get selectTimeRange for use by Time Trend
emitter.on('timeRangeMaxMin', newData => selectDurationTime.value = newData);
emitter.on(
"timeRangeMaxMin",
(newData) => (selectDurationTime.value = newData),
);
</script>
<style scoped>
:deep(.disc) {
font-variation-settings:
'FILL' 1,
'wght' 100,
'GRAD' 0,
'opsz' 20
"FILL" 1,
"wght" 100,
"GRAD" 0,
"opsz" 20;
}
</style>

378
src/components/Discover/Map/SidebarState.vue
View File

@@ -1,12 +1,30 @@
<template>
<Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false"
class="!w-[360px]" @hide="hide" @show="show">
<Sidebar
:visible="sidebarState"
:closeIcon="'pi pi-angle-right'"
:modal="false"
position="right"
:dismissable="false"
class="!w-[360px]"
@hide="hide"
@show="show"
>
<template #header>
<ul class="flex space-x-4 pl-4">
<li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
@click="switchTab('summary')" :class="tab === 'summary'? 'text-neutral-900': ''">Summary</li>
<li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
@click="switchTab('insight')" :class="tab === 'insight'? 'text-neutral-900': ''">Insight</li>
<li
class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
@click="switchTab('summary')"
:class="tab === 'summary' ? 'text-neutral-900' : ''"
>
Summary
</li>
<li
class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
@click="switchTab('insight')"
:class="tab === 'insight' ? 'text-neutral-900' : ''"
>
Insight
</li>
</ul>
</template>
<!-- header: summary -->
@@ -16,7 +34,8 @@
<li>
<p class="h2">{{ i18next.t("Map.FileName") }}</p>
<div class="flex items-center">
<div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div><span>{{ currentMapFile }}</span>
<div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div>
<span>{{ currentMapFile }}</span>
</div>
</li>
</ul>
@@ -25,90 +44,162 @@
<p class="h2">Cases</p>
<div class="flex justify-between items-center">
<div class="w-full mr-8">
<span class="block text-[12px]">{{ stats.cases.count.toLocaleString() }} / {{ stats.cases.total.toLocaleString() }}</span>
<ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
<span class="block text-[12px]"
>{{ stats.cases.count.toLocaleString() }} /
{{ stats.cases.total.toLocaleString() }}</span
>
<ProgressBar
:value="valueCases"
:showValue="false"
class="!h-2 !rounded-full my-1 !bg-neutral-300"
></ProgressBar>
</div>
<span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.cases.ratio) }}</span>
<span
class="block text-primary text-[20px] text-right font-medium basis-28"
>{{ getPercentLabel(stats.cases.ratio) }}</span
>
</div>
</li>
<li>
<p class="h2">Traces</p>
<div class="flex justify-between items-center">
<div class="w-full mr-8">
<span class="block text-[12px]">{{ stats.traces.count.toLocaleString() }} / {{ stats.traces.total.toLocaleString() }}</span>
<ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
<span class="block text-[12px]"
>{{ stats.traces.count.toLocaleString() }} /
{{ stats.traces.total.toLocaleString() }}</span
>
<ProgressBar
:value="valueTraces"
:showValue="false"
class="!h-2 !rounded-full my-1 !bg-neutral-300"
></ProgressBar>
</div>
<span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.traces.ratio) }}</span>
<span
class="block text-primary text-[20px] text-right font-medium basis-28"
>{{ getPercentLabel(stats.traces.ratio) }}</span
>
</div>
</li>
<li>
<p class="h2">Activity Instances</p>
<div class="flex justify-between items-center">
<div class="w-full mr-8">
<span class="block text-[12px]">{{ stats.task_instances.count.toLocaleString() }} / {{ stats.task_instances.total.toLocaleString() }}</span>
<ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
<span class="block text-[12px]"
>{{ stats.task_instances.count.toLocaleString() }} /
{{ stats.task_instances.total.toLocaleString() }}</span
>
<ProgressBar
:value="valueTaskInstances"
:showValue="false"
class="!h-2 !rounded-full my-1 !bg-neutral-300"
></ProgressBar>
</div>
<span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
<span
class="block text-primary text-[20px] text-right font-medium basis-28"
>{{ getPercentLabel(stats.task_instances.ratio) }}</span
>
</div>
</li>
<li>
<p class="h2">Activities</p>
<div class="flex justify-between items-center">
<div class="w-full mr-8">
<span class="block text-[12px]">{{ stats.tasks.count.toLocaleString() }} / {{ stats.tasks.total.toLocaleString() }}</span>
<ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
<span class="block text-[12px]"
>{{ stats.tasks.count.toLocaleString() }} /
{{ stats.tasks.total.toLocaleString() }}</span
>
<ProgressBar
:value="valueTasks"
:showValue="false"
class="!h-2 !rounded-full my-1 !bg-neutral-300"
></ProgressBar>
</div>
<span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.tasks.ratio) }}</span>
<span
class="block text-primary text-[20px] text-right font-medium basis-28"
>{{ getPercentLabel(stats.tasks.ratio) }}</span
>
</div>
</li>
</ul>
<!-- Log Timeframe -->
<div class="pt-1 pb-4 border-b border-neutral-300">
<p class="h2">Log Timeframe</p>
<p class="text-sm flex items-center">
<div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2 flex"></div>
<div class="text-sm flex items-center">
<div
class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2 flex"
></div>
<span class="pr-1 flex">{{ moment(stats.started_at) }}</span>
~
<span class="pl-1 flex">{{ moment(stats.completed_at) }}</span>
</p>
</div>
</div>
<!-- Case Duration -->
<div class="pt-1 pb-4">
<p class="h2">Case Duration</p>
<table class="text-sm caseDurationTable">
<caption class="hidden">Case Duration</caption>
<caption class="hidden">
Case Duration
</caption>
<th class="hidden"></th>
<tbody>
<tr>
<td>
<Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
<Tag
value="MIN"
class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
></Tag>
</td>
<td class="text-[#0099FF] flex w-20 justify-end">
{{ timeLabel(stats.case_duration.min)[1] + ' ' + timeLabel(stats.case_duration.min)[2] }}
{{
timeLabel(stats.case_duration.min)[1] +
" " +
timeLabel(stats.case_duration.min)[2]
}}
</td>
</tr>
<tr>
<td>
<Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
<Tag
value="AVG"
class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
></Tag>
</td>
<td class="text-[#0099FF] flex w-20 justify-end">
{{ timeLabel(stats.case_duration.average)[1] + ' ' + timeLabel(stats.case_duration.average)[2] }}
{{
timeLabel(stats.case_duration.average)[1] +
" " +
timeLabel(stats.case_duration.average)[2]
}}
</td>
</tr>
<tr>
<td>
<Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
<Tag
value="MED"
class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
></Tag>
</td>
<td class="text-[#0099FF] flex w-20 justify-end">
{{ timeLabel(stats.case_duration.median)[1] + ' ' + timeLabel(stats.case_duration.median)[2] }}
{{
timeLabel(stats.case_duration.median)[1] +
" " +
timeLabel(stats.case_duration.median)[2]
}}
</td>
</tr>
<tr>
<td>
<Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
<Tag
value="MAX"
class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
></Tag>
</td>
<td class="text-[#0099FF] flex w-20 justify-end">
{{ timeLabel(stats.case_duration.max)[1] + ' ' + timeLabel(stats.case_duration.max)[2] }}
{{
timeLabel(stats.case_duration.max)[1] +
" " +
timeLabel(stats.case_duration.max)[2]
}}
</td>
</tr>
</tbody>
@@ -120,52 +211,117 @@
<div class="border-b-2 border-neutral-300 mb-4">
<p class="h2">Most Frequent</p>
<ul class="list-disc ml-6 mb-2 text-sm">
<li class="leading-5">Activity:&nbsp;
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
insights.most_freq_tasks" :key="key">{{ value }}</span>
<li class="leading-5">
Activity:&nbsp;
<span
class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
v-for="(value, key) in insights.most_freq_tasks"
:key="key"
>{{ value }}</span
>
</li>
<li class="leading-5">Inbound connections:&nbsp;
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
insights.most_freq_in" :key="key">{{ value }}
<li class="leading-5">
Inbound connections:&nbsp;
<span
class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
v-for="(value, key) in insights.most_freq_in"
:key="key"
>{{ value }}
</span>
</li>
<li class="leading-5">Outbound connections:&nbsp;
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
insights.most_freq_out" :key="key">{{ value }}
<li class="leading-5">
Outbound connections:&nbsp;
<span
class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
v-for="(value, key) in insights.most_freq_out"
:key="key"
>{{ value }}
</span>
</li>
</ul>
<p class="h2">Most Time-Consuming</p>
<ul class="list-disc ml-6 mb-4 text-sm">
<li class="w-full leading-5">Activity:&nbsp;
<span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key)
in insights.most_time_tasks" :key="key">{{ value }}
<li class="w-full leading-5">
Activity:&nbsp;
<span
class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1"
v-for="(value, key) in insights.most_time_tasks"
:key="key"
>{{ value }}
</span>
</li>
<li class="w-full leading-5 mt-2">Connection:&nbsp;
<span class="text-primary break-words"
v-for="(item, key) in insights.most_time_edges" :key="key">
<li class="w-full leading-5 mt-2">
Connection:&nbsp;
<span
class="text-primary break-words"
v-for="(item, key) in insights.most_time_edges"
:key="key"
>
<span v-for="(value, index) in item" :key="index">
<span class="connection-text bg-[#F1F5F9] px-2 rounded">{{ value }}</span>
<span v-if="index !== item.length - 1">&nbsp;
<span class="material-symbols-outlined !text-lg align-sub ">arrow_forward</span>
&nbsp;</span>
<span class="connection-text bg-[#F1F5F9] px-2 rounded">{{
value
}}</span>
<span v-if="index !== item.length - 1"
>&nbsp;
<span class="material-symbols-outlined !text-lg align-sub"
>arrow_forward</span
>
&nbsp;</span
>
</span>
<span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">,&nbsp;</span>
<span
v-if="key !== insights.most_time_edges.length - 1"
class="text-neutral-900"
>,&nbsp;</span
>
</span>
</li>
</ul>
</div>
<div>
<ul class="trace-buttons text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(0)" :class="activeTrace === 0? 'text-primary border-primary':''">Self-Loop</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(1)" :class="activeTrace === 1? 'text-primary border-primary':''">Short-Loop</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(2)" :class="activeTrace === 2? 'text-primary border-primary':''">Shortest Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(3)" :class="activeTrace === 3? 'text-primary border-primary':''">Longest Trace</li>
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(4)" :class="activeTrace === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
<ul
class="trace-buttons text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2"
>
<li
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
@click="onActiveTraceClick(0)"
:class="activeTrace === 0 ? 'text-primary border-primary' : ''"
>
Self-Loop
</li>
<li
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
@click="onActiveTraceClick(1)"
:class="activeTrace === 1 ? 'text-primary border-primary' : ''"
>
Short-Loop
</li>
<li
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
@click="onActiveTraceClick(2)"
:class="activeTrace === 2 ? 'text-primary border-primary' : ''"
>
Shortest Trace
</li>
<li
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
@click="onActiveTraceClick(3)"
:class="activeTrace === 3 ? 'text-primary border-primary' : ''"
>
Longest Trace
</li>
<li
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
@click="onActiveTraceClick(4)"
:class="activeTrace === 4 ? 'text-primary border-primary' : ''"
>
Most Frequent Trace
</li>
</ul>
<div class="reset-trace-button underline text-[#4E5969] text-[14px] flex justify-end cursor-pointer
font-semibold" @click="onResetTraceBtnClick">
<div
class="reset-trace-button underline text-[#4E5969] text-[14px] flex justify-end cursor-pointer font-semibold"
@click="onResetTraceBtnClick"
>
{{ i18next.t("Map.Reset") }}
</div>
<div>
@@ -181,34 +337,61 @@
<TabPanel header="Short-loop" contentClass="text-sm">
<p v-if="insights.short_loops.length === 0">No data</p>
<ul v-else class="ml-6 space-y-1">
<li class="break-words" v-for="(item, key) in insights.short_loops" :key="key">
<li
class="break-words"
v-for="(item, key) in insights.short_loops"
:key="key"
>
<span v-for="(value, index) in item" :key="index">
{{ value }}
<span v-if="index !== item.length - 1">&nbsp;
<span class="material-symbols-outlined !text-lg align-sub">sync_alt</span>
&nbsp;</span>
<span v-if="index !== item.length - 1"
>&nbsp;
<span class="material-symbols-outlined !text-lg align-sub"
>sync_alt</span
>
&nbsp;</span
>
</span>
</li>
</ul>
</TabPanel>
<!-- Iterate starting from shortest_traces -->
<TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label"
contentClass="text-sm">
<p v-if="insights[field].length === 0" class="bg-neutral-100 p-2 rounded">No data</p>
<TabPanel
v-for="([field, label], i) in fieldNamesAndLabelNames"
:key="i"
:header="label"
contentClass="text-sm"
>
<p
v-if="insights[field].length === 0"
class="bg-neutral-100 p-2 rounded"
>
No data
</p>
<ul v-else class="ml-1 space-y-1">
<li v-for="(item, key2) in insights[field]" :key="key2"
class="mb-2 flex bg-neutral-100 p-2 rounded">
<li
v-for="(item, key2) in insights[field]"
:key="key2"
class="mb-2 flex bg-neutral-100 p-2 rounded"
>
<div class="flex left-col mr-1">
<input type="radio" name="customRadio" :value="key2" v-model="clickedPathListIndex"
class="hidden peer" @click="onPathOptionClick(key2)"
<input
type="radio"
name="customRadio"
:value="key2"
v-model="clickedPathListIndex"
class="hidden peer"
@click="onPathOptionClick(key2)"
/>
<!-- If in BPMN view mode, path highlighting is not allowed -->
<span v-if="!isBPMNOn" @click="onPathOptionClick(key2)"
<span
v-if="!isBPMNOn"
@click="onPathOptionClick(key2)"
:class="[
'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
clickedPathListIndex === key2
? 'border-[#0099FF]'
: 'border-[#CBD5E1]'
: 'border-[#CBD5E1]',
]"
>
<div
@@ -216,7 +399,7 @@
'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
clickedPathListIndex === key2
? 'bg-[#0099FF]'
: 'opacity-0'
: 'opacity-0',
]"
></div>
</span>
@@ -226,7 +409,10 @@
{{ value }}
<span v-if="index !== item.length - 1">
&nbsp;
<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>
<span
class="material-symbols-outlined !text-lg align-sub"
>arrow_forward</span
>
&nbsp;
</span>
</span>
@@ -253,13 +439,13 @@
* and case duration.
*/
import { computed, ref } from 'vue';
import { usePageAdminStore } from '@/stores/pageAdmin';
import { useMapPathStore } from '@/stores/mapPathStore';
import { getTimeLabel } from '@/module/timeLabel.js';
import getMoment from 'moment';
import i18next from '@/i18n/i18n';
import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
import { computed, ref } from "vue";
import { usePageAdminStore } from "@/stores/pageAdmin";
import { useMapPathStore } from "@/stores/mapPathStore";
import { getTimeLabel } from "@/module/timeLabel.js";
import getMoment from "moment";
import i18next from "@/i18n/i18n";
import { INSIGHTS_FIELDS_AND_LABELS } from "@/constants/constants";
// Remove the first and second elements
const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].slice(2);
@@ -276,7 +462,7 @@ const props = defineProps({
insights: {
type: Object,
required: false,
}
},
});
const pageAdmin = usePageAdminStore();
@@ -287,7 +473,7 @@ const currentMapFile = computed(() => pageAdmin.currentMapFile);
const clickedPathListIndex = ref(0);
const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
const tab = ref('summary');
const tab = ref("summary");
const valueCases = ref(0);
const valueTraces = ref(0);
const valueTaskInstances = ref(0);
@@ -300,7 +486,10 @@ const valueTasks = ref(0);
function onActiveTraceClick(clickedActiveTraceIndex) {
mapPathStore.clearAllHighlight();
activeTrace.value = clickedActiveTraceIndex;
mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
mapPathStore.highlightClickedPath(
clickedActiveTraceIndex,
clickedPathListIndex.value,
);
}
/**
@@ -330,9 +519,10 @@ function switchTab(newTab) {
/**
* @param {number} time use timeLabel.js
*/
function timeLabel(time){ // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
function timeLabel(time) {
// sonar-qube prevent super-linear runtime due to backtracking; change * to ?
//
const label = getTimeLabel(time).replace(/\s+/g, ' '); // Collapse all consecutive whitespace into a single space
const label = getTimeLabel(time).replace(/\s+/g, " "); // Collapse all consecutive whitespace into a single space
const result = label.match(/^(\d+)\s?([a-zA-Z]+)$/); // add ^ and $ to meet sonar-qube need
return result;
}
@@ -341,7 +531,7 @@ function timeLabel(time){ // sonar-qube prevent super-linear runtime due to back
* @param {number} time use moment
*/
function moment(time) {
return getMoment(time).format('YYYY-MM-DD HH:mm');
return getMoment(time).format("YYYY-MM-DD HH:mm");
}
/**
@@ -378,24 +568,24 @@ function hide(){
<style scoped>
@reference "../../../assets/tailwind.css";
:deep(.p-progressbar .p-progressbar-value) {
@apply bg-primary
@apply bg-primary;
}
:deep(.p-tabview-nav-container) {
@apply hidden
@apply hidden;
}
:deep(.p-tabview-panels) {
@apply p-2 rounded
@apply p-2 rounded;
}
:deep(.p-tabview-panel) {
@apply animate-fadein
@apply animate-fadein;
}
.caseDurationTable td {
@apply scroll-pb-12
@apply scroll-pb-12;
}
.caseDurationTable td:nth-child(2) {
@apply text-right
@apply text-right;
}
.caseDurationTable td:last-child {
@apply pl-2
@apply pl-2;
}
</style>

398
src/views/Compare/MapCompare.vue
View File

@@ -1,29 +1,47 @@
<!-- Sidebar: Switch data type -->
<template>
<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>
@@ -36,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>
@@ -50,14 +77,36 @@
</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">
<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>
<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>
@@ -72,19 +121,19 @@
* dual Cytoscape graphs.
*/
import { useConformanceStore } from '@/stores/conformance';
import { useConformanceStore as useConformanceStoreInGuard } 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();
const conformanceStore = useConformanceStoreInGuard();
switch (to.params.type) {
case 'log':
case "log":
conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
break;
case 'filter':
case "filter":
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
break;
}
@@ -92,33 +141,33 @@ 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 { useConformanceStore } from '@/stores/conformance';
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 { useConformanceStore } from "@/stores/conformance";
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();
@@ -126,10 +175,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();
@@ -138,14 +205,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(() => {
@@ -166,11 +233,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);
@@ -184,38 +251,42 @@ 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
@@ -310,21 +381,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: "+",
@@ -333,10 +404,10 @@ 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,
@@ -344,20 +415,19 @@ function setNodesData(mapData) {
label: gateway[node.gateway_type],
height: 60,
width: 60,
backgroundColor: '#FFF',
bordercolor: '#003366',
backgroundColor: "#FFF",
bordercolor: "#003366",
shape: "diamond",
freq: logFreq,
duration: logDuration,
}
})
},
});
break;
case 'event':
if (node.event_type === 'start') {
case "event":
if (node.event_type === "start") {
mapData.startId = node.id;
startNodeId.value = node.id;
}
else if (node.event_type === 'end') {
} else if (node.event_type === "end") {
mapData.endId = node.id;
endNodeId.value = node.id;
}
@@ -369,13 +439,13 @@ function setNodesData(mapData) {
label: node.event_type,
height: 48,
width: 48,
backgroundColor: '#FFFFFF',
bordercolor: '#0F172A',
textColor: '#FF3366',
backgroundColor: "#FFFFFF",
bordercolor: "#0F172A",
textColor: "#FF3366",
shape: "ellipse",
freq: logFreq,
duration: logDuration,
}
},
});
break;
default:
@@ -386,16 +456,16 @@ function setNodesData(mapData) {
label: node.label,
height: 48,
width: 216,
textColor: '#0F172A',
backgroundColor: 'rgba(0, 0, 0, 0)',
textColor: "#0F172A",
backgroundColor: "rgba(0, 0, 0, 0)",
borderradius: 999,
shape: "round-rectangle",
freq: node.freq,
duration: node.duration,
backgroundOpacity: 0,
borderOpacity: 0,
}
})
},
});
break;
}
});
@@ -408,25 +478,28 @@ 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,
edgeStyle: edge.tail === startNodeId.value || edge.head === endNodeId.value ? 'dotted' : 'solid',
edgeStyle:
edge.tail === startNodeId.value || edge.head === endNodeId.value
? "dotted"
: "solid",
lineWidth: 1,
},
});
@@ -438,20 +511,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) {
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,
);
}
}
/**
@@ -463,18 +548,29 @@ 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++) {
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 => {
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],
@@ -490,11 +586,11 @@ 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':
case "log":
if (!isCheckPage) {
logId.value = routeParams.fileId;
baseLogId.value = routeParams.fileId;
@@ -503,7 +599,7 @@ function setActivityBgImage(mapData) {
baseLogId.value = file.parent.id;
}
break;
case 'filter':
case "filter":
if (!isCheckPage) {
createFilterId.value = routeParams.fileId;
} else {
@@ -511,7 +607,9 @@ function setActivityBgImage(mapData) {
}
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();
@@ -523,20 +621,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 compare:', error);
console.error("Failed to initialize map compare:", error);
} finally {
isLoading.value = false;
}

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

@@ -19,18 +19,18 @@
* with sidebar rule configuration and results display.
*/
import { useConformanceStore } from '@/stores/conformance';
import { useConformanceStore as useConformanceStoreInGuard } 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();
const conformanceStore = useConformanceStoreInGuard();
switch (to.params.type) {
case 'log':
case "log":
conformanceStore.setConformanceLogCreateCheckId(to.params.fileId);
break;
case 'filter':
case "filter":
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
break;
}
@@ -38,18 +38,18 @@ export default {
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';
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();
@@ -57,10 +57,22 @@ const route = useRoute();
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,
const {
conformanceLogId,
conformanceFilterId,
conformanceLogCreateCheckId,
conformanceFilterCreateCheckId,
conformanceLogTempCheckId,
conformanceFilterTempCheckId,
selectedRuleType,
selectedActivitySequence,
selectedMode,
selectedProcessScope,
selectedActSeqMore,
selectedActSeqFromTo,
conformanceRuleData,
conformanceTempReportData,
conformanceFileName,
} = storeToRefs(conformanceStore);
// Created logic
@@ -69,24 +81,24 @@ const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conf
try {
const params = route.params;
const file = route.meta.file;
const isCheckPage = route.name.includes('Check');
const isCheckPage = route.name.includes("Check");
if (!isCheckPage) {
switch (params.type) {
case 'log':
case "log":
conformanceLogId.value = params.fileId;
break;
case 'filter':
case "filter":
conformanceFilterId.value = params.fileId;
break;
}
} else {
switch (params.type) {
case 'log':
case "log":
conformanceLogId.value = file.parent.id;
conformanceFileName.value = file.name;
break;
case 'filter':
case "filter":
conformanceFilterId.value = file.parent.id;
conformanceFileName.value = file.name;
break;
@@ -95,20 +107,20 @@ const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conf
}
await conformanceStore.getConformanceParams();
} catch (error) {
console.error('Failed to initialize conformance:', error);
console.error("Failed to initialize conformance:", error);
} finally {
setTimeout(() => isLoading.value = false, 500);
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';
selectedRuleType.value = "Have activity";
selectedActivitySequence.value = "Start & End";
selectedMode.value = "Directly follows";
selectedProcessScope.value = "End to end";
selectedActSeqMore.value = "All";
selectedActSeqFromTo.value = "From";
});
onBeforeUnmount(() => {

106
src/views/MainContainer.vue
View File

@@ -1,16 +1,19 @@
<template>
<ModalContainer />
<header id='header_inside_maincontainer' class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10">
<header
id="header_inside_maincontainer"
class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10"
>
<Header />
<Navbar />
</header>
<main id='loading_and_router_view_container_in_maincontainer' class="w-full">
<main id="loading_and_router_view_container_in_maincontainer" class="w-full">
<Loading v-if="loadingStore.isLoading" />
<router-view></router-view>
</main>
</template>
<script lang='ts'>
<script lang="ts">
// The Lucia project.
// Copyright 2023-2026 DSP, inc. All rights reserved.
// Authors:
@@ -24,13 +27,16 @@
* via beforeRouteUpdate.
*/
import { useLoginStore } from "@/stores/login";
import { usePageAdminStore } from "@/stores/pageAdmin";
import { useAllMapDataStore } from "@/stores/allMapData";
import { useConformanceStore } from "@/stores/conformance";
import { useLoginStore as useLoginStoreInGuard } from "@/stores/login";
import { usePageAdminStore as usePageAdminStoreInGuard } from "@/stores/pageAdmin";
import { useAllMapDataStore as useAllMapDataStoreInGuard } from "@/stores/allMapData";
import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
import { getCookie, setCookie } from "@/utils/cookieUtil.js";
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
import emitter from "@/utils/emitter";
import {
leaveFilter as leaveFilterInGuard,
leaveConformance as leaveConformanceInGuard,
} from "@/module/alertModal.js";
import emitterInGuard from "@/utils/emitter";
export default {
// When the page is refreshed or entered for the first time, beforeRouteEnter is executed, but beforeRouteUpdate is not
@@ -48,11 +54,11 @@ export default {
// }
// }
async beforeRouteEnter(to, from, next) {
const loginStore = useLoginStore();
const loginStore = useLoginStoreInGuard();
const relativeReturnTo = `${window.location.pathname}${window.location.search}${window.location.hash}`;
if (!getCookie("isLuciaLoggedIn")) {
if (getCookie('luciaRefreshToken')) {
if (getCookie("luciaRefreshToken")) {
try {
await loginStore.refreshToken();
loginStore.setIsLoggedIn(true);
@@ -60,18 +66,18 @@ export default {
next();
} catch (error) {
next({
path: '/login',
path: "/login",
query: {
'return-to': btoa(relativeReturnTo),
}
"return-to": btoa(relativeReturnTo),
},
});
}
} else {
next({
path: '/login',
path: "/login",
query: {
'return-to': btoa(relativeReturnTo),
}
"return-to": btoa(relativeReturnTo),
},
});
}
} else {
@@ -80,20 +86,30 @@ export default {
},
// Remember, Swal modal handling is called before beforeRouteUpdate
beforeRouteUpdate(to, from, next) {
const pageAdminStore = usePageAdminStore();
const allMapDataStore = useAllMapDataStore();
const conformanceStore = useConformanceStore();
const pageAdminStore = usePageAdminStoreInGuard();
const allMapDataStore = useAllMapDataStoreInGuard();
const conformanceStore = useConformanceStoreInGuard();
pageAdminStore.setPreviousPage(from.name);
// When leaving the Map page, check if there is unsaved data
if ((from.name === 'Map' || from.name === 'CheckMap') && allMapDataStore.tempFilterId) {
if (
(from.name === "Map" || from.name === "CheckMap") &&
allMapDataStore.tempFilterId
) {
// Notify the Map's Sidebar to close
emitter.emit('leaveFilter', false);
leaveFilter(next, allMapDataStore.addFilterId, to.path)
} else if((from.name === 'Conformance' || from.name === 'CheckConformance')
&& (conformanceStore.conformanceLogTempCheckId || conformanceStore.conformanceFilterTempCheckId)) {
leaveConformance(next, conformanceStore.addConformanceCreateCheckId, to.path);
emitterInGuard.emit("leaveFilter", false);
leaveFilterInGuard(next, allMapDataStore.addFilterId, to.path);
} else if (
(from.name === "Conformance" || from.name === "CheckConformance") &&
(conformanceStore.conformanceLogTempCheckId ||
conformanceStore.conformanceFilterTempCheckId)
) {
leaveConformanceInGuard(
next,
conformanceStore.addConformanceCreateCheckId,
to.path,
);
} else if (pageAdminStore.shouldKeepPreviousPage) {
pageAdminStore.clearShouldKeepPreviousPageBoolean();
} else {
@@ -104,21 +120,21 @@ export default {
};
</script>
<script setup lang='ts'>
import { onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useLoadingStore } from '@/stores/loading';
import { useAllMapDataStore } from '@/stores/allMapData';
import { useConformanceStore } from '@/stores/conformance';
<script setup lang="ts">
import { onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useLoadingStore } from "@/stores/loading";
import { useAllMapDataStore } from "@/stores/allMapData";
import { useConformanceStore } from "@/stores/conformance";
import Header from "@/components/Header.vue";
import Navbar from "@/components/Navbar.vue";
import Loading from '@/components/Loading.vue';
import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
import { usePageAdminStore } from '@/stores/pageAdmin';
import Loading from "@/components/Loading.vue";
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
import { usePageAdminStore } from "@/stores/pageAdmin";
import { useLoginStore } from "@/stores/login";
import emitter from '@/utils/emitter';
import ModalContainer from './AccountManagement/ModalContainer.vue';
import emitter from "@/utils/emitter";
import ModalContainer from "./AccountManagement/ModalContainer.vue";
const loadingStore = useLoadingStore();
const allMapDataStore = useAllMapDataStore();
@@ -127,16 +143,20 @@ const pageAdminStore = usePageAdminStore();
const loginStore = useLoginStore();
const router = useRouter();
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } =
storeToRefs(allMapDataStore);
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } =
storeToRefs(conformanceStore);
/** Sets the highlighted navbar item based on the current URL path on page load. */
const setHighlightedNavItemOnLanding = () => {
const currentPath = router.currentRoute.value.path;
const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
const pathSegments = currentPath
.split("/")
.filter((segment) => segment !== "");
if (pathSegments.length === 1) {
if(pathSegments[0] === 'files') {
pageAdminStore.setActivePage('ALL');
if (pathSegments[0] === "files") {
pageAdminStore.setActivePage("ALL");
}
} else if (pathSegments.length > 1) {
pageAdminStore.setActivePage(pathSegments[1].toUpperCase());