fix(reject-history): improve Pareto top-80% filter and add detail table loading spinner

Pareto filter now includes the item that crosses the 80% threshold and
guarantees at least 5 items, so the chart stays useful when one reason
dominates (e.g. defect-only mode). Detail table shows a spinner overlay
while the list is refreshing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
egg
2026-02-22 15:19:52 +08:00
parent 33ef58f833
commit 6016c31e4d
3 changed files with 34 additions and 3 deletions

View File

@@ -760,8 +760,12 @@ const filteredParetoItems = computed(() => {
if (!committedFilters.paretoTop80 || items.length === 0) {
return items;
}
const top = items.filter((item) => Number(item.cumPct || 0) <= 80);
return top.length > 0 ? top : [items[0]];
// Include items up to AND including the one that crosses 80%,
// but always show at least 5 items so the chart stays informative
// when one reason dominates (e.g. defect-only mode).
const cutIdx = items.findIndex((item) => Number(item.cumPct || 0) >= 80);
const top80Count = cutIdx >= 0 ? cutIdx + 1 : items.length;
return items.slice(0, Math.max(top80Count, Math.min(5, items.length)));
});
const activeFilterChips = computed(() => {

View File

@@ -31,7 +31,8 @@ function formatNumber(value) {
</span>
</div>
</div>
<div class="card-body detail-table-wrap">
<div class="card-body detail-table-wrap" :class="{ 'is-loading': loading }">
<div v-if="loading" class="table-loading-overlay"><span class="table-spinner"></span></div>
<table class="detail-table">
<thead>
<tr>

View File

@@ -286,9 +286,35 @@
}
.detail-table-wrap {
position: relative;
overflow: auto;
}
.detail-table-wrap.is-loading table {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.15s ease;
}
.table-loading-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.table-spinner {
display: block;
width: 28px;
height: 28px;
border: 3px solid #d1d5db;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
.detail-table .cell-nowrap {
white-space: nowrap;
}