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:
@@ -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(() => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user