Merge pull request #2876 from poanetwork/fix-chart-loading

Improve displaying of chart loading
ab-add-index-on-type
Victor Baranov 5 years ago committed by GitHub
commit aec7450303
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 23
      apps/block_scout_web/assets/css/components/_dashboard-banner.scss
  2. 39
      apps/block_scout_web/assets/js/lib/market_history_chart.js
  3. 2
      apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@ -53,14 +53,16 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
.dashboard-banner-chart {
flex-grow: 1;
margin: 0 0 35px 0;
margin: 15px 0 20px 0;
max-width: 350px;
position: relative;
min-height: 100px;
height: calc(100% - 86px);
@include media-breakpoint-down(md) {
flex-grow: 0;
margin-bottom: 20px;
margin-top: auto;
margin-top: 20px;
margin-bottom: auto;
max-width: 100%;
}
@ -71,6 +73,19 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
}
}
.dashboard-banner-chart-loader {
opacity: 0.5;
position: absolute;
width: calc(100% - 100px);
top: 50%;
transform: translateY(-75%);
left: 50px;
right: 50px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.dashboard-banner-chart-legend {
display: grid;
grid-template-columns: 1fr 1fr;
@ -227,4 +242,4 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
font-size: 0.9rem;
}
}
}
}

@ -4,7 +4,6 @@ import humps from 'humps'
import numeral from 'numeral'
import { formatUsdValue } from '../lib/currency'
import sassVariables from '../../css/app.scss'
import { showLoader } from '../lib/utils'
const config = {
type: 'line',
@ -76,16 +75,32 @@ const config = {
}
}
function getDataFromLocalStorage (key) {
const data = window.localStorage.getItem(key)
return data ? JSON.parse(data) : []
}
function getPriceData (marketHistoryData) {
return marketHistoryData.map(({ date, closingPrice }) => ({ x: date, y: closingPrice }))
if (marketHistoryData.length === 0) {
return getDataFromLocalStorage('priceData')
}
const data = marketHistoryData.map(({ date, closingPrice }) => ({ x: date, y: closingPrice }))
window.localStorage.setItem('priceData', JSON.stringify(data))
return data
}
function getMarketCapData (marketHistoryData, 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 }))
if (marketHistoryData.length === 0) {
return getDataFromLocalStorage('marketCapData')
}
const data = marketHistoryData.map(({ date, closingPrice }) => {
const supply = (availableSupply !== null && typeof availableSupply === 'object')
? availableSupply[date]
: availableSupply
return { x: date, y: closingPrice * supply }
})
window.localStorage.setItem('marketCapData', JSON.stringify(data))
return data
}
// colors for light and dark theme
@ -142,25 +157,23 @@ class MarketHistoryChart {
export function createMarketHistoryChart (el) {
const dataPath = el.dataset.market_history_chart_path
const $chartLoading = $('[data-chart-loading-message]')
const isTimeout = true
const timeoutID = showLoader(isTimeout, $chartLoading)
const $chartError = $('[data-chart-error-message]')
const chart = new MarketHistoryChart(el, 0, [])
$(el).show()
$.getJSON(dataPath, { type: 'JSON' })
.done(data => {
const availableSupply = JSON.parse(data.supply_data)
const marketHistoryData = humps.camelizeKeys(JSON.parse(data.history_data))
$(el).show()
chart.update(availableSupply, marketHistoryData)
})
.fail(() => {
$(el).hide()
$chartError.show()
})
.always(() => {
$chartLoading.hide()
clearTimeout(timeoutID)
$chartLoading.css({ opacity: 0 })
setTimeout($chartLoading.hide, 1000)
})
return chart
}

@ -5,7 +5,7 @@
<div class="dashboard-banner-network-graph">
<!-- Graph -->
<div class="dashboard-banner-chart">
<div hidden data-chart-loading-message class="tile tile-muted text-center mt-5">
<div data-chart-loading-message class="tile tile-muted text-center dashboard-banner-chart-loader">
<span class="loading-spinner-small mr-2">
<span class="loading-spinner-block-1"></span>
<span class="loading-spinner-block-2"></span>

Loading…
Cancel
Save