OVMS3/OVMS.V3/components/ovms_webserver/dev/metrics-table.htm

126 lines
4 KiB
HTML
Raw Normal View History

<!--
Web UI page plugin: DataTables metrics widget demonstration
-->
<style>
td i {
font-style: normal;
font-size: 140%;
line-height: 90%;
font-weight: bold;
}
td i.warning { color: orange; }
td i.danger { color: red; }
</style>
<div class="panel panel-primary panel-single receiver" id="my-receiver">
<div class="panel-heading">Metrics Table Widget Example</div>
<div class="panel-body">
<p>The following table shows a live view of the battery cell voltages along with their recorded
minimum, maximum, maximum deviation and current warning/alert state.</p>
<p>Try resizing the window or using a mobile phone to see how the table adapts to the screen
width. The table will also keep the selected sorting over data updates.</p>
<p>Hint: if you don't have live battery cell data, click the generator button to create
some random values. The random data is only generated in your browser, not on the module.</p>
<div class="metric table"
data-metric="v.b.c.voltage,v.b.c.voltage.min,v.b.c.voltage.max,v.b.c.voltage.dev.max,v.b.c.voltage.alert">
<table class="table table-striped table-bordered table-hover" id="v-table" />
</div>
<p>See <a target="_blank" href="https://datatables.net/manual/">DataTables manual</a> for all
options and API methods available.</p>
</div>
<div class="panel-footer">
<p><button type="button" class="btn btn-default action-gendata">Generate random data</button></p>
</div>
</div>
<script>
(function(){
// Utilities:
var alertMap = {
0: '',
1: '<i class="warning"></i>',
2: '<i class="danger"></i>',
};
function fmtCode(value, map) {
return (map[value] !== undefined) ? map[value] : null;
}
function fmtNumber(value, prec) {
return (value !== undefined) ? Number(value).toFixed(prec) : null;
}
// Init table:
$('#v-table').table({
responsive: true,
paging: true,
searching: false,
info: false,
autoWidth: false,
columns: [
{ title: "#", className: "dt-body-center", width: "6%", responsivePriority: 1 },
{ title: "Voltage", className: "dt-body-right", width: "22%", responsivePriority: 3 },
{ title: "Minimum", className: "dt-body-right", width: "22%", responsivePriority: 4 },
{ title: "Maximum", className: "dt-body-right", width: "22%", responsivePriority: 5 },
{ title: "Max.Dev.", className: "dt-body-right", width: "22%", responsivePriority: 2 },
{ title: "Alert", className: "dt-body-center", width: "6%", responsivePriority: 1 },
],
rowId: 0,
onUpdate: function(update) {
// Get vector metrics to display:
var v = [
metrics["v.b.c.voltage"] || [],
metrics["v.b.c.voltage.min"] || [],
metrics["v.b.c.voltage.max"] || [],
metrics["v.b.c.voltage.dev.max"] || [],
metrics["v.b.c.voltage.alert"] || [],
];
var lcnt = 0;
v.map(el => lcnt = Math.max(lcnt, el.length));
// Transpose vectors to columns:
var l, d = [];
for (l = 0; l < lcnt; l++) {
d.push([
l+1,
fmtNumber(v[0][l], 2),
fmtNumber(v[1][l], 2),
fmtNumber(v[2][l], 2),
fmtNumber(v[3][l], 3),
fmtCode(v[4][l], alertMap),
]);
}
// Display new data:
this.clear().rows.add(d).draw();
},
});
// Test data generator:
$('.action-gendata').on('click', function() {
var td = {};
var m_vlt = [], m_min = [], m_max = [], m_devmax = [], m_alert = [];
for (var i = 1; i <= 16; i++) {
m_vlt.push(3.6 + Math.random() * 0.5);
m_min.push(3.4 + Math.random() * 0.2);
m_max.push(3.8 + Math.random() * 0.2);
m_devmax.push(-0.2 + Math.random() * 0.4);
m_alert.push(Math.floor(Math.random() * 3));
}
td["v.b.c.voltage"] = m_vlt;
td["v.b.c.voltage.min"] = m_min;
td["v.b.c.voltage.max"] = m_max;
td["v.b.c.voltage.dev.max"] = m_devmax;
td["v.b.c.voltage.alert"] = m_alert;
$('.receiver').trigger('msg:metrics', $.extend(metrics, td));
});
})();
</script>