c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add reference line support; add safety thresholds to air quality

Browse source
This commit is contained in:
Casey Callendrello 2018-03-06 23:03:51 +01:00
parent 56f89cbdb8
commit 12b66ee71e
2 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
elements/linechart.js
View file

@ -27,6 +27,7 @@ class LineChart extends Component {
shape: props.string,
width: props.number,
height: props.number,
references: props.string,
};
connected() {
@ -78,7 +79,7 @@ class LineChart extends Component {
injectCss(root);
}
render({ data, shape, width, height }) {
render({ data, shape, width, height, references }) {
const el = document.createElement('div');
if (!data || !data.length) {
// No data yet
@ -105,6 +106,24 @@ class LineChart extends Component {
}
return res;
});
const shapes = references.split(' ').map((spec) => {
const s = spec.split(',');
const res = {
type: 'line',
xref: 'paper', // x relative to [0,1] "paper" axis
yref: 'y',
x0: 0,
x1: 1,
y0: s[0],
y1: s[0],
line: {
color: s[1],
width: 2.5,
},
};
return res;
});
const layout = {
autosize: false,
width: graphWidth,
@ -143,6 +162,7 @@ class LineChart extends Component {
r: 0,
},
showlegend: showLegend,
shapes,
paper_bgcolor: 'transparent',
plot_bgcolor: 'transparent',
};

4
life-support/index.html
View file

@ -94,11 +94,11 @@
<main>
<section id="climate-pm10">
<h2>PM<sub>10</sub></h2>
<cbase-linechart timeseries="clima.pm10.mainhall clima.pm10.arboretum" width="34" height="40"></cbase-linechart>
<cbase-linechart timeseries="clima.pm10.mainhall clima.pm10.arboretum" width="34" height="40" references="50,yellow 150,red"></cbase-linechart>
</section>
<section id="climate-pm25">
<h2>PM<sub>2.5</sub></h2>
<cbase-linechart timeseries="clima.pm25.mainhall clima.pm25.arboretum" width="34" height="40"></cbase-linechart>
<cbase-linechart timeseries="clima.pm25.mainhall clima.pm25.arboretum" width="34" height="40" references="25,yellow 35,red"></cbase-linechart>
</section>
<section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate>