From 7924ea0545123564913e9126ea4f4d2603a36d26 Mon Sep 17 00:00:00 2001
From: iAmShorty <rafta@gmx.net>
Date: Fri, 28 Feb 2014 13:41:40 +0100
Subject: [PATCH] [UPDATE] block graphs

---
 .../bootstrap/js/demo/flot-demo.js            |   4 +-
 public/templates/bootstrap/master.tpl         |   6 +-
 .../statistics/blocks/block_overview_time.tpl |   2 +
 .../statistics/blocks/block_shares_graph.tpl  | 143 +++++++++++-------
 .../blocks/blocks_found_details.tpl           |   2 +
 5 files changed, 96 insertions(+), 61 deletions(-)
 mode change 100755 => 100644 public/templates/bootstrap/master.tpl
 mode change 100755 => 100644 public/templates/bootstrap/statistics/blocks/block_overview_time.tpl
 mode change 100755 => 100644 public/templates/bootstrap/statistics/blocks/block_shares_graph.tpl
 mode change 100755 => 100644 public/templates/bootstrap/statistics/blocks/blocks_found_details.tpl

diff --git a/public/site_assets/bootstrap/js/demo/flot-demo.js b/public/site_assets/bootstrap/js/demo/flot-demo.js
index cc0a779d..6e6f87b5 100644
--- a/public/site_assets/bootstrap/js/demo/flot-demo.js
+++ b/public/site_assets/bootstrap/js/demo/flot-demo.js
@@ -40,10 +40,10 @@ $(document).ready(function() {
 
         var plotObj = $.plot($("#flot-line-chart"), [{
                 data: sin,
-                label: "sin(x)"
+                label: "test 1"
             }, {
                 data: cos,
-                label: "cos(x)"
+                label: "test 2"
             }],
             options);
     }
diff --git a/public/templates/bootstrap/master.tpl b/public/templates/bootstrap/master.tpl
old mode 100755
new mode 100644
index 60bcc559..5cf0c544
--- a/public/templates/bootstrap/master.tpl
+++ b/public/templates/bootstrap/master.tpl
@@ -72,14 +72,16 @@
     <script src="{$PATH}/js/jquery-1.10.2.js"></script>
     <script src="{$PATH}/js/bootstrap.min.js"></script>
     <script src="{$PATH}/js/plugins/metisMenu/jquery.metisMenu.js"></script>
-    <!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
     <script src="{$PATH}/js/plugins/flot/jquery.flot.js"></script>
     <script src="{$PATH}/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
     <script src="{$PATH}/js/plugins/flot/jquery.flot.resize.js"></script>
     <script src="{$PATH}/js/plugins/flot/jquery.flot.pie.js"></script>
     <script src="{$PATH}/js/plugins/morris/raphael-2.1.0.min.js"></script>
     <script src="{$PATH}/js/mpos.js"></script>
-  <script type="text/javascript" src="{$PATH}/js/justgage.1.0.1.min.js"></script>
+    <script type="text/javascript" src="{$PATH}/js/justgage.1.0.1.min.js"></script>
+
+    <!-- Page-Level Plugin Scripts - Flot -->
+    <!--[if lte IE 8]><script src="{$PATH}/js/excanvas.min.js"></script><![endif]-->
 
 </body>
 </html>
diff --git a/public/templates/bootstrap/statistics/blocks/block_overview_time.tpl b/public/templates/bootstrap/statistics/blocks/block_overview_time.tpl
old mode 100755
new mode 100644
index 0d515979..dd9e6475
--- a/public/templates/bootstrap/statistics/blocks/block_overview_time.tpl
+++ b/public/templates/bootstrap/statistics/blocks/block_overview_time.tpl
@@ -1,3 +1,4 @@
+<div class="row">
   <div class="col-lg-12">
     <div class="panel panel-info">
       <div class="panel-heading">
@@ -182,3 +183,4 @@
     </div>
     <!-- /.col-lg-12 -->
   </div>
+</div>
\ No newline at end of file
diff --git a/public/templates/bootstrap/statistics/blocks/block_shares_graph.tpl b/public/templates/bootstrap/statistics/blocks/block_shares_graph.tpl
old mode 100755
new mode 100644
index 5629105c..b121893d
--- a/public/templates/bootstrap/statistics/blocks/block_shares_graph.tpl
+++ b/public/templates/bootstrap/statistics/blocks/block_shares_graph.tpl
@@ -1,57 +1,86 @@
-<article class="module width_full">
-  <header><h3>Block Shares</h3></header>
-  <table width="70%" class="visualize" rel="line">
-    <caption>Block Shares</caption>
-    <thead>
-      <tr>
-{section block $BLOCKSFOUND step=-1}
-        <th scope="col">{$BLOCKSFOUND[block].height}</th>
-{/section}
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <th scope="row">Expected</th>
-{section block $BLOCKSFOUND step=-1}
-        <td>{$BLOCKSFOUND[block].estshares}</td>
-{/section}
-      </tr>
-      <tr>
-        <th scope="row">Actual</th>
-{section block $BLOCKSFOUND step=-1}
-        <td>{$BLOCKSFOUND[block].shares|default:"0"}</td>
-{/section}
-     </tr>
-    {if $GLOBAL.config.payout_system == 'pplns'}<tr>
-      <th scope="row">PPLNS</th>
-{section block $BLOCKSFOUND step=-1}
-      <td>{$BLOCKSFOUND[block].pplns_shares}</td>
-{/section}
-   </tr>{/if}
-    {if $USEBLOCKAVERAGE}<tr>
-      <th scope="row">Average</th>
-{section block $BLOCKSFOUND step=-1}
-      <td>{$BLOCKSFOUND[block].block_avg}</td>
-{/section}
-   </tr>{/if}
-    </tbody>
-  </table>
-  <table class="tablesorter">
-    <tbody>
-      <tr>
-        <td>
-          <a href="{$smarty.server.SCRIPT_NAME}?page={$smarty.request.page|escape}&action={$smarty.request.action|escape}&height={if is_array($BLOCKSFOUND) && count($BLOCKSFOUND) > ($BLOCKLIMIT - 1)}{$BLOCKSFOUND[$BLOCKLIMIT - 1].height}{/if}&prev=1"><i class="fa fa-chevron-left fa"></i></a>
-        </td>
-        <td>
-          <a href="{$smarty.server.SCRIPT_NAME}?page={$smarty.request.page|escape}&action={$smarty.request.action|escape}&height={if is_array($BLOCKSFOUND) && count($BLOCKSFOUND) > 0}{$BLOCKSFOUND[0].height}{/if}&next=1"><i class="fa fa-chevron-right fa"></i></a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <footer>
-    <p style="padding-left:30px; padding-redight:30px; font-size:10px;">
-    The graph above illustrates N shares to find a block vs. E Shares expected to find a block based on
-    target and network difficulty and assuming a zero variance scenario.
-    </p>
-  </footer>
-</article>
+<script type="text/javascript">
+$(function() {
+
+        var exp = [
+                   {section block $BLOCKSFOUND step=-1}
+                     [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].estshares}],
+                   {/section}
+                  ];
+        var act = [
+                   {section block $BLOCKSFOUND step=-1}
+                     [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].shares|default:"0"}],
+                   {/section}
+                  ];
+        var avg = [
+                   {section block $BLOCKSFOUND step=-1}
+                     [{$BLOCKSFOUND[block].time * 1000}, {$BLOCKSFOUND[block].block_avg}],
+                   {/section}
+                  ];
+
+    function doPlot(position) {
+        $.plot($("#block-line-chart"), [{
+            data: exp,
+            label: "Expected Shares"
+        }, {
+            data: avg,
+            label: "Average Shares"
+        }, {
+            data: act,
+            label: "Actual Shares",
+            yaxis: 2
+        }], {
+            xaxes: [{
+                mode: 'time'
+            }],
+            yaxes: [{
+                min: 0
+            }, {
+                // align if we are to the right
+                alignTicksWithAxis: position == "right" ? 1 : null,
+                position: position
+            }],
+            grid: {
+                hoverable: true //IMPORTANT! this is needed for tooltip to work
+            },
+            tooltip: true,
+            tooltipOpts: {
+                content: "%s for %x was %y",
+                xDateFormat: "%y-%0m-%0d",
+
+                onHover: function(flotItem, $tooltipEl) {
+                    // console.log(flotItem, $tooltipEl);
+                }
+            }
+
+        });
+    }
+
+    doPlot("right");
+
+    $("button").click(function() {
+        doPlot($(this).text());
+    });
+});
+</script>
+
+<div class="row">
+  <div class="col-lg-12">
+    <div class="panel panel-info">
+      <div class="panel-heading">
+        Block Shares
+      </div>
+      <div class="panel-body">
+        <div class="panel-group">
+          <div class="panel panel-default">
+          
+            <div class="panel-body">
+              <div class="flot-chart">
+                <div class="flot-chart-content" id="block-line-chart"></div>
+              </div>
+            </div> 
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/public/templates/bootstrap/statistics/blocks/blocks_found_details.tpl b/public/templates/bootstrap/statistics/blocks/blocks_found_details.tpl
old mode 100755
new mode 100644
index 4cb140e9..0bde8f06
--- a/public/templates/bootstrap/statistics/blocks/blocks_found_details.tpl
+++ b/public/templates/bootstrap/statistics/blocks/blocks_found_details.tpl
@@ -1,3 +1,4 @@
+<div class="row">
   <div class="col-lg-12">
     <div class="panel panel-info">
       <div class="panel-heading">
@@ -78,3 +79,4 @@
     </div>
     <!-- /.col-lg-12 -->
   </div>
+</div>
\ No newline at end of file