Percentage instead of raw values for items :)
This commit is contained in:
@@ -31,7 +31,7 @@ function trimBuilds(builds : Builds) {
|
|||||||
<NuxtImg v-if="item.data != null && item.data != undefined"
|
<NuxtImg v-if="item.data != null && item.data != undefined"
|
||||||
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
||||||
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
||||||
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
|
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -46,7 +46,7 @@ function trimBuilds(builds : Builds) {
|
|||||||
<NuxtImg v-if="item.data != null && item.data != undefined"
|
<NuxtImg v-if="item.data != null && item.data != undefined"
|
||||||
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
||||||
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
||||||
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
|
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -63,7 +63,7 @@ function trimBuilds(builds : Builds) {
|
|||||||
<NuxtImg v-if="item.data != null && item.data != undefined"
|
<NuxtImg v-if="item.data != null && item.data != undefined"
|
||||||
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
||||||
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
||||||
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
|
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -78,7 +78,7 @@ function trimBuilds(builds : Builds) {
|
|||||||
<NuxtImg v-if="item.data != null && item.data != undefined"
|
<NuxtImg v-if="item.data != null && item.data != undefined"
|
||||||
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
||||||
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
||||||
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
|
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -87,7 +87,7 @@ function trimBuilds(builds : Builds) {
|
|||||||
<NuxtImg v-if="item.data != null && item.data != undefined"
|
<NuxtImg v-if="item.data != null && item.data != undefined"
|
||||||
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
class="item-img" width="64" height="64" :alt="item.data.toString()"
|
||||||
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
:src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
|
||||||
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ item.count }}</h3>
|
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
tree: ItemTree
|
tree: ItemTree,
|
||||||
|
parentCount?: number
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -95,12 +96,12 @@ function handleRefresh() {
|
|||||||
|
|
||||||
<div v-if="tree.data != undefined && tree.data != null" style="width: fit-content; height: fit-content;">
|
<div v-if="tree.data != undefined && tree.data != null" style="width: fit-content; height: fit-content;">
|
||||||
<img ref="start" class="item-img" width="64" height="64" :alt="tree.data.toString()" :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)" />
|
<img ref="start" class="item-img" width="64" height="64" :alt="tree.data.toString()" :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)" />
|
||||||
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ tree.count }}</h3>
|
<h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-left: 30px;">
|
<div style="margin-left: 30px;">
|
||||||
<div style="width: fit-content; height: fit-content;" v-for="child in tree.children">
|
<div style="width: fit-content; height: fit-content;" v-for="child in tree.children">
|
||||||
<TreeItem @refresh="handleRefresh" @mount="(end) => handleSubtreeMount(end)" :tree="child" />
|
<TreeItem @refresh="handleRefresh" @mount="(end) => handleSubtreeMount(end)" :tree="child" :parent-count="tree.count" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user