From 913e0e3fe3166eab56cd84776969b79b0e831683 Mon Sep 17 00:00:00 2001 From: GussevPM Date: Fri, 12 Jul 2024 12:00:53 +0200 Subject: [PATCH 01/45] Add stats page, highlight cards, blocks feed --- app.vue | 2 +- assets/icons.json | 4 +- assets/styles/base.scss | 3 + components/modules/stats/BlocksFeed.vue | 249 +++++++++++++++++++++ components/modules/stats/HighlightCard.vue | 136 +++++++++++ pages/block/[height].vue | 2 +- pages/stats.vue | 157 +++++++++++++ services/api/block.js | 4 +- 8 files changed, 552 insertions(+), 5 deletions(-) create mode 100644 components/modules/stats/BlocksFeed.vue create mode 100644 components/modules/stats/HighlightCard.vue create mode 100644 pages/stats.vue diff --git a/app.vue b/app.vue index c49bf0c7..127cd5a5 100644 --- a/app.vue +++ b/app.vue @@ -34,7 +34,7 @@ onMounted(async () => { const runtimeConfig = useRuntimeConfig() amp.init(runtimeConfig.public.AMP) - const data = await fetchLatestBlocks({ limit: 15 }) + const data = await fetchLatestBlocks({ limit: 100 }) appStore.latestBlocks = data appStore.isLatestBlocksLoaded = true diff --git a/assets/icons.json b/assets/icons.json index 495acd8e..150a9119 100644 --- a/assets/icons.json +++ b/assets/icons.json @@ -177,5 +177,7 @@ "rollup": "m10.558 22.234c-0.16 0.0187-0.3549-0.0895-0.74462-0.3059-1.6664-0.9253-4.695-2.6071-6.4762-3.5967l-0.06317-0.0348c-0.23113-0.1274-0.52173-0.2874-0.74489-0.5296-0.19295-0.2094-0.33897-0.4575-0.4283-0.7279-0.10332-0.3127-0.10211-0.6445-0.10115-0.9083l1.8e-4 -0.0722c0-1.963 0.00254-5.3023 0.0041-7.1685 3.8e-4 -0.44834 5.6e-4 -0.67251 0.09511-0.8034 0.08247-0.11418 0.20931-0.18829 0.34928-0.20408 0.16045-0.01809 0.35621 0.09203 0.74775 0.31227l7.396 4.1603c0.1485 0.0835 0.2227 0.1253 0.2767 0.1844 0.0478 0.0522 0.084 0.114 0.1061 0.1813 0.025 0.0761 0.025 0.1612 0.025 0.3316v8.1752c0 0.4472 0 0.6708-0.094 0.8016-0.0821 0.1141-0.2083 0.1884-0.3479 0.2047zm11.437-13.344c-4e-4 -0.44833-6e-4 -0.67249-0.0951-0.80338-0.0825-0.11419-0.2093-0.1883-0.3493-0.20408-0.1604-0.0181-0.3562 0.09202-0.7477 0.31226l-7.396 4.1603c-0.1485 0.0835-0.2227 0.1253-0.2767 0.1843-0.0478 0.0523-0.084 0.1141-0.1061 0.1814-0.025 0.076-0.025 0.1612-0.025 0.3315v8.1753c0 0.4472 0 0.6708 0.094 0.8016 0.0821 0.1141 0.2083 0.1884 0.3479 0.2047 0.16 0.0187 0.3549-0.0895 0.7446-0.3059 1.6663-0.9253 4.695-2.6071 6.4762-3.5967l0.0631-0.0348c0.2311-0.1273 0.5218-0.2874 0.7449-0.5296 0.193-0.2094 0.339-0.4575 0.4283-0.7279 0.1034-0.3127 0.1021-0.6445 0.1012-0.9083l-2e-4 -0.0722c0-1.963-0.0025-5.3023-0.0041-7.1685zm-6.6793 0.09647-8.9752-4.9862c-0.75973 0.42226-1.4682 0.81608-2.031 1.1289-0.40825 0.22692-0.61237 0.34039-0.68058 0.49034-0.05947 0.13073-0.05985 0.28072-0.00105 0.41175 0.06746 0.1503 0.27118 0.2649 0.67862 0.49408l7.3001 4.1064c0.143 0.0804 0.2146 0.1207 0.2904 0.1365 0.0671 0.0139 0.1364 0.0139 0.2035 0 0.0759-0.0158 0.1474-0.0561 0.2905-0.1365zm-2.9137-7.8015c-0.2658-0.05467-0.54-0.05467-0.8058 0-0.3073 0.06319-0.5819 0.21702-0.8003 0.33931l-0.0595 0.03325c-0.654 0.36336-1.4759 0.82007-2.3369 1.2986l8.9628 4.9794 2.3291-1.3101c0.4074-0.22919 0.6112-0.34378 0.6786-0.49408 0.0588-0.13103 0.0584-0.28102-1e-3 -0.41175-0.0682-0.14996-0.2724-0.26342-0.6806-0.49035-1.6814-0.9346-4.6637-2.5922-6.4266-3.5716l-0.0595-0.03325c-0.2184-0.12229-0.493-0.27612-0.8003-0.33931z", "rollup-plus": "m 9.81388,21.9281 c 0.38972,0.2164 0.58462,0.3246 0.74462,0.3059 0.1396,-0.0163 0.2658,-0.0906 0.3479,-0.2047 0.094,-0.1308 0.094,-0.3544 0.094,-0.8016 v -8.1752 c 0,-0.1704 0,-0.2555 -0.025,-0.3316 -0.0221,-0.0673 -0.0583,-0.1291 -0.1061,-0.1813 -0.054,-0.0591 -0.1282,-0.1009 -0.2767,-0.1844 L 3.19661,8.19493 C 2.80507,7.97469 2.60931,7.86457 2.44886,7.88266 2.30889,7.89845 2.18205,7.97256 2.09958,8.08674 2.00503,8.21763 2.00485,8.4418 2.00447,8.89014 2.00291,10.7563 2.00037,14.0956 2.00037,16.0586 l -1.8e-4,0.0722 c -9.6e-4,0.2638 -0.00217,0.5956 0.10115,0.9083 0.08933,0.2704 0.23535,0.5185 0.4283,0.7279 0.22316,0.2422 0.51376,0.4022 0.74489,0.5296 l 0.06317,0.0348 c 1.78119,0.9896 4.80982,2.6714 6.47618,3.5967 z M 21.9959,8.89012 C 21.9955,8.44179 21.9953,8.21763 21.9008,8.08674 21.8183,7.97255 21.6915,7.89844 21.5515,7.88266 21.3911,7.86456 21.1953,7.97468 20.8038,8.19492 l -7.396,4.16028 c -0.1485,0.0835 -0.2227,0.1253 -0.2767,0.1843 -0.0478,0.0523 -0.084,0.1141 -0.1061,0.1814 C 13,12.7969 13,12.8821 13,13.0524 v 8.1753 c 0,0.4472 0,0.6708 0.094,0.8016 0.0821,0.1141 0.2083,0.1884 0.3479,0.2047 0.16,0.0187 0.3549,-0.0895 0.7446,-0.3059 0.0912,-0.0506 0.1865,-0.1035 0.2855,-0.1585 0.4993,-0.2773 0.749,-0.4159 0.8176,-0.5277 0.0829,-0.1349 0.0906,-0.1711 0.0696,-0.3281 C 15.3418,20.7839 15.0956,20.4575 14.6033,19.8047 14.2246,19.3025 14,18.6775 14,18 c 0,-1.6569 1.3431,-3 3,-3 0,-1.6569 1.3431,-3 3,-3 0.1346,0 0.267,0.0089 0.3969,0.026 0.7767,0.1027 1.1651,0.154 1.2864,0.1056 0.145,-0.0578 0.1748,-0.084 0.2511,-0.2202 0.0637,-0.114 0.0635,-0.3888 0.0631,-0.9385 -5e-4,-0.7796 -0.0011,-1.50243 -0.0016,-2.08278 z M 6.3414,4.00037 15.3166,8.98659 12.3919,10.6318 c -0.1431,0.0804 -0.2146,0.1207 -0.2905,0.1365 -0.0671,0.0139 -0.1364,0.0139 -0.2035,0 -0.0758,-0.0158 -0.1474,-0.0561 -0.2904,-0.1365 L 4.30741,6.52543 C 3.89997,6.29625 3.69625,6.18165 3.62879,6.03135 3.56999,5.90032 3.57037,5.75033 3.62984,5.6196 3.69805,5.46965 3.90217,5.35618 4.31042,5.12926 Z m 5.2557,-2.81532 c 0.2658,-0.05467 0.54,-0.05467 0.8058,0 0.3073,0.06319 0.5819,0.21702 0.8003,0.33931 l 0.0595,0.03325 c 1.7629,0.9794 4.7452,2.63705 6.4266,3.57165 0.4082,0.22693 0.6124,0.34039 0.6806,0.49035 0.0594,0.13073 0.0598,0.28072 10e-4,0.41175 -0.0674,0.1503 -0.2712,0.26489 -0.6786,0.49408 L 17.3632,7.83555 8.40039,2.85619 10.7373,1.55761 10.7968,1.52436 c 0.2184,-0.12229 0.493,-0.27612 0.8003,-0.33931 z M 21,15 c 0,-0.5523 -0.4477,-1 -1,-1 -0.5523,0 -1,0.4477 -1,1 v 2 h -2 c -0.5523,0 -1,0.4477 -1,1 0,0.5523 0.4477,1 1,1 h 2 v 2 c 0,0.5523 0.4477,1 1,1 0.5523,0 1,-0.4477 1,-1 v -2 h 2 c 0.5523,0 1,-0.4477 1,-1 0,-0.5523 -0.4477,-1 -1,-1 h -2 z", "l2beat": "M3.50521 3.54966C6.19251 1.25356 9.65297 1.67202 11.9929 3.71691C14.3301 1.67124 17.7537 1.28246 20.4709 3.54089C23.4445 6.01238 23.8016 10.2274 21.5118 13.1739C20.7167 14.197 19.2374 15.6826 17.7545 17.0967C16.255 18.5267 14.6963 19.9356 13.7042 20.8209L13.6822 20.8405C13.5197 20.9856 13.3571 21.1307 13.2072 21.2444C13.0387 21.3721 12.8318 21.5036 12.5679 21.5828C12.1958 21.6944 11.7907 21.6944 11.4186 21.5828C11.1547 21.5036 10.9478 21.3721 10.7793 21.2444C10.6294 21.1307 10.4669 20.9857 10.3043 20.8405L10.2823 20.8209C9.29019 19.9356 7.73154 18.5267 6.23203 17.0967C4.74915 15.6826 3.26977 14.197 2.47471 13.1739C0.176093 10.216 0.598423 6.03328 3.50521 3.54966ZM11.9488 8.18372C11.8209 7.80002 11.4744 7.53114 11.071 7.50247C10.6675 7.4738 10.2866 7.69098 10.1057 8.05274L8.88209 10.4999H8.50012C7.94784 10.4999 7.50012 10.9476 7.50012 11.4999C7.50012 12.0522 7.94784 12.4999 8.50012 12.4999H9.50012C9.87889 12.4999 10.2251 12.2859 10.3945 11.9471L10.8149 11.1065L12.0514 14.8161C12.1793 15.1998 12.5258 15.4687 12.9292 15.4974C13.3327 15.5261 13.7136 15.3089 13.8945 14.9471L15.1181 12.4999H15.5001C16.0524 12.4999 16.5001 12.0522 16.5001 11.4999C16.5001 10.9476 16.0524 10.4999 15.5001 10.4999H14.5001C14.1213 10.4999 13.7751 10.7139 13.6057 11.0527L13.1853 11.8934L11.9488 8.18372Z", - "blockscout": "M 10.078125 3.554688 C 10.078125 3.066406 9.6875 2.667969 9.207031 2.667969 L 7.148438 2.667969 C 6.667969 2.667969 6.277344 3.066406 6.277344 3.554688 L 6.277344 5.660156 C 6.277344 6.152344 5.890625 6.550781 5.410156 6.550781 L 3.476562 6.550781 C 2.996094 6.550781 2.609375 6.949219 2.609375 7.441406 L 2.609375 20.421875 C 2.609375 20.914062 2.996094 21.3125 3.476562 21.3125 L 5.539062 21.3125 C 6.019531 21.3125 6.410156 20.914062 6.410156 20.421875 L 6.410156 7.441406 C 6.410156 6.949219 6.796875 6.550781 7.277344 6.550781 L 9.207031 6.550781 C 9.6875 6.550781 10.078125 6.152344 10.078125 5.660156 Z M 17.679688 3.554688 C 17.679688 3.066406 17.289062 2.667969 16.808594 2.667969 L 14.746094 2.667969 C 14.265625 2.667969 13.878906 3.066406 13.878906 3.554688 L 13.878906 5.660156 C 13.878906 6.152344 14.265625 6.550781 14.746094 6.550781 L 16.679688 6.550781 C 17.160156 6.550781 17.546875 6.949219 17.546875 7.441406 L 17.546875 20.421875 C 17.546875 20.914062 17.9375 21.3125 18.417969 21.3125 L 20.476562 21.3125 C 20.957031 21.3125 21.347656 20.914062 21.347656 20.421875 L 21.347656 7.441406 C 21.347656 6.949219 20.957031 6.550781 20.476562 6.550781 L 18.546875 6.550781 C 18.066406 6.550781 17.679688 6.152344 17.679688 5.660156 Z M 13.878906 10.992188 C 13.878906 10.5 13.488281 10.101562 13.007812 10.101562 L 10.949219 10.101562 C 10.46875 10.101562 10.078125 10.5 10.078125 10.992188 L 10.078125 16.761719 C 10.078125 17.25 10.46875 17.648438 10.949219 17.648438 L 13.007812 17.648438 C 13.488281 17.648438 13.878906 17.25 13.878906 16.761719 Z M 13.878906 10.992188" + "blockscout": "M 10.078125 3.554688 C 10.078125 3.066406 9.6875 2.667969 9.207031 2.667969 L 7.148438 2.667969 C 6.667969 2.667969 6.277344 3.066406 6.277344 3.554688 L 6.277344 5.660156 C 6.277344 6.152344 5.890625 6.550781 5.410156 6.550781 L 3.476562 6.550781 C 2.996094 6.550781 2.609375 6.949219 2.609375 7.441406 L 2.609375 20.421875 C 2.609375 20.914062 2.996094 21.3125 3.476562 21.3125 L 5.539062 21.3125 C 6.019531 21.3125 6.410156 20.914062 6.410156 20.421875 L 6.410156 7.441406 C 6.410156 6.949219 6.796875 6.550781 7.277344 6.550781 L 9.207031 6.550781 C 9.6875 6.550781 10.078125 6.152344 10.078125 5.660156 Z M 17.679688 3.554688 C 17.679688 3.066406 17.289062 2.667969 16.808594 2.667969 L 14.746094 2.667969 C 14.265625 2.667969 13.878906 3.066406 13.878906 3.554688 L 13.878906 5.660156 C 13.878906 6.152344 14.265625 6.550781 14.746094 6.550781 L 16.679688 6.550781 C 17.160156 6.550781 17.546875 6.949219 17.546875 7.441406 L 17.546875 20.421875 C 17.546875 20.914062 17.9375 21.3125 18.417969 21.3125 L 20.476562 21.3125 C 20.957031 21.3125 21.347656 20.914062 21.347656 20.421875 L 21.347656 7.441406 C 21.347656 6.949219 20.957031 6.550781 20.476562 6.550781 L 18.546875 6.550781 C 18.066406 6.550781 17.679688 6.152344 17.679688 5.660156 Z M 13.878906 10.992188 C 13.878906 10.5 13.488281 10.101562 13.007812 10.101562 L 10.949219 10.101562 C 10.46875 10.101562 10.078125 10.5 10.078125 10.992188 L 10.078125 16.761719 C 10.078125 17.25 10.46875 17.648438 10.949219 17.648438 L 13.007812 17.648438 C 13.488281 17.648438 13.878906 17.25 13.878906 16.761719 Z M 13.878906 10.992188", + "line-chart": "M3.5,18.5L9.5,12.5L13.5,16.5L22,6.92L20.59,5.5L13.5,13.5L9.5,9.5L2,17L3.5,18.5Z", + "bar-chart": "M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z" } diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 3f1fe147..b2fd6f55 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -40,6 +40,7 @@ $grayscale: ( --green: #0ade71; --neutral-green: #33a853; --purple: #5856de; + --mint: #18D2A5; /* Grayscale */ @each $gray, $value in $grayscale { @@ -104,6 +105,7 @@ $grayscale: ( --green: #0ade71; --neutral-green: #33a853; --purple: #5856de; + --mint: #18D2A5; /* Grayscale */ @each $gray, $value in $grayscale { @@ -160,6 +162,7 @@ $grayscale: ( --green: #26c071; --neutral-green: #33a853; --purple: #5856de; + --mint: #18D2A5; /* Grayscale */ @each $gray, $value in $grayscale { diff --git a/components/modules/stats/BlocksFeed.vue b/components/modules/stats/BlocksFeed.vue new file mode 100644 index 00000000..dabe1e89 --- /dev/null +++ b/components/modules/stats/BlocksFeed.vue @@ -0,0 +1,249 @@ + + + + + diff --git a/components/modules/stats/HighlightCard.vue b/components/modules/stats/HighlightCard.vue new file mode 100644 index 00000000..5597871a --- /dev/null +++ b/components/modules/stats/HighlightCard.vue @@ -0,0 +1,136 @@ + + + + + diff --git a/pages/block/[height].vue b/pages/block/[height].vue index a4f529a7..722ca154 100644 --- a/pages/block/[height].vue +++ b/pages/block/[height].vue @@ -105,7 +105,7 @@ const displayName = computed(() => { - + diff --git a/pages/stats.vue b/pages/stats.vue new file mode 100644 index 00000000..7c01fe19 --- /dev/null +++ b/pages/stats.vue @@ -0,0 +1,157 @@ + + + + + diff --git a/services/api/block.js b/services/api/block.js index 6535f52d..d96fb80e 100644 --- a/services/api/block.js +++ b/services/api/block.js @@ -29,13 +29,13 @@ export const fetchBlocksCount = async () => { } } -export const fetchLatestBlocks = async () => { +export const fetchLatestBlocks = async ({ limit }) => { try { const url = new URL(`${useServerURL()}/block`) url.searchParams.append("stats", true) url.searchParams.append("sort", "desc") - url.searchParams.append("limit", 15) + url.searchParams.append("limit", limit ? limit : 15) const data = await $fetch(url.href) return data From e1d5c6ac48d3ec365fb464315905333975b2bd0f Mon Sep 17 00:00:00 2001 From: GussevPM Date: Sun, 14 Jul 2024 02:45:34 +0200 Subject: [PATCH 02/45] Stats v1 --- assets/styles/base.scss | 6 + components/modules/rollup/RollupCharts.vue | 8 +- components/modules/stats/BlocksFeed.vue | 1 - components/modules/stats/ChartCardPreview.vue | 257 ++++++++++++++++++ components/modules/stats/DiffChip.vue | 75 +++++ components/modules/stats/HighlightCard.vue | 40 ++- pages/stats.vue | 101 ++++++- services/api/stats.js | 9 + services/constants/stats.js | 88 ++++++ 9 files changed, 560 insertions(+), 25 deletions(-) create mode 100644 components/modules/stats/ChartCardPreview.vue create mode 100644 components/modules/stats/DiffChip.vue create mode 100644 services/constants/stats.js diff --git a/assets/styles/base.scss b/assets/styles/base.scss index b2fd6f55..e2777c78 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -34,6 +34,7 @@ $grayscale: ( --brand: #924dff; --blue: #076acd; --red: #eb5757; + --dark-red: #592121; --orange: #ff5a17; --light-orange: #ff8351; --yellow: #ffd400; @@ -41,6 +42,7 @@ $grayscale: ( --neutral-green: #33a853; --purple: #5856de; --mint: #18D2A5; + --dark-mint: #0E3F34; /* Grayscale */ @each $gray, $value in $grayscale { @@ -99,6 +101,7 @@ $grayscale: ( --brand: #924dff; --blue: #0b84fe; --red: #eb5757; + --dark-red: #592121; --orange: #ff5a17; --light-orange: #ff8351; --yellow: #ffd400; @@ -106,6 +109,7 @@ $grayscale: ( --neutral-green: #33a853; --purple: #5856de; --mint: #18D2A5; + --dark-mint: #0E3F34; /* Grayscale */ @each $gray, $value in $grayscale { @@ -156,6 +160,7 @@ $grayscale: ( --brand: #924dff; --blue: #0b84fe; --red: #eb5757; + --dark-red: #592121; --orange: #ff5a17; --light-orange: #ff8351; --yellow: #e5c10b; @@ -163,6 +168,7 @@ $grayscale: ( --neutral-green: #33a853; --purple: #5856de; --mint: #18D2A5; + --dark-mint: #0E3F34; /* Grayscale */ @each $gray, $value in $grayscale { diff --git a/components/modules/rollup/RollupCharts.vue b/components/modules/rollup/RollupCharts.vue index b56b47c4..c3596773 100644 --- a/components/modules/rollup/RollupCharts.vue +++ b/components/modules/rollup/RollupCharts.vue @@ -283,7 +283,7 @@ const getFeeSeries = async () => { } } -const buildNamespaceCharts = async () => { +const buildRollupCharts = async () => { await getSizeSeries() buildChart( sizeSeriesChartEl.value.wrapper, @@ -312,18 +312,18 @@ const buildNamespaceCharts = async () => { watch( () => selectedPeriodIdx.value, () => { - buildNamespaceCharts() + buildRollupCharts() }, ) const debouncedRedraw = useDebounceFn((e) => { - buildNamespaceCharts() + buildRollupCharts() }, 500) onMounted(async () => { window.addEventListener("resize", debouncedRedraw) - buildNamespaceCharts() + buildRollupCharts() }) onBeforeUnmount(() => { diff --git a/components/modules/stats/BlocksFeed.vue b/components/modules/stats/BlocksFeed.vue index dabe1e89..14cb0592 100644 --- a/components/modules/stats/BlocksFeed.vue +++ b/components/modules/stats/BlocksFeed.vue @@ -32,7 +32,6 @@ const props = defineProps({ }) const isLoading = ref(false) -// console.log('appStore', appStore); const blocks = computed(() => appStore.latestBlocks.slice(0, 80).sort((a, b) => a.height - b.height)) diff --git a/components/modules/stats/ChartCardPreview.vue b/components/modules/stats/ChartCardPreview.vue new file mode 100644 index 00000000..8c3bbf1e --- /dev/null +++ b/components/modules/stats/ChartCardPreview.vue @@ -0,0 +1,257 @@ + + + + + diff --git a/components/modules/stats/DiffChip.vue b/components/modules/stats/DiffChip.vue new file mode 100644 index 00000000..48607753 --- /dev/null +++ b/components/modules/stats/DiffChip.vue @@ -0,0 +1,75 @@ + + + + + \ No newline at end of file diff --git a/components/modules/stats/HighlightCard.vue b/components/modules/stats/HighlightCard.vue index 5597871a..c0a4b1f7 100644 --- a/components/modules/stats/HighlightCard.vue +++ b/components/modules/stats/HighlightCard.vue @@ -7,29 +7,35 @@ // import Tooltip from "@/components/ui/Tooltip.vue" /** Services */ -import { capitilize, comma, shortHex } from "@/services/utils" +import { abbreviate, capitilize, comma, formatBytes, shortHex, tia } from "@/services/utils" /** API */ import { fetchNetworks, fetchCommitments, fetchCommitmentsByNetwork } from "@/services/api/blobstream"; +/** Stats Components */ +import DiffChip from "@/components/modules/stats/DiffChip.vue" + const props = defineProps({ - series: { - type: Object, - required: false, - }, - period: { + highlight: { type: Object, - required: false, - }, - active: { - type: Boolean, - default: false, + required: true, }, }) const isLoading = ref(false) - +const value = computed(() => { + if (props.highlight.name === 'blocks') return comma(props.highlight.value) + + switch (props.highlight.units) { + case 'bytes': + return formatBytes(props.highlight.value) + case 'utia': + return abbreviate(tia(props.highlight.value)) + default: + return abbreviate(props.highlight.value) + } +}) @@ -41,15 +47,19 @@ const isLoading = ref(false) - Blocks + {{ highlight.title }} - 1,836,234 + + {{ value }} + - + + + diff --git a/pages/stats.vue b/pages/stats.vue index 7c01fe19..d1e2b368 100644 --- a/pages/stats.vue +++ b/pages/stats.vue @@ -1,18 +1,28 @@ + + + + \ No newline at end of file diff --git a/components/modules/stats/ShareTotalBars2.vue b/components/modules/stats/ShareTotalBars2.vue new file mode 100644 index 00000000..80e8023d --- /dev/null +++ b/components/modules/stats/ShareTotalBars2.vue @@ -0,0 +1,215 @@ + + + + + \ No newline at end of file diff --git a/components/modules/stats/tabs/BlocksTab.vue b/components/modules/stats/tabs/BlocksTab.vue new file mode 100644 index 00000000..ffc409b1 --- /dev/null +++ b/components/modules/stats/tabs/BlocksTab.vue @@ -0,0 +1,21 @@ + + + + + \ No newline at end of file diff --git a/components/modules/stats/tabs/GeneralTab.vue b/components/modules/stats/tabs/GeneralTab.vue new file mode 100644 index 00000000..13e63c15 --- /dev/null +++ b/components/modules/stats/tabs/GeneralTab.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/pages/stats.vue b/pages/stats.vue index d1e2b368..1850f817 100644 --- a/pages/stats.vue +++ b/pages/stats.vue @@ -1,28 +1,7 @@ @@ -143,7 +89,7 @@ await get24hDiffs() /> - + Celestia Statistics @@ -153,41 +99,8 @@ await get24hDiffs() - - - - - - - - - Overview - - - - - - - - - - - - + + @@ -206,13 +119,7 @@ await get24hDiffs() margin-bottom: 16px; } -.section { - margin-top: 20px; -} - .tabs_wrapper { - /* padding-bottom: 16px; */ - border-bottom: solid 3px var(--op-5); } @@ -228,10 +135,6 @@ await get24hDiffs() border-bottom: solid 3px var(--txt-primary); } -.charts_wrapper { - flex-wrap: wrap; -} - @media (max-width: 500px) { .wrapper { padding: 32px 12px; diff --git a/services/api/stats.js b/services/api/stats.js index a517255f..4dcd71da 100644 --- a/services/api/stats.js +++ b/services/api/stats.js @@ -109,3 +109,12 @@ export const fetchRollupSeries = async ({ id, name, timeframe, from, to }) => { console.error(error) } } + +export const fetchSquareSize = async () => { + try { + const data = await $fetch(`${useServerURL()}/stats/square_size`) + return data + } catch (error) { + console.error(error) + } +} From 8a9489dc9e4dae71b018ae0e3c8c0a7aa7104a2e Mon Sep 17 00:00:00 2001 From: GussevPM Date: Sun, 14 Jul 2024 23:37:10 +0200 Subject: [PATCH 05/45] Change colors --- components/modules/stats/ShareTotalBars2.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/modules/stats/ShareTotalBars2.vue b/components/modules/stats/ShareTotalBars2.vue index 80e8023d..fe7ede01 100644 --- a/components/modules/stats/ShareTotalBars2.vue +++ b/components/modules/stats/ShareTotalBars2.vue @@ -15,7 +15,7 @@ const buildChart = (chart) => { const marginRight = 0; const marginBottom = 10; const marginLeft = 10; - const barWidth = Math.round((width - marginLeft - marginRight) / (transformedData.value.length) - 10) + const barWidth = Math.round((width - marginLeft - marginRight) / (transformedData.value.length) - 1) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) @@ -56,8 +56,7 @@ const buildChart = (chart) => { const color = d3.scaleSequential() .domain([-0.5 * keys.value.length, 1.5 * keys.value.length]) - // .interpolator(d3.interpolateRgb("white", "red")); - .interpolator(d3.interpolateRgb("#65efcc", "#0E3F34")); + .interpolator(d3.interpolateRgb("#0E3F34", "#65efcc")); // Добавляем ось x // svg.append("g") From 110b051699a9cd40c8d5c1d48c5c423d745214fb Mon Sep 17 00:00:00 2001 From: GussevPM Date: Mon, 15 Jul 2024 00:01:02 +0200 Subject: [PATCH 06/45] Fix data calculation --- components/modules/stats/ShareTotalBars2.vue | 45 +++++++++++++++----- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/components/modules/stats/ShareTotalBars2.vue b/components/modules/stats/ShareTotalBars2.vue index fe7ede01..cdff6085 100644 --- a/components/modules/stats/ShareTotalBars2.vue +++ b/components/modules/stats/ShareTotalBars2.vue @@ -112,25 +112,48 @@ const getSquareSizes = async () => { const data = await fetchSquareSize() keys.value = Object.keys(data); - keys.value.forEach(key => { - data["1"].forEach((d, i) => { - if (d.time !== data[key][i].time) { - data[key].splice(i, 0, { time: d.time, value: "0" }) - } - }) - }) - - data["1"].forEach((d, i) => { + + let maxLength = 0; + let maxKey = null; + + for (const key in data) { + if (data[key].length > maxLength) { + maxLength = data[key].length; + maxKey = key; + } + } + + const templateArray = data[maxKey]; + const templateTimes = templateArray.map(item => item.time); + const filledData = {}; + for (const key in data) { + filledData[key] = templateTimes.map(time => { + const found = data[key].find(item => item.time === time); + return found ? found : { time: time, value: "0" }; + }); + } + // keys.value.forEach(key => { + // console.log(key); + // data["1"].forEach((d, i) => { + // console.log(data[key][i]); + // if (d.time !== data[key][i].time) { + // console.log(d.time, data[key][i].time); + // data[key].splice(i, 0, { time: d.time, value: "0" }) + // } + // }) + // }) + + filledData[maxKey].forEach((d, i) => { let entry = { time: d.time }; keys.value.forEach(key => { - entry[key] = +data[key][i].value; + entry[key] = +filledData[key][i].value; }); transformedData.value.push(entry); }); transformedData.value.reverse() // console.log('keys.value', keys.value); - console.log('transformedData.value', transformedData.value); + // console.log('transformedData.value', transformedData.value); // xz.value = [] // xz.value = data[32].reverse().map(item => DateTime.fromISO(item.time).toJSDate()) From 8ffafba4aa996546f521bedc4acaf001bbcf33b9 Mon Sep 17 00:00:00 2001 From: GussevPM Date: Mon, 15 Jul 2024 21:12:18 +0200 Subject: [PATCH 07/45] General tab v1 --- assets/icons.json | 3 +- assets/styles/base.scss | 7 +- components/modules/stats/ChartCardPreview.vue | 3 - components/modules/stats/InsightCard.vue | 285 ++++++++++++++++++ components/modules/stats/ShareTotalBars.vue | 155 ++++------ components/modules/stats/ShareTotalBars2.vue | 237 --------------- components/modules/stats/tabs/BlocksTab.vue | 6 +- components/modules/stats/tabs/GeneralTab.vue | 30 +- components/modules/stats/tabs/RollupsTab.vue | 6 + services/api/stats.js | 11 +- services/constants/stats.js | 33 +- 11 files changed, 425 insertions(+), 351 deletions(-) create mode 100644 components/modules/stats/InsightCard.vue delete mode 100644 components/modules/stats/ShareTotalBars2.vue create mode 100644 components/modules/stats/tabs/RollupsTab.vue diff --git a/assets/icons.json b/assets/icons.json index 150a9119..189e3df3 100644 --- a/assets/icons.json +++ b/assets/icons.json @@ -179,5 +179,6 @@ "l2beat": "M3.50521 3.54966C6.19251 1.25356 9.65297 1.67202 11.9929 3.71691C14.3301 1.67124 17.7537 1.28246 20.4709 3.54089C23.4445 6.01238 23.8016 10.2274 21.5118 13.1739C20.7167 14.197 19.2374 15.6826 17.7545 17.0967C16.255 18.5267 14.6963 19.9356 13.7042 20.8209L13.6822 20.8405C13.5197 20.9856 13.3571 21.1307 13.2072 21.2444C13.0387 21.3721 12.8318 21.5036 12.5679 21.5828C12.1958 21.6944 11.7907 21.6944 11.4186 21.5828C11.1547 21.5036 10.9478 21.3721 10.7793 21.2444C10.6294 21.1307 10.4669 20.9857 10.3043 20.8405L10.2823 20.8209C9.29019 19.9356 7.73154 18.5267 6.23203 17.0967C4.74915 15.6826 3.26977 14.197 2.47471 13.1739C0.176093 10.216 0.598423 6.03328 3.50521 3.54966ZM11.9488 8.18372C11.8209 7.80002 11.4744 7.53114 11.071 7.50247C10.6675 7.4738 10.2866 7.69098 10.1057 8.05274L8.88209 10.4999H8.50012C7.94784 10.4999 7.50012 10.9476 7.50012 11.4999C7.50012 12.0522 7.94784 12.4999 8.50012 12.4999H9.50012C9.87889 12.4999 10.2251 12.2859 10.3945 11.9471L10.8149 11.1065L12.0514 14.8161C12.1793 15.1998 12.5258 15.4687 12.9292 15.4974C13.3327 15.5261 13.7136 15.3089 13.8945 14.9471L15.1181 12.4999H15.5001C16.0524 12.4999 16.5001 12.0522 16.5001 11.4999C16.5001 10.9476 16.0524 10.4999 15.5001 10.4999H14.5001C14.1213 10.4999 13.7751 10.7139 13.6057 11.0527L13.1853 11.8934L11.9488 8.18372Z", "blockscout": "M 10.078125 3.554688 C 10.078125 3.066406 9.6875 2.667969 9.207031 2.667969 L 7.148438 2.667969 C 6.667969 2.667969 6.277344 3.066406 6.277344 3.554688 L 6.277344 5.660156 C 6.277344 6.152344 5.890625 6.550781 5.410156 6.550781 L 3.476562 6.550781 C 2.996094 6.550781 2.609375 6.949219 2.609375 7.441406 L 2.609375 20.421875 C 2.609375 20.914062 2.996094 21.3125 3.476562 21.3125 L 5.539062 21.3125 C 6.019531 21.3125 6.410156 20.914062 6.410156 20.421875 L 6.410156 7.441406 C 6.410156 6.949219 6.796875 6.550781 7.277344 6.550781 L 9.207031 6.550781 C 9.6875 6.550781 10.078125 6.152344 10.078125 5.660156 Z M 17.679688 3.554688 C 17.679688 3.066406 17.289062 2.667969 16.808594 2.667969 L 14.746094 2.667969 C 14.265625 2.667969 13.878906 3.066406 13.878906 3.554688 L 13.878906 5.660156 C 13.878906 6.152344 14.265625 6.550781 14.746094 6.550781 L 16.679688 6.550781 C 17.160156 6.550781 17.546875 6.949219 17.546875 7.441406 L 17.546875 20.421875 C 17.546875 20.914062 17.9375 21.3125 18.417969 21.3125 L 20.476562 21.3125 C 20.957031 21.3125 21.347656 20.914062 21.347656 20.421875 L 21.347656 7.441406 C 21.347656 6.949219 20.957031 6.550781 20.476562 6.550781 L 18.546875 6.550781 C 18.066406 6.550781 17.679688 6.152344 17.679688 5.660156 Z M 13.878906 10.992188 C 13.878906 10.5 13.488281 10.101562 13.007812 10.101562 L 10.949219 10.101562 C 10.46875 10.101562 10.078125 10.5 10.078125 10.992188 L 10.078125 16.761719 C 10.078125 17.25 10.46875 17.648438 10.949219 17.648438 L 13.007812 17.648438 C 13.488281 17.648438 13.878906 17.25 13.878906 16.761719 Z M 13.878906 10.992188", "line-chart": "M3.5,18.5L9.5,12.5L13.5,16.5L22,6.92L20.59,5.5L13.5,13.5L9.5,9.5L2,17L3.5,18.5Z", - "bar-chart": "M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z" + "bar-chart": "M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z", + "crown": "M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z" } diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 11a49d97..b1aa0798 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -42,8 +42,7 @@ $grayscale: ( --neutral-green: #33a853; --purple: #5856de; --mint: #18D2A5; - // --mint: #65efcc; - --dark-mint: #0E3F34; + --dark-mint: #1e473d; /* Grayscale */ @each $gray, $value in $grayscale { @@ -110,7 +109,7 @@ $grayscale: ( --neutral-green: #33a853; --purple: #5856de; --mint: #18D2A5; - --dark-mint: #0E3F34; + --dark-mint: #1e473d; /* Grayscale */ @each $gray, $value in $grayscale { @@ -169,7 +168,7 @@ $grayscale: ( --neutral-green: #33a853; --purple: #5856de; --mint: #18D2A5; - --dark-mint: #0E3F34; + --dark-mint: #1e473d; /* Grayscale */ @each $gray, $value in $grayscale { diff --git a/components/modules/stats/ChartCardPreview.vue b/components/modules/stats/ChartCardPreview.vue index 3d6ea5ac..6687e132 100644 --- a/components/modules/stats/ChartCardPreview.vue +++ b/components/modules/stats/ChartCardPreview.vue @@ -23,9 +23,6 @@ const props = defineProps({ }, }) -// console.log('props.series', props.series); -// console.log('props.period', props.period); - const currentData = ref([]) const prevData = ref([]) const currentTotal = ref(0) diff --git a/components/modules/stats/InsightCard.vue b/components/modules/stats/InsightCard.vue new file mode 100644 index 00000000..39c9a78b --- /dev/null +++ b/components/modules/stats/InsightCard.vue @@ -0,0 +1,285 @@ + + + + + diff --git a/components/modules/stats/ShareTotalBars.vue b/components/modules/stats/ShareTotalBars.vue index 3a3e32e9..0b787f80 100644 --- a/components/modules/stats/ShareTotalBars.vue +++ b/components/modules/stats/ShareTotalBars.vue @@ -14,63 +14,64 @@ const buildChart = (chart) => { const marginTop = 0; const marginRight = 0; const marginBottom = 10; - const marginLeft = 0; - const barWidth = Math.round((width - marginLeft - marginRight) / (xz.value.length) - 10) + const marginLeft = 10; + const barWidth = Math.round((width - marginLeft - marginRight) / (transformedData.value.length) - 1) - // console.log('n.value1', n.value); - const y01z = d3.stack() - .keys(d3.range(n.value)) - (d3.transpose(yz.value)) // stacked yz - .map((data, i) => data.map(([y0, y1]) => [y0, y1, i])); + const svg = d3.create("svg") + .attr("viewBox", [0, 0, width, height]) + .attr("width", width) + .attr("height", height) + .attr("style", "max-width: 100%; height: auto;"); - const yMax = d3.max(yz.value, y => d3.max(y)); - const y1Max = d3.max(y01z, y => d3.max(y, d => d[1])); + const stack = d3.stack() + .keys(keys.value) + .order(d3.stackOrderNone) + .offset(d3.stackOffsetNone); - // const x = d3.scaleBand() - // .domain(xz.value) - // .rangeRound([marginLeft, width - marginRight]) - // .padding(0.08); + const series = stack(transformedData.value); const x = d3.scaleUtc() - .domain(d3.extent(xz.value)) - .range([marginLeft, width - marginRight]) - .nice() - + .domain(d3.extent(transformedData.value, d => new Date(d.time))) + .range([marginLeft, width]) + // .nice(); + + const y1Max = d3.max(series, y => d3.max(y, d => d[1])); const y = d3.scaleLinear() .domain([0, y1Max]) .range([height - marginBottom, marginTop]); - // const color = d3.scaleSequential(d3.interpolateBlues) - // .domain([-0.5 * n, 1.5 * n]); - const color = d3.scaleSequential() - .domain([-1 * n.value, 1 * n.value]) - .interpolator(d3.interpolateRgb("#18D2A5", "#0E3F34")); + // const color = d3.scaleOrdinal() + // .domain(keys.value) + // .range(["#65efcc", "#0E3F34"]); - const svg = d3.create("svg") - .attr("viewBox", [0, 0, width, height]) - .attr("width", width) - .attr("height", height) - .attr("style", "max-width: 100%; height: auto;"); + const color = d3.scaleSequential(d3.piecewise(d3.interpolateRgb, ["#65efcc", "#142f28"])) + .domain([0, keys.value.length]) + // .interpolator(d3.interpolateRgb("#CC6510", "#65efcc")) + // .interpolator(d3.interpolateRgb("#0E3F34", "#65efcc")); + + // Add x-scale + // svg.append("g") + // .attr("transform", `translate(0,${height})`) + // .call(d3.axisBottom(x).ticks(d3.timeDay.every(1)).tickFormat(d3.timeFormat("%Y-%m-%d"))); - const rect = svg.selectAll("g") - .data(y01z) + svg.append("g") + const rect = svg.selectAll(".series") + .data(series) .join("g") .attr("fill", (d, i) => color(i)) .selectAll("rect") .data(d => d) .join("rect") - // .attr("x", (d, i) => x(i)) - .attr("x", d => x(new Date(d))) + .attr("x", d => x(new Date(d.data.time))) .attr("y", height - marginBottom) - // .attr("width", x.bandwidth()) .attr("width", barWidth) - .attr("height", 0); + .attr("height", 0) svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(() => "")); - y.domain([0, y1Max]); + // y.domain([0, y1Max]); rect.transition() .duration(500) @@ -78,80 +79,50 @@ const buildChart = (chart) => { .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .transition() - // .attr("x", (d, i) => x(i)) - // .attr("x", d => x(new Date(d))) - // .attr("width", x.bandwidth()) + .attr("x", d => x(new Date(d.data.time))) .attr("width", barWidth) - + if (chart.children[0]) chart.children[0].remove() chart.append(svg.node()) } -const n = ref(5) //computed(() => xz.value.length) -const m = 5 -const xz = ref([]) // dates -// xz.value = d3.range(m) -// console.log('xz.value', xz.value); -const yz = ref([]) +const transformedData = ref([]) +const keys = ref([]) const getSquareSizes = async () => { const data = await fetchSquareSize() - xz.value = [] - xz.value = data[32].reverse().map(item => DateTime.fromISO(item.time).toJSDate()) - // console.log(data); - // xz.value = data[32].reverse().map((item, i) => i) - console.log(xz.value); - - yz.value = [] - // Object.keys(data).forEach(k => { - // let total = data[k].reduce((sum, el) => { - // return sum + el.value - // }, 0) - - // data[k].forEach(el => { - - // }) - // }) - - Object.keys(data).forEach((k, i) => { - yz.value[i] = [] - data[k].reverse().forEach(el => { - yz.value[i].push(el.value) - }) - }) - n.value = yz.value.length - // console.log(data); - // console.log('yz.value', yz.value); -} -// yz.value = d3.range(n).map(() => bumps(m)) // the y-values of each of the n series -// console.log('yz.value', yz.value); - -function bumps(m) { - const values = []; + keys.value = Object.keys(data); - // Initialize with uniform random values in [0.1, 0.2). - for (let i = 0; i < m; ++i) { - values[i] = 0.1 + 0.1 * Math.random(); - } + let maxLength = 0; + let maxKey = null; - // Add five random bumps. - for (let j = 0; j < 5; ++j) { - const x = 1 / (0.1 + Math.random()); - const y = 2 * Math.random() - 0.5; - const z = 10 / (0.1 + Math.random()); - for (let i = 0; i < m; i++) { - const w = (i / m - y) * z; - values[i] += x * Math.exp(-w * w); + for (const key in data) { + if (data[key].length > maxLength) { + maxLength = data[key].length; + maxKey = key; } } - // Ensure all values are positive. - for (let i = 0; i < m; ++i) { - values[i] = Math.max(0, values[i]); + const templateArray = data[maxKey]; + const templateTimes = templateArray.map(item => item.time); + const filledData = {}; + for (const key in data) { + filledData[key] = templateTimes.map(time => { + const found = data[key].find(item => item.time === time); + return found ? found : { time: time, value: "0" }; + }); } - return values; + filledData[maxKey].forEach((d, i) => { + let entry = { time: d.time }; + keys.value.forEach(key => { + entry[key] = +filledData[key][i].value; + }); + transformedData.value.push(entry); + }); + + transformedData.value.reverse() } onMounted(async () => { diff --git a/components/modules/stats/ShareTotalBars2.vue b/components/modules/stats/ShareTotalBars2.vue deleted file mode 100644 index cdff6085..00000000 --- a/components/modules/stats/ShareTotalBars2.vue +++ /dev/null @@ -1,237 +0,0 @@ - - - - - \ No newline at end of file diff --git a/components/modules/stats/tabs/BlocksTab.vue b/components/modules/stats/tabs/BlocksTab.vue index ffc409b1..7eb22885 100644 --- a/components/modules/stats/tabs/BlocksTab.vue +++ b/components/modules/stats/tabs/BlocksTab.vue @@ -1,7 +1,7 @@ @@ -9,7 +9,9 @@ import ShareTotalBars2 from "@/components/modules/stats/ShareTotalBars2.vue" - + + + diff --git a/components/modules/stats/tabs/GeneralTab.vue b/components/modules/stats/tabs/GeneralTab.vue index 13e63c15..ae2106b2 100644 --- a/components/modules/stats/tabs/GeneralTab.vue +++ b/components/modules/stats/tabs/GeneralTab.vue @@ -10,9 +10,10 @@ import Tooltip from "@/components/ui/Tooltip.vue" import BlocksFeed from "@/components/modules/stats/BlocksFeed.vue" import ChartCardPreview from "@/components/modules/stats/ChartCardPreview.vue" import HighlightCard from "@/components/modules/stats/HighlightCard.vue" +import InsightCard from "@/components/modules/stats/InsightCard.vue" /** Constants */ -import { getSeriesByGroupAndType, STATS_PERIODS } from "@/services/constants/stats.js" +import { getInsightsByGroup, getSeriesByGroupAndType, STATS_PERIODS } from "@/services/constants/stats.js" /** Services */ import { comma, tia } from "@/services/utils" @@ -61,11 +62,12 @@ const periods = ref(STATS_PERIODS) const selectedPeriod = ref(periods.value[1]) const series = computed(() => getSeriesByGroupAndType('General')) +const insights = computed(() => getInsightsByGroup('General')) const get24hDiffs = async () => { isLoading.value = true - const data = await fetch24hDiffs() + const data = await fetch24hDiffs({ name: 'changes_24h' }) diffs24h.value = data isLoading.value = false @@ -75,12 +77,28 @@ await get24hDiffs()