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

Simplify reference line configuration by picking colors from theme

Browse source
This commit is contained in:
Henri Bergius 2018-03-07 15:56:16 +01:00
parent 29d949ac0f
commit dd0847a6ae
2 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
elements/linechart.js
View file

@ -107,19 +107,24 @@ class LineChart extends Component {
return res; return res;
}); });
const shapes = references.split(' ').map((spec) => { const shapes = references.split(' ').map((spec, idx) => {
const s = spec.split(','); let colorIdx = data.length + idx;
if (colorIdx > colors.length) {
// Start cycle again
colorIdx = idx;
}
let color = colors[colorIdx];
const res = { const res = {
type: 'line', type: 'line',
xref: 'paper', // x relative to [0,1] "paper" axis xref: 'paper', // x relative to [0,1] "paper" axis
yref: 'y', yref: 'y',
x0: 0, x0: 0,
x1: 1, x1: 1,
y0: s[0], y0: parseFloat(spec),
y1: s[0], y1: parseFloat(spec),
line: { line: {
color: s[1], color,
width: 2.5, width: 1,
}, },
}; };
return res; return res;

4
life-support/index.html
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" references="50,yellow 150,red"></cbase-linechart> <cbase-linechart timeseries="clima.pm10.mainhall clima.pm10.arboretum" width="34" height="40" references="50 150"></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" references="25,yellow 35,red"></cbase-linechart> <cbase-linechart timeseries="clima.pm25.mainhall clima.pm25.arboretum" width="34" height="40" references="25 35"></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>