Skip to content

Commit

Permalink
Fix delegation tiers Pie charts #1163
Browse files Browse the repository at this point in the history
  • Loading branch information
napongk committed Aug 14, 2019
1 parent e2add7a commit 0c6c5db
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 35 deletions.
2 changes: 1 addition & 1 deletion src/components/FaucetHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<b-collapse is-nav id="nav_collapse">
<!-- Right aligned nav items -->
<b-navbar-nav class="mobile-nav ml-auto">
<b-nav-item v-if="false">
<b-nav-item v-if="state.env !== 'production'">
<h5>
<router-link
to="/analytics"
Expand Down
2 changes: 1 addition & 1 deletion src/components/FaucetSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</header>
<b-nav class="staking" vertical>
<b-nav-item
v-if="false"
v-if="state.env !== 'production'"
to="/analytics"
class="router"
exact-active-class="router-active"
Expand Down
3 changes: 2 additions & 1 deletion src/dpos/store/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ export async function refreshValidators(ctx: ActionContext) {
const node = getOrCreate(addr)
node.stakedAmount = d.delegationTotal
node.totalStaked = node.whitelistAmount.add(d.delegationTotal)
node.allDelegations = d.delegationsArray
})
// use the address for those without names
nodes
Expand Down Expand Up @@ -314,7 +315,7 @@ function getReferrer() {
*/
export async function redelegate(context: ActionContext, delegation: Delegation) {
feedback.setTask(i18n.t("feedback_msg.task.redelegating").toString())
feedback.setStep(i18n.t("feedback_msg.step.scheduling_redelgate").toString()) // amount validator
feedback.setStep(i18n.t("feedback_msg.step.scheduling_redelegate").toString()) // amount validator
try {
await context.state.contract!.redelegateAsync(
delegation.validator.address,
Expand Down
4 changes: 2 additions & 2 deletions src/dpos/store/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import { HasPlasmaState } from "@/store/plasma/types"
import { ZERO } from "@/utils"
import BN from "bn.js"
import { Address, LocalAddress } from "loom-js"
import { DPOS3, ICandidate, IValidator } from "loom-js/dist/contracts/dpos3"

import { DPOS3, ICandidate, IValidator, IDelegation } from "loom-js/dist/contracts/dpos3"
import bigInt from "big-integer"

import {
Expand Down Expand Up @@ -78,6 +77,7 @@ export class Validator implements IValidator, ICandidate {
isBootstrap: boolean = false
active: boolean = false
addr: string = ""
allDelegations: Array<IDelegation> = []

setCandidateData(c: ICandidate) {
Object.assign(this, c)
Expand Down
11 changes: 6 additions & 5 deletions src/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,11 +96,11 @@ const router = new VueRouter({
name: "blockexplorer",
component: BlockExplorer,
},
// {
// path: "/analytics",
// name: "analytics",
// component: Analytics,
// },
{
path: "/analytics",
name: "analytics",
component: Analytics,
},
{
path: "/feedback",
name: "feedback",
Expand All @@ -122,6 +122,7 @@ const router = new VueRouter({
path: "/analytics",
name: "analytics",
component: Analytics,
beforeEnter: requireAccount,
},
{
path: "/",
Expand Down
97 changes: 72 additions & 25 deletions src/views/Analytics.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
<template>
<div class="container">
<div class="row px-3 py-4">
<div class="col-md-6 mb-4">
<b-card :title="$t('views.analytics.total_amount_staked')">
<canvas id="barChart" width="300" height="300"></canvas>
<b-row>
<b-col cols="8">
<b-card>
<b-row class="mb-3">
<b-col class="card-label">
<b-card-title>{{ $t('views.analytics.total_amount_staked') }}</b-card-title>
</b-col>
<b-col>
<b-form-select class="period-select" size="sm" v-model="selected" id="dropdown-right" >
<option value="daily">Daily</option>
<option value="monthly">Monthly</option>
</b-form-select>
</b-col>
</b-row>
<canvas id="barChart" width="600" height="280"></canvas>
</b-card>
</div>
<div class="col-md-6 mb-4">
</b-col>
<b-col cols="4">
<b-card :title="$t('views.analytics.tier_distribution')">
<canvas id="pieChart" width="300" height="300"></canvas>
<canvas id="pieChart" width="300" height="330"></canvas>
</b-card>
</div>
</div>
</b-col>
</b-row>
</div>
</template>

Expand All @@ -20,20 +31,51 @@
import Vue from "vue"
import Chart from "chart.js"
import { Component } from "vue-property-decorator"
import { Address, CryptoUtils, LocalAddress } from "loom-js"
import { DashboardState } from "../types"
import { timer } from "rxjs"
import { dposModule } from "../dpos/store"
import { DPOS3 } from "loom-js/dist/contracts"
import BigNumber from "bignumber.js"
@Component
export default class Analytics extends Vue {
allDelegationArray: any = []
// 2 weeks / 3 months / 6 months / 1 year
tierDistribution = [0,0,0,0]
selected = "daily"
filteredArray: any = []
get state(): DashboardState {
return this.$store.state
}
get delegationArray() {
this.state.dpos.validators.forEach((candidate) => {
this.allDelegationArray.push(candidate.allDelegations)
})
this.allDelegationArray.forEach((validators) => {
validators.filter((filtered) => {
if (filtered.index !== 0) {
this.tierDistribution[filtered.lockTimeTier] += 1
}
})
})
return this.tierDistribution
}
get fromDateDaily() {
return this.getDaily().fromDate
}
get toDateDaily() {
return this.getDaily().toDate
}
async beforeMount() {
console.log("candidate delegations", this.allDelegationArray)
if (!this.state.dpos.analyticsData) await dposModule.fetchAnalyticsData()
const data = this.state.dpos.analyticsData!
const ctx = document.getElementById("pieChart")
Expand Down Expand Up @@ -61,13 +103,8 @@ export default class Analytics extends Vue {
type: "pie",
data: {
datasets: [{
data: tierAmount,
backgroundColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(153, 102, 255, 1)",
],
data: this.delegationArray,
backgroundColor: ["#fbafaf", "#f3e8cb", "#f2c6b4", "#7bceee"],
label: "Total Tiers",
}],
labels: tierKeys,
Expand All @@ -84,15 +121,6 @@ export default class Analytics extends Vue {
data: timeIntervalChunks,
backgroundColor: [
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
"rgba(3, 169, 244, 0.5)",
],
label: "Amount of LOOM staked",
}],
Expand All @@ -103,8 +131,14 @@ export default class Analytics extends Vue {
xAxes: [{
type: "time",
}],
yAxes: [{
type: "logarithmic",
}]
},
},
ticks: {
autoSkip: true,
}
}
const pieChart = new Chart(ctx, config)
Expand All @@ -116,8 +150,21 @@ export default class Analytics extends Vue {
return Math.round(Math.random() * 100)
}
getDaily() {
const today = new Date().toISOString()
const nowTime = new Date().toLocaleTimeString("it-IT")
const fromDate = today.replace(today.substring(11), "00:00:00")
const toDate = today.replace(today.substring(11), nowTime)
return { fromDate, toDate }
}
}
</script>

<style lang="scss" scoped>
.period-select {
margin-top: 0.5%;
width: 50%;
float: right;
}
</style>

0 comments on commit 0c6c5db

Please sign in to comment.