add box for status chart

static/monit-dashboard.css

@@ -41,6 +41,7 @@ button.accordion {
     border: none;
     outline: none;
     transition: 0.4s;
+    margin: 0.6rem;
 }
 
 div.panel {
@@ -70,3 +71,13 @@ div.panel.show {
 .red:hover {
     background-color: #c9302c;
 }
+
+.canvas-graph {
+  min-height: 30%;
+  min-width: 24.5%;
+  display: inline-block;
+  position: relative;
+  background-color: white;
+  margin: 20px 0;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
+}

templates/index.html

@@ -4,7 +4,7 @@ $def with (output, now)
 $ errors = 0
 $ color = "green"
 <div>
-<div style="height: 50%; overflow-y: scroll;">
+<div style="height: 40%; overflow-y: scroll; overflow-x: hidden;">
 $for server in range(len(output)):
         $code:
             errors = 0
@@ -79,8 +79,14 @@ $for server in range(len(output)):
 </div>
 
 
-<div style="height: 45%; overflow: scroll;">
+<div style="height:40%">
+<div class="canvas-graph">
+<div style="background-color: grey; text-align: center;"><h3>Hosts status</h3></div>
 <canvas id="canvas" width="400" height="400"></canvas>
+</div>
+</div>
+
+<div style="height: 10%;">
 <br><br><br>
 Latest update: $now.day/$now.month/$now.year, $now.hour:$now.minute:$now.second
 <br><br>