Luke Imhoff
7 years ago
commit
cc5175d8f5
@ -0,0 +1,10 @@ |
||||
defmodule Explorer.ExchangeRates.Source.NoOpSource do |
||||
@moduledoc false |
||||
|
||||
alias Explorer.ExchangeRates.Source |
||||
|
||||
@behaviour Source |
||||
|
||||
@impl Source |
||||
def fetch_exchange_rates, do: {:ok, []} |
||||
end |
||||
@ -0,0 +1,100 @@ |
||||
import $ from 'jquery' |
||||
import Chart from 'chart.js' |
||||
import humps from 'humps' |
||||
import moment from 'moment' |
||||
import numeral from 'numeral' |
||||
import sassVariables from '../../css/app.scss' |
||||
|
||||
function formatPrice (price) { |
||||
return '$' + price.toFixed(2) |
||||
} |
||||
|
||||
function formatMarketCap (marketCap) { |
||||
return numeral(marketCap).format('($0,0a)') |
||||
} |
||||
|
||||
function createMarketHistoryChart (ctx) { |
||||
const currentExchangeRate = ctx.dataset.current_exchange_rate |
||||
const availableSupply = ctx.dataset.available_supply |
||||
const marketHistoryData = humps.camelizeKeys(JSON.parse(ctx.dataset.market_history_data)) |
||||
const today = moment().format('YYYY-MM-DD') |
||||
const currentMarketHistoryData = marketHistoryData.map(({date, closingPrice}) => ({ |
||||
date, |
||||
closingPrice: date === today ? currentExchangeRate : closingPrice |
||||
})) |
||||
|
||||
return new Chart(ctx, { |
||||
type: 'line', |
||||
responsive: true, |
||||
data: { |
||||
datasets: [{ |
||||
label: 'Price', |
||||
yAxisID: 'price', |
||||
data: currentMarketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice})), |
||||
fill: false, |
||||
pointRadius: 0, |
||||
backgroundColor: sassVariables.primary, |
||||
borderColor: sassVariables.primary, |
||||
lineTension: 0 |
||||
}, { |
||||
label: 'Market Cap', |
||||
yAxisID: 'marketCap', |
||||
data: currentMarketHistoryData.map(({ date, closingPrice }) => ({x: date, y: closingPrice * availableSupply})), |
||||
fill: false, |
||||
pointRadius: 0.5, |
||||
backgroundColor: sassVariables.secondary, |
||||
borderColor: sassVariables.secondary, |
||||
lineTension: 0 |
||||
}] |
||||
}, |
||||
options: { |
||||
legend: { |
||||
display: false |
||||
}, |
||||
scales: { |
||||
xAxes: [{ |
||||
type: 'time', |
||||
time: { |
||||
unit: 'week', |
||||
displayFormats: { |
||||
week: 'MMM D' |
||||
} |
||||
} |
||||
}], |
||||
yAxes: [{ |
||||
id: 'price', |
||||
ticks: { |
||||
beginAtZero: true, |
||||
callback: (value, index, values) => formatPrice(value), |
||||
maxTicksLimit: 6 |
||||
} |
||||
}, { |
||||
id: 'marketCap', |
||||
position: 'right', |
||||
ticks: { |
||||
callback: (value, index, values) => formatMarketCap(value), |
||||
maxTicksLimit: 6 |
||||
} |
||||
}] |
||||
}, |
||||
tooltips: { |
||||
mode: 'index', |
||||
intersect: false, |
||||
callbacks: { |
||||
label: ({datasetIndex, yLabel}, {datasets}) => { |
||||
const label = datasets[datasetIndex].label |
||||
if (datasets[datasetIndex].label === 'Price') { |
||||
return `${label}: ${formatPrice(yLabel)}` |
||||
} else if (datasets[datasetIndex].label === 'Market Cap') { |
||||
return `${label}: ${formatMarketCap(yLabel)}` |
||||
} else { |
||||
return yLabel |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
$('[data-chart="marketHistoryChart"]').each((i, ctx) => createMarketHistoryChart(ctx)) |
||||
@ -1,3 +1,32 @@ |
||||
defmodule ExplorerWeb.ChainView do |
||||
use ExplorerWeb, :view |
||||
|
||||
alias Explorer.ExchangeRates.Token |
||||
|
||||
def encode_market_history_data(market_history_data) do |
||||
market_history_data |
||||
|> Enum.map(fn day -> Map.take(day, [:closing_price, :date]) end) |
||||
|> Jason.encode() |
||||
|> case do |
||||
{:ok, data} -> data |
||||
_ -> [] |
||||
end |
||||
end |
||||
|
||||
def format_exchange_rate(%Token{usd_value: nil}), do: nil |
||||
|
||||
def format_exchange_rate(%Token{usd_value: usd_value}) do |
||||
Cldr.Number.to_string!(usd_value, fractional_digits: 6) |
||||
end |
||||
|
||||
def format_volume_24h(%Token{volume_24h_usd: volume_24h}) do |
||||
format_number(volume_24h) |
||||
end |
||||
|
||||
def format_market_cap(%Token{market_cap_usd: market_cap}) do |
||||
format_number(market_cap) |
||||
end |
||||
|
||||
defp format_number(nil), do: nil |
||||
defp format_number(number), do: Cldr.Number.to_string!(number) |
||||
end |
||||
|
||||
Loading…
Reference in new issue