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;
});
const shapes = references.split(' ').map((spec) => {
const s = spec.split(',');
const shapes = references.split(' ').map((spec, idx) => {
let colorIdx = data.length + idx;
if (colorIdx > colors.length) {
// Start cycle again
colorIdx = idx;
}
let color = colors[colorIdx];
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],
y0: parseFloat(spec),
y1: parseFloat(spec),
line: {
color: s[1],
width: 2.5,
color,
width: 1,
},
};
return res;

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" 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 id="climate-pm25">
<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 id="drinks-status">
<cbase-currentstate id="bar-status" timeseries="bar.open" interval="10">bar</cbase-currentstate>