#5 - added chart

src/logic/tile/tiles/SensorLineChartTile.html

 <style>
     .sensorLineChartTile {
-        background-color: #1C1C1C;
-        font-size: 5vh;
+        background-color: #2F2F2F;
+        font-size: 4vmin;
         font-weight: bold;
+        border-radius: 1vh;
+    }
+
+    .sensorLineChartTile .content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+    }
+
+    .sensorLineChartTile #chart {
+        flex-grow: 1;
+    }
+
+    .sensorLineChartTile .header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .sensorLineChartTile .title {
+        font-size: 2.2vmin;
+    }
+
+    .sensorLineChartTile .header-left {
+        display: flex;
+        flex-direction: column;
+        margin-top: 3%;
+        margin-left: 5%;
+    }
+
+    .sensorLineChartTile i {
+        margin-top: 3%;
+        margin-right: 5%;
+        font-size: 3.8vmin;
     }
 
     .sensorLineChartTile .title,
@@ -12,10 +48,16 @@
 </style>
 
 <div class="sensorLineChartTile">
+    <div class="content">
+        <div class="header">
+            <div class="header-left">
                 <div class="title">{{ title }}</div>
                 <div class="value">{{ data['sensorValue']['value'] }}{{ unit }}</div>
+            </div>
             <i class="wi {{ icon }}"></i>
+        </div>
         <div id="chart"></div>
+    </div>
 
     <script>
         Plotly.newPlot(document.getElementById('chart'), [{
@@ -23,6 +65,10 @@
                 y: [0, 2, 3, 5],
                 fill: 'tozeroy',
                 type: 'scatter',
+                marker: {
+                    color: 'rgba(254, 151, 0, 1)',
+                    size: 10,
+                },
                 line: {
                     shape: 'spline',
                     color: 'rgba(254, 151, 0, 1)',
@@ -42,7 +88,12 @@
                 },
                 paper_bgcolor: 'rgba(0,0,0,0)',
                 plot_bgcolor: 'rgba(0,0,0,0)',
-                margin: {t: 0}
+                margin: {
+                    "b": 0,
+                    "l": 0,
+                    "r": 0,
+                    "t": 0
+                }
             },
             {
                 displaylogo: false,

src/static/css/main.css

@@ -26,12 +26,14 @@ body {
 .grid-stack-item-content > .container {
     background-color: #616161;
     text-align: center;
+    border-radius: 1vh;
 }
 
 .grid-stack-item .container {
     display: table;
     width: 100%;
     height: 100%;
+    overflow: hidden;
 }
 
 .grid-stack-item-content .container > div {