[UPDATE] Dashboard graphs with proper boxes

public/site_assets/bootstrap/css/sparklines.css

@@ -0,0 +1,45 @@
+.sparklines-stats li:first-child {
+  border-radius: 2px 0 0 2px;
+  -webkit-border-radius: 2px 0 0 2px;
+  -moz-border-radius: 2px 0 0 2px;
+}
+.sparklines-stats li.bg-default {
+  background-color: #fafafa;
+  border: 1px solid #e5e5e5;
+}
+ul.list-justified li {
+  float: none;
+  width: 1%;
+  display: table-cell;
+}
+.sparklines-stats li {
+  padding: 12px 18px;
+  border-left: 1px solid #e5e5e5;
+  display: inline-block;
+}
+.sparklines-stats {
+  margin-left: 0;
+  padding: 0;
+  list-style: none;
+  margin-bottom: 35px;
+}
+.chart {
+  float: right;
+  margin-top: 4px;
+}
+.sparklines-stats-showcase {
+  float: left;
+  margin-right: 18px;
+}
+.sparklines-stats-showcase span {
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: 4px;
+}
+.sparklines-stats-showcase h2 {
+  margin: 0;
+  font-size: 20px;
+  line-height: 20px;
+}

public/templates/bootstrap/dashboard/js_api.tpl

@@ -9,18 +9,18 @@ $(document).ready(function(){
   var url_balance = "{/literal}{$smarty.server.SCRIPT_NAME}?page=api&action=getuserbalance&api_key={$GLOBAL.userdata.api_key}&id={$GLOBAL.userdata.id}{literal}";
 
   // Load initial sparkline values
-  var storedPersonalHashrate = [ 0, 0, 0, 0, {/literal}{$GLOBAL.userdata.hashrate|number_format:"2"}{literal} ];
-  var storedPersonalSharerate = [ 0, 0,0, 0, {/literal}{$GLOBAL.userdata.sharerate|number_format:"2"}{literal} ];
-  var storedPoolHashrate = [ 0, 0,0, 0, {/literal}{$GLOBAL.hashrate|number_format:"2"}{literal} ];
-  var storedPoolWorkers = [ 0, 0,0, 0, {/literal}{$GLOBAL.workers}{literal} ];
+  var storedPersonalHashrate = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, {/literal}{$GLOBAL.userdata.hashrate|number_format:"0"}{literal} ];
+  var storedPersonalSharerate = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, {/literal}{$GLOBAL.userdata.sharerate|number_format:"2"}{literal} ];
+  var storedPoolHashrate = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, {/literal}{$GLOBAL.hashrate|number_format:"0"}{literal} ];
+  var storedPoolWorkers = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, {/literal}{$GLOBAL.workers}{literal} ];
 
   // Sparkline options applied to all graphs
   var sparklineOptions = {
     type: 'bar',
     barColor: 'green',
-    height: '25',
-    barWidth: 25,
-    barSpacing: 1,
+    height: '35',
+    barWidth: 6,
+    barSpacing: 2,
     chartRangeMin: 0
   };
 
@@ -33,11 +33,11 @@ $(document).ready(function(){
   function refreshInformation(data) {
     // Drop one value, add the latest new one to each array
     storedPersonalHashrate.shift();
-    storedPersonalHashrate.push(parseFloat(data.getdashboarddata.data.personal.hashrate).toFixed(2))
+    storedPersonalHashrate.push(parseFloat(data.getdashboarddata.data.personal.hashrate).toFixed(0))
     storedPersonalSharerate.shift();
     storedPersonalSharerate.push(parseFloat(data.getdashboarddata.data.personal.sharerate).toFixed(2))
     storedPoolHashrate.shift();
-    storedPoolHashrate.push(parseFloat(data.getdashboarddata.data.pool.hashrate).toFixed(2))
+    storedPoolHashrate.push(parseFloat(data.getdashboarddata.data.pool.hashrate).toFixed(0))
     storedPoolWorkers.shift();
     storedPoolWorkers.push(data.getdashboarddata.data.pool.workers);
     // Redraw all bar graphs
@@ -51,8 +51,8 @@ $(document).ready(function(){
   function refreshStaticData(data) {
     $('#b-price').html((parseFloat(data.getdashboarddata.data.pool.price).toFixed(8)));
     $('#b-poolworkers').html(data.getdashboarddata.data.pool.workers);
-    $('#b-hashrate').html((parseFloat(data.getdashboarddata.data.personal.hashrate).toFixed(2)));
-    $('#b-poolhashrate').html((parseFloat(data.getdashboarddata.data.pool.hashrate).toFixed(2)));
+    $('#b-hashrate').html((parseFloat(data.getdashboarddata.data.personal.hashrate).toFixed(0))) + " " + data.getdashboarddata.data.personal.modifier;
+    $('#b-poolhashrate').html((parseFloat(data.getdashboarddata.data.pool.hashrate).toFixed(0)));
     $('#b-sharerate').html((parseFloat(data.getdashboarddata.data.personal.sharerate).toFixed(2)));
     $('#b-yvalid').html(number_format(data.getdashboarddata.data.personal.shares.valid));
     $('#b-yivalid').html(number_format(data.getdashboarddata.data.personal.shares.invalid) + " (" + number_format(data.getdashboarddata.data.personal.shares.invalid_percent, 2) + "%)" );

public/templates/bootstrap/dashboard/overview.tpl

@@ -4,43 +4,38 @@
         <h4 class="panel-title"><i class="fa fa-align-left fa-fw"></i> Overview {if $GLOBAL.config.price.currency}{$GLOBAL.config.currency}/{$GLOBAL.config.price.currency}: <span id="b-price">{$GLOBAL.price|number_format:"8"|default:"0"}</span>{/if}</h4>
       </div>
       <div class="panel-body">
-         <div class="row show-grid">
-            <div class="col-md-3">
-              <center>
-               <p><b>My Hashrate</b></p>
-               <span id="b-hashrate">{$GLOBAL.userdata.hashrate|number_format:"2"}</span>
-               <br>
-               <span class="personal-hashrate-bar"></span>
-              </center>
+        <ul class="sparklines-stats list-justified">
+          <li class="bg-default">
+            <div class="sparklines-stats-showcase">
+              <span>My Hashrate {$GLOBAL.hashunits.personal}</span>
+              <h2 id="b-hashrate">{$GLOBAL.userdata.hashrate|number_format:"0"}</h2>
             </div>
-            <div class="col-md-3">
-              <center>
-               <p><b>My Sharerate</b></p>
-               <span id="b-sharerate">{$GLOBAL.userdata.sharerate|number_format:"2"}</span>
-               <br>
-               <span class="personal-sharerate-bar"></span>
-              </center>
+            <div class="personal-hashrate-bar chart"></div>
+          </li>
+          <li class="bg-default">
+            <div class="sparklines-stats-showcase">
+              <span>My Sharerate</span>
+              <h2 id="b-sharerate">{$GLOBAL.userdata.sharerate|number_format:"2"}</h2>
             </div>
-            <div class="col-md-3">
-              <center>
-               <p><b>Pool Hashrate</b></p>
-               <span id="b-poolhashrate">{$GLOBAL.hashrate|number_format:"2"}</span>
-               <br>
-               <span class="pool-hashrate-bar"></span>
-              </center>
+            <div class="personal-sharerate-bar chart"></div>
+          </li>
+          <li class="bg-default">
+            <div class="sparklines-stats-showcase">
+              <span>Pool Hashrate {$GLOBAL.hashunits.pool}</span>
+              <h2 id="b-poolhashrate">{$GLOBAL.hashrate|number_format:"0"}</h2>
             </div>
-            <div class="col-md-3">
-              <center>
-               <p><b>Pool Workers</b></p>
-               <span id="b-poolworkers">{$GLOBAL.workers}</span>
-               <br>
-               <span class="pool-workers-bar"></span>
-              </center>
+            <div class="pool-hashrate-bar chart"></div>
+          </li>
+          <li class="bg-default">
+            <div class="sparklines-stats-showcase">
+              <span>Pool Workers</span>
+              <h2 id="b-poolhashrate">{$GLOBAL.workers}</h2>
             </div>
-         </div>
-       <div></div>
-     </div>
-      <div class="panel-footer" style="margin: 20px 0px 0px;">
+            <div class="pool-workers-bar chart"></div>
+          </li>
+        </ul>
+      </div>
+      <div class="panel-footer">
         Refresh interval: {$GLOBAL.config.statistics_ajax_refresh_interval|default:"10"} seconds. Hashrate based on shares submitted in the past {$INTERVAL|default:"5"} minutes.
       </div>
     </div>

public/templates/bootstrap/master.tpl

@@ -21,6 +21,7 @@
   <link href="{$PATH}/css/plugins/timeline/timeline.css" rel="stylesheet">
   <link href="{$PATH}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
   <link href="{$PATH}/css/mpos.css" rel="stylesheet">
+  <link href="{$PATH}/css/sparklines.css" rel="stylesheet">
 
   <script src="{$PATH}/js/jquery-2.0.3.min.js"></script>
   <script src="{$PATH}/js/bootstrap.min.js"></script>