Merge pull request #158 from shekenahglory/develop

update external markets
ripple · Nov 23, 2016 · 6aa9d9f · 6aa9d9f
2 parents 9a5bc1a + 53d3c79
commit 6aa9d9f
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 100 deletions.
diff --git a/src/app/external-markets/external-markets.js b/src/app/external-markets/external-markets.js
@@ -1,10 +1,12 @@
-angular.module( 'ripplecharts.external-markets', [
+'use strict'
+
+angular.module('ripplecharts.external-markets', [
   'ui.state',
   'ui.bootstrap'
 ])
 
-.config(function config( $stateProvider ) {
-  $stateProvider.state( 'external-markets', {
+.config(function($stateProvider) {
+  $stateProvider.state('external-markets', {
     url: '/external-markets',
     views: {
       main: {
@@ -20,15 +22,13 @@ angular.module( 'ripplecharts.external-markets', [
         return gateways.promise
       }
     }
-  });
+  })
 })
-
-.controller( 'ExternalMarketsCtrl', function ExternalMarketsCtrl($scope, gateways) {
-
-  var api = new ApiHandler(API);
+.controller('ExternalMarketsCtrl', function($scope, gateways) {
+  var api = new ApiHandler(API)
   var exchangeRates = {}
-  var refreshInterval;
-  var markets = {};
+  var refreshInterval
+  var markets = {}
 
   var scale = d3.scale.log()
     .range([.5, 1]).clamp(true)
@@ -41,60 +41,6 @@ angular.module( 'ripplecharts.external-markets', [
     XRP: ''
   }
 
-  $scope.marketNames = {
-    rcl: 'Ripple Network (RCL)',
-    'poloniex.com': 'Poloniex',
-    'kraken.com': 'Kraken',
-    'btc38.com': 'BTC38',
-    'jubi.com': 'Jubi'
-  }
-
-  $scope.currencies = Object.keys(valueCurrencies)
-  $scope.markets = [];
-
-  $scope.periods = [
-    {name: '1 hour', period: 'hour'},
-    {name: '24 hours', period: 'day'},
-    {name: '3 days', period: '3day'},
-    {name: '7 days', period: '7day'},
-    {name: '30 days', period: '30day'}
-  ]
-
-  $scope.selectedPeriod = 'day'
-  $scope.selectedCurrency = 'USD'
-
-  $scope.changePeriod = function(period) {
-    $scope.selectedPeriod = period;
-    getVolumes();
-  }
-
-  $scope.$watch('selectedCurrency', function(d) {
-    var name
-
-    switch (d) {
-      case 'USD':
-        $scope.sign = '$'
-        break
-      case 'JPY':
-        $scope.sign = '¥'
-        break
-      case 'CNY':
-        $scope.sign = '¥'
-        break
-      case 'EUR':
-        $scope.sign = '€'
-        break
-      case 'XRP':
-        $scope.sign = ''
-        break
-      default:
-        $scope.sign = ''
-    }
-
-
-    setValueRate(d, true, updateTotals)
-  })
-
   /**
    * getExchangeRate
    */
@@ -125,7 +71,7 @@ angular.module( 'ripplecharts.external-markets', [
    * setValueRate
    */
 
-  function setValueRate(currency, useCached, callback) {
+  function setValueRate(currency, callback) {
     var issuer = valueCurrencies[currency]
 
     function apply() {
@@ -145,10 +91,10 @@ angular.module( 'ripplecharts.external-markets', [
       return
     }
 
-    $scope.total = undefined;
+    $scope.total = undefined
     $scope.markets.forEach(function(m) {
       m.total_converted = undefined
-    });
+    })
 
     getExchangeRate({
       currency: currency,
@@ -171,43 +117,47 @@ angular.module( 'ripplecharts.external-markets', [
    */
 
   function updateTotals(apply) {
-    var extent
+    var key
 
-    $scope.totalXRP = 0;
+    $scope.totalXRP = 0
 
-    for (var key in markets) {
+    for (key in markets) {
       markets[key].total_converted =
         markets[key].total * $scope.valueRate
       $scope.totalXRP += markets[key].total
     }
 
-    $scope.markets = [];
+    $scope.markets = []
 
-    for (var key in markets) {
+    for (key in markets) {
       markets[key].key = key
       markets[key].pct =
         markets[key].total / $scope.totalXRP * 100
-      $scope.markets.push(markets[key]);
+      $scope.markets.push(markets[key])
     }
 
     scale.domain(d3.extent($scope.markets, function(m) {
-      return m.pct;
-    }));
+      return m.pct
+    }))
 
     $scope.markets.forEach(function(m) {
-      m.scale = scale(m.pct);
-    });
+      m.scale = scale(m.pct)
+    })
 
     $scope.markets.sort(function(a, b) {
-      return b.pct - a.pct;
-    });
+      return b.pct - a.pct
+    })
 
     $scope.total = $scope.totalXRP * $scope.valueRate
     if (apply) {
-      $scope.$apply();
+      $scope.$apply()
     }
   }
 
+  /**
+   * getVolumes
+   */
+
   function getVolumes() {
 
     api.getExchangeVolume({
@@ -216,7 +166,6 @@ angular.module( 'ripplecharts.external-markets', [
       var total = 0
       var count = 0
       var components = []
-      var xrpVolume
 
       if (err || !resp || !resp.rows || !resp.rows.length) {
         console.log(err)
@@ -230,7 +179,7 @@ angular.module( 'ripplecharts.external-markets', [
             var sub = gateways.getName(c.issuer, c.currency)
                 || c.issuer
 
-            total += component.converted_amount;
+            total += component.converted_amount
             count += component.count
             components.push({
               key: 'XRP/' + c.currency,
@@ -239,27 +188,25 @@ angular.module( 'ripplecharts.external-markets', [
               sub: sub,
               counter_currency: c.currency,
               count: component.count
-            });
+            })
           }
-        });
+        })
 
         markets.rcl = {
           total: total,
           count: count,
           components: components
         }
 
-        updateTotals(true);
+        updateTotals(true)
       }
     })
 
     // get external exchanges
     api.getExternalMarkets({
       period: $scope.selectedPeriod
     }, function(err, resp) {
-      var total = 0
       var list = {}
-      var xrpVolume
 
       if (err || !resp) {
         console.log(err)
@@ -291,20 +238,77 @@ angular.module( 'ripplecharts.external-markets', [
             amount: amount,
             counter_currency: c.counter_currency,
             count: c.count
-          });
+          })
 
         })
 
         for (var key in list) {
-          markets[key] = list[key];
+          markets[key] = list[key]
         }
 
-        updateTotals(true);
+        updateTotals(true)
       }
     })
   }
 
+
+  $scope.marketNames = {
+    rcl: 'Ripple Network (RCL)',
+    'poloniex.com': 'Poloniex',
+    'kraken.com': 'Kraken',
+    'btc38.com': 'BTC38',
+    'jubi.com': 'Jubi',
+    'bittrex.com': 'Bittrex'
+  }
+
+  $scope.currencies = Object.keys(valueCurrencies)
+  $scope.markets = []
+
+  $scope.periods = [
+    {name: '1 hour', period: 'hour'},
+    {name: '24 hours', period: 'day'},
+    {name: '3 days', period: '3day'},
+    {name: '7 days', period: '7day'},
+    {name: '30 days', period: '30day'}
+  ]
+
+  $scope.selectedPeriod = 'day'
+  $scope.selectedCurrency = 'USD'
+
+  $scope.changePeriod = function(period) {
+    $scope.selectedPeriod = period
+    getVolumes()
+  }
+
+  $scope.$on('$destroy', function() {
+    clearInterval(refreshInterval)
+  })
+
+  $scope.$watch('selectedCurrency', function(d) {
+    switch (d) {
+      case 'USD':
+        $scope.sign = '$'
+        break
+      case 'JPY':
+        $scope.sign = '¥'
+        break
+      case 'CNY':
+        $scope.sign = '¥'
+        break
+      case 'EUR':
+        $scope.sign = '€'
+        break
+      case 'XRP':
+        $scope.sign = ''
+        break
+      default:
+        $scope.sign = ''
+    }
+
+    setValueRate(d, updateTotals)
+  })
+
   getVolumes()
   refreshInterval = setInterval(getVolumes, 10 * 60 * 1000)
-});
+})
 
diff --git a/src/app/external-markets/external-markets.tpl.html b/src/app/external-markets/external-markets.tpl.html
@@ -27,7 +27,7 @@ <h4>XRP Trade Volume</h4>
   <div class="markets">
     <div ng-repeat="market in markets" class="market">
       <div class="head">
-        <h4 ng-bind="marketNames[market.key]"></h4>
+        <h4 ng-bind="marketNames[market.key] || market.key"></h4>
         <label class="left">XRP Trade Volume</label>
         <label class="right">% of Total XRP Traded</label>
         <div class="marketTotal left">

diff --git a/src/app/landing/landing.js b/src/app/landing/landing.js
@@ -273,6 +273,11 @@ angular.module('ripplecharts.landing', [
         $scope.metrics.totalTradeVolume.components.unshift(xrpVolume)
         setMetricValue('totalTradeVolume',
           $scope.metrics.totalTradeVolume.total + xrpVolume.base_volume)
+
+        // sort by volume
+        $scope.metrics.totalTradeVolume.components.sort(function(a, b) {
+          return b.base_volume - a.base_volume
+        })
       }
 
       setMetricValue('tradeVolumeRCL', total)
@@ -336,6 +341,11 @@ angular.module('ripplecharts.landing', [
         $scope.metrics.totalTradeVolume.withRCL = true
       }
 
+      // sort by volume
+      $scope.metrics.totalTradeVolume.components.sort(function(a, b) {
+        return b.base_volume - a.base_volume
+      })
+
       setMetricValue('totalTradeVolume', total)
       if ($scope.selectedMetric === $scope.metrics.totalTradeVolume) {
         $scope.showMetricDetails()

diff --git a/src/common/apiHandler.js b/src/common/apiHandler.js
@@ -352,11 +352,6 @@ function ApiHandler(baseURL) {
         callback(e)
 
       } else {
-
-        resp.data.components = resp.data.components.filter(function(c) {
-          return c.source !== 'jubi.com'
-        })
-
         callback(null, resp.data)
       }
     })

diff --git a/src/common/valueSummary.js b/src/common/valueSummary.js
@@ -49,7 +49,8 @@ function ValueSummary(options) {
     'poloniex.com': 'Poloniex',
     'kraken.com': 'Kraken',
     'btc38.com': 'BTC38',
-    'jubi.com': 'Jubi'
+    'jubi.com': 'Jubi',
+    'bittrex.com': 'Bittrex'
   }
 
   var currencyColors = {
@@ -66,8 +67,10 @@ function ValueSummary(options) {
   var blues = [
     '#2a98D0',
     '#98c8eb',
+    '#3665B0',
+    '#2A4994',
     '#1A3964',
-    '#3665B0'
+    '#3A69c4'
   ]
 
   var arc = d3.svg.arc()
@@ -94,7 +97,7 @@ function ValueSummary(options) {
       return currencyColors.XRP
 
     } else if (!currency) {
-      return blues[(rank || 0) % 4]
+      return blues[(rank || 0) % 6]
     }
 
     c = currencyColors[currency] ||