Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Active accounts chart 2 #1006

Open
wants to merge 18 commits into
base: develop
Choose a base branch
from
Open

feat: Active accounts chart 2 #1006

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
ec23aff
add chart to chart page
janmichek Dec 10, 2024
c906af0
add hint
janmichek Dec 10, 2024
d654587
print value to ae coin page
janmichek Dec 10, 2024
252a6a1
refactor naming
janmichek Dec 10, 2024
8e8c4e8
remove comment
janmichek Dec 10, 2024
f090211
remove unused abstraction
janmichek Dec 10, 2024
2f7d5fd
fix token URL
janmichek Dec 11, 2024
7505603
fix typo
janmichek Dec 12, 2024
8303254
fix typo
janmichek Dec 12, 2024
80af1a5
fix typo
janmichek Dec 12, 2024
af29581
fix typo
janmichek Dec 12, 2024
84e12d6
add statistics to top accounts
janmichek Dec 12, 2024
79ce379
add e2e test
janmichek Dec 13, 2024
7dd94b7
fix markup
janmichek Dec 13, 2024
4dc39ff
code cleanup
janmichek Dec 13, 2024
d669ec9
decrease limits
janmichek Dec 13, 2024
47ffeab
add chart to top accounts
janmichek Dec 13, 2024
5087faa
remove comment
janmichek Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions cypress/e2e/app/topAccounts.js → cypress/e2e/app/topAccounts.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@ describe('top accounts', () => {
cy.visit('/accounts')

cy.get('.top-accounts-table').should('be.visible')
cy.get('.account-statistics__value').should('have.length', 2)
})
})
59 changes: 59 additions & 0 deletions src/components/AccountsChartPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<template>
<app-panel>
<template #title>
ACTIVE ACCOUNTS
<hint-tooltip>
{{ chartsHints.accountsChart }}
</hint-tooltip>
</template>
<template #end>
<chart-controls
v-model="selectedRange"
class="u-hidden-mobile"/>
</template>

<line-chart
:data="accountsStatistics"
:interval="selectedRange.interval"/>

<chart-controls
v-model="selectedRange"
class="accounts-chart-panel__controls u-hidden-desktop"/>
</app-panel>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { chartsHints } from '@/utils/hints/chartsHints'
import { useChartsStore } from '@/stores/charts'

const chartsStore = useChartsStore()
const { accountsStatistics } = storeToRefs(chartsStore)
const { fetchAccountsStatistics } = chartsStore

const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])

await useAsyncData(async() => {
await loadHashrateStatistics()
return true
})

if (process.client) {
watch([selectedRange], async() => {
await loadHashrateStatistics()
})
}

async function loadHashrateStatistics() {
await fetchAccountsStatistics(
selectedRange.value.interval,
selectedRange.value.limit,
selectedRange.value.customInterval)
}
</script>

<style scoped>
.accounts-chart-pane__controls {
margin-top: var(--space-4);
}
</style>
65 changes: 65 additions & 0 deletions src/components/AccountsStatistics.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<template>
<div class="accounts-statistics">
<app-panel class="accounts-statistics__panel">
<h5>TOTAL ACCOUNTS</h5>
<div class="accounts-statistics__value">
{{ formatNumber(totalAccountsCount) }}
</div>
</app-panel>
<app-panel class="accounts-statistics__panel">
<h5>ACTIVE ACCOUNTS (LAST 24H)</h5>
<div class="accounts-statistics__value">
{{ formatNumber(activeAccountsCount) }}
<trend-chip
v-if="activeAccountsDelta"
:delta="activeAccountsDelta"/>
</div>
</app-panel>
</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useTopAccountsStore } from '@/stores/topAccounts'
import { formatNumber } from '@/utils/format'

const { fetchTopAccounts } = useTopAccountsStore()

const { totalAccountsCount, activeAccountsCount, activeAccountsDelta } = storeToRefs(useTopAccountsStore())

if (process.client) {
await fetchTopAccounts()
}
</script>

<style scoped>
.accounts-statistics {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 100%;
margin-bottom: var(--space-2);

@media (--desktop) {
flex-direction: row;
}

&__panel {
padding: var(--space-4);
width: 100%;

@media (--desktop) {
width: 50%;
}
}

&__value {
display: inline-flex;
justify-content: space-between;
width: 100%;
font-size: 36px;
font-family: var(--font-monospaced);
font-weight: 400;
margin-top: var(--space-3);
}
}
</style>
116 changes: 60 additions & 56 deletions src/components/AeCoinMarketsTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,65 @@
<template>
<table>
<tr>
<th>
Name
<hint-tooltip>
{{ aeCoinHints.marketName }}
</hint-tooltip>
</th>
<th>
Token Pair
<hint-tooltip>
{{ aeCoinHints.pair }}
</hint-tooltip>
</th>
<th>
Price
<hint-tooltip>
{{ aeCoinHints.marketPrice }}
</hint-tooltip>
</th>
<th>
Volume (24h)
<hint-tooltip>
{{ aeCoinHints.volume }}
</hint-tooltip>
</th>
</tr>
<tr>
<td>Gate.io</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(gate?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(gate?.volume)) }}</td>
</tr>
<tr>
<td>Mexc</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(mexc?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(mexc?.volume)) }}</td>
</tr>
<tr>
<td>HotCoin</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(hotCoin?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(hotCoin?.volume)) }}</td>
</tr>
<tr>
<td>CoinStore</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(coinStore?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(coinStore?.volume)) }}</td>
</tr>
<tr>
<td>CoinW</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(coinW?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(coinW?.volume)) }}</td>
</tr>
<thead>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cleanup not related

<tr>
<th>
Name
<hint-tooltip>
{{ aeCoinHints.marketName }}
</hint-tooltip>
</th>
<th>
Token Pair
<hint-tooltip>
{{ aeCoinHints.pair }}
</hint-tooltip>
</th>
<th>
Price
<hint-tooltip>
{{ aeCoinHints.marketPrice }}
</hint-tooltip>
</th>
<th>
Volume (24h)
<hint-tooltip>
{{ aeCoinHints.volume }}
</hint-tooltip>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gate.io</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(gate?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(gate?.volume)) }}</td>
</tr>
<tr>
<td>Mexc</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(mexc?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(mexc?.volume)) }}</td>
</tr>
<tr>
<td>HotCoin</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(hotCoin?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(hotCoin?.volume)) }}</td>
</tr>
<tr>
<td>CoinStore</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(coinStore?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(coinStore?.volume)) }}</td>
</tr>
<tr>
<td>CoinW</td>
<td>AE / USDT</td>
<td>$ {{ formatNullable(formatNumber(coinW?.price)) }}</td>
<td>$ {{ formatNullable(formatNumber(coinW?.volume)) }}</td>
</tr>
</tbody>
</table>
</template>

Expand Down
15 changes: 15 additions & 0 deletions src/components/AeCoinPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,17 @@
<price-label :price="totalTokenSupply"/>
</td>
</tr>
<tr class="ae-coin-panel__row">
<th class="ae-coin-panel__table-header">
<hint-tooltip>
{{ aeCoinHints.activeAccounts }}
</hint-tooltip>
Latest Active Accounts
Copy link
Collaborator

@michele-franchi michele-franchi Dec 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of displaying "Latest Active Accounts" in the Ae coin page I would suggest to add:

  • Total accounts
  • Active accounts (24h)

A stats panel in the /accounts page, like it's done for /transactions, as it's more related to accounts rather than the native coin itself and seems more consistent to me?

Something like:
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, sure good suggestion. I can extend i.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

displaying "Latest Active Accounts" in the Ae coin page

This was a direct requirement before tho, it think from Nikola. So I will keep it + extend it.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

</th>
<td>
{{ activeAccounts }}
</td>
</tr>
<tr class="ae-coin-panel__row">
<th class="ae-coin-panel__table-header">
<hint-tooltip>
Expand Down Expand Up @@ -87,6 +98,10 @@ defineProps({
type: Number,
required: true,
},
activeAccounts: {
type: Number,
required: true,
},
})

</script>
Expand Down
10 changes: 5 additions & 5 deletions src/components/ChartControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<div>
<div class="chart-controls__container">
<app-chip
v-for="option in CHART_INTERVALS_OPTIONS"
v-for="option in CHART_INTERVALS_PRESETS_OPTIONS"
:key="option.label"
class="chart-controls__button"
:variant="isIntervalSelected(option) ? 'error' : 'secondary'"
@click="selectInterval(option)">
:variant="isPresetSelected(option) ? 'error' : 'secondary'"
@click="selectPreset(option)">
{{ option.label }}
</app-chip>
<range-picker
Expand All @@ -33,11 +33,11 @@ const selectedRange = useVModel(props, 'modelValue', emit)
const isCustomIntervalSelected = computed(() =>
Object.keys(selectedRange.value).includes('customInterval'))

function isIntervalSelected(option) {
function isPresetSelected(option) {
return selectedRange.value.label === option.label
}

function selectInterval(option) {
function selectPreset(option) {
selectedRange.value = option
}

Expand Down
4 changes: 4 additions & 0 deletions src/components/ChartsNavigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ const menuOptions = ref([{
name: 'Smart Contracts',
path: 'contracts',
},
{
name: 'Accounts',
path: 'accounts',
},
{
name: 'Names',
path: 'names',
Expand Down
9 changes: 1 addition & 8 deletions src/components/ContractsChartPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,7 @@ const chartsStore = useChartsStore()
const { contractsStatistics } = storeToRefs(chartsStore)
const { fetchContractsStatistics } = chartsStore

const props = defineProps({
range: {
required: true,
type: Object,
},
})

const selectedRange = ref(props.range)
const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])

await useAsyncData(async() => {
await loadContractsStatistics()
Expand Down
10 changes: 3 additions & 7 deletions src/components/DifficultyChartPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,32 +22,28 @@
<script setup>
import { storeToRefs } from 'pinia'
import { useChartsStore } from '@/stores/charts'
import { CHART_INTERVALS_PRESETS_OPTIONS } from '@/utils/constants'

const chartsStore = useChartsStore()
const { difficultyStatistics } = storeToRefs(chartsStore)
const { fetchDifficultyStatistics } = chartsStore

const props = defineProps({
hasSelect: {
required: true,
type: Boolean,
},
range: {
required: true,
type: Object,
},
})

const selectedRange = ref(props.range)
const selectedTxType = ref(TX_TYPES_OPTIONS[0])
const selectedRange = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])

await useAsyncData(async() => {
await loadDifficultytatistics()
return true
})

if (process.client) {
watch([selectedRange, selectedTxType], async() => {
watch([selectedRange], async() => {
await loadDifficultytatistics()
})
}
Expand Down
Loading
Loading