classic-ui/components/Statistics.vue
Danil Kovtonyuk 44f31f8b9f
init
2022-04-22 13:14:19 +10:00

114 lines
4.0 KiB
Vue

<template>
<div class="column is-half">
<div class="box-stats">
<div class="tab-with-corner is-left-top">
{{ $t('statistics') }}
<span class="selected"
><NumberFormat :value="selectedStatistic.amount" /> {{ selectedStatisticCurrency }}</span
>
</div>
<div class="box">
<div class="label">
{{ $t('anonymitySet') }}
<b-tooltip :label="$t('anonymitySetTooltip')" size="is-medium" position="is-top" multilined>
<button class="button is-primary has-icon">
<span class="icon icon-info"></span>
</button>
</b-tooltip>
</div>
<div class="field">
<i18n v-if="anonimitySet" path="equalUserDeposit">
<span v-if="anonimitySet > 1 && anonimitySet < 5" slot="only">{{ $t('only') }}</span>
<b v-if="anonimitySet > 1" slot="n">{{ Number(anonimitySet) }}</b>
<span slot="equalUserDepositText">{{ $tc('equalUserDepositPlural', Number(anonimitySet)) }}</span>
</i18n>
<b-skeleton size="is-large" :active="!anonimitySet" width="200"></b-skeleton>
</div>
<template v-if="anonimitySet != 0">
<div class="label">{{ $t('latestDeposits') }}</div>
<div v-if="latestDeposits && latestDeposits.length" class="columns is-small is-multiline">
<div class="column is-half-small">
<div class="deposits">
<div v-for="{ index, depositTime } in latestDeposits.slice(0, 5)" :key="index" class="row">
<div class="value">{{ Number(index) + 1 }}.</div>
<div class="data">{{ depositTime }}</div>
</div>
</div>
</div>
<div class="column is-half-small">
<div class="deposits">
<div v-for="{ index, depositTime } in latestDeposits.slice(5, 10)" :key="index" class="row">
<div class="value">{{ Number(index) + 1 }}.</div>
<div class="data">{{ depositTime }}</div>
</div>
</div>
</div>
</div>
<div v-else class="columns is-small is-multiline">
<div class="column is-half-small">
<div class="deposits">
<b-skeleton size="is-large"></b-skeleton>
<b-skeleton size="is-large"></b-skeleton>
<b-skeleton size="is-large"></b-skeleton>
<b-skeleton size="is-large"></b-skeleton>
<b-skeleton size="is-large"></b-skeleton>
</div>
</div>
<div class="column is-half-small">
<div class="deposits">
<b-skeleton size="is-large"></b-skeleton>
<b-skeleton size="is-large"></b-skeleton>
<b-skeleton size="is-large"></b-skeleton>
<b-skeleton size="is-large"></b-skeleton>
<b-skeleton size="is-large"></b-skeleton>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
/* eslint-disable no-console */
import { mapState, mapGetters } from 'vuex'
import NumberFormat from '@/components/NumberFormat'
export default {
components: {
NumberFormat
},
data() {
return {
timer: null
}
},
computed: {
...mapState('application', ['ip', 'statistic', 'selectedStatistic']),
...mapGetters('metamask', ['networkConfig']),
...mapGetters('application', ['selectedStatisticCurrency', 'latestDeposits']),
anonimitySet() {
const currency = this.selectedStatistic.currency.toLowerCase()
return this.statistic[currency][this.selectedStatistic.amount].anonymitySet
}
},
mounted() {
if (!this.timer) {
this.updateEvents()
}
},
beforeDestroy() {
clearTimeout(this.timer)
},
methods: {
updateEvents() {
this.$store.dispatch('application/updateSelectEvents')
this.timer = setTimeout(() => {
this.updateEvents()
}, 60 * 1000)
}
}
}
</script>