add reference line support; add safety thresholds to air quality

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

View file

@ -27,6 +27,7 @@ class LineChart extends Component {
shape: props.string, shape: props.string,
width: props.number, width: props.number,
height: props.number, height: props.number,
references: props.string,
}; };
connected() { connected() {
@ -78,7 +79,7 @@ class LineChart extends Component {
injectCss(root); injectCss(root);
} }
render({ data, shape, width, height }) { render({ data, shape, width, height, references }) {
const el = document.createElement('div'); const el = document.createElement('div');
if (!data || !data.length) { if (!data || !data.length) {
// No data yet // No data yet
@ -105,6 +106,24 @@ class LineChart extends Component {
} }
return res; 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 = { const layout = {
autosize: false, autosize: false,
width: graphWidth, width: graphWidth,
@ -143,6 +162,7 @@ class LineChart extends Component {
r: 0, r: 0,
}, },
showlegend: showLegend, showlegend: showLegend,
shapes,
paper_bgcolor: 'transparent', paper_bgcolor: 'transparent',
plot_bgcolor: 'transparent', plot_bgcolor: 'transparent',
}; };

View file

@ -94,11 +94,11 @@
<main> <main>
<section id="climate-pm10"> <section id="climate-pm10">
<h2>PM<sub>10</sub></h2> <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>
<section id="climate-pm25"> <section id="climate-pm25">
<h2>PM<sub>2.5</sub></h2> <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>
<section id="drinks-status"> <section id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate> <cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate>