From dd0847a6ae7d0ce479d47fc96cbe02174d090734 Mon Sep 17 00:00:00 2001
From: Henri Bergius <henri.bergius@iki.fi>
Date: Wed, 7 Mar 2018 15:56:16 +0100
Subject: [PATCH] Simplify reference line configuration by picking colors from
 theme

---
 elements/linechart.js   | 17 +++++++++++------
 life-support/index.html |  4 ++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/elements/linechart.js b/elements/linechart.js
index caed171..9a3cc4f 100644
--- a/elements/linechart.js
+++ b/elements/linechart.js
@@ -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;
diff --git a/life-support/index.html b/life-support/index.html
index 53f7ffc..eef8b6e 100644
--- a/life-support/index.html
+++ b/life-support/index.html
@@ -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>