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>