added price chart for BCH
This commit is contained in:
Kadir Sekha
parent
83b775dc7a
commit
48fc8d216f
3 changed files with 111 additions and 107 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,11 +7,20 @@
|
|||
<ion-content>
|
||||
<div class="chart-container">
|
||||
<div class="chart">
|
||||
<div class="ct-chart"></div>
|
||||
|
||||
<div class="latest-price"><span class="light-yellow" style="font-size: 16px;">Latest price:</span><br/>$<span id="latest-price">2500</span></div>
|
||||
<div class="high-price"><span class="light-yellow">High:</span><br/>$<span id="high-price">2500</span></div>
|
||||
<div class="low-price"><span class="light-yellow">Low:</span><br/>$<span id="low-price">2500</span></div>
|
||||
<div class="ct-chart" id="bch-chart"></div>
|
||||
<div class="latest-price">
|
||||
<span class="light-yellow" style="font-size: 16px;">Latest BCH price:</span>
|
||||
<br/>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue