make chart calculate differently when receiving the supply by date

apps/block_scout_web/assets/js/lib/market_history_chart.js

@@ -75,7 +75,11 @@ function getPriceData (marketHistoryData) {
 }
 
 function getMarketCapData (marketHistoryData, availableSupply) {
-  return marketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice * availableSupply}))
+  if (availableSupply !== null && typeof availableSupply === 'object') {
+    return marketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice * availableSupply[date]}))
+  } else {
+    return marketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice * availableSupply}))
+  }
 }
 
 class MarketHistoryChart {
@@ -100,18 +104,25 @@ class MarketHistoryChart {
       borderColor: sassVariables.secondary,
       lineTension: 0
     }
+    this.availableSupply = availableSupply
     config.data.datasets = [this.price, this.marketCap]
     this.chart = new Chart(el, config)
   }
   update (availableSupply, marketHistoryData) {
     this.price.data = getPriceData(marketHistoryData)
-    this.marketCap.data = getMarketCapData(marketHistoryData, availableSupply)
+    if (this.availableSupply !== null && typeof this.availableSupply === 'object') {
+      const today = new Date().toJSON().slice(0, 10)
+      this.availableSupply[today] = availableSupply
+      this.marketCap.data = getMarketCapData(marketHistoryData, this.availableSupply)
+    } else {
+      this.marketCap.data = getMarketCapData(marketHistoryData, availableSupply)
+    }
     this.chart.update()
   }
 }
 
 export function createMarketHistoryChart (ctx) {
-  const availableSupply = ctx.dataset.available_supply
+  const availableSupply = JSON.parse(ctx.dataset.available_supply)
   const marketHistoryData = humps.camelizeKeys(JSON.parse(ctx.dataset.market_history_data))
 
   return new MarketHistoryChart(ctx, availableSupply, marketHistoryData)

apps/block_scout_web/lib/block_scout_web/controllers/chain_controller.ex

@@ -40,6 +40,7 @@ defmodule BlockScoutWeb.ChainController do
       average_block_time: Chain.average_block_time(),
       blocks: blocks,
       exchange_rate: exchange_rate,
+      available_supply: available_supply(Chain.supply_for_days(30), exchange_rate),
       market_history_data: market_history_data,
       transaction_estimated_count: transaction_estimated_count,
       transactions: transactions
@@ -78,4 +79,17 @@ defmodule BlockScoutWeb.ChainController do
         )
     )
   end
+
+  defp available_supply(:ok, exchange_rate) do
+    to_string(exchange_rate.available_supply || 0)
+  end
+
+  defp available_supply({:ok, supply_for_days}, _exchange_rate) do
+    supply_for_days
+    |> Jason.encode()
+    |> case do
+      {:ok, data} -> data
+      _ -> []
+    end
+  end
 end

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -3,7 +3,7 @@
   <div class="container">
     <div class="dashboard-banner">
       <div class="dashboard-banner-chart">
-        <canvas data-chart="marketHistoryChart" data-available_supply='<%= @exchange_rate.available_supply %>' data-market_history_data='<%=raw encode_market_history_data(@market_history_data) %>' width="350" height="152"></canvas>
+        <canvas data-chart="marketHistoryChart" data-available_supply='<%=raw @available_supply %>' data-market_history_data='<%=raw encode_market_history_data(@market_history_data) %>' width="350" height="152"></canvas>
       </div>
       <div class="dashboard-banner-chart-legend">
         <div class="dashboard-banner-chart-legend-item">