From 75094fce6c49311c7e3089a288f34de3425a5eb4 Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Sun, 1 Dec 2024 16:37:52 +0100
Subject: [PATCH] Percentage instead of raw values for items :)

---
 frontend/components/ItemViewer.vue | 10 +++++-----
 frontend/components/TreeItem.vue   |  7 ++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/components/ItemViewer.vue b/frontend/components/ItemViewer.vue
index ec12d15..b756de5 100644
--- a/frontend/components/ItemViewer.vue
+++ b/frontend/components/ItemViewer.vue
@@ -31,7 +31,7 @@ function trimBuilds(builds : Builds) {
             <NuxtImg v-if="item.data != null && item.data != undefined" 
                 class="item-img" width="64" height="64" :alt="item.data.toString()" 
                 :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>
@@ -46,7 +46,7 @@ function trimBuilds(builds : Builds) {
             <NuxtImg v-if="item.data != null && item.data != undefined"  
                 class="item-img" width="64" height="64" :alt="item.data.toString()" 
                 :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>
@@ -63,7 +63,7 @@ function trimBuilds(builds : Builds) {
             <NuxtImg v-if="item.data != null && item.data != undefined" 
                 class="item-img" width="64" height="64" :alt="item.data.toString()" 
                 :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>
@@ -78,7 +78,7 @@ function trimBuilds(builds : Builds) {
             <NuxtImg v-if="item.data != null && item.data != undefined"
                  class="item-img" width="64" height="64" :alt="item.data.toString()" 
                  :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>
             
@@ -87,7 +87,7 @@ function trimBuilds(builds : Builds) {
             <NuxtImg v-if="item.data != null && item.data != undefined"
                  class="item-img" width="64" height="64" :alt="item.data.toString()" 
                  :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>
 
diff --git a/frontend/components/TreeItem.vue b/frontend/components/TreeItem.vue
index cb4efac..28346fb 100644
--- a/frontend/components/TreeItem.vue
+++ b/frontend/components/TreeItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
-    tree: ItemTree
+    tree: ItemTree,
+    parentCount?: number
 }>()
 
 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;">
         <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 style="margin-left: 30px;">
             <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>