From b85a360ae2d4ad90e6339a2d8a8615d6da267166 Mon Sep 17 00:00:00 2001
From: Nadav Spiegelman <me@nadav.name>
Date: Mon, 22 Dec 2025 18:42:17 -0500
Subject: [PATCH 1/7] Disable chart legends

Not necessary/helpful when we display one variable per chart
---
 .../src/components/user-stats/IndexerStatsEvolutions.vue     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/user-stats/IndexerStatsEvolutions.vue b/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
index ca5de0f..8dbb45f 100644
--- a/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
+++ b/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
@@ -32,6 +32,11 @@ const chartOptions = (value: keyof UserProfileScrapedVec) => {
       break
   }
   return {
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
     scales: {
       x: {
         type: 'time',

From 3544460a7590207a6d7259bb9d84c820741d487b Mon Sep 17 00:00:00 2001
From: Nadav Spiegelman <me@nadav.name>
Date: Mon, 22 Dec 2025 18:47:18 -0500
Subject: [PATCH 2/7] Use headings

---
 frontend/src/assets/main.css                                  | 1 -
 frontend/src/components/user-stats/IndexerStatsEvolutions.vue | 2 +-
 frontend/src/components/user-stats/IndexerStatsIncreases.vue  | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index c0d34b6..e2c86f7 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -16,7 +16,6 @@
   width: 100%;
 }
 .title {
-  font-size: 1.1em;
   font-weight: bold;
   margin-bottom: 10px;
 }
diff --git a/frontend/src/components/user-stats/IndexerStatsEvolutions.vue b/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
index 8dbb45f..2637a6a 100644
--- a/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
+++ b/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="indexer-stats-detail">
-    <div class="wrapper-center title">Evolution on the selected period</div>
+    <h2 class="wrapper-center title">Evolution on the selected period</h2>
     <div class="charts">
       <ContentContainer v-for="value in selectedValues" :key="value">
         <Chart type="line" :data="chartData(value)" :options="chartOptions(value)" />
diff --git a/frontend/src/components/user-stats/IndexerStatsIncreases.vue b/frontend/src/components/user-stats/IndexerStatsIncreases.vue
index d95dc83..222aa41 100644
--- a/frontend/src/components/user-stats/IndexerStatsIncreases.vue
+++ b/frontend/src/components/user-stats/IndexerStatsIncreases.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="wrapper-center title">Increase on the selected period</div>
+    <h2 class="wrapper-center title">Increase on the selected period</h2>
     <div class="items">
       <ContentContainer v-for="name in selectedValues" :key="name" class="item">
         <span class="value">{{ postProcessStat(name) }}</span>

From 560b0b42e0b1347ac3be2857404c37677f0cc797 Mon Sep 17 00:00:00 2001
From: Nadav Spiegelman <me@nadav.name>
Date: Mon, 22 Dec 2025 18:50:53 -0500
Subject: [PATCH 3/7] Add heading to charts

---
 .../src/components/user-stats/IndexerStatsEvolutions.vue     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/components/user-stats/IndexerStatsEvolutions.vue b/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
index 2637a6a..dc2e07f 100644
--- a/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
+++ b/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
@@ -3,6 +3,7 @@
     <h2 class="wrapper-center title">Evolution on the selected period</h2>
     <div class="charts">
       <ContentContainer v-for="value in selectedValues" :key="value">
+        <h3 class="chart-heading">{{ value }}</h3>
         <Chart type="line" :data="chartData(value)" :options="chartOptions(value)" />
       </ContentContainer>
     </div>
@@ -94,4 +95,8 @@ const chartData = (value: keyof UserProfileScrapedVec) => {
     height: auto;
   }
 }
+
+.chart-heading {
+  text-align: center;
+}
 </style>

From e8313fd0d4c732c7ce32dbe0cd4c03908d69acdc Mon Sep 17 00:00:00 2001
From: Nadav Spiegelman <me@nadav.name>
Date: Mon, 22 Dec 2025 18:56:45 -0500
Subject: [PATCH 4/7] Show chart heading in Title Case

---
 frontend/package-lock.json                    | 32 +++++++++++++++++++
 frontend/package.json                         |  1 +
 .../user-stats/IndexerStatsEvolutions.vue     |  3 +-
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1eed2b7..3449ba0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,6 +16,7 @@
         "date-fns": "^4.1.0",
         "primeicons": "^7.0.0",
         "primevue": "^4.3.9",
+        "text-title-case": "^1.2.9",
         "vue": "^3.5.18",
         "vue-router": "^4.5.1"
       },
@@ -4956,6 +4957,37 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/text-lower-case": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/text-lower-case/-/text-lower-case-1.2.9.tgz",
+      "integrity": "sha512-53AOnDrhPpiAUQkgY1SHleKUXp/u7GsqRX13NcCREZscmtjLLJ099uxMRjkK7q2KwHkFYVPl9ytkQlTkTQLS0w==",
+      "license": "MIT"
+    },
+    "node_modules/text-no-case": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/text-no-case/-/text-no-case-1.2.9.tgz",
+      "integrity": "sha512-IcCt328KaapimSrytP4ThfC8URmHZb2DgOqCL9BYvGjpxY2lDiqCkIQk9sClZtwcELs2gTnq83a7jNc573FTLA==",
+      "license": "MIT",
+      "dependencies": {
+        "text-lower-case": "1.2.9"
+      }
+    },
+    "node_modules/text-title-case": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/text-title-case/-/text-title-case-1.2.9.tgz",
+      "integrity": "sha512-RAtC9cdmPp41ns5/HXZBsaQg71BsHT7uZpj2ojTtuFa8o2dNuRYYOrSmy5YdLRIAJQ6WK5hQVpV3jHuq7a+4Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "text-no-case": "1.2.9",
+        "text-upper-case-first": "1.2.9"
+      }
+    },
+    "node_modules/text-upper-case-first": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/text-upper-case-first/-/text-upper-case-first-1.2.9.tgz",
+      "integrity": "sha512-wEDD1B6XqJmEV+xEnBJd+2sBCHZ+7fvA/8Rv/o8+dAsp05YWjYP/kjB8sPH6zqzW0s6jtehIg4IlcKjcYxk2CQ==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8fb1450..de5db2b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
     "date-fns": "^4.1.0",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.9",
+    "text-title-case": "^1.2.9",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },
diff --git a/frontend/src/components/user-stats/IndexerStatsEvolutions.vue b/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
index dc2e07f..8a26a5c 100644
--- a/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
+++ b/frontend/src/components/user-stats/IndexerStatsEvolutions.vue
@@ -3,7 +3,7 @@
     <h2 class="wrapper-center title">Evolution on the selected period</h2>
     <div class="charts">
       <ContentContainer v-for="value in selectedValues" :key="value">
-        <h3 class="chart-heading">{{ value }}</h3>
+        <h3 class="chart-heading">{{ titleCase(value) }}</h3>
         <Chart type="line" :data="chartData(value)" :options="chartOptions(value)" />
       </ContentContainer>
     </div>
@@ -13,6 +13,7 @@
 import type { UserProfileVec, UserProfileScrapedVec } from '@/services/api/userStatsService'
 import Chart from 'primevue/chart'
 import ContentContainer from '../ContentContainer.vue'
+import { titleCase } from 'text-title-case'
 import 'chartjs-adapter-date-fns'
 
 const props = defineProps<{

From aa829766e1f175a383a11e1c517d5815aa816d17 Mon Sep 17 00:00:00 2001
From: Nadav Spiegelman <me@nadav.name>
Date: Mon, 22 Dec 2025 19:13:10 -0500
Subject: [PATCH 5/7] Use title case in stat cards

---
 frontend/src/components/user-stats/IndexerStatsIncreases.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/user-stats/IndexerStatsIncreases.vue b/frontend/src/components/user-stats/IndexerStatsIncreases.vue
index 222aa41..e63855e 100644
--- a/frontend/src/components/user-stats/IndexerStatsIncreases.vue
+++ b/frontend/src/components/user-stats/IndexerStatsIncreases.vue
@@ -4,7 +4,7 @@
     <div class="items">
       <ContentContainer v-for="name in selectedValues" :key="name" class="item">
         <span class="value">{{ postProcessStat(name) }}</span>
-        <span class="name">{{ name }}</span>
+        <span class="name">{{ titleCase(name) }}</span>
       </ContentContainer>
     </div>
   </div>
@@ -13,6 +13,7 @@
 import type { UserProfileScrapedVec, UserProfileVec } from '@/services/api/userStatsService'
 import ContentContainer from '../ContentContainer.vue'
 import { bytesToReadable } from '@/services/helpers'
+import { titleCase } from 'text-title-case'
 
 const props = defineProps<{
   userStats: UserProfileVec

From 7283e469bcc9d4a18b67686ffa7f21b10d64f83b Mon Sep 17 00:00:00 2001
From: Nadav Spiegelman <me@nadav.name>
Date: Mon, 22 Dec 2025 19:24:24 -0500
Subject: [PATCH 6/7] Use title in multiselect

---
 frontend/src/components/user-stats/SearchForm.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/user-stats/SearchForm.vue b/frontend/src/components/user-stats/SearchForm.vue
index 428ce67..c7ac9a9 100644
--- a/frontend/src/components/user-stats/SearchForm.vue
+++ b/frontend/src/components/user-stats/SearchForm.vue
@@ -19,6 +19,7 @@
       @update:modelValue="(val) => emit('selectedValuesUpdated', val)"
       filter
       display="chip"
+      :optionLabel="titleCase"
       placeholder="Charts to display"
     />
   </div>
@@ -31,6 +32,7 @@ import { getUserStats, type GetUserStatsQuery, type UserProfileScrapedVec, type
 import { DatePicker, Select, MultiSelect, Button } from 'primevue'
 import { onMounted, ref } from 'vue'
 import { startOfMonth, endOfMonth } from 'date-fns'
+import { titleCase } from 'text-title-case'
 import { getIndexersEnriched, type IndexerEnriched } from '@/services/api/indexerService'
 import { showToast } from '@/main'
 

From 5ae3c48976f0c8683ad608997f7b9a1390729c59 Mon Sep 17 00:00:00 2001
From: Nadav Spiegelman <me@nadav.name>
Date: Mon, 22 Dec 2025 19:16:20 -0500
Subject: [PATCH 7/7] Round floats to two decimal points

The parseFloat() is just in case any numbers end up being passed as
strings in the future.
---
 .../src/components/user-stats/IndexerStatsIncreases.vue   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/user-stats/IndexerStatsIncreases.vue b/frontend/src/components/user-stats/IndexerStatsIncreases.vue
index e63855e..cb12550 100644
--- a/frontend/src/components/user-stats/IndexerStatsIncreases.vue
+++ b/frontend/src/components/user-stats/IndexerStatsIncreases.vue
@@ -29,10 +29,14 @@ const postProcessStat = (value: keyof UserProfileScrapedVec) => {
     case 'seed_size':
     case 'uploaded_real':
     case 'downloaded_real':
-      result = bytesToReadable(result)
+      return bytesToReadable(result)
       break
   }
-  return result
+
+  if (Number.isInteger(result)) {
+    return result
+  }
+  return parseFloat(result).toFixed(2)
 }
 </script>
 <style scoped>