Pie charts legend links, replace download button

Author: GusevPM

components/modules/stats/PieChartCard.vue

@@ -27,6 +27,8 @@ const props = defineProps({
     },
 })
 
+const router = useRouter()
+
 const resData = ref([])
 const total = ref(0)
 
@@ -37,6 +39,7 @@ const prepareRollupsData = () => {
         resData.value.push(
             {
                 name: el.name,
+                slug: el.slug,
                 value: props.series.units === 'utia' ? Math.round(el[key], 2) : el[key],
             }
         )
@@ -201,6 +204,12 @@ const init = () => {
     })
 }
 
+const handleNavigate = (el) => {
+    if (el.slug) {
+        router.push(`/rollup/${el.slug}`)
+    }
+}
+
 onMounted(() => {
     init()
 })
@@ -222,6 +231,7 @@ watch(
 		<Flex align="center" justify="between" wide>
             <Flex align="center" direction="column" gap="16" wide :class="$style.legend_wrapper">
                 <Flex v-for="(el, index) in resData"
+                    @click="handleNavigate(el)"
                     align="center"
                     justify="between" wide
                     :style="{ animationDelay: `${index * 0.1}s` }"
@@ -231,6 +241,7 @@ watch(
                         { 
                             [$style.legend_item]: true,
                             [$style.fadein]: true,
+                            [$style.clickable]: el.name !== 'Other',
                          }
                     ]"
                 >
@@ -300,6 +311,10 @@ watch(
 	margin-right: 6px;
 }
 
+.clickable {
+    cursor: pointer;
+}
+
 .chart_wrapper {
     width: 155px;
 	height: 155px;

pages/blob.vue

@@ -226,6 +226,9 @@ const handleCopy = (text) => {
 					<Icon name="blob" size="12" color="secondary" />
 					Select blob
 				</Button>
+				<Button @click="handleDownload" type="secondary" size="mini" wide>
+					<Icon name="download" size="14" color="secondary" />
+				</Button>
 				<Button @click="modalsStore.open('hexSettings')" size="mini" type="secondary">
 					<Icon name="settings" size="12" color="secondary" />
 				</Button>
@@ -417,54 +420,47 @@ const handleCopy = (text) => {
 								</Flex>
 							</Flex>
 
-							<Flex direction="column" gap="16">
+							<Flex direction="column" gap="8">
+								<Text size="12" weight="600" color="tertiary"> Commitment </Text>
+								<Text
+									size="12"
+									weight="600"
+									color="secondary"
+									selectable
+									style="text-overflow: ellipsis; overflow: hidden"
+								>
+									{{ blob.commitment }}
+								</Text>
+							</Flex>
+
+							<NuxtLink :to="`/address/${metadata.signer}`" target="_blank">
 								<Flex direction="column" gap="8">
-									<Text size="12" weight="600" color="tertiary"> Commitment </Text>
-									<Text
-										size="12"
-										weight="600"
-										color="secondary"
-										selectable
-										style="text-overflow: ellipsis; overflow: hidden"
-									>
-										{{ blob.commitment }}
+									<Text size="12" weight="600" color="tertiary"> Signer </Text>
+									<Text size="12" weight="600" color="secondary" style="text-overflow: ellipsis; overflow: hidden">
+										{{ metadata.signer }}
 									</Text>
 								</Flex>
+							</NuxtLink>
 
-								<NuxtLink :to="`/address/${metadata.signer}`" target="_blank">
-									<Flex direction="column" gap="8">
-										<Text size="12" weight="600" color="tertiary"> Signer </Text>
-										<Text size="12" weight="600" color="secondary" style="text-overflow: ellipsis; overflow: hidden">
-											{{ metadata.signer }}
-										</Text>
-									</Flex>
-								</NuxtLink>
-
-								<NuxtLink v-if="metadata.rollup" :to="`/rollup/${metadata.rollup.slug}`" target="_blank">
-									<Flex direction="column" gap="8">
-										<Text size="12" weight="600" color="tertiary"> Rollup </Text>
+							<NuxtLink v-if="metadata.rollup" :to="`/rollup/${metadata.rollup.slug}`" target="_blank">
+								<Flex direction="column" gap="8">
+									<Text size="12" weight="600" color="tertiary"> Rollup </Text>
 
-										<Flex align="center" gap="8">
-											<Flex align="center" justify="center" :class="$style.avatar_container">
-												<img :src="metadata.rollup.logo" :class="$style.avatar_image" />
-											</Flex>
-											<Text
-												size="12"
-												weight="600"
-												color="secondary"
-												style="text-overflow: ellipsis; overflow: hidden"
-											>
-												{{ metadata.rollup.name }}
-											</Text>
+									<Flex align="center" gap="8">
+										<Flex align="center" justify="center" :class="$style.avatar_container">
+											<img :src="metadata.rollup.logo" :class="$style.avatar_image" />
 										</Flex>
+										<Text
+											size="12"
+											weight="600"
+											color="secondary"
+											style="text-overflow: ellipsis; overflow: hidden"
+										>
+											{{ metadata.rollup.name }}
+										</Text>
 									</Flex>
-								</NuxtLink>
-							</Flex>
-
-							<Button @click="handleDownload" type="secondary" size="small" wide>
-								<Icon name="download" size="14" color="secondary" />
-								<Text>Download</Text>
-							</Button>
+								</Flex>
+							</NuxtLink>
 						</Flex>
 					</Flex>