From c737e14d178ccea70e553e3ac98a121e4fd48868 Mon Sep 17 00:00:00 2001 From: magmahindenburg Date: Wed, 5 Jul 2017 11:33:25 +0900 Subject: [PATCH] Added price chart --- app-template/bitcoincom/appConfig.json | 3 +- app-template/bitcoincom/css/bitcoin.com.css | 57 ++ src/js/controllers/pricechart.js | 119 ++++ src/js/controllers/tab-home.js | 2 +- src/js/routes.js | 11 + src/js/services/pricechartService.js | 26 + www/css/bitcoin.com.css | 56 ++ www/css/chartist.css | 615 ++++++++++++++++++++ www/index.html | 3 + www/views/pricechart.html | 2 +- 10 files changed, 891 insertions(+), 3 deletions(-) create mode 100644 src/js/controllers/pricechart.js create mode 100644 src/js/services/pricechartService.js create mode 100644 www/css/chartist.css diff --git a/app-template/bitcoincom/appConfig.json b/app-template/bitcoincom/appConfig.json index 09a579fd6..bd461bd31 100644 --- a/app-template/bitcoincom/appConfig.json +++ b/app-template/bitcoincom/appConfig.json @@ -29,6 +29,7 @@ "coinbase": false, "glidera": false, "amazon": false, - "bitcoincom": true + "bitcoincom": true, + "pricechart": true } } diff --git a/app-template/bitcoincom/css/bitcoin.com.css b/app-template/bitcoincom/css/bitcoin.com.css index c973d978b..75c2f771e 100644 --- a/app-template/bitcoincom/css/bitcoin.com.css +++ b/app-template/bitcoincom/css/bitcoin.com.css @@ -133,3 +133,60 @@ div.onboarding-topic { .big-icon-svg > .bg.green { background: #fab915 !important; } + +.chart-container { + font-family: 'Varela Round', sans-serif; + width:100%; + height:auto; + box-shadow: 0px 0px 24px -5px rgba(0,0,0,0.75); +} + +.ct-series-a .ct-area { + fill: #FDE9BE; +} +.ct-area { + opacity:.6 !important; +} + +.ct-series-a .ct-line, +.ct-series-a .ct-point { + stroke: #F9B016; + stroke-width: 2px; +} +.ct-labels { + border: red thin solid; +} +.chart-header { + display: flex; + box-sizing: border-box; + width:100%; + height:10%; + color: white; + +} +.latest-price { + box-sizing: border-box; + padding: .6em .2em 0 .4em; + font-size: 1.6em; + background-color: #F9B016; + width:40%; +} +.high-price { + box-sizing: border-box; + padding:.7em 1em; + font-size: 1em; + background-color: #EFA406; + width:30%; + height:inherit; +} +.low-price { + box-sizing: border-box; + padding:.7em 0em; + font-size: 1em; + background-color: #EFA406; + width:30%; + height:inherit; +} +.light-yellow { + color:#FFD579; +} diff --git a/src/js/controllers/pricechart.js b/src/js/controllers/pricechart.js new file mode 100644 index 000000000..8db3ca757 --- /dev/null +++ b/src/js/controllers/pricechart.js @@ -0,0 +1,119 @@ +'use strict'; + +angular.module('copayApp.controllers').controller('pricechartController', + function($scope, $timeout, $ionicModal, $log, $state, $ionicHistory, lodash, pricechartService, externalLinkService, popupService) { + + $scope.openExternalLink = function(url) { + externalLinkService.open(url); + }; + + var pricechart = function() { + var rawData = []; + + 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! + console.log(request.responseText); + + var data = { + series: [ + { + name: 'series-1', + data: [] + } + ] + }; + console.log(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]), 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); + + var chartContainer = document.querySelector('.chart-container'); + var chartHeader = document.querySelector('.chart-header'); + console.log("Height: " + window.getComputedStyle(chartContainer).height); + console.log("Height2: " + window.getComputedStyle(chartHeader).height); + console.log("Width: " + window.getComputedStyle(chartContainer).width); + + var chartHeight = window.getComputedStyle(chartContainer).height - window.getComputedStyle(chartHeader).height; + var chartWidth = window.getComputedStyle(chartContainer).width; + + console.log(chartHeight); + + var options = { + width: chartWidth, + height: 570, + // 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(); + }); + }); diff --git a/src/js/controllers/tab-home.js b/src/js/controllers/tab-home.js index 76d293fdd..51442a1d2 100644 --- a/src/js/controllers/tab-home.js +++ b/src/js/controllers/tab-home.js @@ -1,7 +1,7 @@ 'use strict'; angular.module('copayApp.controllers').controller('tabHomeController', - function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService, timeService, bitcoincomService) { + function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, $window, gettextCatalog, lodash, popupService, ongoingProcess, externalLinkService, latestReleaseService, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, appConfigService, startupService, addressbookService, feedbackService, bwcError, nextStepsService, buyAndSellService, homeIntegrationsService, bitpayCardService, pushNotificationsService, timeService, bitcoincomService, pricechartService) { var wallet; var listeners = []; var notifications = []; diff --git a/src/js/routes.js b/src/js/routes.js index caf6caf23..69ef54ea6 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -1037,6 +1037,17 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr } }) + /* Price Chart */ + .state('tabs.pricechart', { + url: '/pricechart', + views: { + 'tab-home@tabs': { + controller: 'pricechartController', + templateUrl: 'views/pricechart.html' + } + } + }) + /* * * Amazon.com Gift Card diff --git a/src/js/services/pricechartService.js b/src/js/services/pricechartService.js new file mode 100644 index 000000000..d29704565 --- /dev/null +++ b/src/js/services/pricechartService.js @@ -0,0 +1,26 @@ +'use strict'; +angular.module('copayApp.services').factory('pricechartService', function($http, $log, lodash, moment, storageService, configService, platformInfo, nextStepsService, homeIntegrationsService) { + var root = {}; + var credentials = {}; + + var homeItem = { + name: 'pricechart', + title: 'Bitcoin Price Chart', + icon: 'icon-bitcoincom', + sref: 'tabs.pricechart', + }; + + var nextStepItem = { + name: 'pricechart', + title: 'Bitcoin Price Chart', + icon: 'icon-bitcoincom', + sref: 'tabs.pricechart', + }; + + var register = function() { + nextStepsService.register(nextStepItem); + }; + + register(); + return root; +}); diff --git a/www/css/bitcoin.com.css b/www/css/bitcoin.com.css index 3c6ccaf02..5972e92da 100644 --- a/www/css/bitcoin.com.css +++ b/www/css/bitcoin.com.css @@ -170,3 +170,59 @@ button.button.button-secondary { div.slide-success__background.fill-screen { background-color: #fab915 !important; } + +.chart-container { + font-family: 'Varela Round', sans-serif; + width:100%; + height:100%; +} + +.ct-series-a .ct-area { + fill: #FDE9BE; +} +.ct-area { + opacity:.6 !important; +} + +.ct-series-a .ct-line, +.ct-series-a .ct-point { + stroke: #F9B016; + stroke-width: 2px; +} +.ct-labels { + border: red thin solid; +} +.chart-header { + display: flex; + box-sizing: border-box; + width:100%; + height:10%; + color: white; + +} +.latest-price { + box-sizing: border-box; + padding: .6em .2em 0 .4em; + font-size: 1.6em; + background-color: #F9B016; + width:40%; +} +.high-price { + box-sizing: border-box; + padding:.7em 1em; + font-size: 1em; + background-color: #EFA406; + width:30%; + height:64px; +} +.low-price { + box-sizing: border-box; + padding:.7em 0em; + font-size: 1em; + background-color: #EFA406; + width:30%; + height:64px; +} +.light-yellow { + color:#FFD579; +} diff --git a/www/css/chartist.css b/www/css/chartist.css new file mode 100644 index 000000000..1299771c6 --- /dev/null +++ b/www/css/chartist.css @@ -0,0 +1,615 @@ +.ct-label { + fill: rgba(0, 0, 0, 0.4); + color: rgba(0, 0, 0, 0.4); + font-size: 0.75rem; + line-height: 1; } + +.ct-chart-line .ct-label, +.ct-chart-bar .ct-label { + display: block; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; } + +.ct-chart-pie .ct-label, +.ct-chart-donut .ct-label { + dominant-baseline: central; } + +.ct-label.ct-horizontal.ct-start { + -webkit-box-align: flex-end; + -webkit-align-items: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + -webkit-box-pack: flex-start; + -webkit-justify-content: flex-start; + -ms-flex-pack: flex-start; + justify-content: flex-start; + text-align: left; + text-anchor: start; } + +.ct-label.ct-horizontal.ct-end { + -webkit-box-align: flex-start; + -webkit-align-items: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: flex-start; + -webkit-justify-content: flex-start; + -ms-flex-pack: flex-start; + justify-content: flex-start; + text-align: left; + text-anchor: start; } + +.ct-label.ct-vertical.ct-start { + -webkit-box-align: flex-end; + -webkit-align-items: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + -webkit-box-pack: flex-end; + -webkit-justify-content: flex-end; + -ms-flex-pack: flex-end; + justify-content: flex-end; + text-align: right; + text-anchor: end; } + +.ct-label.ct-vertical.ct-end { + -webkit-box-align: flex-end; + -webkit-align-items: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + -webkit-box-pack: flex-start; + -webkit-justify-content: flex-start; + -ms-flex-pack: flex-start; + justify-content: flex-start; + text-align: left; + text-anchor: start; } + +.ct-chart-bar .ct-label.ct-horizontal.ct-start { + -webkit-box-align: flex-end; + -webkit-align-items: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + text-anchor: start; } + +.ct-chart-bar .ct-label.ct-horizontal.ct-end { + -webkit-box-align: flex-start; + -webkit-align-items: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + text-anchor: start; } + +.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start { + -webkit-box-align: flex-end; + -webkit-align-items: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + -webkit-box-pack: flex-start; + -webkit-justify-content: flex-start; + -ms-flex-pack: flex-start; + justify-content: flex-start; + text-align: left; + text-anchor: start; } + +.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end { + -webkit-box-align: flex-start; + -webkit-align-items: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: flex-start; + -webkit-justify-content: flex-start; + -ms-flex-pack: flex-start; + justify-content: flex-start; + text-align: left; + text-anchor: start; } + +.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: flex-end; + -webkit-justify-content: flex-end; + -ms-flex-pack: flex-end; + justify-content: flex-end; + text-align: right; + text-anchor: end; } + +.ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: flex-start; + -webkit-justify-content: flex-start; + -ms-flex-pack: flex-start; + justify-content: flex-start; + text-align: left; + text-anchor: end; } + +.ct-grid { + stroke: rgba(0, 0, 0, 0.2); + stroke-width: 1px; + stroke-dasharray: 2px; } + +.ct-grid-background { + fill: none; } + +.ct-point { + stroke-width: 10px; + stroke-linecap: round; } + +.ct-line { + fill: none; + stroke-width: 4px; } + +.ct-area { + stroke: none; + fill-opacity: 0.6; } + +.ct-bar { + fill: none; + stroke-width: 10px; } + +.ct-slice-donut { + fill: none; + stroke-width: 60px; } + +.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut { + stroke: #d70206; } + +.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area { + fill: #d70206; } + +.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut { + stroke: #f05b4f; } + +.ct-series-b .ct-slice-pie, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-area { + fill: #f05b4f; } + +.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut { + stroke: #f4c63d; } + +.ct-series-c .ct-slice-pie, .ct-series-c .ct-slice-donut-solid, .ct-series-c .ct-area { + fill: #f4c63d; } + +.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut { + stroke: #d17905; } + +.ct-series-d .ct-slice-pie, .ct-series-d .ct-slice-donut-solid, .ct-series-d .ct-area { + fill: #d17905; } + +.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut { + stroke: #453d3f; } + +.ct-series-e .ct-slice-pie, .ct-series-e .ct-slice-donut-solid, .ct-series-e .ct-area { + fill: #453d3f; } + +.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut { + stroke: #59922b; } + +.ct-series-f .ct-slice-pie, .ct-series-f .ct-slice-donut-solid, .ct-series-f .ct-area { + fill: #59922b; } + +.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut { + stroke: #0544d3; } + +.ct-series-g .ct-slice-pie, .ct-series-g .ct-slice-donut-solid, .ct-series-g .ct-area { + fill: #0544d3; } + +.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut { + stroke: #6b0392; } + +.ct-series-h .ct-slice-pie, .ct-series-h .ct-slice-donut-solid, .ct-series-h .ct-area { + fill: #6b0392; } + +.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut { + stroke: #f05b4f; } + +.ct-series-i .ct-slice-pie, .ct-series-i .ct-slice-donut-solid, .ct-series-i .ct-area { + fill: #f05b4f; } + +.ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut { + stroke: #dda458; } + +.ct-series-j .ct-slice-pie, .ct-series-j .ct-slice-donut-solid, .ct-series-j .ct-area { + fill: #dda458; } + +.ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut { + stroke: #eacf7d; } + +.ct-series-k .ct-slice-pie, .ct-series-k .ct-slice-donut-solid, .ct-series-k .ct-area { + fill: #eacf7d; } + +.ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut { + stroke: #86797d; } + +.ct-series-l .ct-slice-pie, .ct-series-l .ct-slice-donut-solid, .ct-series-l .ct-area { + fill: #86797d; } + +.ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut { + stroke: #b2c326; } + +.ct-series-m .ct-slice-pie, .ct-series-m .ct-slice-donut-solid, .ct-series-m .ct-area { + fill: #b2c326; } + +.ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut { + stroke: #6188e2; } + +.ct-series-n .ct-slice-pie, .ct-series-n .ct-slice-donut-solid, .ct-series-n .ct-area { + fill: #6188e2; } + +.ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut { + stroke: #a748ca; } + +.ct-series-o .ct-slice-pie, .ct-series-o .ct-slice-donut-solid, .ct-series-o .ct-area { + fill: #a748ca; } + +.ct-square { + display: block; + position: relative; + width: 100%; } + .ct-square:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 100%; } + .ct-square:after { + content: ""; + display: table; + clear: both; } + .ct-square > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-minor-second { + display: block; + position: relative; + width: 100%; } + .ct-minor-second:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 93.75%; } + .ct-minor-second:after { + content: ""; + display: table; + clear: both; } + .ct-minor-second > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-major-second { + display: block; + position: relative; + width: 100%; } + .ct-major-second:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 88.8888888889%; } + .ct-major-second:after { + content: ""; + display: table; + clear: both; } + .ct-major-second > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-minor-third { + display: block; + position: relative; + width: 100%; } + .ct-minor-third:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 83.3333333333%; } + .ct-minor-third:after { + content: ""; + display: table; + clear: both; } + .ct-minor-third > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-major-third { + display: block; + position: relative; + width: 100%; } + .ct-major-third:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 80%; } + .ct-major-third:after { + content: ""; + display: table; + clear: both; } + .ct-major-third > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-perfect-fourth { + display: block; + position: relative; + width: 100%; } + .ct-perfect-fourth:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 75%; } + .ct-perfect-fourth:after { + content: ""; + display: table; + clear: both; } + .ct-perfect-fourth > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-perfect-fifth { + display: block; + position: relative; + width: 100%; } + .ct-perfect-fifth:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 66.6666666667%; } + .ct-perfect-fifth:after { + content: ""; + display: table; + clear: both; } + .ct-perfect-fifth > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-minor-sixth { + display: block; + position: relative; + width: 100%; } + .ct-minor-sixth:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 62.5%; } + .ct-minor-sixth:after { + content: ""; + display: table; + clear: both; } + .ct-minor-sixth > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-golden-section { + display: block; + position: relative; + width: 100%; } + .ct-golden-section:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 61.804697157%; } + .ct-golden-section:after { + content: ""; + display: table; + clear: both; } + .ct-golden-section > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-major-sixth { + display: block; + position: relative; + width: 100%; } + .ct-major-sixth:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 60%; } + .ct-major-sixth:after { + content: ""; + display: table; + clear: both; } + .ct-major-sixth > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-minor-seventh { + display: block; + position: relative; + width: 100%; } + .ct-minor-seventh:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 56.25%; } + .ct-minor-seventh:after { + content: ""; + display: table; + clear: both; } + .ct-minor-seventh > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-major-seventh { + display: block; + position: relative; + width: 100%; } + .ct-major-seventh:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 53.3333333333%; } + .ct-major-seventh:after { + content: ""; + display: table; + clear: both; } + .ct-major-seventh > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-octave { + display: block; + position: relative; + width: 100%; } + .ct-octave:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 50%; } + .ct-octave:after { + content: ""; + display: table; + clear: both; } + .ct-octave > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-major-tenth { + display: block; + position: relative; + width: 100%; } + .ct-major-tenth:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 40%; } + .ct-major-tenth:after { + content: ""; + display: table; + clear: both; } + .ct-major-tenth > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-major-eleventh { + display: block; + position: relative; + width: 100%; } + .ct-major-eleventh:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 37.5%; } + .ct-major-eleventh:after { + content: ""; + display: table; + clear: both; } + .ct-major-eleventh > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-major-twelfth { + display: block; + position: relative; + width: 100%; } + .ct-major-twelfth:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 33.3333333333%; } + .ct-major-twelfth:after { + content: ""; + display: table; + clear: both; } + .ct-major-twelfth > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +.ct-double-octave { + display: block; + position: relative; + width: 100%; } + .ct-double-octave:before { + display: block; + float: left; + content: ""; + width: 0; + height: 0; + padding-bottom: 25%; } + .ct-double-octave:after { + content: ""; + display: table; + clear: both; } + .ct-double-octave > svg { + display: block; + position: absolute; + top: 0; + left: 0; } + +/*# sourceMappingURL=chartist.css.map */ \ No newline at end of file diff --git a/www/index.html b/www/index.html index a49733083..7ffd0805d 100644 --- a/www/index.html +++ b/www/index.html @@ -7,6 +7,7 @@ + Bitcoin.com - Bitcoin.com Wallet @@ -28,6 +29,8 @@ + + diff --git a/www/views/pricechart.html b/www/views/pricechart.html index 8970c5b1b..16ca36f4c 100644 --- a/www/views/pricechart.html +++ b/www/views/pricechart.html @@ -12,7 +12,7 @@
Low:
$2500
-
+