Update Web UI Bar Gauge Graphs

- Changed file system abbreviation from 'FS' to Filesystem
- Made chart height dynamic and incorporated legend height change into the master code/datafile.go binary
- Updated the max colors for the graph
- Realigned graph numbers

www/master/components/dashboard/less/dashboard/colors.less

@@ -1,48 +1,47 @@
 
 @color-codes:
-  #2962FF, //blue-deep
-  #AA00FF, //purple-deep
-  #00C853, //green-deep
-  #304FFE, //indigo-deep
-  #0091EA, //light-blue-deep
-  #FF6D00, //orange-deep
-  #00BFA5, //teal-deep
-  #C51162, //pink-deep
-  #64DD17, //light-green-deep
-  #6200EA, //deep-purple-deep
-  #FFD600, //yellow-deep
-  #00B8D4, //cyan-deep
-  #FFAB00, //amber-deep
-  #DD2C00, //deep-orange-deep
-  #2979FF, //blue-med
-  #D500F9, //purple-med
-  #00E676, //green-med
-  #3D5AFE, //indigo-med
-  #00B0FF, //light-blue-med
-  #FF9100, //orange-med
-  #1DE9B6, //teal-med
-  #F50057, //pink-med
-  #76FF03, //light-green-med
-  #651FFF, //deep-purple-med
-  #FFEA00, //yellow-med
-  #00E5FF, //cyan-med
-  #FFC400, //amber-med
-  #FF3D00, //deep-orange-med
-  #448AFF, //blue-light
-  #E040FB, //purple-light
-  #69F0AE, //green-light
-  #536DFE, //indigo-light
-  #40C4FF, //light-blue-light
-  #FFAB40, //orange-light
-  #64FFDA, //teal-light
-  #FF4081, //pink-light
-  #B2FF59, //light-green-light
-  #7C4DFF, //deep-purple-light
-  #FFFF00, //yellow-light
-  #18FFFF, //cyan-light
-  #FFD740, //amber-light
-  #FF6E40; //deep-orange-light
-
+  "#2962FF",
+  "#AA00FF",
+  "#00C853",
+  "#304FFE",
+  "#0091EA",
+  "#FF6D00",
+  "#00BFA5",
+  "#C51162",
+  "#64DD17",
+  "#6200EA",
+  "#FFD600",
+  "#00B8D4",
+  "#FFAB00",
+  "#DD2C00",
+  "#2979FF",
+  "#D500F9",
+  "#00E676",
+  "#3D5AFE",
+  "#00B0FF",
+  "#FF9100",
+  "#1DE9B6",
+  "#F50057",
+  "#76FF03",
+  "#651FFF",
+  "#FFEA00",
+  "#00E5FF",
+  "#FFC400",
+  "#FF3D00",
+  "#448AFF",
+  "#E040FB",
+  "#69F0AE",
+  "#536DFE",
+  "#40C4FF",
+  "#FFAB40",
+  "#64FFDA",
+  "#FF4081",
+  "#B2FF59",
+  "#7C4DFF",
+  "#FFFF00",
+  "#18FFFF",
+  "#FFD740",
+  "#FF6E40";
 
 .dark-overlay {
   background-color: #292935;
@@ -70,22 +69,25 @@
   @index: @i; //mod(@i - 1, 3) * 7 + round((@i - 1) / 3 - .3);
 }
 .creatcolorclasses(@i:1) when(@i <= length(@color-codes)) {
+  @colorCodeString: extract(@color-codes, @i);
+  @colorCode: color(@colorCodeString);
 
   .getColorIndex(@i);
   .color-@{index} {
-    background-color: extract(@color-codes, @i);
-    // border-color: lighten(extract(@color-codes, @i), 20%);
-    // border-width: 2px;
-    // border-style: solid;
-    fill: extract(@color-codes, @i);
-    stroke: extract(@color-codes, @i);
+    background-color: @colorCode;
+    fill: @colorCode;
+    stroke: @colorCode;
+  }
+
+
+  .color-max-@{index} {
+    background-color: lighten(@colorCode, 35%);
+    border-color: lighten(@colorCode, 35%);
+    fill: lighten(@colorCode, 35%);
   }
 
   md-grid-list.list-color-@{i} md-grid-tile.colored {
-    background-color: extract(@color-codes, @i);
-    // border-color: darken(extract(@color-codes, @i), 10%);
-    // border-width: 1px;
-    // border-style: solid;
+    background-color: @colorCode;
   }
   .creatcolorclasses((@i + 1));
 }

www/master/components/dashboard/less/dashboard/servers.less

@@ -23,24 +23,24 @@
   }
 
   .color-max-1 {
-    background-color: lighten(#512DA8, 40%);
-    border-color: lighten(#512DA8, 40%);
-    fill: lighten(#512DA8, 40%);
-    // stroke: lighten(#512DA8, 40%);
+    background-color: lighten(#512DA8, 35%);
+    border-color: lighten(#512DA8, 35%);
+    fill: lighten(#512DA8, 35%);
+    // stroke: lighten(#512DA8, 35%);
   }
 
   .color-max-2 {
-    background-color: lighten(#9C27B0, 40%);
-    border-color: lighten(#9C27B0, 40%);
-    fill: lighten(#9C27B0, 40%);
-    // stroke: lighten(#9C27B0, 40%);
+    background-color: lighten(#9C27B0, 35%);
+    border-color: lighten(#9C27B0, 35%);
+    fill: lighten(#9C27B0, 35%);
+    // stroke: lighten(#9C27B0, 35%);
   }
 
   .color-max-3 {
-    background-color: lighten(#00BCD4, 40%);
-    border-color: lighten(#00BCD4, 40%);
-    fill: lighten(#00BCD4, 40%);
-    // stroke: lighten(#00BCD4, 40%);
+    background-color: lighten(#00BCD4, 35%);
+    border-color: lighten(#00BCD4, 35%);
+    fill: lighten(#00BCD4, 35%);
+    // stroke: lighten(#00BCD4, 35%);
   }
 
   .color-max-warning {
@@ -96,7 +96,7 @@
   }
 
   svg.legend {
-    height: 115px;
+    height: auto;
 
     text {
       font-size:12px;
@@ -120,6 +120,7 @@
   }
   .chart_area {
     width: 325px;
-    height: 425px;
+    // height: 425px;
+    height: auto;
   }
 }