add temperature regions with colour coding

diff --git a/web/static/seepark_web.css b/web/static/seepark_web.css
new file mode 100644 (file)
index 0000000..d48e838
--- /dev/null
+++ b/web/static/seepark_web.css
@@ -0,0 +1,15 @@
+.region-frozen {
+    fill: blue;
+}
+
+.region-ok {
+    fill: white;
+}
+
+.region-warm {
+    fill: orange;
+}
+
+.region-boiling {
+    fill: red;
+}

diff --git a/web/static/seepark_web.js b/web/static/seepark_web.js
index 149d659b637b4c85d53fbebecf2a091c795a6666..93f5d4967cd0526b2bb364d81852e31b6160e51b 100644 (file)
--- a/web/static/seepark_web.js
+++ b/web/static/seepark_web.js
@@ -60,6 +60,12 @@ var chart = c3.generate({
                y: {
                        show: true
                }
-       }
+       },
+       regions: [
+               {axis: 'y', start: -999, end:   0, class: 'region-frozen'},
+               {axis: 'y', start:    1, end:  25, class: 'region-ok'},
+               {axis: 'y', start:   26, end:  99, class: 'region-warm'},
+               {axis: 'y', start:   99, end: 999, class: 'region-boiling'}
+       ]
 });
 

diff --git a/web/templates/seepark_web.html b/web/templates/seepark_web.html
index 250298ffa0d91373614d29f548f66bfb97854f74..9f0b15cb8af372da54ef6751352639ea5939fbd4 100644 (file)
--- a/web/templates/seepark_web.html
+++ b/web/templates/seepark_web.html
@@ -4,6 +4,9 @@
                <!-- Load c3.css -->
                <link href="{{url_for('static', filename='c3.css')}}" rel="stylesheet">
 
+               <!-- Load own css -->
+               <link href="{{url_for('static', filename='seepark_web.css')}}" rel="stylesheet">
+
                <!-- Load d3.js and c3.js -->
                <script src="{{url_for('static', filename='d3.js')}}" charset="utf-8"></script>
                <script src="{{url_for('static', filename='c3.js')}}"></script>