Skip to content

Commit bb51a61

Browse files
GusevPMGusevPM
authored
Merge pull request #82 from celenium-io/CLS-255-rollups-analytics
Add shares to rollup overview
2 parents e62ccd8 + 1f92236 commit bb51a61

File tree

4 files changed

+80
-42
lines changed

4 files changed

+80
-42
lines changed

‎components/modules/rollup/RollupCharts.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import { abbreviate, formatBytes, tia } from "@/services/utils"
1515
import { fetchRollupSeries } from "@/services/api/stats"
1616
1717
const props = defineProps({
18-
id: {
19-
type: String,
18+
rollup: {
19+
type: Object,
2020
required: true,
2121
},
2222
})
@@ -190,7 +190,7 @@ const getSizeSeries = async () => {
190190
sizeSeries.value = []
191191
192192
const sizeSeriesRawData = await fetchRollupSeries({
193-
id: props.id,
193+
id: props.rollup.id,
194194
name: "size",
195195
timeframe: selectedPeriod.value.timeframe,
196196
from: parseInt(
@@ -223,7 +223,7 @@ const getPfbSeries = async () => {
223223
pfbSeries.value = []
224224
225225
const blobsSeriesRawData = await fetchRollupSeries({
226-
id: props.id,
226+
id: props.rollup.id,
227227
name: "blobs_count",
228228
timeframe: selectedPeriod.value.timeframe,
229229
from: parseInt(
@@ -255,7 +255,7 @@ const getFeeSeries = async () => {
255255
feeSeries.value = []
256256
257257
const feeSeriesRawData = await fetchRollupSeries({
258-
id: props.id,
258+
id: props.rollup.id,
259259
name: "fee",
260260
timeframe: selectedPeriod.value.timeframe,
261261
from: parseInt(
@@ -628,7 +628,6 @@ onBeforeUnmount(() => {
628628
<Flex ref="feeSeriesChartEl" :class="$style.chart" />
629629
</Flex>
630630
</Flex>
631-
632631
</Flex>
633632
</Flex>
634633
</Flex>

‎components/modules/rollup/RollupOverview.vue‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import BlobsTable from "./tables/BlobsTable.vue"
1515
import NamespacesTable from "./tables/NamespacesTable.vue"
1616
1717
/** Services */
18-
import { comma, formatBytes } from "@/services/utils"
18+
import { comma, formatBytes, truncateDecimalPart } from "@/services/utils"
1919
2020
/** API */
2121
import { fetchRollupBlobs, fetchRollupExportData, fetchRollupNamespaces } from "@/services/api/rollup"
@@ -355,20 +355,65 @@ const handleCSVDownload = async (period) => {
355355
356356
<Flex align="center" justify="between">
357357
<Text size="12" weight="600" color="tertiary">Size</Text>
358-
<Text size="12" weight="600" color="secondary"> {{ formatBytes(rollup.size) }} </Text>
358+
359+
<Tooltip position="start" delay="400">
360+
<Flex align="center" gap="4">
361+
<Text size="12" weight="600" color="secondary"> {{ formatBytes(rollup.size) }} </Text>
362+
363+
<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.size_pct * 100, 2)}%)` }}</Text>
364+
</Flex>
365+
366+
<template #content>
367+
<Flex align="end" gap="8">
368+
<Text size="12" weight="600" color="tertiary">Share of total size</Text>
369+
370+
<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.size_pct * 100, 2)}%)` }}</Text>
371+
</Flex>
372+
</template>
373+
</Tooltip>
359374
</Flex>
360375
361376
<Flex align="center" justify="between">
362377
<Text size="12" weight="600" color="tertiary">Blobs</Text>
363-
<Text size="12" weight="600" color="secondary"> {{ comma(rollup.blobs_count) }} </Text>
378+
379+
<Tooltip position="start" delay="400">
380+
<Flex align="center" gap="4">
381+
<Text size="12" weight="600" color="secondary"> {{ comma(rollup.blobs_count) }} </Text>
382+
383+
<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.blobs_count_pct * 100, 2)}%)` }}</Text>
384+
</Flex>
385+
386+
<template #content>
387+
<Flex align="end" gap="8">
388+
<Text size="12" weight="600" color="tertiary">Share of total blobs count</Text>
389+
390+
<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.blobs_count_pct * 100, 2)}%)` }}</Text>
391+
</Flex>
392+
</template>
393+
</Tooltip>
364394
</Flex>
365395
366396
<Flex align="center" justify="between">
367397
<Text size="12" weight="600" color="tertiary">Blob Fees Paid</Text>
368-
<AmountInCurrency
369-
:amount="{ value: rollup.fee }"
370-
:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
371-
/>
398+
399+
<Tooltip position="start" delay="400">
400+
<Flex align="center" gap="4">
401+
<AmountInCurrency
402+
:amount="{ value: rollup.fee }"
403+
:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
404+
/>
405+
406+
<Text size="12" weight="600" color="tertiary">{{ `(${truncateDecimalPart(rollup.fee_pct * 100, 2)}%)` }}</Text>
407+
</Flex>
408+
409+
<template #content>
410+
<Flex align="end" gap="8">
411+
<Text size="12" weight="600" color="tertiary">Share of total fee paid</Text>
412+
413+
<Text size="12" weight="600" color="primary">{{ `(${truncateDecimalPart(rollup.fee_pct * 100, 2)}%)` }}</Text>
414+
</Flex>
415+
</template>
416+
</Tooltip>
372417
</Flex>
373418
374419
<Flex align="start" justify="between">

‎pages/rollup/[slug].vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ useHead({
9999
<RollupOverview v-if="rollup" :rollup="rollup" />
100100
</Flex>
101101
102-
<RollupCharts v-if="rollup" :id="rollup.id" />
102+
<RollupCharts v-if="rollup" :rollup="rollup" />
103103
</Flex>
104104
</template>
105105

‎pages/rollups.vue‎

Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
1010
import AmountInCurrency from "@/components/AmountInCurrency.vue"
1111
1212
/** Services */
13-
import { formatBytes, comma, shareOfTotalString } from "@/services/utils"
13+
import { formatBytes, comma, truncateDecimalPart } from "@/services/utils"
1414
1515
/** API */
1616
import { fetchRollups, fetchRollupsCount } from "@/services/api/rollup"
@@ -70,18 +70,6 @@ const isRefetching = ref(false)
7070
const rollups = ref([])
7171
const count = ref(0)
7272
73-
const totalSize = computed(() =>
74-
rollups.value.reduce((acc, rollup) => {
75-
return acc + rollup.size
76-
}, 0),
77-
)
78-
79-
const totalFee = computed(() =>
80-
rollups.value.reduce((acc, rollup) => {
81-
return acc + +rollup.fee
82-
}, 0),
83-
)
84-
8573
const utiaPerMB = (rollup) => {
8674
let totalRollupMB = rollup.size / (1024 * 1024)
8775
@@ -304,18 +292,14 @@ const handleNext = () => {
304292
<Flex direction="column" gap="4">
305293
<Text size="13" weight="600" color="primary">{{ formatBytes(r.size) }}</Text>
306294

307-
<Text size="12" weight="600" color="tertiary"
308-
>{{ shareOfTotalString(r.size, totalSize) }}%</Text
309-
>
295+
<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.size_pct * 100, 2) }}%</Text>
310296
</Flex>
311297

312298
<template #content>
313299
<Flex align="end" gap="8">
314300
<Text size="12" weight="600" color="tertiary">Share of total size</Text>
315301

316-
<Text size="12" weight="600" color="primary"
317-
>{{ shareOfTotalString(r.size, totalSize) }}%</Text
318-
>
302+
<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.size_pct * 100, 2) }}%</Text>
319303
</Flex>
320304
</template>
321305
</Tooltip>
@@ -324,8 +308,22 @@ const handleNext = () => {
324308
</td>
325309
<td>
326310
<NuxtLink :to="`/rollup/${r.slug}`">
327-
<Flex align="center">
328-
<Text size="13" weight="600" color="primary">{{ comma(r.blobs_count) }}</Text>
311+
<Flex align="start" justify="center" direction="column" gap="4">
312+
<Tooltip position="start" delay="400">
313+
<Flex direction="column" gap="4">
314+
<Text size="13" weight="600" color="primary">{{ comma(r.blobs_count) }}</Text>
315+
316+
<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
317+
</Flex>
318+
319+
<template #content>
320+
<Flex align="end" gap="8">
321+
<Text size="12" weight="600" color="tertiary">Share of total blobs count</Text>
322+
323+
<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}%</Text>
324+
</Flex>
325+
</template>
326+
</Tooltip>
329327
</Flex>
330328
</NuxtLink>
331329
</td>
@@ -335,17 +333,13 @@ const handleNext = () => {
335333
<AmountInCurrency :amount="{ value: r.fee }" />
336334

337335
<Tooltip position="start" delay="400">
338-
<Text size="12" weight="600" color="tertiary"
339-
>{{ shareOfTotalString(r.fee, totalFee) }}%</Text
340-
>
336+
<Text size="12" weight="600" color="tertiary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
341337

342338
<template #content>
343339
<Flex align="end" gap="8">
344-
<Text size="12" weight="600" color="tertiary">Share of total fee</Text>
340+
<Text size="12" weight="600" color="tertiary">Share of total fee paid</Text>
345341

346-
<Text size="12" weight="600" color="primary"
347-
>{{ shareOfTotalString(r.fee, totalFee) }}%</Text
348-
>
342+
<Text size="12" weight="600" color="primary">{{ truncateDecimalPart(r.fee_pct * 100, 2) }}%</Text>
349343
</Flex>
350344
</template>
351345
</Tooltip>

0 commit comments

Comments
 (0)