Merge pull request #17 from superKalo/feature/change-percent

Feature / Change Percentage Label
superKalo · Oct 17, 2017 · 82c320c · 82c320c
2 parents 2479e49 + 7128279
commit 82c320c
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -16,9 +16,9 @@
         <h1 id="clock" class="time mb+ text-center mt">-:-</h1>
 
         <h2 class="chart-period mb text-center">
-            Bitcoin price is <span id="price-now">...</span>.
+            Bitcoin price is <span id="price-now">...</span><span id="change"></span>.
         </h2>
-        <!-- (<span class="positive">+5.42%</span> since yesterday). -->
+
         <p id="periods" class="text-center mb">
             <button data-period="ONE_HOUR" type="button" class="btn js-period">1H</button>
             <button data-period="ONE_DAY" type="button" class="btn js-period">1D</button>

diff --git a/js/bitcoin.js b/js/bitcoin.js
@@ -82,10 +82,15 @@ window.App.Bitcoin = {
             storage: 'BROWSER_STORAGE',
             name: 'bitcoin-NOW',
             outOfDateAfter: 3 * 60 * 1000,
-            dataModel: [{
-                value: 'value'
-            }],
-            mapData: data => ({ price: data[0].value }),
+            mapData: data => {
+                const { value, changePercent } = data[0];
+                const { dayAgo, weekAgo, monthAgo } = changePercent;
+
+                return {
+                    price: value,
+                    changePercent: { dayAgo, weekAgo, monthAgo }
+                };
+            },
             request: () => App.API.getBitcoinRatesNow()
         });
     },
@@ -95,6 +100,46 @@ window.App.Bitcoin = {
         this.$priceNow.textContent = App.Utils.formatPrice(Math.round(_price));
     },
 
+    $change: document.querySelector('#change'),
+    setPriceChange(_change) {
+        App.Settings.get().then(settings => {
+            let changePercent;
+            let periodLabel;
+            switch(settings.period) {
+                case this.PERIODS.ONE_HOUR:
+                case this.PERIODS.ONE_DAY:
+                default: {
+                    changePercent = _change.dayAgo;
+                    periodLabel = 'since yesterday';
+                    break;
+                }
+                case this.PERIODS.ONE_WEEK: {
+                    changePercent = _change.weekAgo;
+                    periodLabel = 'since last week';
+                    break;
+                }
+                case this.PERIODS.ONE_MONTH: {
+                    changePercent = _change.monthAgo;
+                    periodLabel = 'since last month';
+                    break;
+                }
+                case this.PERIODS.ONE_YEAR:
+                case this.PERIODS.ALL: {
+                    this.$change.innerHTML = '';
+                    return;
+                }
+            }
+
+            const isChangePisitive = changePercent >= 0;
+            const isChangeZero = changePercent === 0;
+            const applyVisualClass =
+                isChangeZero ? '' : (isChangePisitive ? 'positive' : 'negative');
+            this.$change.innerHTML =
+                ` (<span class="${applyVisualClass}">${isChangePisitive && ! isChangeZero? '+' : ''}${changePercent}%</span>
+                ${periodLabel})`;
+        });
+    },
+
     $lastUpdated: document.querySelector('#last-updated'),
     setLastUpdated() {
         this.repositories['NOW'].getDataUpToDateStatus().then(info => {
@@ -105,10 +150,27 @@ window.App.Bitcoin = {
     displayPriceNow() {
         this.repositories['NOW'].getData().then( _data => {
             this.setPriceNow(_data.price);
+            this.setPriceChange(_data.changePercent);
             this.setLastUpdated();
         });
 
+        // Track timeframe changes
         setInterval(this.setLastUpdated.bind(this), 30 * 1000);
+
+        // Track period changes
+        browser.storage.onChanged.addListener((changes, namespace) => {
+            Object.keys(changes).forEach( storageKey => {
+                if (storageKey !== 'settings') {
+                    return;
+                }
+
+                this.repositories['NOW'].getDataUpToDateStatus()
+                    .then( status =>
+                        status.localData &&
+                            this.setPriceChange(status.localData.changePercent)
+                    );
+            });
+        });
     },
 
     init() {