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

Issues #179: done.

Browse Source
This commit is contained in:
chiayin
2023-11-03 17:12:57 +08:00
parent 59f59e6280
commit 672d93b821
5 changed files with 86 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Discover/Conformance/MoreModal.vue
View File

@@ -104,7 +104,7 @@ export default {
item.facets.forEach((facet, index) => {
item[`fac_${index}`] = facet.value; // 建立新的 key-value pair
});
delete item.facets; // 刪除原本的 attributes 屬性
delete item.facets; // 刪除原本的 facets 屬性
item.attributes.forEach((attribute, index) => {
item[`att_${index}`] = attribute.value; // 建立新的 key-value pair

40
src/components/Discover/Map/Filter/Trace.vue
View File

@@ -51,10 +51,10 @@
</div>
</div>
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
<DataTable :value="infiniteData" showGridlines tableClass="text-sm" breakpoint="0">
<Column field="id" header="Case ID" ></Column>
<Column field="started_at" header="Start time" ></Column>
<Column field="completed_at" header="End time" ></Column>
<DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
<div v-for="(col, index) in columnData" :key="index">
<Column :field="col.field" :header="col.header"></Column>
</div>
</DataTable>
</div>
</section>
@@ -106,8 +106,7 @@ export default {
base_count: trace.count,
ratio: this.getPercentLabel(trace.count / this.traceCountTotal),
};
}).sort((x, y) => x.id - y.id)
.slice(this.selectArea[0], this.selectArea[1]);
}).slice(this.selectArea[0], this.selectArea[1]);
},
caseTotalPercent: function() {
let ratioSum = this.traceList.map(trace => trace.base_count).reduce((acc, cur) => acc + cur, 0) / this.traceCountTotal;
@@ -132,7 +131,34 @@ export default {
},
]
};
},
caseData: function() {
const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
data.forEach(item => {
item.attributes.forEach((attribute, index) => {
item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
});
delete item.attributes; // 刪除原本的 attributes 屬性
})
return data;
},
columnData: function() {
const data = JSON.parse(JSON.stringify(this.baseCases)); // 深拷貝原始 cases 的內容
let result = [
{ field: 'id', header: 'Case Id' },
{ field: 'started_at', header: 'Start time' },
{ field: 'completed_at', header: 'End time' },
];
if(data.length !== 0){
result = [
{ field: 'id', header: 'Case Id' },
{ field: 'started_at', header: 'Start time' },
{ field: 'completed_at', header: 'End time' },
...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
];
}
return result
},
},
watch: {
selectArea: function(newValue) {
@@ -304,11 +330,13 @@ export default {
}
},
mounted() {
this.isLoading = true; // createCy 執行完關閉
this.setNodesData();
this.setEdgesData();
this.createCy();
this.chartOptions = this.barOptions();
this.selectArea = [0, this.traceTotal]
this.isLoading = false;
},
}
</script>

54
src/components/Discover/Map/SidebarTraces.vue
View File

@@ -42,10 +42,10 @@
</div>
</div>
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)] infiniteTable" @scroll="handleScroll">
<DataTable :value="infiniteData" showGridlines tableClass="text-sm" breakpoint="0">
<Column field="id" header="Case ID" ></Column>
<Column field="started_at" header="Start time" ></Column>
<Column field="completed_at" header="End time" ></Column>
<DataTable :value="caseData" showGridlines tableClass="text-sm" breakpoint="0">
<div v-for="(col, index) in columnData" :key="index">
<Column :field="col.field" :header="col.header"></Column>
</div>
</DataTable>
</div>
</section>
@@ -54,15 +54,19 @@
</template>
<script>
import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import AllMapDataStore from '@/stores/allMapData.js';
import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
export default {
props: ['sidebarTraces'],
props: ['sidebarTraces', 'cases'],
setup() {
const loadingStore = LoadingStore();
const allMapDataStore = AllMapDataStore();
const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, cases, infiniteFirstCases } = storeToRefs(allMapDataStore);
return {allMapDataStore, infinit404, infiniteStart, traceId, traces, traceTaskSeq, cases, infiniteFirstCases}
const { isLoading } = storeToRefs(loadingStore);
const { infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases } = storeToRefs(allMapDataStore);
return {allMapDataStore, infinit404, infiniteStart, traceId, traces, traceTaskSeq, infiniteFirstCases, isLoading }
},
data() {
return {
@@ -81,8 +85,7 @@ export default {
},
traceList: function() {
let sum = this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
return this.traces.map(trace => {
let result = this.traces.map(trace => {
return {
id: trace.id,
value: this.progressWidth(Number(((trace.count / sum) * 100).toFixed(1))),
@@ -90,8 +93,37 @@ export default {
base_count: trace.count,
ratio: this.getPercentLabel(trace.count / sum),
};
}).sort((x, y) => x.id - y.id);
})
return result;
},
caseData: function() {
const data = JSON.parse(JSON.stringify(this.infiniteData)); // 深拷貝原始 cases 的內容
data.forEach(item => {
item.attributes.forEach((attribute, index) => {
item[`att_${index}`] = attribute.value; // 建立新的 key-value pair
});
delete item.attributes; // 刪除原本的 attributes 屬性
})
return data;
},
columnData: function() {
const data = JSON.parse(JSON.stringify(this.cases)); // 深拷貝原始 cases 的內容
let result = [
{ field: 'id', header: 'Case Id' },
{ field: 'started_at', header: 'Start time' },
{ field: 'completed_at', header: 'End time' },
];
if(data.length !== 0){
result = [
{ field: 'id', header: 'Case Id' },
{ field: 'started_at', header: 'Start time' },
{ field: 'completed_at', header: 'End time' },
...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })),
];
}
return result
},
},
watch: {
infinite404: function(newValue) {
@@ -194,6 +226,7 @@ export default {
* create map
*/
async show() {
this.isLoading = await true; // createCy 執行完關閉
// 因 trace api 連動，所以關閉側邊欄時讓數值歸 traces 第一筆 id
this.showTraceId = await this.traces[0]?.id;
this.infiniteStart = await 0;
@@ -201,6 +234,7 @@ export default {
this.setNodesData();
this.setEdgesData();
this.createCy();
this.isLoading = false;
},
/**
* 無限滾動: 監聽 scroll 有沒有滾到底部

4
src/stores/allMapData.js
View File

@@ -54,10 +54,10 @@ export default defineStore('allMapDataStore', {
return state.allInsights;
},
traces: state => {
return state.allTrace;
return state.allTrace.sort((x, y) => x.id - y.id);
},
baseTraces: state => {
return state.allBaseTrace;
return state.allBaseTrace.sort((x, y) => x.id - y.id);
},
cases: state => {
return state.allCase;

6
src/views/Discover/Map/index.vue
View File

@@ -47,7 +47,7 @@
<!-- 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" @switch-Trace-Id="switchTraceId" ref="tracesView"></SidebarTraces>
<SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesView"></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="sidevarFilterRef"></SidebarFilter>
@@ -68,9 +68,9 @@ export default {
const loadingStore = LoadingStore();
const allMapDataStore = AllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId } = storeToRefs(allMapDataStore);
const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases } = storeToRefs(allMapDataStore);
return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, baseLogId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore, cases }
},
components: {
SidebarView,