UI improvements: headings and titlecase

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"
   },

frontend/src/assets/main.css

@@ -16,7 +16,6 @@
   width: 100%;
 }
 .title {
-  font-size: 1.1em;
   font-weight: bold;
   margin-bottom: 10px;
 }

frontend/src/components/user-stats/IndexerStatsEvolutions.vue

@@ -1,8 +1,9 @@
 <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">
+        <h3 class="chart-heading">{{ titleCase(value) }}</h3>
         <Chart type="line" :data="chartData(value)" :options="chartOptions(value)" />
       </ContentContainer>
     </div>
@@ -12,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<{
@@ -32,6 +34,11 @@ const chartOptions = (value: keyof UserProfileScrapedVec) => {
       break
   }
   return {
+    plugins: {
+      legend: {
+        display: false,
+      },
+    },
     scales: {
       x: {
         type: 'time',
@@ -89,4 +96,8 @@ const chartData = (value: keyof UserProfileScrapedVec) => {
     height: auto;
   }
 }
+
+.chart-heading {
+  text-align: center;
+}
 </style>

frontend/src/components/user-stats/IndexerStatsIncreases.vue

@@ -1,10 +1,10 @@
 <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>
-        <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
@@ -28,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>

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'