add price in home page.
This commit is contained in:
liangping
parent
6e0c1c47c2
commit
5b0d2eebc0
@ -4,13 +4,13 @@
|
||||
},
|
||||
"cosmos": "Cosmos Hub",
|
||||
"kava": "Kava",
|
||||
"akash": "Akash Decloud",
|
||||
"iris": "IRIS Hub",
|
||||
"crypto": "Crypto.org",
|
||||
"akash-network": "Akash Decloud",
|
||||
"iris-network": "IRIS Hub",
|
||||
"crypto-com-chain": "Crypto.org",
|
||||
"osmosis": "Osmosis",
|
||||
"okexchain": "OKEX Chain",
|
||||
"band": "Band Protocal",
|
||||
"terra": "Terra",
|
||||
"band-protocol": "Band Protocol",
|
||||
"terra-luna": "Terra",
|
||||
"persistence": "Persistence",
|
||||
"regen": "Regen Network",
|
||||
"secret": "Secret Network",
|
||||
|
||||
@ -6,7 +6,7 @@ import { TxRaw } from 'cosmjs-types/cosmos/tx/v1beta1/tx'
|
||||
import { toBase64 } from '@cosmjs/encoding'
|
||||
import {
|
||||
Proposal, ProposalTally, Proposer, StakingPool, Votes, Deposit,
|
||||
Validator, StakingParameters, Block, ValidatorDistribution, StakingDelegation, WrapStdTx,
|
||||
Validator, StakingParameters, Block, ValidatorDistribution, StakingDelegation, WrapStdTx, getUserCurrency,
|
||||
} from './data'
|
||||
|
||||
function commonProcess(res) {
|
||||
@ -318,6 +318,12 @@ const chainAPI = class ChainFetch {
|
||||
return this.get('/cosmos/liquidity/v1beta1/pools').then(data => commonProcess(data))
|
||||
}
|
||||
|
||||
async getMarketChart(days = 14, coin = null) {
|
||||
const conf = this.getSelectedConfig()
|
||||
const currency = getUserCurrency()
|
||||
return ChainFetch.fetch(' https://api.coingecko.com', `/api/v3/coins/${coin || conf.chain_name}/market_chart?vs_currency=${currency}&days=${days}`)
|
||||
}
|
||||
|
||||
// CoinMarketCap
|
||||
static async fetchCoinMarketCap(url) {
|
||||
const host = 'https://price.ping.pub'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"chain_name": "akash",
|
||||
"chain_name": "akash-network",
|
||||
"api": "https://akash.api.ping.pub",
|
||||
"sdk_version": "0.41.3",
|
||||
"addr_prefix": "akash",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"chain_name": "band",
|
||||
"chain_name": "band-protocol",
|
||||
"api": "https://laozi1.bandchain.org/api",
|
||||
"addr_prefix": "band",
|
||||
"logo": "https://dl.airtable.com/.attachments/472ae99a508e32b4439b416beddd4eb9/c5166f62/band-symbol-blue-bg.75a3ad91.svg",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
{
|
||||
"chain_name": "crypto",
|
||||
"chain_name": "crypto-com-chain",
|
||||
"api": "https://mainnet.crypto.org:1317",
|
||||
"sdk_version": "0.39.2",
|
||||
"addr_prefix": "cro",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"chain_name": "iris",
|
||||
"chain_name": "iris-network",
|
||||
"api": "https://iris.api.ping.pub",
|
||||
"sdk_version": "0.42.4",
|
||||
"addr_prefix": "iaa",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"chain_name": "terra",
|
||||
"chain_name": "terra-luna",
|
||||
"api": "https://fcd.terra.dev",
|
||||
"sdk_version": "0.39.2",
|
||||
"addr_prefix": "terra",
|
||||
|
||||
@ -10,7 +10,20 @@
|
||||
</b-alert>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<summary-parmeters-component :data="chain" />
|
||||
<summary-parmeters-component
|
||||
:data="chain"
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row v-if="marketChartData">
|
||||
<b-col>
|
||||
<b-card style="min-height:60px;">
|
||||
<summary-price-chart
|
||||
:chart-data="marketChartData"
|
||||
:height="60"
|
||||
:min-height="60"
|
||||
/>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
@ -47,26 +60,32 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BRow, BCol, BAlert } from 'bootstrap-vue'
|
||||
import {
|
||||
formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter,
|
||||
BRow, BCol, BAlert, BCard,
|
||||
} from 'bootstrap-vue'
|
||||
import {
|
||||
formatNumber, formatTokenAmount, getUserCurrency, isToken, percent, timeIn, toDay, toDuration, tokenFormatter,
|
||||
} from '@/libs/data'
|
||||
|
||||
import SummaryParmetersComponent from './SummaryParmetersComponent.vue'
|
||||
import SummaryAssetsComponent from './SummaryAssetsComponent.vue'
|
||||
import SummaryPriceChart from './SummaryPriceChart.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BRow,
|
||||
BCol,
|
||||
BAlert,
|
||||
BCard,
|
||||
SummaryParmetersComponent,
|
||||
SummaryAssetsComponent,
|
||||
SummaryPriceChart,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
syncing: false,
|
||||
latestTime: '',
|
||||
marketData: null,
|
||||
chain: {
|
||||
title: '',
|
||||
class: 'border-primary',
|
||||
@ -97,78 +116,30 @@ export default {
|
||||
title: 'Governance Parameters',
|
||||
items: [],
|
||||
},
|
||||
aaaa: {
|
||||
options: {
|
||||
elements: {
|
||||
rectangle: {
|
||||
borderWidth: 2,
|
||||
borderSkipped: 'top',
|
||||
}
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
// Updated default tooltip UI
|
||||
shadowOffsetX: 1,
|
||||
shadowOffsetY: 1,
|
||||
shadowBlur: 8,
|
||||
// shadowColor: chartColors.tooltipShadow,
|
||||
// backgroundColor: this.$themeColors.light,
|
||||
// titleFontColor: this.$themeColors.dark,
|
||||
// bodyFontColor: this.$themeColors.dark,
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 500,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
gridLines: {
|
||||
// zeroLineColor: chartColors.grid_line_color,
|
||||
borderColor: 'transparent',
|
||||
// color: chartColors.grid_line_color,
|
||||
drawTicks: false,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
},
|
||||
ticks: {
|
||||
min: 0,
|
||||
// fontColor: chartColors.labelColor,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
gridLines: {
|
||||
display: false,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
},
|
||||
ticks: {
|
||||
// fontColor: chartColors.labelColor,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
data: {
|
||||
labels: ['MON', 'TUE', 'WED ', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
computed: {
|
||||
marketChartData() {
|
||||
if (this.marketData && this.marketData.prices) {
|
||||
const labels = this.marketData.prices.map(x => x[0])
|
||||
const data = this.marketData.prices.map(x => x[1])
|
||||
return {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
data: [710, 350, 470, 580, 230, 460, 120],
|
||||
// backgroundColor: this.$themeColors.info,
|
||||
borderColor: 'transparent',
|
||||
label: `Price (${getUserCurrency().toUpperCase()})`,
|
||||
data,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
borderWidth: 1,
|
||||
pointStyle: 'dash',
|
||||
barThickness: 15,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$http.getLatestBlock().then(res => {
|
||||
@ -184,6 +155,10 @@ export default {
|
||||
this.latestTime = toDay(res.block.header.time, 'long')
|
||||
})
|
||||
|
||||
this.$http.getMarketChart().then(res => {
|
||||
this.marketData = res
|
||||
})
|
||||
|
||||
this.$http.getMintingInflation().then(res => {
|
||||
const chainIndex = this.chain.items.findIndex(x => x.subtitle === 'inflation')
|
||||
this.$set(this.chain.items[chainIndex], 'title', `${percent(res)}%`)
|
||||
|
||||
57
src/views/SummaryPriceChart.vue
Normal file
57
src/views/SummaryPriceChart.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<script>
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: {
|
||||
// options: {
|
||||
// type: Object,
|
||||
// default: null,
|
||||
// },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day',
|
||||
},
|
||||
ticks: {
|
||||
autoskipping: true,
|
||||
display: true,
|
||||
maxTicksLimit: 15,
|
||||
// callback(a, b) {
|
||||
// console.log(a, b)
|
||||
// },
|
||||
},
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
autoskipping: true,
|
||||
display: true,
|
||||
maxTicksLimit: 8,
|
||||
// callback(a, b) {
|
||||
// console.log(a, b)
|
||||
// },
|
||||
},
|
||||
}],
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
labels: {
|
||||
color: 'rgb(255, 99, 132)',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user