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,110 +1,89 @@
 '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();
+    function getChartOptions() {
-	request.open('GET', 'https://index.bitcoin.com/api/v0/history?unix=1&pretty=0', true);
+      var chartContainer = document.querySelector('.chart-container');
+      var chartWidth = window.getComputedStyle(chartContainer).width;
 
-	var priceHigh = 0;
+      var options = {
-	var priceLow = 100000000;
+        width: chartWidth,
-	var priceLatest = 0;
+        height: 250,
+        // Don't draw the line chart points
+        showPoint: false,
+        // Disable line smoothing
+        lineSmooth: false,
+        fillOpacity: 1,
+        // X-Axis specific configuration
+        axisX: {
+          type: Chartist.FixedScaleAxis,
+          divisor: 5,
+          labelInterpolationFnc: function (value) {
+            return moment(value).format('MMM D');
+          }
+        },
+        // Y-Axis specific configuration
+        axisY: {
+          type: Chartist.FixedScaleAxis,
+          divisor: 5,
+          // Lets offset the chart a bit from the labels
+          offset: 70,
+          low: 0,
+          // The label interpolation function enables you to modify the values
+          // used for the labels on each axis.
+          labelInterpolationFnc: function (value) {
+              return '$' + (value / 100).toFixed(2);
+          }
+        },
+        showArea: true
+      };
 
-	request.onload = function () {
+      return options;
-	    if (request.status >= 200 && request.status < 400) {
+    }
-		// Success!
 
-		var data = {
+    function getChartData(url) {
-		    series: [
+      return $q(function(resolve, reject) {
-		        {
+        $http.get(url).then(function(priceData) {
-		            name: 'series-1',
+          var priceSeries = priceData.data;
-		            data: []
+          var priceLatest = (priceSeries[0][1] / 100).toFixed(2);
-		        }
-		    ]
-		};
-		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])
+          var chartData = {
-		    {
+            series: [
-		        priceHigh = tuple[1];
+              {
-		    }
+                name: 'series-1',
-		    if (priceLow > tuple[1])
+                data: []
-		    {
+              }
-		        priceLow = tuple[1]
+            ]
-		    }
+          };
-		    priceLatest = tuple[1];
-		}
 
-		document.getElementById("latest-price").innerHTML = (priceLatest / 100).toFixed(2);
+          lodash.each(priceSeries, function(priceTimeTuple) {
-		document.getElementById("low-price").innerHTML = (priceLow / 100).toFixed(2);
+            var t = priceTimeTuple[0];
-		document.getElementById("high-price").innerHTML = (priceHigh / 100).toFixed(2);
+            var p = priceTimeTuple[1];
+            chartData.series[0].data.push({x: new Date(t*1000), y: p});
+          });
 
-		var chartContainer = document.querySelector('.chart-container');
+          resolve({priceLatest: priceLatest, chartData: chartData});
+        });
+      });
+    }
 
-                var chartWidth = window.getComputedStyle(chartContainer).width;
+    $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);
+      })
 
-		var options = {
+      getChartData(btcPriceUrl).then(function(data) {
-                    width: chartWidth,
+        $scope.btcPriceLatest = data.priceLatest;
-                    height: 250,
+        new Chartist.Line('#btc-chart', data.chartData, options);
-		    // Don't draw the line chart points
+      });
-		    showPoint: false,
-		    // Disable line smoothing
-		    lineSmooth: false,
-		    fillOpacity: 1,
-		    // X-Axis specific configuration
-		    axisX: {
-		        type: Chartist.FixedScaleAxis,
-		        divisor: 5,
-		        labelInterpolationFnc: function (value) {
-		            return moment(value).format('MMM D');
-		        }
-		    },
-		    // Y-Axis specific configuration
-		    axisY: {
-		        type: Chartist.FixedScaleAxis,
-		        divisor: 5,
-		        // Lets offset the chart a bit from the labels
-		        offset: 70,
-		        low: 50000,
-		        // The label interpolation function enables you to modify the values
-		        // used for the labels on each axis.
-		        labelInterpolationFnc: function (value) {
-		            return '$' + (value / 100).toFixed(2);
-		        }
-		    },
-		    showArea: true
-		};
-
-
-	// 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
-	    {
-		// We reached our target server, but it returned an error
-	    }
-	};
-
-	request.onerror = function () {
-	    // There was a connection error of some sort
-	};
-
-	request.send();
-    };
-
-    $scope.$on("$ionicView.beforeEnter", function(event, data) {
-      pricechart();
     });
-  });
+});

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>