#5 - initial work:

- basic area chart
- added weather icon font
- added plotly

src/logic/tile/tiles/SensorLineChartTile.html

+<style>
+    .sensorLineChartTile {
+        background-color: #1C1C1C;
+        font-size: 5vh;
+        font-weight: bold;
+    }
+
+    .sensorLineChartTile .title,
+    .sensorLineChartTile .value {
+        text-align: left;
+    }
+</style>
+
+<div class="sensorLineChartTile">
+    <div class="title">{{ title }}</div>
+    <div class="value">{{ data['sensorValue']['value'] }}{{ unit }}</div>
+    <i class="wi {{ icon }}"></i>
+    <div id="chart"></div>
+
+    <script>
+        Plotly.newPlot(document.getElementById('chart'), [{
+                x: [1, 2, 3, 4],
+                y: [0, 2, 3, 5],
+                fill: 'tozeroy',
+                type: 'scatter',
+                line: {
+                    shape: 'spline',
+                    color: 'rgba(254, 151, 0, 1)',
+                    width: 3
+                },
+                fillcolor: 'rgba(254, 151, 0, 0.2)'
+            }], {
+                xaxis: {
+                    showgrid: false,
+                    zeroline: false,
+                    visible: false,
+                },
+                yaxis: {
+                    showgrid: false,
+                    zeroline: false,
+                    visible: false,
+                },
+                paper_bgcolor: 'rgba(0,0,0,0)',
+                plot_bgcolor: 'rgba(0,0,0,0)',
+                margin: {t: 0}
+            },
+            {
+                displaylogo: false,
+                responsive: true
+            });
+    </script>
+</div>

src/logic/tile/tiles/SensorLineChartTile.py

+import os
+from typing import Dict
+
+from flask import Blueprint
+
+from logic.service.ServiceManager import ServiceManager
+from logic.tile.Tile import Tile
+
+
+class SensorLineChartTile(Tile):
+    UNIT_BY_SENSOR_TYPE = {
+        'temperature': '&degC',
+        'humidity': '%'
+    }
+
+    ICON_BY_SENSOR_TYPE = {
+        'temperature': 'wi-thermometer',
+        'humidity': 'wi-humidity'
+    }
+
+    def __init__(self, uniqueName: str, settings: Dict, intervalInSeconds: int):
+        super().__init__(uniqueName, settings, intervalInSeconds)
+
+    def fetch(self, pageName: str) -> Dict:
+        storageLeafService = ServiceManager.get_instance().get_service_by_type_name('StorageLeafService')
+        cacheKey = f'{pageName}_{self._uniqueName}'
+
+        return storageLeafService.get_data(cacheKey, self._intervalInSeconds, self._settings)
+
+    def render(self, data: Dict) -> str:
+        sensorType = data['sensorInfo']['type']
+        unit = self.UNIT_BY_SENSOR_TYPE.get(sensorType, '')
+        icon = self.ICON_BY_SENSOR_TYPE.get(sensorType, '')
+
+        return Tile.render_template(os.path.dirname(__file__), __class__.__name__,
+                                    data=data, unit=unit, icon=icon, title=self._settings['title'])
+
+    def construct_blueprint(self, *args, **kwargs):
+        return Blueprint('simpleSensorValue_{}'.format(self.get_uniqueName()), __name__)
+

src/templates/page.html

@@ -5,6 +5,8 @@
         <title>DashboardLeaf</title>
         <script src="../static/js/libs/socket.io.min.js"></script>
         <script src="../static/js/libs/gridstack.min.js"></script>
+        <script src="../static/js/libs/plotly.min.js"></script>
+        <link type="text/css" rel="stylesheet" href="../static/css/libs/weather-icons.min.css" />
         <link type="text/css" rel="stylesheet" href="../static/css/libs/gridstack.min.css" />
         <link type="text/css" rel="stylesheet" href="../static/css/main.css" />
     </head>