cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rounds implemented + over all improvements

Browse Source
This commit is contained in:
EmberSpirit
2023-07-10 21:18:05 +02:00
parent 86f4e97f23
commit 9565f494ea
12 changed files with 350 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BloodChart.vue
+32 -23
View File
@@ -1,15 +1,15 @@
<template>
<div class="blood-chart-wrapper">
<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
<div class="blood-chart-wrapper" v-if="props.data">
<div class="blood-chart-element" v-for="coin in props.data.token" :key="coin.name">
<div class="blood-chart-element-header">
<div class="blood-chart-coin">
<img :src="getImageUrl(coin.icon)" alt="logo" />
<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
</div>
<div class="blood-chart-coin-title">{{ coin.name }}</div>
</div>
<div class="blood-chart-element-body">
<div class="blood-chart-bar-wrapper">
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">
<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
@@ -39,12 +39,14 @@
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</div>
<div class="blood-chart-bar-percentage">{{ coin.percentage }}%</div>
<div class="blood-chart-bar-percentage">{{ getPercentage(coin.amount, props.data.goal) }}%</div>
</div>
</div>
</div>
<div class="blood-chart-element-footer">
<div class="blood-chart-amount">130,4b</div>
<div class="blood-chart-amount">
{{ compactNumber(coin.amount) }}
</div>
<div class="blood-chart-coin">$BLOOD</div>
</div>
</div>
@@ -52,27 +54,34 @@
</template>
<script setup>
import { getPercentage, compactNumber } from "@/helper/helper.js";
const props = defineProps({
data: Array,
});
console.log(props.data);
function getImageUrl(url) {
return new URL(url, import.meta.url).href;
}
const dataPoints = [
{
name: "$PEPE",
percentage: 62.2,
icon: "/src/assets/img/token/pepevamp.png",
},
{
name: "$SHIB",
percentage: 31.2,
icon: "/src/assets/img/token/shibvamp.png",
},
{
name: "$ELON",
percentage: 54.5,
icon: "/src/assets/img/token/elonvamp.png",
},
];
// const dataPoints = [
// {
// name: "$PEPE",
// percentage: 62.2,
// icon: "/src/assets/img/token/pepevamp.png",
// },
// {
// name: "$SHIB",
// percentage: 31.2,
// icon: "/src/assets/img/token/shibvamp.png",
// },
// {
// name: "$ELON",
// percentage: 54.5,
// icon: "/src/assets/img/token/elonvamp.png",
// },
// ];
</script>
<style lang="sass">