Client - customize chart tooltip (wip)

fittrackee_client/src/components/Common/StatsChart/Chart.vue

@@ -9,7 +9,8 @@
   import { ComputedRef, PropType, computed, defineComponent } from 'vue'
   import { BarChart, useBarChart } from 'vue-chart-3'
 
-  import { IStatisticsChartDataset } from '@/types/statistics'
+  import { IStatisticsChartDataset, TDatasetKeys } from '@/types/statistics'
+  import { formatTooltipValue } from '@/utils/tooltip'
 
   Chart.register(...registerables)
 
@@ -27,6 +28,10 @@
         type: Object as PropType<unknown[]>,
         required: true,
       },
+      displayedData: {
+        type: String as PropType<TDatasetKeys>,
+        required: true,
+      },
     },
     setup(props) {
       let chartData: ComputedRef<ChartData<'bar'>> = computed(() => ({
@@ -57,6 +62,37 @@
           legend: {
             display: false,
           },
+          tooltip: {
+            interaction: {
+              intersect: true,
+              mode: 'index',
+            },
+            filter: function (tooltipItem) {
+              return tooltipItem.formattedValue !== '0'
+            },
+            callbacks: {
+              label: function (context) {
+                let label = context.dataset.label || ''
+                if (label) {
+                  label += ': '
+                }
+                if (context.parsed.y !== null) {
+                  label += formatTooltipValue(
+                    props.displayedData,
+                    context.parsed.y
+                  )
+                }
+                return label
+              },
+              footer: function (tooltipItems) {
+                let sum = 0
+                tooltipItems.map((tooltipItem) => {
+                  sum += tooltipItem.parsed.y
+                })
+                return 'Total: ' + formatTooltipValue(props.displayedData, sum)
+              },
+            },
+          },
         },
       }))
       const { barChartProps } = useBarChart({

fittrackee_client/src/components/Common/StatsChart/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="stat-chart">
-    <Chart :datasets="datasets" :labels="labels" />
+    <Chart
+      :datasets="datasets"
+      :labels="labels"
+      :displayedData="displayedData"
+    />
   </div>
 </template>
 

fittrackee_client/src/utils/duration.ts

@@ -0,0 +1,20 @@
+export const formatDuration = (
+  totalSeconds: number,
+  formatWithUnits = false
+): string => {
+  let days = '0'
+  if (formatWithUnits) {
+    days = String(Math.floor(totalSeconds / 86400))
+    totalSeconds %= 86400
+  }
+  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0')
+  totalSeconds %= 3600
+  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0')
+  const seconds = String(totalSeconds % 60).padStart(2, '0')
+  if (formatWithUnits) {
+    return `${days === '0' ? '' : `${days}d `}${
+      hours === '00' ? '' : `${hours}h `
+    }${minutes}m ${seconds}s`
+  }
+  return `${hours === '00' ? '' : `${hours}:`}${minutes}:${seconds}`
+}

fittrackee_client/src/utils/statistics.ts

@@ -19,7 +19,11 @@ const dateFormats: genericObject = {
   year: 'yyyy',
 }
 
-const data: TDatasetKeys[] = ['nb_workouts', 'total_duration', 'total_distance']
+export const datasetKeys: TDatasetKeys[] = [
+  'nb_workouts',
+  'total_duration',
+  'total_distance',
+]
 
 export const getDateKeys = (
   params: IStatisticsDateParams,
@@ -95,7 +99,7 @@ export const formatStats = (
   dayKeys.map((key) => {
     const date: string = format(key, dateFormat)
     labels.push(date)
-    data.map((datasetKey) => {
+    datasetKeys.map((datasetKey) => {
       datasets[datasetKey].map((dataset) => {
         dataset.data.push(
           apiStats !== {} &&

fittrackee_client/src/utils/tooltip.ts

@@ -0,0 +1,13 @@
+import { TDatasetKeys } from '@/types/statistics'
+import { formatDuration } from '@/utils/duration'
+
+export const formatTooltipValue = (
+  displayedData: TDatasetKeys,
+  value: number
+): string => {
+  return displayedData === 'total_duration'
+    ? formatDuration(value, true)
+    : displayedData === 'total_distance'
+    ? value.toFixed(2) + ' km'
+    : value.toString()
+}