refactor: use highcharts instead of chart.js

Author: FrenchGithubUser

frontend/package-lock.json

@@ -20,9 +20,9 @@
     "@primeuix/themes": "^1.2.3",
     "@primevue/forms": "^4.3.9",
     "axios": "^1.12.2",
-    "chart.js": "^4.5.0",
-    "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^4.1.0",
+    "highcharts": "^12.5.0",
+    "highcharts-vue": "^2.0.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.9",
     "vue": "^3.5.18",

frontend/package.json

@@ -3,75 +3,40 @@
     <div class="wrapper-center title">Evolution on the selected period</div>
     <div class="charts">
       <ContentContainer v-for="value in selectedValues" :key="value">
-        <Chart type="line" :data="chartData(value)" :options="chartOptions(value)" />
+        <highcharts :options="chartOptions(value)" />
       </ContentContainer>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import type { Options } from 'highcharts'
 import type { UserProfileVec, UserProfileScrapedVec } from '@/services/api/userStatsService'
-import Chart from 'primevue/chart'
 import ContentContainer from '../ContentContainer.vue'
-import 'chartjs-adapter-date-fns'
+
+const GIB_KEYS: (keyof UserProfileScrapedVec)[] = ['uploaded', 'downloaded', 'seed_size', 'uploaded_real', 'downloaded_real']
 
 const props = defineProps<{
   userStats: UserProfileVec
   selectedValues: (keyof UserProfileScrapedVec)[]
 }>()
-const documentStyle = getComputedStyle(document.documentElement)
 
-const chartOptions = (value: keyof UserProfileScrapedVec) => {
-  let unit = ''
-  switch (value) {
-    case 'uploaded':
-    case 'downloaded':
-    case 'seed_size':
-    case 'uploaded_real':
-    case 'downloaded_real':
-      unit = 'GiB'
-      break
-  }
-  return {
-    scales: {
-      x: {
-        type: 'time',
-        time: {
-          unit: 'day',
-        },
-      },
-      y: {
-        title: {
-          display: true,
-          text: unit,
-        },
-      },
-    },
-  }
-}
+const seriesColor = getComputedStyle(document.documentElement).getPropertyValue('--p-button-primary-border-color')
+
+function chartOptions(value: keyof UserProfileScrapedVec): Options {
+  const isGib = GIB_KEYS.includes(value)
+  const raw = props.userStats.profile[value] as (number | null)[]
+  const timestamps = props.userStats.scraped_at.map((d) => new Date(d).getTime())
+
+  const data: [number, number][] = timestamps.map((t, i) => [t, isGib ? (raw[i] ?? 0) / 1024 / 1024 / 1024 : (raw[i] as number)])
 
-const chartData = (value: keyof UserProfileScrapedVec) => {
-  let data: number[] = []
-  switch (value) {
-    case 'uploaded':
-    case 'downloaded':
-    case 'seed_size':
-    case 'uploaded_real':
-    case 'downloaded_real':
-      data = props.userStats.profile[value].map((val) => (val ?? 0) / 1024 / 1024 / 1024)
-      break
-    default:
-      data = props.userStats.profile[value] as number[]
-  }
   return {
-    labels: props.userStats.scraped_at.map((date) => new Date(date).toISOString()),
-    datasets: [
-      {
-        // tension: 0.2,
-        borderColor: documentStyle.getPropertyValue('--p-button-primary-border-color'),
-        label: value,
-        data: data,
-      },
-    ],
+    chart: { type: 'line', backgroundColor: 'transparent', height: 300 },
+    title: { text: value },
+    xAxis: { type: 'datetime' },
+    yAxis: { title: { text: isGib ? 'GiB' : undefined } },
+    legend: { enabled: false },
+    credits: { enabled: false },
+    series: [{ type: 'line', name: value, data, color: seriesColor }],
   }
 }
 </script>
@@ -80,13 +45,6 @@ const chartData = (value: keyof UserProfileScrapedVec) => {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  > * {
-    margin: 0 5px;
-    margin-bottom: 10px;
-  }
-  .p-chart {
-    width: 36em;
-    height: auto;
-  }
+  gap: 10px;
 }
 </style>

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

@@ -7,9 +7,18 @@ import PrimeVue from 'primevue/config'
 import Aura from '@primeuix/themes/aura'
 import ToastService from 'primevue/toastservice'
 import Tooltip from 'primevue/tooltip'
+import Highcharts from 'highcharts'
+import HighchartsVue from 'highcharts-vue'
+
+Highcharts.setOptions({
+  lang: {
+    locale: 'en',
+  },
+})
 
 const app = createApp(App)
 
+app.use(HighchartsVue)
 app.use(PrimeVue, {
   theme: {
     preset: Aura,