From 48fc8d216fc96b3a40ec8e74abe9f531593a9f11 Mon Sep 17 00:00:00 2001 From: Kadir Sekha Date: Wed, 29 Nov 2017 16:23:27 +0900 Subject: [PATCH] added price chart for BCH --- app-template/bitcoincom/css/bitcoin.com.css | 16 ++ src/js/controllers/pricechart.js | 165 +++++++++----------- www/views/pricechart.html | 19 ++- 3 files changed, 102 insertions(+), 98 deletions(-) diff --git a/app-template/bitcoincom/css/bitcoin.com.css b/app-template/bitcoincom/css/bitcoin.com.css index 75c2f771e..44ac6ed99 100644 --- a/app-template/bitcoincom/css/bitcoin.com.css +++ b/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; +} diff --git a/src/js/controllers/pricechart.js b/src/js/controllers/pricechart.js index aa4b4057c..34f9348d0 100644 --- a/src/js/controllers/pricechart.js +++ b/src/js/controllers/pricechart.js @@ -1,110 +1,89 @@ 'use strict'; -angular.module('copayApp.controllers').controller('pricechartController', - function($scope, $timeout, $ionicModal, $log, $state, $ionicHistory, lodash, pricechartService, externalLinkService, popupService) { +angular.module('copayApp.controllers').controller('pricechartController', function($scope, $q, $http, $timeout, $ionicModal, $log, $state, $ionicHistory, lodash, pricechartService, externalLinkService, popupService) { $scope.openExternalLink = function(url) { externalLinkService.open(url); }; - var pricechart = function() { - var rawData = []; + var bchPriceUrl = 'https://index.bitcoin.com/api/v0/cash/history?unix=1&pretty=0'; + 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); + function getChartOptions() { + var chartContainer = document.querySelector('.chart-container'); + var chartWidth = window.getComputedStyle(chartContainer).width; - var priceHigh = 0; - var priceLow = 100000000; - var priceLatest = 0; + var options = { + width: chartWidth, + 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 () { - if (request.status >= 200 && request.status < 400) { - // Success! + return options; + } - 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]}); + 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); - if (priceHigh < tuple[1]) - { - priceHigh = tuple[1]; - } - if (priceLow > tuple[1]) - { - priceLow = tuple[1] - } - priceLatest = tuple[1]; - } + var chartData = { + series: [ + { + name: 'series-1', + data: [] + } + ] + }; - 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); + lodash.each(priceSeries, function(priceTimeTuple) { + var t = priceTimeTuple[0]; + 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 = { - width: chartWidth, - 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: 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(); + getChartData(btcPriceUrl).then(function(data) { + $scope.btcPriceLatest = data.priceLatest; + new Chartist.Line('#btc-chart', data.chartData, options); + }); }); - }); +}); diff --git a/www/views/pricechart.html b/www/views/pricechart.html index 46b8daa60..520814368 100644 --- a/www/views/pricechart.html +++ b/www/views/pricechart.html @@ -7,11 +7,20 @@
-
- -
Latest price:
$2500
-
High:
$2500
-
Low:
$2500
+
+
+ Latest BCH price: +
+ {{bchPriceLatest}} +
+
+
+
+
+ Latest BTC price: +
+ {{btcPriceLatest}} +