added price chart for BCH

app-template/bitcoincom/css/bitcoin.com.css

@@ -144,6 +144,11 @@ div.onboarding-topic {
 .ct-series-a .ct-area {
     fill: #FDE9BE;
 }
+
+#bch-chart .ct-area {
+	fill: #008917;
+}
+
 .ct-area {
     opacity:.6 !important;
 }
@@ -153,6 +158,13 @@ div.onboarding-topic {
     stroke: #F9B016;
     stroke-width: 2px;
 }
+
+#bch-chart .ct-series-a .ct-line,
+#bch-chart .ct-series-a .ct-point {
+	stroke: #46C05C;
+	stroke-width: 2px;
+}
+
 .ct-labels {
     border: red thin solid;
 }
@@ -190,3 +202,7 @@ div.onboarding-topic {
 .light-yellow {
     color:#FFD579;
 }
+
+.light-green {
+	color:#26B03C;
+}

src/js/controllers/pricechart.js

@@ -1,56 +1,16 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('pricechartController',
+angular.module('copayApp.controllers').controller('pricechartController', function($scope, $q, $http, $timeout, $ionicModal, $log, $state, $ionicHistory, lodash, pricechartService, externalLinkService, popupService) {
-  function($scope, $timeout, $ionicModal, $log, $state, $ionicHistory, lodash, pricechartService, externalLinkService, popupService) {
 
     $scope.openExternalLink = function(url) {
       externalLinkService.open(url);
     };
 
-    var pricechart = function() {
+    var bchPriceUrl = 'https://index.bitcoin.com/api/v0/cash/history?unix=1&pretty=0';
-        var rawData = [];
+    var btcPriceUrl = 'https://index.bitcoin.com/api/v0/history?unix=1&pretty=0';
-
-	var request = new XMLHttpRequest();
-	request.open('GET', 'https://index.bitcoin.com/api/v0/history?unix=1&pretty=0', true);
-
-	var priceHigh = 0;
-	var priceLow = 100000000;
-	var priceLatest = 0;
-
-	request.onload = function () {
-	    if (request.status >= 200 && request.status < 400) {
-		// Success!
-
-		var data = {
-		    series: [
-		        {
-		            name: 'series-1',
-		            data: []
-		        }
-		    ]
-		};
-		rawData = JSON.parse("" + request.responseText + "");
-		for (var i = rawData.length - 1; i > 0; i--) {
-		    var tuple = rawData[i];
-		    data.series[0].data.push({x: new Date(tuple[0]*1000), y: tuple[1]});
-
-		    if (priceHigh < tuple[1])
-		    {
-		        priceHigh = tuple[1];
-		    }
-		    if (priceLow > tuple[1])
-		    {
-		        priceLow = tuple[1]
-		    }
-		    priceLatest = tuple[1];
-		}
-
-		document.getElementById("latest-price").innerHTML = (priceLatest / 100).toFixed(2);
-		document.getElementById("low-price").innerHTML = (priceLow / 100).toFixed(2);
-		document.getElementById("high-price").innerHTML = (priceHigh / 100).toFixed(2);
 
+    function getChartOptions() {
       var chartContainer = document.querySelector('.chart-container');
-
       var chartWidth = window.getComputedStyle(chartContainer).width;
 
       var options = {
@@ -75,7 +35,7 @@ angular.module('copayApp.controllers').controller('pricechartController',
           divisor: 5,
           // Lets offset the chart a bit from the labels
           offset: 70,
-		        low: 50000,
+          low: 0,
           // The label interpolation function enables you to modify the values
           // used for the labels on each axis.
           labelInterpolationFnc: function (value) {
@@ -85,26 +45,45 @@ angular.module('copayApp.controllers').controller('pricechartController',
         showArea: true
       };
 
-
+      return options;
-	// Create a new line chart object where as first parameter we pass in a selector
-	// that is resolving to our chart container element. The Second parameter
-	// is the actual data object.
-		new Chartist.Line('.ct-chart', data, options);
     }
-	    else
+
+    function getChartData(url) {
+      return $q(function(resolve, reject) {
+        $http.get(url).then(function(priceData) {
+          var priceSeries = priceData.data;
+          var priceLatest = (priceSeries[0][1] / 100).toFixed(2);
+
+          var chartData = {
+            series: [
               {
-		// We reached our target server, but it returned an error
+                name: 'series-1',
+                data: []
               }
+            ]
           };
 
-	request.onerror = function () {
+          lodash.each(priceSeries, function(priceTimeTuple) {
-	    // There was a connection error of some sort
+            var t = priceTimeTuple[0];
-	};
+            var p = priceTimeTuple[1];
+            chartData.series[0].data.push({x: new Date(t*1000), y: p});
+          });
 
-	request.send();
+          resolve({priceLatest: priceLatest, chartData: chartData});
-    };
+        });
-
+      });
-    $scope.$on("$ionicView.beforeEnter", function(event, data) {
+    }
-      pricechart();
+
+    $scope.$on('$ionicView.beforeEnter', function(event, data) {
+      var options = getChartOptions();
+      getChartData(bchPriceUrl).then(function(data) {
+        $scope.bchPriceLatest = data.priceLatest;
+        new Chartist.Line('#bch-chart', data.chartData, options);
+      })
+
+      getChartData(btcPriceUrl).then(function(data) {
+        $scope.btcPriceLatest = data.priceLatest;
+        new Chartist.Line('#btc-chart', data.chartData, options);
+      });
     });
 });

www/views/pricechart.html

@@ -7,11 +7,20 @@
   <ion-content>
         <div class="chart-container">
             <div class="chart">
-            <div class="ct-chart"></div>
+              <div class="ct-chart" id="bch-chart"></div>
-
+                <div class="latest-price">
-                <div class="latest-price"><span class="light-yellow" style="font-size: 16px;">Latest price:</span><br/>$<span id="latest-price">2500</span></div>
+                  <span class="light-yellow" style="font-size: 16px;">Latest BCH price:</span>
-                <div class="high-price"><span class="light-yellow">High:</span><br/>$<span id="high-price">2500</span></div>
+                  <br/>
-                <div class="low-price"><span  class="light-yellow">Low:</span><br/>$<span id="low-price">2500</span></div>
+                  <span id="latest-price">{{bchPriceLatest}}</span>
+                </div>
+            </div>
+            <div class="chart">
+              <div class="ct-chart" id="btc-chart"></div>
+                <div class="latest-price">
+                  <span class="light-yellow" style="font-size: 16px;">Latest BTC price:</span>
+                  <br/>
+                  <span id="latest-price">{{btcPriceLatest}}</span>
+                </div>
             </div>
         </div>
   </ion-content>