drpuur
/
mini-beieli-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make chart more user-friendly on small devices

This commit is contained in:
Joerg Lehmann 2021-08-20 21:21:36 +02:00
parent 1a0746110d
commit f8a59825e6
5 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/graph.html
View File

@ -47,11 +47,9 @@
<script src="static/js/graph.js"></script> <script src="static/js/graph.js"></script>
<div> <section id="chart">
<section id="chart">
<!-- Content ... --> <!-- Content ... -->
</section> </section>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.3"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.3"></script>

8
static/css/mini-beieli-web-custom.css
View File

@ -1,3 +1,11 @@
html,body {
height: 100%;
}
.section,.container {
height: calc(100% - 24px);
}
hr { hr {
margin: 0 0 15px 0; margin: 0 0 15px 0;
} }

7
static/js/chart.js
View File

@ -29,6 +29,8 @@ function drawGraph(deveui, alias, property, start, stop, create_graph) {
minfunc = function(min) { if (min > 5000) { return min - 2000 } else { return 0 } } minfunc = function(min) { if (min > 5000) { return min - 2000 } else { return 0 } }
maxfunc = function(max) { return max + 2000 } maxfunc = function(max) { return max + 2000 }
labels = { labels = {
offsetX: 50,
offsetY: -4,
formatter: function(val, index) { formatter: function(val, index) {
return (val / 1000.0).toFixed(3); return (val / 1000.0).toFixed(3);
} }
@ -71,9 +73,11 @@ function drawGraph(deveui, alias, property, start, stop, create_graph) {
} }
return; return;
} }
calculated_height = $('.container').height() - $('.navbar').height() - $('#myselectors').height();
var options = { var options = {
chart: { chart: {
type: 'line', type: 'line',
height: calculated_height + 'px',
animations: { animations: {
enabled: false enabled: false
} }
@ -108,7 +112,8 @@ function drawGraph(deveui, alias, property, start, stop, create_graph) {
min: minfunc, min: minfunc,
max: maxfunc, max: maxfunc,
forceNiceScale: forceNiceScale, forceNiceScale: forceNiceScale,
labels: labels labels: labels,
floating: true
}, },
tooltip: { tooltip: {
x: { x: {

6
static/js/graph.js
View File

@ -5,7 +5,7 @@ $(function() {
var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]'); var s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]'); var s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
console.log("XXX: "+start.format()); //console.log("XXX: "+start.format());
function change_property(new_property) { function change_property(new_property) {
if (new_property != property) { if (new_property != property) {
@ -20,10 +20,10 @@ $(function() {
function cb(start, end) { function cb(start, end) {
$('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY')); $('#reportrange span').html(start.locale('de').format('D. MMM YYYY') + ' - ' + end.locale('de').format('D. MMM YYYY'));
console.log("A new date selection was made: " + start.format() + ' to ' + end.format()); //console.log("A new date selection was made: " + start.format() + ' to ' + end.format());
s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]'); s_start = start.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]'); s_end = end.utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
console.log("Start: " + s_start + ' End: ' + s_end + ' Property: '+ property); //console.log("Start: " + s_start + ' End: ' + s_end + ' Property: '+ property);
drawGraph(deveui, alias, property, s_start,s_end, false); drawGraph(deveui, alias, property, s_start,s_end, false);
} }