add reference line support; add safety thresholds to air quality
This commit is contained in:
parent
56f89cbdb8
commit
12b66ee71e
2 changed files with 23 additions and 3 deletions
|
@ -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',
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue