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

feat: Compare no wait time layout done.

Browse Source
This commit is contained in:
chiayin
2024-02-23 16:40:52 +08:00
parent 0f7945c6fe
commit 9f9437f303
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/e2e/compare.cy.js
View File

@@ -114,8 +114,8 @@ describe('Performance', ()=>{
cy.url().should('include', 'compare');
cy.wait(2000);
// 斷言排序
// 斷言頁面中有 7 個 canvas 元素
cy.get('canvas').should('have.length', 7);
// 斷言頁面中有 6 個 canvas 元素
cy.get('canvas').should('have.length', 6);
// 斷言狀態欄
cy.get('#compareState').click();
cy.wait(3000); // 等待渲染

13
src/views/Compare/Dashboard/index.vue
View File

@@ -55,7 +55,12 @@
</li>
<li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}</span>
<Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
<div>
<Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
<div v-else class="h-96 bg-neutral-100 m-4 flex">
<p class="h2 text-danger m-auto">No waiting time.</p>
</div>
</div>
</li>
</ul>
</li>
@@ -666,14 +671,20 @@ export default {
// 取得 Compare Data
await this.compareStore.getCompare(queryParams);
this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_process_time_by_task);
if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.compareDashboardData.time.avg_waiting_time_by_edge);
};
this.casesByTaskHeight = await this.getHorizontalBarHeight(this.compareDashboardData.freq.cases_by_task);
// create chart
[this.avgCycleEfficiencyData, this.avgCycleEfficiencyOptions] = this.getBarChart(this.compareDashboardData.time.avg_cycle_efficiency, this.contentData.avgCycleEfficiency);
[this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_process_time, this.contentData.avgProcessTime);
[this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true);
[this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.compareDashboardData.time.avg_waiting_time, this.contentData.avgWaitingTime);
if(this.compareDashboardData.time.avg_waiting_time_by_edge !== null) {
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.compareDashboardData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false);
} else {
[this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
}
[this.freqData, this.freqOptions] = this.getLineChart(this.compareDashboardData.freq.cases, this.contentData.freq);
[this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.compareDashboardData.freq.cases_by_task, this.contentData.casesByTask, true);
},