From 5ffa213b14bde1f9903d9eb46b51d505e70e32fc Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Sun, 31 Mar 2024 19:39:40 +0800
Subject: [PATCH] add block chart

---
 src/components/charts/TxsInBlocksChart.vue | 44 ++++++++++++++++++++++
 src/modules/[chain]/block/index.vue        |  8 +++-
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/components/charts/TxsInBlocksChart.vue

diff --git a/src/components/charts/TxsInBlocksChart.vue b/src/components/charts/TxsInBlocksChart.vue
new file mode 100644
index 00000000..6e630782
--- /dev/null
+++ b/src/components/charts/TxsInBlocksChart.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import ApexCharts from 'vue3-apexcharts';
+import { computed, ref } from '@vue/reactivity';
+import { useBaseStore } from '@/stores';
+
+const baseStore = useBaseStore();
+
+const options = computed(() => {
+    return {
+        chart: {
+            type: 'bar',
+            height: 150
+        },
+        plotOptions: {
+            bar: {
+                // borderRadius: 4,
+                horizontal: false,
+            }
+        },
+        dataLabels: {
+          enabled: false
+        },
+        colors: ['#5A67D8'],
+        xaxis: {
+            labels: {
+                show: false,
+                rotate: -45
+            },
+            show: false,
+            categories: baseStore.recents.map((x) => x.block.header.height).concat(Array(50-baseStore.recents.length).fill('')),
+        }
+    };
+});
+const series = computed(() => {
+    return [{
+        name: 'Txs',
+        data: baseStore.recents?.map((x) => x.block.data.txs.length) || []
+    }]
+});
+</script>
+
+<template>
+    <ApexCharts type="bar" height="150" :options="options" :series="series" />
+</template>
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index 0b3b2919..f18a3dec 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from '@vue/reactivity';
 import { useBaseStore, useFormatter } from '@/stores';
+import TxsInBlocksChart from '@/components/charts/TxsInBlocksChart.vue';
+
 const props = defineProps(['chain']);
 
 const tab = ref('blocks');
@@ -25,8 +27,11 @@ const list = computed(() => {
                 >{{ $t('block.future') }}</RouterLink>
         </div>
 
-        <div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3">
+        <div v-show="tab === 'blocks'">
 
+            <TxsInBlocksChart />
+
+            <div class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3">
             <RouterLink v-for="item in list"
                 class="flex flex-col justify-between rounded p-4 shadow bg-base-100"
                 :to="`/${chain}/block/${item.block.header.height}`">
@@ -45,6 +50,7 @@ const list = computed(() => {
                     <span class="text-right mt-1 whitespace-nowrap"> {{ item.block?.data?.txs.length }} txs </span>
                 </div>
             </RouterLink>
+            </div>
         </div>
     </div>
 </template>