Client - init stats chart (wip)

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

@@ -0,0 +1,69 @@
+<template>
+  <div class="chart">
+    <BarChart v-bind="barChartProps" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
+  import { ComputedRef, PropType, computed, defineComponent } from 'vue'
+  import { BarChart, useBarChart } from 'vue-chart-3'
+
+  import { IStatisticsChartDataset } from '@/types/statistics'
+
+  Chart.register(...registerables)
+
+  export default defineComponent({
+    name: 'Chart',
+    components: {
+      BarChart,
+    },
+    props: {
+      datasets: {
+        type: Object as PropType<IStatisticsChartDataset[]>,
+        required: true,
+      },
+      labels: {
+        type: Object as PropType<unknown[]>,
+        required: true,
+      },
+    },
+    setup(props) {
+      let chartData: ComputedRef<ChartData<'bar'>> = computed(() => ({
+        labels: props.labels,
+        datasets: props.datasets,
+      }))
+      const options = computed<ChartOptions<'bar'>>(() => ({
+        responsive: true,
+        maintainAspectRatio: true,
+        layout: {
+          padding: 5,
+        },
+        scales: {
+          x: {
+            stacked: true,
+            grid: {
+              display: false,
+            },
+          },
+          y: {
+            stacked: true,
+            grid: {
+              display: false,
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+      }))
+      const { barChartProps } = useBarChart({
+        chartData,
+        options,
+      })
+      return { barChartProps }
+    },
+  })
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="stat-chart">
+    <Chart :datasets="datasets" :labels="labels" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { ComputedRef, PropType, computed, defineComponent } from 'vue'
+
+  import Chart from '@/components/Common/StatsChart/Chart.vue'
+  import { ISport } from '@/types/sports'
+  import {
+    IStatisticsChartData,
+    IStatisticsDateParams,
+    TDatasetKeys,
+    TStatisticsFromApi,
+  } from '@/types/statistics'
+  import { formatStats } from '@/utils/statistics'
+
+  export default defineComponent({
+    name: 'StatsChart',
+    components: {
+      Chart,
+    },
+    props: {
+      statistics: {
+        type: Object as PropType<TStatisticsFromApi>,
+        required: true,
+      },
+      displayedData: {
+        type: String as PropType<TDatasetKeys>,
+        required: true,
+      },
+      params: {
+        type: Object as PropType<IStatisticsDateParams>,
+        required: true,
+      },
+      sports: {
+        type: Object as PropType<ISport[]>,
+        required: true,
+      },
+      weekStartingMonday: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    setup(props) {
+      const formattedStats: ComputedRef<IStatisticsChartData> = computed(() =>
+        formatStats(
+          props.params,
+          props.weekStartingMonday,
+          props.sports,
+          [],
+          props.statistics
+        )
+      )
+      return {
+        datasets: computed(
+          () => formattedStats.value.datasets[props.displayedData]
+        ),
+        labels: computed(() => formattedStats.value.labels),
+      }
+    },
+  })
+</script>