From f29b673b58389f6e8da499ecfb26aad9e4c18670 Mon Sep 17 00:00:00 2001 From: GussevPM Date: Mon, 17 Mar 2025 17:08:19 +0100 Subject: [PATCH 01/31] Add staked chart for rollups statistic --- components/modals/ChartModal.vue | 3 +- components/modules/stats/BarplotChartCard.vue | 10 - .../modules/stats/BarplotStakedChart.vue | 410 ++++++++++++++++++ components/modules/stats/ChartCardPreview.vue | 8 +- components/modules/stats/PieChartCard.vue | 30 +- pages/stats/[metric].vue | 396 +++++++++++------ services/api/stats.js | 14 + services/config.js | 4 +- services/constants/stats.js | 6 + 9 files changed, 712 insertions(+), 169 deletions(-) create mode 100644 components/modules/stats/BarplotStakedChart.vue diff --git a/components/modals/ChartModal.vue b/components/modals/ChartModal.vue index 1fdd28b1..0085afff 100644 --- a/components/modals/ChartModal.vue +++ b/components/modals/ChartModal.vue @@ -11,7 +11,7 @@ import Modal from "@/components/ui/Modal.vue" /** Stats Components/Constants */ import BarChart from "@/components/modules/stats/BarChart.vue" import LineChart from "@/components/modules/stats/LineChart.vue" -import SquareSizeChart from "@/components/modules/stats/SquareSizeChart.vue" +import BarplotStakedChart from "@/components/modules/stats/BarplotStakedChart.vue" /** Store */ import { useCacheStore } from "@/store/cache" @@ -43,6 +43,7 @@ watch( + diff --git a/components/modules/stats/BarplotChartCard.vue b/components/modules/stats/BarplotChartCard.vue index 7da2f42b..6dc28d88 100644 --- a/components/modules/stats/BarplotChartCard.vue +++ b/components/modules/stats/BarplotChartCard.vue @@ -1,16 +1,6 @@ + + + + \ No newline at end of file diff --git a/components/modules/stats/ChartCardPreview.vue b/components/modules/stats/ChartCardPreview.vue index 70eb6957..29573433 100644 --- a/components/modules/stats/ChartCardPreview.vue +++ b/components/modules/stats/ChartCardPreview.vue @@ -481,8 +481,12 @@ watch( padding: 16px; } -.link:hover { - fill: var(--txt-secondary) +.link { + transition: fill 0.3s ease; + + &:hover { + fill: var(--txt-secondary) + } } .header { diff --git a/components/modules/stats/PieChartCard.vue b/components/modules/stats/PieChartCard.vue index fbf3d454..f75f2499 100644 --- a/components/modules/stats/PieChartCard.vue +++ b/components/modules/stats/PieChartCard.vue @@ -1,17 +1,10 @@ @@ -447,7 +537,7 @@ onBeforeMount(() => { + {{ `${metricName} Chart` }} - - + + + - - + + + + + + + + + + + + + + - - + -
+
- + - - - - + - + + -
# Rollup + DA Change - - Activity Rank - + Category @@ -431,23 +415,11 @@ watch( /> - - Today Blobs - - - + - Commits + Blobs + - Avg PFB Size + Blob Fees Paid Latest ActivityPaid per MB
- + {{ r.index }} - + - +
- +
+ + +
+ + + - - - {{ r?.name }} - - - {{ getDisplayName(r?.category) }} - - + + {{ r.name }} +
- - - - {{ r?.rank_category?.name }} - - - - {{ `${r?.rounded_rank}/10` }} - - - {{ `${r?.stats?.ranking?.rank}%` }} - - + + + - + + + {{ getDisplayName(r.category) }} + + + + - {{ formatBytes(r?.size) }} + {{ formatBytes(r.size) }} - {{ truncateDecimalPart(r?.size_pct * 100, 2) }}% + {{ truncateDecimalPart(r.size_pct * 100, 2) }}% @@ -539,18 +534,13 @@ watch( - - - {{ comma(r?.stats?.day_blobs_count) }} - - - - + - + - {{ comma(r?.stats?.commits_weekly) }} + {{ comma(r.blobs_count) }} + + {{ truncateDecimalPart(r.blobs_count_pct * 100, 2) }}% diff --git a/store/rollupsrank.js b/store/rollupsrank.js index 70a377c0..dacbcac0 100644 --- a/store/rollupsrank.js +++ b/store/rollupsrank.js @@ -53,7 +53,7 @@ export const useRollupsRankingStore = defineStore("rollups_ranking", () => { if (!slug) continue let repos = await fetchRollupOrgReposBySlug({ slug, limit }) - repos = sortArrayOfObjects(repos?.data?.value, "last_pushed_at", false) + repos = sortArrayOfObjects(repos, "last_pushed_at", false) const summCommits = repos.reduce((acc, r) => acc + r.commits_weekly, 0) maxWeeklyCommits = Math.max(maxWeeklyCommits, summCommits) if (!rollupsRanking.value[slug]) { From dbba7aedc1a76fe4e63403e45acaf738aaa8c90d Mon Sep 17 00:00:00 2001 From: GussevPM Date: Sat, 5 Apr 2025 21:43:20 +0200 Subject: [PATCH 13/31] Add ranking page --- components/Feed.vue | 69 +++- components/Icon.vue | 24 +- components/modules/rollup/RollupOverview.vue | 67 +++- .../activity => rollup/rank}/[slug].vue | 311 +++++++++--------- pages/rollups/index.vue | 26 +- services/constants/rollups.js | 19 +- services/utils/general.js | 39 ++- store/rollupsrank.js | 19 +- 8 files changed, 348 insertions(+), 226 deletions(-) rename pages/{rollups/activity => rollup/rank}/[slug].vue (72%) diff --git a/components/Feed.vue b/components/Feed.vue index 6c28169a..94f33b11 100644 --- a/components/Feed.vue +++ b/components/Feed.vue @@ -3,7 +3,8 @@ import { DateTime } from "luxon" /** Services */ -import { comma, formatBytes, abbreviate } from "@/services/utils" +import { abbreviate, comma, formatBytes, roundTo } from "@/services/utils" +import { getRankCategory } from "@/services/constants/rollups" /** UI */ import Tooltip from "@/components/ui/Tooltip.vue" @@ -13,7 +14,9 @@ import { fetchPriceSeries } from "@/services/api/stats" /** Store */ import { useAppStore } from "@/store/app" +import { useRollupsRankingStore } from "@/store/rollupsrank" const appStore = useAppStore() +const rollupRankingStore = useRollupsRankingStore() const head = computed(() => appStore.lastHead) const currentPrice = computed(() => appStore.currentPrice) @@ -22,6 +25,18 @@ const totalSupply = computed(() => head.value.total_supply / 1_000_000) const totalSupplyUSD = computed(() => totalSupply.value * currentPrice.value?.close) const totalFees = computed(() => head.value.total_fee / 1_000_000) const totalFeesUSD = computed(() => totalFees.value * currentPrice.value?.close) +const topRollup = computed(() => { + let rankCategory = getRankCategory(roundTo(rollupRankingStore?.rollups_ranking?.top_rollup?.rank / 10, 0)) + return { + slug: rollupRankingStore?.rollups_ranking?.top_rollup?.slug, + name: rollupRankingStore?.rollups_ranking?.top_rollup?.name, + rank: { + name: rankCategory?.name, + score: rollupRankingStore?.rollups_ranking?.top_rollup?.rank, + color: rankCategory?.color, + } + } +}) const series = ref([]) const price = reactive({ @@ -49,14 +64,44 @@ onMounted(async () => {