|
|
|
@ -4,7 +4,6 @@ import humps from 'humps' |
|
|
|
import numeral from 'numeral' |
|
|
|
import numeral from 'numeral' |
|
|
|
import { formatUsdValue } from '../lib/currency' |
|
|
|
import { formatUsdValue } from '../lib/currency' |
|
|
|
import sassVariables from '../../css/app.scss' |
|
|
|
import sassVariables from '../../css/app.scss' |
|
|
|
import { showLoader } from '../lib/utils' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const config = { |
|
|
|
const config = { |
|
|
|
type: 'line', |
|
|
|
type: 'line', |
|
|
|
@ -104,25 +103,13 @@ function getMarketCapData (marketHistoryData, availableSupply) { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// colors for light and dark theme
|
|
|
|
|
|
|
|
var priceLineColor |
|
|
|
|
|
|
|
var mcapLineColor |
|
|
|
|
|
|
|
if (localStorage.getItem('current-color-mode') === 'dark') { |
|
|
|
|
|
|
|
priceLineColor = sassVariables.darkprimary |
|
|
|
|
|
|
|
mcapLineColor = sassVariables.darksecondary |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
priceLineColor = sassVariables.dashboardLineColorPrice |
|
|
|
|
|
|
|
mcapLineColor = sassVariables.dashboardLineColorMarket |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class MarketHistoryChart { |
|
|
|
class MarketHistoryChart { |
|
|
|
constructor (el, availableSupply, marketHistoryData, dataConfig) { |
|
|
|
constructor (el, availableSupply, marketHistoryData, dataConfig) { |
|
|
|
|
|
|
|
var axes = config.options.scales.yAxes.reduce(function (solution, elem) { |
|
|
|
var axes = config.options.scales.yAxes.reduce(function(solution, elem){ |
|
|
|
|
|
|
|
solution[elem.id] = elem |
|
|
|
solution[elem.id] = elem |
|
|
|
return solution |
|
|
|
return solution |
|
|
|
}, |
|
|
|
}, |
|
|
|
{}) |
|
|
|
{}) |
|
|
|
|
|
|
|
|
|
|
|
this.price = { |
|
|
|
this.price = { |
|
|
|
label: window.localized['Price'], |
|
|
|
label: window.localized['Price'], |
|
|
|
@ -130,13 +117,13 @@ class MarketHistoryChart { |
|
|
|
data: [], |
|
|
|
data: [], |
|
|
|
fill: false, |
|
|
|
fill: false, |
|
|
|
pointRadius: 0, |
|
|
|
pointRadius: 0, |
|
|
|
backgroundColor: priceLineColor, |
|
|
|
backgroundColor: sassVariables.dashboardLineColorPrice, |
|
|
|
borderColor: priceLineColor, |
|
|
|
borderColor: sassVariables.dashboardLineColorPrice, |
|
|
|
lineTension: 0 |
|
|
|
lineTension: 0 |
|
|
|
} |
|
|
|
} |
|
|
|
if (dataConfig.market == undefined || dataConfig.market.indexOf("price") == -1){ |
|
|
|
if (dataConfig.market === undefined || dataConfig.market.indexOf('price') === -1) { |
|
|
|
this.price.hidden = true |
|
|
|
this.price.hidden = true |
|
|
|
axes["price"].display = false |
|
|
|
axes['price'].display = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.marketCap = { |
|
|
|
this.marketCap = { |
|
|
|
@ -145,13 +132,13 @@ class MarketHistoryChart { |
|
|
|
data: [], |
|
|
|
data: [], |
|
|
|
fill: false, |
|
|
|
fill: false, |
|
|
|
pointRadius: 0, |
|
|
|
pointRadius: 0, |
|
|
|
backgroundColor: mcapLineColor, |
|
|
|
backgroundColor: sassVariables.dashboardLineColorMarket, |
|
|
|
borderColor: mcapLineColor, |
|
|
|
borderColor: sassVariables.dashboardLineColorMarket, |
|
|
|
lineTension: 0 |
|
|
|
lineTension: 0 |
|
|
|
} |
|
|
|
} |
|
|
|
if (dataConfig.market == undefined || dataConfig.market.indexOf("market_cap") == -1){ |
|
|
|
if (dataConfig.market === undefined || dataConfig.market.indexOf('market_cap') === -1) { |
|
|
|
this.marketCap.hidden = true |
|
|
|
this.marketCap.hidden = true |
|
|
|
axes["marketCap"].display = false |
|
|
|
axes['marketCap'].display = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.numTransactions = { |
|
|
|
this.numTransactions = { |
|
|
|
@ -162,15 +149,14 @@ class MarketHistoryChart { |
|
|
|
pointRadius: 0, |
|
|
|
pointRadius: 0, |
|
|
|
backgroundColor: sassVariables.dashboardLineColorMarket, |
|
|
|
backgroundColor: sassVariables.dashboardLineColorMarket, |
|
|
|
borderColor: sassVariables.dashboardLineColorTransactions, |
|
|
|
borderColor: sassVariables.dashboardLineColorTransactions, |
|
|
|
lineTension: 0, |
|
|
|
lineTension: 0 |
|
|
|
} |
|
|
|
} |
|
|
|
if (dataConfig.transactions == undefined || dataConfig.transactions.indexOf("transactions_per_day") == -1){ |
|
|
|
if (dataConfig.transactions === undefined || dataConfig.transactions.indexOf('transactions_per_day') === -1) { |
|
|
|
this.numTransactions.hidden = true |
|
|
|
this.numTransactions.hidden = true |
|
|
|
axes["numTransactions"].display = false |
|
|
|
axes['numTransactions'].display = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.availableSupply = availableSupply |
|
|
|
this.availableSupply = availableSupply |
|
|
|
//TODO: This is where we dynamically append datasets
|
|
|
|
|
|
|
|
config.data.datasets = [this.price, this.marketCap, this.numTransactions] |
|
|
|
config.data.datasets = [this.price, this.marketCap, this.numTransactions] |
|
|
|
this.chart = new Chart(el, config) |
|
|
|
this.chart = new Chart(el, config) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -185,9 +171,9 @@ class MarketHistoryChart { |
|
|
|
} |
|
|
|
} |
|
|
|
this.chart.update() |
|
|
|
this.chart.update() |
|
|
|
} |
|
|
|
} |
|
|
|
updateTransactionHistory (transaction_history) { |
|
|
|
updateTransactionHistory (transactionHistory) { |
|
|
|
this.numTransactions.data = transaction_history.map(dataPoint => { |
|
|
|
this.numTransactions.data = transactionHistory.map(dataPoint => { |
|
|
|
return {x:dataPoint.date, y:dataPoint.number_of_transactions} |
|
|
|
return {x: dataPoint.date, y: dataPoint.number_of_transactions} |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.chart.update() |
|
|
|
this.chart.update() |
|
|
|
} |
|
|
|
} |
|
|
|
@ -198,28 +184,24 @@ export function createMarketHistoryChart (el) { |
|
|
|
const dataConfig = $(el).data('history_chart_config') |
|
|
|
const dataConfig = $(el).data('history_chart_config') |
|
|
|
|
|
|
|
|
|
|
|
const $chartLoading = $('[data-chart-loading-message]') |
|
|
|
const $chartLoading = $('[data-chart-loading-message]') |
|
|
|
|
|
|
|
|
|
|
|
const isTimeout = true |
|
|
|
|
|
|
|
const timeoutID = showLoader(isTimeout, $chartLoading) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const $chartError = $('[data-chart-error-message]') |
|
|
|
const $chartError = $('[data-chart-error-message]') |
|
|
|
const chart = new MarketHistoryChart(el, 0, [], dataConfig) |
|
|
|
const chart = new MarketHistoryChart(el, 0, [], dataConfig) |
|
|
|
Object.keys(dataPaths).forEach(function(history_source){ |
|
|
|
Object.keys(dataPaths).forEach(function (historySource) { |
|
|
|
$.getJSON(dataPaths[history_source], {type: 'JSON'}) |
|
|
|
$.getJSON(dataPaths[historySource], {type: 'JSON'}) |
|
|
|
.done(data => { |
|
|
|
.done(data => { |
|
|
|
switch(history_source){ |
|
|
|
switch (historySource) { |
|
|
|
case "market": |
|
|
|
case 'market': |
|
|
|
const availableSupply = JSON.parse(data.supply_data) |
|
|
|
const availableSupply = JSON.parse(data.supply_data) |
|
|
|
const marketHistoryData = humps.camelizeKeys(JSON.parse(data.history_data)) |
|
|
|
const marketHistoryData = humps.camelizeKeys(JSON.parse(data.history_data)) |
|
|
|
$(el).show() |
|
|
|
$(el).show() |
|
|
|
chart.updateMarketHistory(availableSupply, marketHistoryData) |
|
|
|
chart.updateMarketHistory(availableSupply, marketHistoryData) |
|
|
|
break; |
|
|
|
break |
|
|
|
case "transaction": |
|
|
|
case 'transaction': |
|
|
|
const transaction_history = JSON.parse(data.history_data) |
|
|
|
const transactionHistory = JSON.parse(data.history_data) |
|
|
|
|
|
|
|
|
|
|
|
$(el).show() |
|
|
|
$(el).show() |
|
|
|
chart.updateTransactionHistory(transaction_history) |
|
|
|
chart.updateTransactionHistory(transactionHistory) |
|
|
|
break; |
|
|
|
break |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
.fail(() => { |
|
|
|
.fail(() => { |
|
|
|
@ -227,8 +209,9 @@ export function createMarketHistoryChart (el) { |
|
|
|
}) |
|
|
|
}) |
|
|
|
.always(() => { |
|
|
|
.always(() => { |
|
|
|
$chartLoading.hide() |
|
|
|
$chartLoading.hide() |
|
|
|
})}) |
|
|
|
}) |
|
|
|
return chart; |
|
|
|
}) |
|
|
|
|
|
|
|
return chart |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
$('[data-chart-error-message]').on('click', _event => { |
|
|
|
$('[data-chart-error-message]').on('click', _event => { |
|
|
|
|
slightlycyborg
5 years ago