Skip to content

Commit dfa30d2

Browse files
GusevPMGusevPM
committed
Add tvl metric page
1 parent 43db1e5 commit dfa30d2

5 files changed

Lines changed: 62 additions & 34 deletions

File tree

‎components/modules/stats/BarChart.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
101101
return `${tia(value, 2)} TIA`
102102
case 'seconds':
103103
return `${truncateDecimalPart(value / 1_000, 3)}s`
104+
case 'usd':
105+
return `${abbreviate(value)} $`
104106
default:
105107
return comma(value)
106108
}

‎components/modules/stats/ChartCardPreview.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,12 @@ const getSeries = async () => {
6161
} else if (props.series.name === "tvs") {
6262
data = (await fetchTVS({
6363
period: props.period.timeframe,
64-
}))
65-
66-
data = data.slice(0, 62).reverse()
64+
from: parseInt(
65+
DateTime.now().minus({
66+
days: props.period.timeframe === "day" ? props.period.value * 2 : 0,
67+
hours: props.period.timeframe === "hour" ? props.period.value * 2 : 0,
68+
}).ts / 1_000)
69+
})).reverse()
6770
} else {
6871
data = (await fetchSeries({
6972
table: props.series.name,

‎components/modules/stats/LineChart.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,9 @@
33
import * as d3 from "d3"
44
import { DateTime } from "luxon"
55
6-
/** Stats Components */
7-
import DiffChip from "@/components/modules/stats/DiffChip.vue"
8-
96
/** Services */
107
import { abbreviate, comma, formatBytes, tia, truncateDecimalPart } from "@/services/utils"
118
12-
/** API */
13-
import { fetchSeries, fetchSeriesCumulative } from "@/services/api/stats"
14-
159
const props = defineProps({
1610
series: {
1711
type: Object,
@@ -83,6 +77,8 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
8377
return `${tia(value, 2)} TIA`
8478
case 'seconds':
8579
return `${truncateDecimalPart(value / 1_000, 3)}s`
80+
case 'usd':
81+
return `${abbreviate(value)} $`
8682
default:
8783
return comma(value)
8884
}

‎pages/stats/[metric].vue‎

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { exportSVGToPNG, exportToCSV } from "@/services/utils/export"
1414
import { capitalizeAndReplaceUnderscore } from "@/services/utils"
1515
1616
/** API */
17-
import { fetchSeries, fetchSeriesCumulative } from "@/services/api/stats"
17+
import { fetchSeries, fetchSeriesCumulative, fetchTVS } from "@/services/api/stats"
1818
1919
/** UI */
2020
import Button from "@/components/ui/Button.vue"
@@ -97,7 +97,7 @@ useHead({
9797
const periods = ref(STATS_PERIODS)
9898
const selectedPeriod = ref(periods.value[2])
9999
100-
const selectedTimeframe = ref(STATS_TIMEFRAMES.find(tf => tf.timeframe === selectedPeriod.value.timeframe))
100+
const selectedTimeframe = ref(STATS_TIMEFRAMES.find(tf => tf.timeframe === (series.value.name === "tvs" ? "day" : selectedPeriod.value.timeframe)))
101101
const timeframes = computed(() => {
102102
let res = []
103103
@@ -109,6 +109,10 @@ const timeframes = computed(() => {
109109
}
110110
}
111111
112+
if (series.value.name === "tvs") {
113+
res = res.filter(tf => tf.timeframe === "day" || tf.timeframe === "month")
114+
}
115+
112116
return res
113117
})
114118
const timeframesStyles = computed(() => {
@@ -163,7 +167,22 @@ const handleChangeChartView = () => {
163167
const isLoading = ref(false)
164168
const fetchData = async (from, to) => {
165169
let data = []
166-
if (series.value.aggregate !== 'cumulative') {
170+
if (series.value.name === "tvs") {
171+
data = (await fetchTVS({
172+
period: selectedTimeframe.value.timeframe,
173+
from: from
174+
? from
175+
: loadPrevData.value
176+
? parseInt(DateTime.fromSeconds(filters.from).minus({
177+
hours: filters.timeframe === "hour" ? filters.periodValue : 0,
178+
days: filters.timeframe === "day" ? filters.periodValue : 0,
179+
weeks: filters.timeframe === "week" ? filters.periodValue : 0,
180+
months: filters.timeframe === "month" ? filters.periodValue : 0,
181+
}).ts / 1_000)
182+
: filters.from,
183+
to: to ? to : filters.to
184+
}))
185+
} else if (series.value.aggregate !== 'cumulative') {
167186
data = (await fetchSeries({
168187
table: series.value.name,
169188
period: selectedTimeframe.value.timeframe,
@@ -177,9 +196,9 @@ const fetchData = async (from, to) => {
177196
}).ts / 1_000)
178197
: filters.from,
179198
to: to ? to : filters.to
180-
})).reverse()
199+
}))
181200
} else {
182-
data = await fetchSeriesCumulative({
201+
data = (await fetchSeriesCumulative({
183202
name: series.value.name,
184203
period: selectedTimeframe.value.timeframe,
185204
from: loadPrevData.value ? parseInt(DateTime.fromSeconds(filters.from).minus({
@@ -188,7 +207,7 @@ const fetchData = async (from, to) => {
188207
weeks: filters.timeframe === "week" ? filters.periodValue : 0,
189208
}).ts / 1_000) : filters.from,
190209
to: filters.to
191-
})
210+
})).reverse()
192211
}
193212
194213
return data
@@ -198,7 +217,6 @@ const getData = async () => {
198217
199218
let data = await fetchData()
200219
if (data.length) {
201-
data.reverse()
202220
if (loadPrevData.value) {
203221
if (selectedTimeframe.value.timeframe !== filters.timeframe) {
204222
if (data.length % 2 > 0) {
@@ -279,15 +297,25 @@ const handleUpdateDate = async (event) => {
279297
let to = event.to
280298
281299
let daysDiff = Math.round(DateTime.fromSeconds(to).diff(DateTime.fromSeconds(from), 'days').days)
282-
if (daysDiff < 7) {
283-
filters.timeframe = 'hour'
284-
filters.periodValue = Math.round(DateTime.fromSeconds(to).diff(DateTime.fromSeconds(from), 'hours').hours)
285-
} else if (daysDiff < 50) {
286-
filters.timeframe = 'day'
287-
filters.periodValue = daysDiff
300+
if (series.value.name === "tvs") {
301+
if (daysDiff < 50) {
302+
filters.timeframe = 'day'
303+
filters.periodValue = daysDiff
304+
} else {
305+
filters.timeframe = 'month'
306+
filters.periodValue = Math.ceil(daysDiff / 30)
307+
}
288308
} else {
289-
filters.timeframe = 'week'
290-
filters.periodValue = Math.ceil(daysDiff / 7)
309+
if (daysDiff < 7) {
310+
filters.timeframe = 'hour'
311+
filters.periodValue = Math.round(DateTime.fromSeconds(to).diff(DateTime.fromSeconds(from), 'hours').hours)
312+
} else if (daysDiff < 50) {
313+
filters.timeframe = 'day'
314+
filters.periodValue = daysDiff
315+
} else {
316+
filters.timeframe = 'week'
317+
filters.periodValue = Math.ceil(daysDiff / 7)
318+
}
291319
}
292320
293321
if (filters.timeframe === 'hour') {

‎services/constants/stats.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export const STATS_SERIES = [
115115
subGroup: 'economy',
116116
name: 'tvs',
117117
title: 'TVS',
118+
page: 'tvs',
118119
units: 'usd',
119120
},
120121
],
@@ -143,19 +144,23 @@ export function getSeriesByGroupAndType(group, type) {
143144

144145
export function getSeriesByPage(page, aggregate) {
145146
let series = {}
146-
STATS_SERIES.forEach(el => {
147-
el.series.forEach(s => {
147+
for (const p of STATS_SERIES) {
148+
for (const s of p.series) {
148149
if (s.page === page) {
149150
if (aggregate) {
150151
if (s.aggregate === aggregate) {
151152
series = s
153+
break;
152154
}
153155
} else {
154156
series = s
157+
break;
155158
}
156159
}
157-
})
158-
})
160+
}
161+
162+
if (series.page) break;
163+
}
159164

160165
return series
161166
}
@@ -218,9 +223,3 @@ export const STATS_TIMEFRAMES = [
218223
timeframe: 'month',
219224
},
220225
]
221-
222-
export const STATS_HIGHLIGHTS = [
223-
{
224-
group: 'General',
225-
}
226-
]

0 commit comments

Comments
 (0)