From 4557e395fe7a5423f7d873f17689e58272b71f7a Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Sat, 17 Jun 2017 10:56:37 +0100
Subject: [PATCH] added chart export

---
 src/Template/Main/blocks.ctp | 18 +++++++++++++++---
 webroot/css/main.css         |  2 ++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/Template/Main/blocks.ctp b/src/Template/Main/blocks.ctp
index bb8f2f0..d2c8986 100644
--- a/src/Template/Main/blocks.ctp
+++ b/src/Template/Main/blocks.ctp
@@ -126,9 +126,14 @@
 
         $this->assign('title', 'Blocks');
 
+        $this->start('css');
+        echo $this->Html->css('/amcharts/plugins/export/export.css');
+        $this->end();
+
         $this->start('script'); ?>
 <script type="text/javascript" src="/amcharts/amcharts.js"></script>
 <script type="text/javascript" src="/amcharts/serial.js"></script>
+<script type="text/javascript" src="/amcharts/plugins/export/export.min.js"></script>
 <script type="text/javascript">
     var chart;
     var chartData = [];
@@ -208,7 +213,7 @@
                     bulletBorderThickness: 1,
                     bulletBorderAlpha: 1,
                     bulletColor: '#ffffff',
-                    bulletSize: 6,
+                    bulletSize: 5,
                     useLineColorForBulletBorder: true,
                     lineColor: '#1e88e5',
                     hideBulletsCount: 101,
@@ -228,7 +233,7 @@
                     bulletBorderThickness: 1,
                     bulletBorderAlpha: 1,
                     bulletColor: '#ffffff',
-                    bulletSize: 6,
+                    bulletSize: 5,
                     useLineColorForBulletBorder: true,
                     lineColor: '#00e676',
                     balloonText: '$[[AvgUSD]]',
@@ -277,6 +282,12 @@
 
                     return formatted;
                 }
+            },
+            export: {
+                enabled: true,
+                fileName: 'lbry-block-size-chart',
+                position: 'bottom-right',
+                divId: 'chart-export'
             }
         });
 
@@ -316,7 +327,7 @@
                         chart.categoryAxis.dateFormats[4].format = isHourly ? 'DD MMM' : 'DD';
                         chart.chartCursor.categoryBalloonDateFormat = isHourly ? 'D MMM HH:NN ' : 'D MMM YYYY';
                         chart.categoryAxis.gridCount = gridCount;
-                        chart.chartScrollbar.gridCount = periodGridCounts[dataPeriod];
+                        chart.chartScrollbar.gridCount = gridCount;
                         chart.dataProvider = chartData;
                         chart.validateNow();
                         chart.validateData();
@@ -366,6 +377,7 @@
         <a href="#" title="1 year" data-period="1y">1y</a>
     </div>
     <div id="block-size-chart" class="chart"></div>
+    <div id="chart-export" class="btn-chart-export"></div>
 </div>
 
 <div class="all-blocks">
diff --git a/webroot/css/main.css b/webroot/css/main.css
index f121761..b579a7a 100644
--- a/webroot/css/main.css
+++ b/webroot/css/main.css
@@ -164,10 +164,12 @@ footer .content .page-time { position: absolute; right: 12px; bottom: 0px; paddi
 .all-blocks { width: 1200px; margin: 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 36px; position: relative; cursor: default }
 .all-blocks h3 { font-weight: 300; margin: 0 0 12px 0 }
 
+.amcharts-export-menu { font-size: 80% }
 .block-size-chart-container { width: 1200px; height: 500px; margin: 0 auto 48px auto; box-shadow: 0 2px 6px rgba(0,0,0,.175); border: 1px solid rgba(0,0,0,.15); padding: 24px 36px; position: relative; cursor: default; overflow: hidden }
 .block-size-chart-container h3 { font-weight: 300; margin: 0 0 12px 0; line-height: 26px }
 .block-size-chart-container .load-progress { position: absolute; top: 0; left: 0; width: 25%; height: 3px; background: #1e88e5; animation: indeterminate 4s linear infinite; }
 .block-size-chart-container .chart { width: 100%; height: 414px; border: 1px solid #d9d9d9 }
+.block-size-chart-container .btn-chart-export { position: absolute; right: 40px; bottom: 36px }
 .block-size-chart-container .block-size-data-links { position: absolute; right: 48px; top: 28px; font-size: 80% }
 .block-size-chart-container .block-size-data-links a { display: inline-block; width: 40px; text-align: right }
 .block-size-chart-container .block-size-data-links a.active:link,