Data row filtering

This commit is contained in:
Jiang Yio 2022-09-28 02:03:21 -04:00
parent f831f905a5
commit b3195bcd82

View File

@ -6,16 +6,16 @@
</thead> </thead>
<tbody v-for="report in reports"> <tbody v-for="report in reports">
<template v-for="name in report"> <template v-for="name in report">
<tr v-if="names[name]"> <tr v-if="names[name]" @dblclick="toggle_filter_name(name)">
<th>{{name}}</th> <th :class="{ filtered: name == filter_name }">{{name}}</th>
<td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td> <td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td>
</tr> </tr>
</template> </template>
</tbody> </tbody>
<tbody> <tbody>
<template v-for="name in names"> <template v-for="name in names">
<tr v-if="!names_excluded[name]"> <tr v-if="!names_excluded[name]" @dblclick="toggle_filter_name(name)">
<th>{{name}}</th> <th :class="{ filtered: name == filter_name }">{{name}}</th>
<td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td> <td v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr), abnormal_ref: abnormal_ref(group.values[name]), abnormal_ref_low: abnormal_ref_low(group.values[name]), abnormal_ref_high: abnormal_ref_high(group.values[name]), abnormal_iqr: abnormal_iqr(group.values[name]), abnormal_iqr_low: abnormal_iqr_low(group.values[name]), abnormal_iqr_high: abnormal_iqr_high(group.values[name]) }" :title="tooltip(group.values[name])">{{group.values[name] ? group.values[name].value : ''}}</td>
</tr> </tr>
</template> </template>
@ -37,16 +37,25 @@
table.table-sticky tbody tr { table.table-sticky tbody tr {
border-top: 1px dashed #dee2e6; border-top: 1px dashed #dee2e6;
} }
table.table-sticky tbody tr:hover {
border: 1px solid #6c757d;
}
td:nth-of-type(odd) { td:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
table.table-sticky tbody th, table.table-sticky th.name { table.table-sticky tbody th, table.table-sticky th.name {
cursor: default;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
table.table-sticky th.filtered {
background-color: #6c757d;
color: #fff;
}
table.table-sticky th.date { table.table-sticky th.date {
cursor: default;
font-size: 80%; font-size: 80%;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
@ -147,11 +156,14 @@
} }
}, },
data() { data() {
return {}; return {
filter_name: null
};
}, },
computed: { computed: {
resultset_all() { resultset_all() {
return this.resultset_calculated.length > 0 ? this.resultset.concat(this.resultset_calculated) : this.resultset; var res = this.resultset_calculated.length > 0 ? this.resultset.concat(this.resultset_calculated) : this.resultset;
return this.filter_name ? res.filter(x => x.name == this.filter_name) : res;
}, },
resultset_calculated() { resultset_calculated() {
var self = this, snapshots = [], results = [], history, update, item; var self = this, snapshots = [], results = [], history, update, item;
@ -230,6 +242,9 @@
return res.join('\n'); return res.join('\n');
} }
}, },
toggle_filter_name(name) {
this.filter_name = this.filter_name != name ? name : null;
},
abnormal_ref(item) { abnormal_ref(item) {
return (item) && (item.flag); return (item) && (item.flag);
}, },