DeltaLima/CanGrow
DeltaLima/CanGrow
0
0
Fork 0
Code Issues26 Pull requests Projects1 Releases7 Packages Wiki Activity

root graph put graph always to the right when it has less data than the others

Browse source
This commit is contained in:
DeltaLima 2025-04-12 01:34:22 +02:00
parent e9bd5f8968
commit 66dd843581
3 changed files with 79 additions and 70 deletions

11
playground/html/root/cangrow.css
View file

@ -396,4 +396,15 @@ a.disabled {
}
#chartDiv {
width: 100%%;
max-width: 600px;
margin: 0 auto;
.minw {
min-width: 320px;
max-width: 320px;
text-align: center;
}
}

72
playground/html/root/cangrow.js
View file

@ -288,22 +288,14 @@ return exports;
/* chartscss javascript stuff */
/* chart data fetch */
function DrawChart() {
//function loadJSON(url) {
//}
fetch('chart.json')
.then(function(res) { return res.json(); })
.then(function(ChartJson) {
//document.getElementById('content').innerHTML = JSON.stringify(data);
//let element = 'debugSpan';
//document.getElementById(element).textContent = ChartJson.chart.length;
/* get no of charts */
//fetch('/api/chart/')
//.then(function(res) { return res.json(); })
//.then(function(ChartJson) {
/* do stuff with ChartJson JSON object */
//});
var ChartJson = JSON.parse(document.getElementById('chartJson').innerHTML);
///* get no of charts */
chartSum = ChartJson.chart.length;
const datapointsSum = [];
@ -327,7 +319,7 @@ function DrawChart() {
/* store previous datapoint for chartcss line chart , array index is chart id */
var previousData = [];
/* fill with 0 */
for(let i = 0; i < chartSum; i++) {
for(let i = 0; i < chartSum; i++) {
previousData[i] = 0;
}
var table = document.getElementById('chartTable');
@ -337,38 +329,58 @@ function DrawChart() {
var cell = [];
for(let j = 0; j < chartSum; j++) {
/* check if data is present */
cell[j] = row[i].insertCell(j);
if((ChartJson.chart[j].hasOwnProperty('data')) && (typeof ChartJson.chart[j].data[i] != 'undefined')) {
console.log('Chart ID ' + j + ' HAS data '+ i)
cell[j].innerHTML = '<span class=\'data minw\'> ' + ChartJson.chart[j].data[i] + '</span>';
/* check if data[] is present AND check if data[i] is not undefined AND datapoints is smaller then datapointsMax */
if((ChartJson.chart[j].hasOwnProperty('data')) &&
((typeof ChartJson.chart[j].data[i] != 'undefined') &&
(ChartJson.chart[j].datapoints == datapointsMax)
) ||
((typeof ChartJson.chart[j].data[i] == 'undefined') &&
((ChartJson.chart[j].datapoints < datapointsMax) && (datapointsMax - ChartJson.chart[j].datapoints <= i) )
)
) {
/* which element of data[] we want to draw. */
var dataIndex = i;
/* check if datapoints is smaller then datapointsMax and if the difference between them is the actual dataIndex (i) */
if((ChartJson.chart[j].datapoints < datapointsMax) && (datapointsMax - ChartJson.chart[j].datapoints <= i)) {
/* substract the difference of datapointsMax - chart[].datapoints from actual dataIndex */
dataIndex = i - (datapointsMax - ChartJson.chart[j].datapoints);
console.log('A ' + dataIndex);
}
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds
var timestamp = new Date(ChartJson.chart[j].timestamp[dataIndex] * 1000);
//let strTimestamp = timestamp.toLocaleDateString('de-DE', {day: 'numeric', month: 'numeric', year: 'numeric'}) + ' ' + timestamp.toLocaleTimeString('de-DE');
cell[j].innerHTML = '<span class=\'data minw\'> <b>' + ChartJson.chart[j].data[dataIndex] + ' ' + ChartJson.chart[j].unit + '&nbsp;</b> (' + timestamp.toUTCString() + ')</span>';
/* add chartscss styles for line chart */
/* build the css string in a var first */
let cssString;
/* when it is the first data point, dont draw --start */
if(i == 0) {
cssString = '--start: calc( ' + ChartJson.chart[j].data[i] + ' / 100); --end: calc( ' + ChartJson.chart[j].data[i] + ' / 100);';
if(dataIndex == 0) {
cssString = '--start: calc( ' + ChartJson.chart[j].data[dataIndex] + ' / 100); --end: calc( ' + ChartJson.chart[j].data[dataIndex] + ' / 100);';
} else {
cssString = '--start: calc( ' + previousData[j] + ' / 100); --end: calc( ' + ChartJson.chart[j].data[i] + ' / 100);';
cssString = '--start: calc( ' + previousData[j] + ' / 100); --end: calc( ' + ChartJson.chart[j].data[dataIndex] + ' / 100);';
}
cell[j].style.cssText = cssString;
/* store datapoint as previous data */
previousData[j] = ChartJson.chart[j].data[i];
previousData[j] = ChartJson.chart[j].data[dataIndex];
} else {
/* data is not present */
console.log('Chart ID ' + j + ' P ' + i + ' does NOT have any data')
cell[j].style['display'] = 'none';
console.log('no valid data chart ' + j + ' datapoint '+ i);
}
}
}
});
}

66
playground/html/root/index.html
View file

@ -3,25 +3,25 @@
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>CanGrow Devboard - CanGrow v0.2-dev3</title>
<title>Ruderalis 2G - CanGrow v0.2-dev3</title>
<link rel='stylesheet' href='cangrow.css'>
<script type='text/javascript' src='cangrow.js'></script>
</head>
<body>
<ul class='nav'><li><a href='/'>&#x1F331; CanGrow Devboard</a></li>
<ul class='nav'><li><a href='/'>&#x1F331; Ruderalis 2G</a></li>
<li><a class='' href='/grow/' >&#128262; Grow settings</a></li>
<li><a class='' href='/system/' >&#9881; System settings</a></li>
<li><a class='' href='/wifi/' >&#128225; WiFi settings</a></li>
<li><a class='' href='/help' >&#x2753; Help</a></li>
<li><span class='navTime'>11:30:00</span></li>
<li><span class='navTime'>22:19:50</span></li>
<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.2-dev3</a></li>
</ul>
<div class='center'>
<h2>&#x1F331; CanGrow Devboard</h2>
<h2>&#x1F331; Ruderalis 2G</h2>
<a href='/api/sensor/'>Sensor data -> /api/sensor/</a>
<div class='gaugeWrapper'><div class='gauge gauge--liveupdate spacer' id='gauge_1_0_0' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Soilmoisture<br><span class='gaugeLabelSub'>ADC int</span></div>
<div class='gaugeWrapper'><div class='gauge gauge--liveupdate spacer' id='gauge_1_0_0' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Temperature<br><span class='gaugeLabelSub'>BME280 inside</span></div>
<div class='gauge__container'>
<div class='gauge__background'></div>
@ -35,7 +35,7 @@
<span class='gauge__label--high'></span>
</div>
</div>
<div class='gauge gauge--liveupdate spacer' id='gauge_2_1_0' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Temperature<br><span class='gaugeLabelSub'>BME280</span></div>
<div class='gauge gauge--liveupdate spacer' id='gauge_2_0_1' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Humidity<br><span class='gaugeLabelSub'>BME280 inside</span></div>
<div class='gauge__container'>
<div class='gauge__background'></div>
@ -49,7 +49,7 @@
<span class='gauge__label--high'></span>
</div>
</div>
<div class='gauge gauge--liveupdate spacer' id='gauge_3_1_1' style='float:left; '><div class='gaugeLabel'>Humidity<br><span class='gaugeLabelSub'>BME280</span></div>
<div class='gauge gauge--liveupdate spacer' id='gauge_3_1_0' style='float:left; '><div class='gaugeLabel'>Soilmoisture<br><span class='gaugeLabelSub'>Analog Soilmoisture</span></div>
<div class='gauge__container'>
<div class='gauge__background'></div>
@ -64,7 +64,7 @@
</div>
</div>
</div><div style='clear: both;'></div>
<div class='gaugeWrapper'><div class='gauge gauge--liveupdate spacer' id='gauge_4_1_2' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Pressure<br><span class='gaugeLabelSub'>BME280</span></div>
<div class='gaugeWrapper'><div class='gauge gauge--liveupdate spacer' id='gauge_4_2_0' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Temperature<br><span class='gaugeLabelSub'>SHT30 outside</span></div>
<div class='gauge__container'>
<div class='gauge__background'></div>
@ -78,21 +78,7 @@
<span class='gauge__label--high'></span>
</div>
</div>
<div class='gauge gauge--liveupdate spacer' id='gauge_5_1_3' style='float:left; margin-right: 10px;'><div class='gaugeLabel'>Altitude<br><span class='gaugeLabelSub'>BME280</span></div>
<div class='gauge__container'>
<div class='gauge__background'></div>
<div class='gauge__center'></div>
<div class='gauge__data'></div>
<div class='gauge__needle'></div>
</div>
<div class='gauge__labels mdl-typography__headline'>
<span class='gauge__label--low'></span>
<span class='gauge__label--spacer'></span>
<span class='gauge__label--high'></span>
</div>
</div>
<div class='gauge gauge--liveupdate spacer' id='gauge_6_2_0' style='float:left; '><div class='gaugeLabel'>Parts per million<br><span class='gaugeLabelSub'>CCS811</span></div>
<div class='gauge gauge--liveupdate spacer' id='gauge_5_2_1' style='float:left; '><div class='gaugeLabel'>Humidity<br><span class='gaugeLabelSub'>SHT30 outside</span></div>
<div class='gauge__container'>
<div class='gauge__background'></div>
@ -108,28 +94,28 @@
</div>
</div><div style='clear: both;'></div>
<script>var gaugeJS_1_0_0 = new Gauge(document.getElementById('gauge_1_0_0'));
gaugeJS_1_0_0.value('10.00', 2, ' %');
var gaugeJS_2_1_0 = new Gauge(document.getElementById('gauge_2_1_0'));
gaugeJS_2_1_0.value('21.30', 2, ' °C');
var gaugeJS_3_1_1 = new Gauge(document.getElementById('gauge_3_1_1'));
gaugeJS_3_1_1.value('35.72', 2, ' %');
var gaugeJS_4_1_2 = new Gauge(document.getElementById('gauge_4_1_2'));
gaugeJS_4_1_2.value('101.78', 2, ' Pa');
var gaugeJS_5_1_3 = new Gauge(document.getElementById('gauge_5_1_3'));
gaugeJS_5_1_3.value('-37.84', 2, ' m');
var gaugeJS_6_2_0 = new Gauge(document.getElementById('gauge_6_2_0'));
gaugeJS_6_2_0.value('542.00', 2, ' ppm');
gaugeJS_1_0_0.value('22.25', 35, ' °C');
var gaugeJS_2_0_1 = new Gauge(document.getElementById('gauge_2_0_1'));
gaugeJS_2_0_1.value('45.32', 100, ' %');
var gaugeJS_3_1_0 = new Gauge(document.getElementById('gauge_3_1_0'));
gaugeJS_3_1_0.value('77.00', 100, ' %');
var gaugeJS_4_2_0 = new Gauge(document.getElementById('gauge_4_2_0'));
gaugeJS_4_2_0.value('21.33', 42, ' °C');
var gaugeJS_5_2_1 = new Gauge(document.getElementById('gauge_5_2_1'));
gaugeJS_5_2_1.value('50.30', 100, ' %');
</script>
<br>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'><style>#chartDiv { width: 100%; max-width: 640px; margin: 0 auto; .minw { min-width: 140px; max-width: 320px; text-align: center; } }</style>
<script type='application/json' id='chartJson'>{"chart":[{"id":0,"name":"BME280 inside","descr":"Temperature","unit":"°C","data":[19.76,19.77,19.6,19.35,19.04,18.83,18.79,18.77,18.79,18.84,18.84,18.84,18.87,18.86,18.81,18.75,18.67,18.62,18.65,19.47,20.98,21.51,21.55,21.59,21.58,21.58,21.61,21.62,21.69,21.68,21.72,21.9,21.85,22.11,22.1,21.93,21.91,21.93,22.01,22.02,22.02,21.97,22.15,22.27,22.29,22.27,22.31,22.32,22.33,22.34,22.39,22.49,22.6,22.81,22.84,22.7,22.59,22.61,22.46,22.38,22.44,21.6,21.66,20.75,20.65,20.14,19.61,19.35,19.33,21.36,21.61,21.75,21.78,21.84,21.89,21.91,21.99,22.02,22.04,22.21,22.18,22.17,22.25],"timestamp":[1744335791,1744336691,1744337591,1744338491,1744339391,1744340291,1744341191,1744342091,1744342991,1744343891,1744344791,1744345691,1744346591,1744347491,1744348390,1744349290,1744350190,1744351090,1744351990,1744352890,1744353790,1744354690,1744355590,1744356490,1744357390,1744358290,1744359190,1744360090,1744360990,1744361890,1744362790,1744363690,1744364590,1744365490,1744366390,1744367290,1744368190,1744369090,1744369990,1744370890,1744371790,1744372690,1744373591,1744374491,1744375391,1744376291,1744377191,1744378091,1744378991,1744379891,1744380791,1744381691,1744382591,1744383605,1744384505,1744385404,1744386520,1744387420,1744388319,1744389219,1744390119,1744391019,1744391919,1744392819,1744393719,1744394619,1744395519,1744396419,1744397319,1744398219,1744399120,1744400020,1744400920,1744401820,1744402719,1744403619,1744404519,1744405419,1744406319,1744407219,1744408119,1744409019,1744409919],"datapoints":83},{"id":1,"name":"BME280 inside","descr":"Humidity","unit":"%","data":[58.83,59.46,59.77,59.56,58.5,57,58.23,61.18,62.2,63.84,64.67,64.58,65.17,64.4,63.22,64.14,62.19,62.53,59.93,58.02,55.12,40.74,40.06,39.86,40.76,40.37,40.66,40.04,40.14,39.6,38.87,38.86,38.54,39.08,39.34,39.18,39.6,39.1,38.79,38.13,38.57,38.43,39.23,39.8,39.78,40.08,40.37,40.18,40.22,40.51,40.17,40.28,40.27,40.19,40.08,40.65,40.83,40.68,41.18,41.28,41.16,41.17,39.72,47.22,56.29,61.11,63.5,64.9,65.93,48.91,45.96,46.25,46.31,46.13,45.4,45.39,44.63,44.42,43.98,43.88,43.85,43.77,45.05],"timestamp":[1744335791,1744336691,1744337591,1744338491,1744339391,1744340291,1744341191,1744342091,1744342991,1744343891,1744344791,1744345691,1744346591,1744347491,1744348391,1744349291,1744350190,1744351090,1744351990,1744352890,1744353790,1744354690,1744355590,1744356490,1744357390,1744358290,1744359190,1744360090,1744360990,1744361890,1744362790,1744363690,1744364590,1744365490,1744366390,1744367290,1744368190,1744369090,1744369990,1744370890,1744371790,1744372690,1744373591,1744374491,1744375391,1744376291,1744377191,1744378091,1744378991,1744379891,1744380791,1744381691,1744382591,1744383605,1744384505,1744385405,1744386520,1744387420,1744388320,1744389220,1744390120,1744391020,1744391919,1744392819,1744393719,1744394619,1744395519,1744396419,1744397319,1744398219,1744399120,1744400020,1744400920,1744401820,1744402720,1744403620,1744404520,1744405420,1744406320,1744407220,1744408120,1744409020,1744409920],"datapoints":83},{"id":2,"name":"Analog Soilmoisture","descr":"Soilmoisture","unit":"%","data":[95,92,91,91,95,96,95,92,92,92,92,95,96,96,92,92,92,92,92,95,90,90,90,95,90,90,90,90,90,90,90,90,90,90,93,93,90,83,89,83,91,83,79,83,89,88,82,88,83,88,80,79,80,80,88,79,88,87,87,88,87,78,79,79,78,82,80,79,80,79,79,79,78,78,78,76,76,77,77,77,78,77,75],"timestamp":[1744335791,1744336691,1744337591,1744338491,1744339391,1744340291,1744341191,1744342091,1744342991,1744343891,1744344791,1744345691,1744346591,1744347491,1744348391,1744349291,1744350191,1744351091,1744351991,1744352891,1744353791,1744354691,1744355590,1744356490,1744357390,1744358290,1744359190,1744360090,1744360990,1744361890,1744362790,1744363690,1744364590,1744365490,1744366390,1744367290,1744368190,1744369090,1744369990,1744370890,1744371790,1744372690,1744373591,1744374491,1744375391,1744376291,1744377191,1744378091,1744378991,1744379891,1744380791,1744381691,1744382591,1744383605,1744384505,1744385405,1744386520,1744387420,1744388320,1744389220,1744390120,1744391020,1744391920,1744392820,1744393719,1744394619,1744395519,1744396419,1744397319,1744398219,1744399120,1744400020,1744400920,1744401820,1744402720,1744403620,1744404520,1744405420,1744406320,1744407220,1744408120,1744409020,1744409920],"datapoints":83},{"id":3,"name":"SHT30 outside","descr":"Humidity","unit":"%","data":[44.65,44.24,45.02,45.49,44.97,43.28,43.19,43.49,44.58,44.94,45.74,45.69,48.84,48.44,48.42,48.92,49.83,49.83,49.41,49.6,48.94,48.8,48.67,48.1,48.25,48.97,50.13],"timestamp":[1744386520,1744387420,1744388320,1744389220,1744390120,1744391020,1744391920,1744392820,1744393720,1744394620,1744395520,1744396420,1744397319,1744398220,1744399120,1744400020,1744400920,1744401820,1744402720,1744403620,1744404520,1744405420,1744406320,1744407220,1744408120,1744409020,1744409920],"datapoints":27}]}</script>
<div id='chartDiv'><table id='chartTable' class='charts-css line multiple show-data-on-hover show-heading show-primary-axis '>
<caption>Linechart</caption>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'>
<div id='chartDiv'>
<table id='chartTable' class='charts-css line multiple show-data-on-hover show-primary-axis show-6-secondary-axes'>
<caption>Linechart</caption>
</table>
<ul id='chartLegend' class='charts-css legend legend-line'></ul>
</div>
<ul id='chartLegend' class='charts-css legend legend-inline legend-line'></ul>
</div>
<script>DrawChart();</script>
<div class='footer'><span>Build: 46311d5-esp8266_d1_mini_clone-20250410031539</span></div></div></body></html>
<div class='footer'><span>Build: e9bd5f8-esp8266_d1_mini_clone-20250411163209</span></div></div></body></html>