Added an optional USD market cap panel

-New settings for the USD market cap panel were added to the config options
tuaris · Dec 27, 2023 · accf9a9 · accf9a9
1 parent 8276f28
commit accf9a9
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -174,7 +174,8 @@ Table of Contents
   - **Coin Supply:** Displays the current circulating coin supply value
   - **Price:** Displays the current market price (value measured using default market pair)
   - **USD Price:** Displays the current market price (value measured in USD)
-  - **Market Cap:** Displays the current market cap value in (value measured using default market pair)
+  - **Market Cap:** Displays the current market cap value (value measured using default market pair)
+  - **USD Market Cap:** Displays the current market cap value (value measured in USD)
   - **Logo:** Display an image of your coin logo
 - Configurable network charts that can be independently displayed in the header of any page
   - **Hashrate chart:** Line graph listing of the estimated network hashes per second over the last number of blocks *\*Requires a full sync before network data will start being collected*

diff --git a/app.js b/app.js
@@ -860,6 +860,7 @@ var panelcount = (settings.shared_pages.page_header.panels.network_panel.enabled
   (settings.shared_pages.page_header.panels.price_panel.enabled == true && settings.shared_pages.page_header.panels.price_panel.display_order > 0 ? 1 : 0) +
   (settings.shared_pages.page_header.panels.usd_price_panel.enabled == true && settings.shared_pages.page_header.panels.usd_price_panel.display_order > 0 ? 1 : 0) +
   (settings.shared_pages.page_header.panels.market_cap_panel.enabled == true && settings.shared_pages.page_header.panels.market_cap_panel.display_order > 0 ? 1 : 0) +
+  (settings.shared_pages.page_header.panels.usd_market_cap_panel.enabled == true && settings.shared_pages.page_header.panels.usd_market_cap_panel.display_order > 0 ? 1 : 0) +
   (settings.shared_pages.page_header.panels.logo_panel.enabled == true && settings.shared_pages.page_header.panels.logo_panel.display_order > 0 ? 1 : 0) +
   (settings.shared_pages.page_header.panels.spacer_panel_1.enabled == true && settings.shared_pages.page_header.panels.spacer_panel_1.display_order > 0 ? 1 : 0) +
   (settings.shared_pages.page_header.panels.spacer_panel_2.enabled == true && settings.shared_pages.page_header.panels.spacer_panel_2.display_order > 0 ? 1 : 0) +
@@ -876,6 +877,7 @@ if (settings.shared_pages.page_header.panels.coin_supply_panel.enabled == true &
 if (settings.shared_pages.page_header.panels.price_panel.enabled == true && settings.shared_pages.page_header.panels.price_panel.display_order > 0) panel_order.push({name: 'price_panel', val: settings.shared_pages.page_header.panels.price_panel.display_order});
 if (settings.shared_pages.page_header.panels.usd_price_panel.enabled == true && settings.shared_pages.page_header.panels.usd_price_panel.display_order > 0) panel_order.push({name: 'usd_price_panel', val: settings.shared_pages.page_header.panels.usd_price_panel.display_order});
 if (settings.shared_pages.page_header.panels.market_cap_panel.enabled == true && settings.shared_pages.page_header.panels.market_cap_panel.display_order > 0) panel_order.push({name: 'market_cap_panel', val: settings.shared_pages.page_header.panels.market_cap_panel.display_order});
+if (settings.shared_pages.page_header.panels.usd_market_cap_panel.enabled == true && settings.shared_pages.page_header.panels.usd_market_cap_panel.display_order > 0) panel_order.push({name: 'usd_market_cap_panel', val: settings.shared_pages.page_header.panels.usd_market_cap_panel.display_order});
 if (settings.shared_pages.page_header.panels.logo_panel.enabled == true && settings.shared_pages.page_header.panels.logo_panel.display_order > 0) panel_order.push({name: 'logo_panel', val: settings.shared_pages.page_header.panels.logo_panel.display_order});
 if (settings.shared_pages.page_header.panels.spacer_panel_1.enabled == true && settings.shared_pages.page_header.panels.spacer_panel_1.display_order > 0) panel_order.push({name: 'spacer_panel_1', val: settings.shared_pages.page_header.panels.spacer_panel_1.display_order});
 if (settings.shared_pages.page_header.panels.spacer_panel_2.enabled == true && settings.shared_pages.page_header.panels.spacer_panel_2.display_order > 0) panel_order.push({name: 'spacer_panel_2', val: settings.shared_pages.page_header.panels.spacer_panel_2.display_order});

diff --git a/lib/settings.js b/lib/settings.js
@@ -263,6 +263,16 @@ exports.shared_pages = {
         //                The panel will be disabled with a value of 0
         "display_order": 5
       },
+      // usd_market_cap_panel: a collection of settings that pertain to the market cap panel which displays the current market cap value measured in USD
+      "usd_market_cap_panel": {
+        // enabled: Enable/disable the usd market cap panel (true/false)
+        //          If set to false, the usd market cap panel will be completely inaccessible
+        "enabled": false,
+        // display_order: Determine which order this panel is shown from 1-5
+        //                1 = far left panel, 5 = far right panel
+        //                The panel will be disabled with a value of 0
+        "display_order": 0
+      },
       // logo_panel: a collection of settings that pertain to the logo panel which displays the selected "shared_pages.logo" image
       "logo_panel": {
         // enabled: Enable/disable the logo panel (true/false)

diff --git a/settings.json.template b/settings.json.template
@@ -256,6 +256,16 @@
         "market_cap_panel": {
           // enabled: Enable/disable the market cap panel (true/false)
           //          If set to false, the market cap panel will be completely inaccessible
+          "enabled": false,
+          // display_order: Determine which order this panel is shown from 1-5
+          //                1 = far left panel, 5 = far right panel
+          //                The panel will be disabled with a value of 0
+          "display_order": 0
+        },
+        // usd_market_cap_panel: a collection of settings that pertain to the market cap panel which displays the current market cap value measured in USD
+        "usd_market_cap_panel": {
+          // enabled: Enable/disable the usd market cap panel (true/false)
+          //          If set to false, the usd market cap panel will be completely inaccessible
           "enabled": true,
           // display_order: Determine which order this panel is shown from 1-5
           //                1 = far left panel, 5 = far right panel

diff --git a/views/layout.pug b/views/layout.pug
@@ -314,6 +314,9 @@ html(lang='en')
         function getMarketCapPanel() {
           return '<div class="card-header"><strong>Market Cap <span class="small fw-normal">(#{settings.markets_page.default_exchange.trading_pair.split('/')[1]})</span></strong></div><div class="card-body"><div id="marketCapPanelLoading" class="header-panel"><i class="fa-solid fa-spinner fa-spin-pulse"></i></div><div id="marketCapPanel" class="header-panel" style="display:none;"><span class="fa-solid fa-chart-line"></span><label id="marketCap"></label></div></div>';
         }
+        function getUSDMarketCapPanel() {
+          return '<div class="card-header"><strong>Market Cap <span class="small fw-normal">(USD)</span></strong></div><div class="card-body"><div id="usdMarketCapPanelLoading" class="header-panel"><i class="fa-solid fa-spinner fa-spin-pulse"></i></div><div id="usdMarketCapPanel" class="header-panel" style="display:none;"><span class="fa-solid fa-chart-line"></span><label id="usdMarketCap"></label></div></div>';
+        }
         function getLogoPanel() {
           return `<img src="#{settings.shared_pages.logo}" style="margin-top:-15px;height:128px;" alt="${"#{settings.coin.name}".replace(/"/g, '&quot;')} Logo" title="${"#{settings.coin.name}".replace(/"/g, '&quot;')} Logo" />`;
         }
@@ -345,6 +348,9 @@ html(lang='en')
             case "market_cap_panel":
               sReturn = getMarketCapPanel();
               break;
+            case "usd_market_cap_panel":
+              sReturn = getUSDMarketCapPanel();
+              break;
             case "logo_panel":
               sReturn = getLogoPanel();
               break;
@@ -402,13 +408,18 @@ html(lang='en')
               hashrateString = Number(json.hashrate).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
 
             $("#supply").text(supplyString);
-            splitValue = Number(parseFloat(json.lastPrice).toFixed(8) * parseInt(parseFloat(json.supply).toFixed(0))).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
-            splitParts = splitValue.split('.');
             showTopPanelData('supplypanel', 'supplyPanelLoading');
 
+            splitValue = Number(parseFloat(json.lastPrice).toFixed(8) * parseInt(parseFloat(json.supply).toFixed(0))).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+            splitParts = splitValue.split('.');
             $("#marketCap").html(splitParts[0] + '.<span class="decimal">' + splitParts[1] + '</span>');
             showTopPanelData('marketCapPanel', 'marketCapPanelLoading');
 
+            splitValue = Number(parseFloat(json.lastUSDPrice).toFixed(8) * parseInt(parseFloat(json.supply).toFixed(0))).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
+            splitParts = splitValue.split('.');
+            $("#usdMarketCap").html(splitParts[0] + '.<span class="decimal">' + splitParts[1] + '</span>');
+            showTopPanelData('usdMarketCapPanel', 'usdMarketCapPanelLoading');
+
             splitParts = diffString.split('.');
             $("#difficulty").html(splitParts[0] + '.<span class="decimal">' + splitParts[1] + '</span>');