Make colors more good and less bad

2 files changed, 12 insertions, 9 deletions

diff --git a/static/status-dnbd3.html b/static/graph.html
index 0fe1a09..0fe1a09 100644
--- a/static/status-dnbd3.html
+++ b/static/graph.html
diff --git a/static/new_status-dnbd3.html b/static/table.html
index 85a34ec..ad7835f 100644
--- a/static/new_status-dnbd3.html
+++ b/static/table.html
@@ -23,9 +23,9 @@
   }
   
   .server {
-    border-spacing: 5px;
+    border-spacing: 2px 4px;
     background-color: #eee;
-    border: 1px solid #666;
+    border: 1px solid #888;
     flex: 1;
     white-space: nowrap;
     max-width: 360px;
@@ -41,8 +41,9 @@
   }
   
   .client-label, .client-speed {
-    border: 1px solid black;
+    border: 1px solid #888;
     text-align: center;
+    text-shadow: #fff 1.2px 1.2px;
   }
 
   .expand {
@@ -64,6 +65,7 @@
           <tr><td>Total sent:</td><td>{{ formatSpeed(server.bytesSent) }}</td></tr>
           <tr><td>Total received:</td><td>{{ formatSpeed(server.bytesReceived) }}</td></tr>
           <tr><td>Client count:</td><td>{{ server.clientCount }}</td></tr>
+          <tr><td>Server count:</td><td>{{ server.serverCount }}</td></tr>
           <tr v-for="client in server.clients">
             <td class="client-label">{{ client.address.split( ":" )[0] }}</td>
             <td class="client-speed" :style="calcBackgroundStyle(peak ? client.peakUploadSpeed : client.avgUploadSpeed)">
@@ -175,12 +177,13 @@ var app = new Vue({
              + Math.floor(seconds / 60 ) % 60 + 'min' )
     },
     calcBackgroundStyle (speed) {
-      const percent = Math.round(Math.max(0, Math.min(100, this.logScale(speed) / this.logScale(262144000) * 100)))
-      var color = '#056d00'
-      if (speed < 1048576) color = '#8adb8b'
-      else if (speed < 10485760) color = '#5cdb55'
-      else if (speed < 104857600) color = '#26a81f'
-      return { background: `linear-gradient(90deg, ${color} ${percent}%, #e0e0e0 ${percent}%)` }
+      const colors = ['#eee', '#cfc', '#6f6', '#7c0', '#f00', '#f65']
+      const limits = [1048576, 10485760, 104857600, 1073741824, 10737418240]
+      for (var i = 0; i < 4; ++i) {
+        if (speed < limits[i]) break
+      }
+      const percent = Math.round(Math.max(0, Math.min(100, this.logScale(speed) / this.logScale(limits[i]) * 100)))
+      return { background: `linear-gradient(90deg, ${colors[i+1]} ${percent}%, ${colors[i]} ${percent}%)` }
     },
     compareObjectIps (obj1, obj2) {
       const parts1 = obj1.address.split('.').map(str => parseInt(str))