nuVistA/htdocs/ViewData.vue

281 lines
11 KiB
Vue
Raw Normal View History

2022-09-22 07:10:08 -04:00
<template>
<div style="font-family: monospace;" role="region" tabindex="0" v-if="(resultset) && (resultset.length > 0)">
<table class="table-sticky table-data">
<thead>
<tr><th class="name">{{name}}</th><th class="date" v-for="(group, idx) in groups" :class="{ first: (idx == 0) || (group.datehdr.datestr != groups[idx - 1].datehdr.datestr) }" ref="headers"><div class="year">{{group.datehdr.year}}</div><div class="monthdate">{{group.datehdr.monthdate}}</div><div class="hourminute" :class="{ daily }">{{group.datehdr.hourminute}}</div></th></tr>
</thead>
<tbody v-for="report in reports">
<template v-for="name in report">
2022-09-28 02:03:21 -04:00
<tr v-if="names[name]" @dblclick="toggle_filter_name(name)">
<th :class="{ filtered: name == filter_name }">{{name}}</th>
2022-09-22 07:10:08 -04:00
<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>
</template>
</tbody>
<tbody>
<template v-for="name in names">
2022-09-28 02:03:21 -04:00
<tr v-if="!names_excluded[name]" @dblclick="toggle_filter_name(name)">
<th :class="{ filtered: name == filter_name }">{{name}}</th>
2022-09-22 07:10:08 -04:00
<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>
</template>
</tbody>
</table>
</div>
</template>
<style scoped>
table.table-sticky {
border: 2px solid #dee2e6;
}
table.table-sticky th:first-child {
border-right: 2px solid #dee2e6;
}
table.table-sticky tbody {
border-top: 2px solid #dee2e6;
}
table.table-sticky tbody tr {
border-top: 1px dashed #dee2e6;
}
2022-09-28 02:03:21 -04:00
table.table-sticky tbody tr:hover {
border: 1px solid #6c757d;
}
td:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
2022-09-22 07:10:08 -04:00
}
table.table-sticky tbody th, table.table-sticky th.name {
2022-09-28 02:03:21 -04:00
cursor: default;
2022-09-22 07:10:08 -04:00
font-weight: bold;
text-align: center;
padding-left: 1rem;
padding-right: 1rem;
}
2022-09-28 02:03:21 -04:00
table.table-sticky th.filtered {
background-color: #6c757d;
color: #fff;
}
2022-09-22 07:10:08 -04:00
table.table-sticky th.date {
2022-09-28 02:03:21 -04:00
cursor: default;
2022-09-22 07:10:08 -04:00
font-size: 80%;
font-weight: normal;
text-align: center;
}
table.table-sticky th.date .monthdate {
font-size: 125%;
font-weight: bold;
}
table.table-sticky th.date .hourminute.daily {
display: none;
}
table.table-sticky tbody td {
padding: 0 0.5rem;
max-width: 12rem;
overflow: hidden;
text-overflow: ellipsis;
}
.first {
border-left: 1px solid #dee2e6;
}
.year, .monthdate {
visibility: hidden;
}
.first .year, .first .monthdate {
visibility: visible;
}
[role="region"][tabindex] {
max-height: 75vh;
}
</style>
<script>
2022-09-23 02:14:10 -04:00
import { uniq, groupByArray, quantile_sorted, inherit } from './util.mjs';
2022-09-22 07:10:08 -04:00
function isNumeric(x) {
return (x !== '') && (x !== false) && (x !== null) && (!isNaN(x));
}
function statistics(resultset) {
var res = {}, group, item;
for(var i = resultset.length - 1; i >= 0; --i) {
item = resultset[i];
if(isNumeric(item.value)) {
if(res[item.name]) res[item.name].push(+item.value);
else res[item.name] = [+item.value];
}
}
for(var k in res) if(res.hasOwnProperty(k)) {
item = res[k].sort((a, b) => a - b);
item = res[k] = {
n: item.length,
q25: quantile_sorted(item, 0.25),
q50: quantile_sorted(item, 0.50),
q75: quantile_sorted(item, 0.75)
}
item.range = item.q25 != item.q75 ? ('IQR: ' + item.q25 + ' - ' + item.q75) : ('Median: ' + item.q50);
}
return res;
}
function date_header(date) {
var datestr = date.toLocaleDateString('sv-SE');
2022-09-22 07:10:08 -04:00
var timestr = date.toLocaleTimeString('en-GB');
return {
datestr, timestr,
year: datestr.substring(0, 4),
monthdate: datestr.substring(5),
hourminute: timestr.substring(0, 5),
second: timestr.substring(6)
};
}
export default {
props: {
name: {
type: String,
default: null
},
resultset: {
type: Array,
default: []
},
daily: {
type: Boolean,
default: false
},
2022-09-23 02:14:10 -04:00
constants: {
type: Object,
default: {}
},
calculations: {
type: Array,
default: []
},
2022-09-22 07:10:08 -04:00
reports: {
type: Array,
default: []
}
},
data() {
2022-09-28 02:03:21 -04:00
return {
filter_name: null
};
2022-09-22 07:10:08 -04:00
},
computed: {
2022-09-23 02:14:10 -04:00
resultset_all() {
2022-09-28 02:03:21 -04:00
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;
2022-09-23 02:14:10 -04:00
},
resultset_calculated() {
var self = this, snapshots = [], results = [], history, update, item;
groupByArray(this.resultset, x => x.time).map(group => group.values.reduce(((acc, x) => (acc.values[x.name] = x, acc)), { key: group.key, datehdr: date_header(group.key), values: {}})).sort((a, b) => (a.key > b.key) - (a.key < b.key)).forEach(function(group) {
snapshots.push({ key: group.key, values: history = Object.assign(snapshots.length > 0 ? inherit(snapshots[snapshots.length - 1].values) : inherit(self.constants), update = group.values) });
history['Time'] = update['Time'] = { time: group.key, value: group.key };
for(var i = 0; i < self.calculations.length; ++i) {
var calculation = self.calculations[i], deps = calculation.deps;
for(var j = deps.length - 1, satisfied = true, updated = false; j >= 0; --j) if(!history[deps[j]]) { satisfied = false; break; }
else if(update[deps[j]]) updated = true;
if((satisfied) && (updated)) {
item = calculation.calc(...calculation.deps.map(x => history[x].value), history[calculation.name] && history[calculation.name].value);
2022-10-01 01:32:01 -04:00
if((item !== undefined) && (item !== null) && (item === item) && (item != 'NaN')) { // item === item if not NaN
2022-09-23 02:14:10 -04:00
results.push(history[calculation.name] = update[calculation.name] = Object.assign({ time: group.key, value: item }, calculation));
if((item.hasOwnProperty('rangeL')) && (item.value < item.rangeL)) item.flag = 'L';
else if((item.hasOwnProperty('rangeH')) && (item.value > item.rangeH)) item.flag = 'H';
}
}
}
});
return results;
},
2022-09-22 07:10:08 -04:00
groups() {
2022-09-23 02:14:10 -04:00
if(this.daily) return groupByArray(this.resultset_all, x => new Date(x.time.getFullYear(), x.time.getMonth(), x.time.getDate())).map(function(group) {
2022-09-22 07:10:08 -04:00
group = group.values.reduce(((acc, x) => ((acc.values[x.name] || (acc.values[x.name] = [])).push(x), acc)), { key: group.key, datehdr: date_header(group.key), values: {}});
for(var k in group.values) if(group.values.hasOwnProperty(k)) {
var items = group.values[k].sort((a, b) => a.time - b.time);
2022-09-24 14:32:11 -04:00
var strings = items.map(item => item.time.toLocaleTimeString('en-GB') + ' • ' + item.value + (item.unit ? ' ' + item.unit : '') + (item.flag ? ' [' + item.flag + ']' : '') + (item.comment && item.comment.indexOf('\n') < 0 ? ' • ' + item.comment : ''));
2022-09-22 07:10:08 -04:00
var flags = uniq(items.map(item => item.flag).filter(x => x).map(x => x.charAt(0)));
2022-09-24 14:32:11 -04:00
var comments = uniq(items.map(item => item.comment).filter(x => x && x.indexOf('\n') >= 0));
2022-09-22 07:10:08 -04:00
var numbers = uniq(items.map(item => item.value).filter(x => isNumeric(x)));
var min = Math.min.apply(null, numbers);
var max = Math.max.apply(null, numbers);
group.values[k] = {
time: group.key,
name: k,
unit: items[0].unit,
range: items[0].range,
value: numbers.length > 1 ? min + ' - ' + max : numbers.length == 1 ? numbers[0] : items.length == 1 ? items[0].value : 'MULTIPLE', min: min, max: max,
flag: flags.length > 1 ? '*' : flags.length == 1 ? flags[0] : null,
comment: (strings.join('\n') + '\n\n' + comments.join('\n\n')).replace(/^\s+|\s+$/g, '')
};
}
return group;
}).sort((a, b) => (a.key > b.key) - (a.key < b.key));
2022-09-23 02:14:10 -04:00
else return groupByArray(this.resultset_all, x => x.time).map(group => group.values.reduce(((acc, x) => (acc.values[x.name] = x, acc)), { key: group.key, datehdr: date_header(group.key), values: {}})).sort((a, b) => (a.key > b.key) - (a.key < b.key));
2022-09-22 07:10:08 -04:00
},
names() {
2022-09-23 02:14:10 -04:00
var res = uniq(this.resultset_all.map(x => x.name));
2022-09-22 07:10:08 -04:00
return res.reduce((acc, x) => (acc[x] = true, acc), res);
},
names_excluded() {
var res = {};
this.reports.forEach(report => report.reduce((acc, x) => (acc[x] = true, acc), res));
return res;
},
statistics() {
2022-09-23 02:14:10 -04:00
return statistics(this.resultset_all);
2022-09-22 07:10:08 -04:00
}
},
watch: {
async resultset(value) {
this.$nextTick(() => this.$refs.headers ? this.$refs.headers.scrollIntoView({ block: 'nearest', inline: 'end' }) : null);
}
},
methods: {
tooltip(item) {
if(item) {
var res = [], stat;
if(item.range) res.push('Ref: ' + item.range + ' ' + item.unit + (item.flag ? ' [' + item.flag + ']' : ''));
if(stat = this.statistics[item.name]) res.push(stat.range + (item.range ? ' ' + item.unit : '') + (isNaN(parseFloat(item.value)) ? '' : item.value < stat.q25 ? ' [L]' : item.value > stat.q75 ? ' [H]' : ''));
if(item.comment) {
if(res.length > 0) res.push('');
res.push(item.comment);
}
return res.join('\n');
}
},
2022-09-28 02:03:21 -04:00
toggle_filter_name(name) {
this.filter_name = this.filter_name != name ? name : null;
},
2022-09-22 07:10:08 -04:00
abnormal_ref(item) {
return (item) && (item.flag);
},
abnormal_ref_low(item) {
return (item) && (item.flag) && (item.flag.indexOf('L') >= 0);
},
abnormal_ref_high(item) {
return (item) && (item.flag) && (item.flag.indexOf('H') >= 0);
},
abnormal_iqr(item) {
var stat;
if((item) && (stat = this.statistics[item.name]) && (stat.n > 2)) {
if((item.hasOwnProperty('min')) && (item.hasOwnProperty('max'))) return (item.min < stat.q25) || (item.max > stat.q75);
else if(isNumeric(item.value)) return (item.value < stat.q25) || (item.value > stat.q75);
}
},
abnormal_iqr_low(item) {
var stat;
if((item) && (stat = this.statistics[item.name]) && (stat.n > 2)) {
if((item.hasOwnProperty('min')) && (item.hasOwnProperty('max'))) return item.min < stat.q25;
else if(isNumeric(item.value)) return item.value < stat.q25;
}
},
abnormal_iqr_high(item) {
var stat;
if((item) && (stat = this.statistics[item.name]) && (stat.n > 2)) {
if((item.hasOwnProperty('min')) && (item.hasOwnProperty('max'))) return item.max > stat.q75;
else if(isNumeric(item.value)) return item.value > stat.q75;
}
}
}
};
</script>