lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2026-01-26 20:32:49 +00:00
Code Issues Releases Activity

Merge pull request #336 from blackpencil2019/custom

Browse Source 
Make text labels of data points more readable
This commit is contained in:
Lukas Bachschwell
2026-01-20 16:04:01 +01:00
committed by GitHub
parent 32d51125ab 92eba52600
commit e0f06b4aeb
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/js/graph.js
View File

@@ -172,7 +172,7 @@ function lineGraph(parent, xAccessor, yAccessor) {
var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
// primitive formatting
text.innerHTML = Math.floor(xDataValue) + " / " + Math.floor(yDataValue);
text.innerHTML = new Date(Math.floor(xDataValue)).toLocaleTimeString() + " / " + Math.floor(yDataValue);
text.setAttribute("x", x);
text.setAttribute("y", y);

2
data/js/graph.min.js vendored
View File

@@ -8,7 +8,7 @@ xTransform(xAccessor.next())+
yTransform(yAccessor.next());}
line.setAttribute("class","series");line.setAttribute("d",pathString);parent.appendChild(line);}
function pointRenderer(xAccessor,yAccessor,xTransform,yTransform){var pointGroup=document.createElementNS("http://www.w3.org/2000/svg","g");pointGroup.setAttribute("class","data-points");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(xDataValue)+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=new Date(Math.floor(xDataValue)).toLocaleTimeString()+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
parent.appendChild(pointGroup);}
xTransform=numericTransformer(xAccessor.min(),xAccessor.max(),0+gutter,width-gutter);yTransform=numericTransformer(yAccessor.min(),yAccessor.max(),height-gutter,0+gutter);axisRenderer("x",xTransform.toData);axisRenderer("y",yTransform.toData);lineRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);pointRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);}
function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(renderId);while(figure.hasChildNodes()){figure.removeChild(figure.lastChild);}

4
src/dataGraphJS.h
View File

@@ -9,11 +9,11 @@ xTransform(xAccessor.next())+
yTransform(yAccessor.next());}
line.setAttribute("class","series");line.setAttribute("d",pathString);parent.appendChild(line);}
function pointRenderer(xAccessor,yAccessor,xTransform,yTransform){var pointGroup=document.createElementNS("http://www.w3.org/2000/svg","g");pointGroup.setAttribute("class","data-points");xAccessor.reset();yAccessor.reset();if(!xAccessor.hasNext()||!yAccessor.hasNext()){return;}
while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=Math.floor(xDataValue)+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
while(xAccessor.hasNext()&&yAccessor.hasNext()){var xDataValue=xAccessor.next();var x=xTransform(xDataValue);var yDataValue=yAccessor.next();var y=yTransform(yDataValue);var circle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("cx",x);circle.setAttribute("cy",y);circle.setAttribute("r","4");var text=document.createElementNS("http://www.w3.org/2000/svg","text");text.innerHTML=new Date(Math.floor(xDataValue)).toLocaleTimeString()+" / "+Math.floor(yDataValue);text.setAttribute("x",x);text.setAttribute("y",y);text.setAttribute("dx","1em");text.setAttribute("dy","-.7em");pointGroup.appendChild(circle);pointGroup.appendChild(text);}
parent.appendChild(pointGroup);}
xTransform=numericTransformer(xAccessor.min(),xAccessor.max(),0+gutter,width-gutter);yTransform=numericTransformer(yAccessor.min(),yAccessor.max(),height-gutter,0+gutter);axisRenderer("x",xTransform.toData);axisRenderer("y",yTransform.toData);lineRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);pointRenderer(xAccessor,yAccessor,xTransform.toCoord,yTransform.toCoord);}
function renderGraphSvg(dataArray,renderId){var figure=document.getElementById(renderId);while(figure.hasChildNodes()){figure.removeChild(figure.lastChild);}
var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");svg.setAttribute("viewBox","0 0 640 440");svg.setAttribute("preserveAspectRatio","xMidYMid meet");lineGraph(svg,(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].x;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.x;})),Math.max.apply(Math,dataArray.map(function(o){return o.x;}))),(function(data,min,max){var i=0;return{hasNext:function(){return i<data.length;},next:function(){return data[i++].y;},reset:function(){i=0;},min:function(){return min;},max:function(){return max;}};})(dataArray,Math.min.apply(Math,dataArray.map(function(o){return o.y;})),Math.max.apply(Math,dataArray.map(function(o){return o.y;}))));figure.appendChild(svg);}
)=====";
const uint8_t JS_GRAPH_GZIP[1280] PROGMEM = { 31,139,8,0,74,64,43,105,2,255,205,87,95,111,219,54,16,127,247,167,112,4,52,16,99,89,86,27,175,3,170,240,33,109,135,174,64,18,20,77,48,96,24,246,192,73,180,76,76,150,4,138,182,69,184,254,238,59,146,162,36,59,82,134,58,41,182,135,56,34,239,47,239,126,119,71,46,214,89,36,88,158,141,83,150,209,79,156,20,75,183,32,156,102,194,171,174,163,136,150,101,206,61,105,191,208,46,202,179,82,140,183,44,22,75,252,246,77,16,154,245,146,178,100,41,240,188,217,72,214,66,80,142,231,118,93,176,138,166,229,23,202,31,88,244,55,190,12,194,133,53,155,173,87,148,179,232,129,147,172,92,228,28,22,110,76,4,185,101,153,167,255,147,202,43,42,181,130,95,82,161,221,134,240,177,34,124,100,139,5,174,57,166,86,162,168,244,182,102,157,26,49,69,250,74,192,20,54,196,153,21,246,162,60,231,177,33,217,189,153,225,9,57,21,107,158,237,68,254,65,241,188,179,206,106,207,208,206,80,245,194,90,70,23,141,157,137,182,27,238,61,145,127,132,189,86,88,219,107,164,245,202,248,136,46,90,87,38,181,194,112,191,15,247,163,38,74,164,98,229,87,154,197,148,67,124,114,206,32,63,138,59,243,132,141,155,137,140,226,251,196,243,117,129,227,60,130,200,102,194,143,56,37,130,254,146,82,181,186,187,119,157,165,16,197,187,217,108,187,221,250,219,75,63,231,201,236,77,16,4,179,114,147,56,158,147,56,40,180,138,190,16,72,242,137,122,10,144,5,85,141,63,126,73,197,181,16,156,253,181,22,212,117,162,148,148,165,227,117,78,50,113,166,138,185,54,175,194,130,13,136,234,53,169,176,70,221,180,179,43,21,151,193,222,225,54,48,215,107,182,232,134,11,99,236,84,14,218,217,211,29,121,21,131,227,183,99,103,162,172,79,28,248,144,230,227,70,239,145,170,217,67,33,132,220,85,182,24,214,217,102,87,88,49,132,108,50,65,59,176,233,178,169,206,236,43,247,0,249,23,151,8,92,8,206,207,217,25,214,130,38,107,130,86,226,212,64,43,89,8,154,250,231,179,44,163,252,215,135,219,27,156,209,237,24,208,71,221,91,117,202,69,10,248,114,27,168,184,12,33,228,139,252,38,143,72,74,31,216,138,222,67,8,178,196,173,213,28,6,165,114,60,214,75,144,142,103,98,209,67,139,129,232,188,166,171,3,8,144,162,0,8,127,88,178,52,118,149,12,2,144,239,33,56,244,180,124,52,123,208,22,58,249,144,58,15,87,88,234,188,180,249,208,190,190,58,108,68,77,46,100,155,11,216,127,145,10,74,56,139,111,160,167,62,179,130,94,30,27,67,144,24,72,126,53,148,99,57,4,140,24,164,156,169,255,147,78,255,16,56,252,75,77,182,81,250,183,204,179,227,50,84,166,109,170,14,144,101,53,14,209,13,242,6,80,105,37,52,52,71,253,76,22,172,40,52,131,242,17,209,106,104,219,183,154,173,77,251,238,153,171,94,213,204,63,79,62,28,182,244,244,249,24,106,44,250,156,66,156,161,206,229,163,29,40,146,179,150,111,73,202,59,136,147,139,190,125,59,147,143,119,237,20,131,51,42,23,149,25,211,66,176,201,90,115,132,246,176,126,102,36,77,205,182,12,242,152,33,220,66,32,169,219,227,203,249,121,175,43,173,245,9,54,32,25,61,233,192,72,121,48,122,210,133,253,40,125,140,201,122,102,57,37,220,87,168,26,84,105,47,110,91,119,122,1,146,106,104,118,176,81,228,44,19,167,130,67,11,63,187,93,181,90,6,142,172,175,58,154,171,252,193,112,250,222,228,235,203,129,186,103,253,70,210,53,197,199,217,54,151,7,220,197,67,195,108,136,178,21,150,125,194,18,119,145,114,36,28,49,30,165,39,87,167,145,134,128,154,143,227,216,171,222,59,68,83,179,119,128,198,65,243,188,158,65,63,116,120,116,34,9,69,61,131,162,234,16,187,145,26,152,43,131,151,138,225,161,242,250,201,145,50,245,127,214,244,14,156,187,149,103,162,53,72,174,111,36,163,158,154,109,37,20,67,11,38,220,243,120,105,17,184,98,153,139,188,206,154,84,176,14,38,230,102,234,117,111,179,80,65,79,42,149,71,74,229,145,210,131,59,112,99,194,76,185,166,181,232,160,55,90,125,243,60,57,230,81,241,127,204,243,29,243,203,175,31,77,135,106,244,86,29,250,151,80,212,233,159,92,171,211,47,215,251,77,162,95,101,215,156,19,233,25,194,231,216,52,137,5,75,214,188,83,170,9,21,117,37,188,151,159,99,183,97,174,199,143,97,87,157,70,67,224,46,143,105,169,250,77,189,207,233,42,223,80,131,142,122,11,90,165,208,27,168,158,138,80,70,167,214,158,250,69,33,252,30,193,124,195,232,246,125,174,42,33,24,7,227,183,243,96,60,159,7,189,156,133,106,196,124,67,175,203,130,70,66,63,45,65,10,174,83,241,239,240,55,94,81,42,234,9,102,222,252,160,193,115,15,222,185,30,64,205,91,217,39,55,195,129,125,21,215,221,183,125,216,218,246,61,102,87,74,208,79,105,150,136,37,188,128,179,126,54,197,244,7,220,204,255,244,43,96,210,19,163,203,165,76,237,149,245,30,209,149,126,89,131,87,125,52,184,247,171,87,51,234,96,64,119,36,16,82,229,156,74,253,26,242,26,42,20,79,209,158,57,111,20,229,202,47,132,106,97,82,157,34,140,254,131,104,202,255,105,52,229,115,162,169,133,225,74,86,87,89,183,45,3,102,161,214,254,1,223,145,42,131,193,18,0,0 };
const uint8_t JS_GRAPH_GZIP[1284] PROGMEM = { 31,139,8,0,191,123,111,105,2,255,205,88,221,111,219,54,16,127,247,95,225,8,104,32,198,178,172,54,94,7,84,225,67,218,14,93,129,36,40,154,96,192,48,236,129,147,104,153,152,44,9,20,109,139,112,253,191,239,72,138,146,236,72,25,234,100,31,15,177,77,222,39,239,126,119,71,102,177,206,34,193,242,108,156,178,140,126,226,164,88,186,5,225,52,19,94,117,29,69,180,44,115,238,73,251,11,237,162,60,43,197,120,203,98,177,196,111,223,4,161,89,47,41,75,150,2,207,155,141,100,45,4,229,120,110,215,5,171,104,90,126,161,252,129,69,127,226,203,32,92,88,179,217,122,69,57,139,30,56,201,202,69,206,97,225,198,68,144,91,150,121,250,155,84,94,81,169,21,124,146,10,237,54,132,143,21,225,35,91,44,112,205,49,181,18,69,165,183,53,235,212,136,41,210,87,2,166,176,33,206,172,176,23,229,57,143,13,201,238,205,12,79,200,169,88,243,108,39,242,15,138,231,157,117,86,123,134,118,134,170,23,214,50,186,104,236,76,180,221,112,239,137,252,35,236,181,194,218,94,35,173,87,198,71,116,209,186,50,169,21,134,251,125,184,31,53,81,34,21,43,191,210,44,166,28,226,147,115,6,249,81,220,153,39,108,220,76,100,20,223,39,158,175,11,28,231,17,68,54,19,126,196,41,17,244,167,148,170,213,221,189,235,44,133,40,222,205,102,219,237,214,223,94,250,57,79,102,111,130,32,152,149,155,196,241,156,196,65,161,85,244,133,64,146,79,212,83,128,44,168,106,252,241,75,42,174,133,224,236,143,181,160,174,19,165,164,44,29,175,115,146,137,51,85,204,181,121,21,22,108,64,84,175,73,133,53,234,166,157,93,169,184,12,246,14,183,129,185,94,179,69,55,92,24,99,167,114,208,206,158,238,200,171,24,28,191,29,59,19,101,125,226,192,15,105,126,220,232,61,82,53,123,40,132,144,187,202,22,195,58,219,236,10,43,134,144,77,38,104,7,54,93,54,213,153,125,229,30,32,255,226,18,129,11,193,249,57,59,195,90,208,100,77,208,74,156,26,104,37,11,65,83,95,62,203,50,202,127,126,184,189,193,25,221,142,1,125,212,189,85,167,92,164,128,47,183,129,138,203,16,66,190,200,111,242,136,164,244,129,173,232,61,132,32,75,220,90,205,97,80,42,199,99,189,4,233,120,38,22,61,180,24,136,206,107,186,58,128,0,41,10,128,240,135,37,75,99,87,201,32,0,249,30,130,67,79,203,71,179,7,109,161,147,15,169,243,112,133,165,206,75,155,15,237,235,171,195,70,212,228,66,182,185,128,253,23,169,160,132,179,248,6,122,234,51,43,232,229,177,49,4,137,129,228,87,67,57,150,67,192,136,65,202,153,250,63,232,244,15,129,195,191,212,100,27,165,191,203,60,59,46,67,101,218,166,234,0,89,86,227,16,221,32,111,0,149,86,66,67,115,212,207,100,193,138,66,51,40,31,17,173,134,182,125,171,217,218,180,239,158,185,234,85,205,252,243,228,195,97,75,79,159,143,161,198,162,207,41,196,25,234,92,62,218,129,34,57,107,249,150,164,188,131,56,185,232,219,183,51,249,120,215,78,49,56,163,114,81,153,49,45,4,155,172,53,71,104,15,235,103,70,210,212,108,203,32,143,25,194,45,4,146,186,61,190,156,159,247,186,210,90,159,96,3,146,209,147,14,140,148,7,163,39,93,216,143,210,199,152,172,103,150,83,194,125,133,170,65,149,246,226,182,117,167,23,32,169,134,102,7,27,69,206,50,113,42,56,180,240,179,219,85,171,101,224,200,250,170,163,185,202,127,24,78,223,155,124,125,57,80,247,172,95,72,186,166,248,56,219,230,242,128,187,120,104,152,13,81,182,194,178,79,88,226,46,82,142,132,35,198,163,244,228,234,52,210,16,80,243,227,56,246,170,247,14,209,212,236,29,160,113,208,60,175,103,208,191,115,177,232,132,180,255,90,1,53,63,131,154,235,136,116,3,57,48,118,6,239,28,195,51,231,245,147,19,103,234,255,168,233,29,180,119,11,211,4,115,144,92,95,88,70,61,37,221,74,40,134,22,107,184,231,109,211,2,116,197,50,23,121,157,53,169,96,29,76,204,197,213,235,94,118,161,192,158,84,42,143,148,202,35,165,7,87,228,198,132,25,130,77,231,209,65,111,180,250,230,245,114,204,163,226,255,152,231,59,198,155,95,191,169,14,213,232,173,58,244,47,161,168,211,94,185,86,167,31,182,247,155,68,63,218,174,57,39,210,51,132,207,177,233,33,11,150,172,121,167,146,19,42,234,66,121,47,63,199,110,195,92,79,39,195,174,26,145,134,192,93,30,211,82,181,163,122,159,211,85,190,161,6,29,245,22,116,82,161,55,80,61,52,161,202,78,45,77,245,137,66,248,60,130,249,134,209,237,251,92,85,66,48,14,198,111,231,193,120,62,15,122,57,11,213,167,249,134,94,151,5,141,132,126,121,130,20,220,182,226,95,225,111,188,162,84,212,3,206,252,75,0,52,120,238,193,51,216,3,168,121,43,251,34,103,56,176,143,230,186,57,183,239,94,219,221,199,236,74,9,250,41,205,18,177,132,7,114,214,207,166,152,126,131,139,251,239,126,5,76,122,160,116,185,148,169,189,178,222,35,186,210,15,111,240,170,143,6,207,2,245,168,70,29,12,232,142,4,66,170,156,83,169,123,154,215,80,161,120,138,246,204,121,163,40,87,126,33,84,11,147,234,20,97,244,31,68,83,254,79,163,41,159,19,77,45,12,55,182,186,202,186,109,25,48,11,181,246,23,243,230,197,199,224,18,0,0 };