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

Discover: fix sidebarState content

Browse Source
This commit is contained in:
chiayin
2023-03-16 11:19:38 +08:00
parent a4e0e300ea
commit 4f107a80dd
2 changed files with 44 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Discover/sidebarState.vue
View File

@@ -62,11 +62,11 @@
<div class="pt-1 pb-4"> <div class="pt-1 pb-4">
<p class="h2">Case Duration</p> <p class="h2">Case Duration</p>
<ul class="space-y-1"> <ul class="space-y-1">
<li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2"></Tag>{{ timeLabel(stats.case_duration.min) }}</li> <li><Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.min) }}</li>
<li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2"></Tag>{{ timeLabel(stats.case_duration.average <li><Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.average
) }}</li> ) }}</li>
<li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2"></Tag>{{ timeLabel(stats.case_duration.median) }}</li> <li><Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.median) }}</li>
<li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2"></Tag>{{ timeLabel(stats.case_duration.max) }}</li> <li><Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>{{ timeLabel(stats.case_duration.max) }}</li>
</ul> </ul>
</div> </div>
@@ -114,17 +114,17 @@
<div> <div>
<TabView ref="tabview2" v-model:activeIndex="active1"> <TabView ref="tabview2" v-model:activeIndex="active1">
<TabPanel header="Self-loop"> <TabPanel header="Self-loop">
<ul class="list-disc ml-6 mb-4 "> <p v-if="insights.self_loops.length === 0">No data</p>
<li v-if="insights.self_loops.length === 0">No data</li> <ul v-else class="list-disc ml-6">
<li v-else> <li>
<span v-for="(value, key) in insights.self_loops" :key="key">{{ value }}<span v-if="key !== insights.self_loops.length -1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span> <span v-for="(value, key) in insights.self_loops" :key="key">{{ value }}<span v-if="key !== insights.self_loops.length -1">&nbsp;<span class="material-symbols-outlined text-lg align-sub">arrow_forward</span>&nbsp;</span>
</span> </span>
</li> </li>
</ul> </ul>
</TabPanel> </TabPanel>
<TabPanel header="Short-loop"> <TabPanel header="Short-loop">
<ul class="list-disc ml-6 mb-4 "> <p v-if="insights.short_loops.length === 0">No data</p>
<li v-if="insights.short_loops.length === 0">No data</li> <ul v-else class="list-disc ml-6">
<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">arrow_forward</span>&nbsp;</span> <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">arrow_forward</span>&nbsp;</span>
</span> </span>
@@ -132,8 +132,8 @@
</ul> </ul>
</TabPanel> </TabPanel>
<TabPanel header="Shortest Trace"> <TabPanel header="Shortest Trace">
<ul class="list-disc ml-6 mb-4 "> <p v-if="insights.shortest_traces.length === 0">No data</p>
<li v-if="insights.shortest_traces.length === 0">No data</li> <ul v-else class="list-disc ml-6">
<li class="break-words" v-for="(item, key) in insights.shortest_traces" :key="key"> <li class="break-words" v-for="(item, key) in insights.shortest_traces" :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">arrow_forward</span>&nbsp;</span> <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">arrow_forward</span>&nbsp;</span>
</span> </span>
@@ -141,8 +141,8 @@
</ul> </ul>
</TabPanel> </TabPanel>
<TabPanel header="Longest Trace"> <TabPanel header="Longest Trace">
<ul class="list-disc ml-6 mb-4 "> <p v-if="insights.longest_traces.length === 0">No data</p>
<li v-if="insights.longest_traces.length === 0">No data</li> <ul v-else class="list-disc ml-6">
<li class="break-words" v-for="(item, key) in insights.longest_traces" :key="key"> <li class="break-words" v-for="(item, key) in insights.longest_traces" :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">arrow_forward</span>&nbsp;</span> <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">arrow_forward</span>&nbsp;</span>
</span> </span>
@@ -150,8 +150,8 @@
</ul> </ul>
</TabPanel> </TabPanel>
<TabPanel header="Most Frequent Trace"> <TabPanel header="Most Frequent Trace">
<ul class="list-disc ml-6 mb-4 ">
<li v-if="insights.most_freq_traces.length === 0">No data</li> <li v-if="insights.most_freq_traces.length === 0">No data</li>
<ul v-else class="list-disc ml-6">
<li class="break-words" v-for="(item, key) in insights.most_freq_traces" :key="key"> <li class="break-words" v-for="(item, key) in insights.most_freq_traces" :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">arrow_forward</span>&nbsp;</span> <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">arrow_forward</span>&nbsp;</span>
</span> </span>

35
src/views/Discover/index.vue
View File

@@ -1,18 +1,18 @@
<template> <template>
<!-- Sidebar: Switch data type --> <!-- 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="sidebarView === true? 'bg-neutral-100':''"> <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-100':''">
<ul class="space-y-4 flex flex-col justify-center items-center"> <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-100" @click="sidebarView = true"> <li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow" @click="sidebarView = true">
<span class="material-symbols-outlined text-2xl text-neutral-500"> <span class="material-symbols-outlined text-2xl text-neutral-500">
track_changes track_changes
</span> </span>
</li> </li>
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100"> <li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow">
<span class="material-symbols-outlined text-2xl text-neutral-500"> <span class="material-symbols-outlined text-2xl text-neutral-500">
tornado tornado
</span> </span>
</li> </li>
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100"> <li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow" @click="sidebarTraces = true">
<span class="material-symbols-outlined text-2xl text-neutral-500"> <span class="material-symbols-outlined text-2xl text-neutral-500">
rebase rebase
</span> </span>
@@ -20,7 +20,7 @@
</ul> </ul>
<ul class="flex flex-col justify-center items-center"> <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-100"> <li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow">
<span class="material-symbols-outlined text-2xl text-neutral-500"> <span class="material-symbols-outlined text-2xl text-neutral-500">
highlight highlight
</span> </span>
@@ -36,7 +36,7 @@
<!-- Sidebar: State --> <!-- Sidebar: State -->
<div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute"> <div 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"> <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-100" @click="sidebarState = true"> <li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-100 drop-shadow" @click="sidebarState = true">
<span class="material-symbols-outlined text-2xl text-neutral-500"> <span class="material-symbols-outlined text-2xl text-neutral-500">
info info
</span> </span>
@@ -48,6 +48,22 @@
<SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType" ></SidebarView> <SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles" @switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType" ></SidebarView>
<SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState> <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
<Sidebar v-model:visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12">
<template #header>
<p class="h1">Traces</p>
</template>
<div class="p-4">
<!-- Trace List -->
<section>
<p class="h2">Trace List (25)</p>
<p class="text-primary"><span class="material-symbols-outlined">info</span>Click trace number to see more.</p>
</section>
<!-- Trace item Table -->
<section></section>
</div>
</Sidebar>
@@ -103,6 +119,13 @@ export default {
rank: 'LR', // 直向 TB | 橫向 LR rank: 'LR', // 直向 TB | 橫向 LR
sidebarView: false, // SideBar: Visualization Setting sidebarView: false, // SideBar: Visualization Setting
sidebarState: false, // SideBar: Summary & Insight sidebarState: false, // SideBar: Summary & Insight
sidebarTraces: false, // SideBar: Traces
}
},
computed:{
sidebarLeftValue: function() {
let result = this.sidebarView === true || this.sidebarTraces === true;
return result;
} }
}, },
methods: { methods: {