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

mostly working that new graphs are drawn on the right, but bug when graph is new created

Browse source
This commit is contained in:
DeltaLima 2025-04-12 02:22:23 +02:00
parent 66dd843581
commit 167494cd13
5 changed files with 41 additions and 19 deletions

6
include/CanGrow.h
View file

@ -55,8 +55,14 @@ const byte Max_Sensors_Read = 6;
const byte Max_Sensors_GPIO = 2;
/* Max Limits for Dashboard elements*/
/* ESP32 can handle some more than ESP8266 */
const byte Max_Dashboard_Gauge = 6;
#ifdef ESP8266
const byte Max_Dashboard_Chart = 3;
#endif
#ifdef ESP32
const byte Max_Dashboard_Chart = 5;
#endif
const byte Max_Dashboard_Data = 6;
/* actual structure initialization for GPIO_Index is done within the header files

4
include/Webserver/File_cangrow_CSS.h
View file

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

44
include/Webserver/File_cangrow_JS.h
View file

@ -296,7 +296,6 @@ return exports;
/* chartscss javascript stuff */
function DrawChart() {
//fetch('/api/chart/')
//.then(function(res) { return res.json(); })
@ -328,7 +327,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');
@ -339,37 +338,56 @@ function DrawChart() {
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')) {
/* 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[i] * 1000);
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');
//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[i] + ' ' + ChartJson.chart[j].unit + '</b> (' + strTimestamp + ')</span>';
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 */
cell[j].style['display'] = 'none';
//console.log('no valid data chart ' + j + ' datapoint '+ i);
}
}
}
}
}
)";

2
include/Webserver/Page_root.h
View file

@ -165,7 +165,7 @@ String Proc_WebPage_root(const String& var) {
html += Str_Chart_Json(true);
html += F("</script>");
html += F("<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css'>");
html += F("<div id='chartDiv'><table id='chartTable' class='charts-css line multiple show-data-on-hover show-heading show-primary-axis'><caption>Linechart</caption>");
html += F("<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>");
html += F("</table><ul id='chartLegend' class='charts-css legend legend-line'></ul></div><script>DrawChart();</script>");
}

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

@ -379,8 +379,6 @@ function DrawChart() {
}
}
}
}
}