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>

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -1,3 +1,145 @@
 <template>
-  <div>Month stats</div>
+  <div>
+    <Card :without-title="false">
+      <template #title>{{ $t('dashboard.THIS_MONTH') }}</template>
+      <template #content>
+        <div class="chart-radio">
+          <label class="">
+            <input
+              type="radio"
+              name="total_distance"
+              :checked="displayedData === 'total_distance'"
+              @click="updateDisplayData"
+            />
+            {{ t('workouts.DISTANCE') }}
+          </label>
+          <label class="">
+            <input
+              type="radio"
+              name="total_duration"
+              :checked="displayedData === 'total_duration'"
+              @click="updateDisplayData"
+            />
+            {{ t('workouts.DURATION') }}
+          </label>
+          <label class="">
+            <input
+              type="radio"
+              name="nb_workouts"
+              :checked="displayedData === 'nb_workouts'"
+              @click="updateDisplayData"
+            />
+            {{ t('workouts.WORKOUT', 2) }}
+          </label>
+        </div>
+        <Chart
+          :displayedData="displayedData"
+          :params="chartParams"
+          :statistics="statistics"
+          :sports="sports"
+          :week-starting-monday="weekStartingMonday"
+          v-if="statistics && weekStartingMonday !== undefined"
+      /></template>
+    </Card>
+  </div>
 </template>
+
+<script lang="ts">
+  import { startOfMonth, endOfMonth, format } from 'date-fns'
+  import {
+    ComputedRef,
+    PropType,
+    computed,
+    defineComponent,
+    ref,
+    watch,
+  } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import Card from '@/components/Common/Card.vue'
+  import Chart from '@/components/Common/StatsChart/index.vue'
+  import { STATS_STORE, SPORTS_STORE, USER_STORE } from '@/store/constants'
+  import { ISport } from '@/types/sports'
+  import { IStatisticsDateParams, TStatisticsFromApi } from '@/types/statistics'
+  import { IAuthUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'UserMonthStats',
+    components: {
+      Card,
+      Chart,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const store = useStore()
+      const date = new Date()
+      const { t } = useI18n()
+      const dateFormat = 'yyyy-MM-dd'
+      const chartParams: IStatisticsDateParams = {
+        duration: 'week',
+        start: startOfMonth(date),
+        end: endOfMonth(date),
+      }
+      const apiParams = {
+        from: format(chartParams.start, dateFormat),
+        to: format(chartParams.end, dateFormat),
+        time: `week${props.user.weekm ? 'm' : ''}`,
+      }
+      const statistics: ComputedRef<TStatisticsFromApi> = computed(
+        () => store.getters[STATS_STORE.GETTERS.USER_STATS]
+      )
+      const sports: ComputedRef<ISport[]> = computed(
+        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+      )
+      const authUser: ComputedRef<IAuthUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
+      let displayedData = ref('total_distance')
+
+      function updateDisplayData(event: Event & { target: HTMLInputElement }) {
+        displayedData.value = event.target.name
+      }
+
+      watch(
+        () => props.user.username,
+        async () => {
+          store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, {
+            username: props.user.username,
+            filterType: 'by_time',
+            params: apiParams,
+          })
+        }
+      )
+      return {
+        chartParams,
+        displayedData,
+        sports,
+        statistics,
+        t,
+        updateDisplayData,
+        weekStartingMonday: computed<boolean>(() => authUser.value.weekm),
+      }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+
+  .chart-radio {
+    display: flex;
+    justify-content: space-between;
+    padding: $default-padding;
+
+    label {
+      font-size: 0.9em;
+      font-weight: normal;
+    }
+  }
+</style>

fittrackee_client/src/locales/en/dashboard.json

@@ -1,3 +1,4 @@
 {
-  "DASHBOARD": "Dashboard"
+  "DASHBOARD": "Dashboard",
+  "THIS_MONTH": "This month"
 }

fittrackee_client/src/locales/en/workouts.json

@@ -1,5 +1,7 @@
 {
   "ADD_WORKOUT": "Add workout",
+  "DISTANCE": "distance",
+  "DURATION": "duration",
   "KM": "km",
   "SPORT": "sport | sports",
   "WORKOUT": "workout | workouts"

fittrackee_client/src/locales/fr/dashboard.json

@@ -1,3 +1,4 @@
 {
-  "DASHBOARD": "Tableau de Bord"
+  "DASHBOARD": "Tableau de Bord",
+  "THIS_MONTH": "Ce mois"
 }

fittrackee_client/src/locales/fr/workouts.json

@@ -1,5 +1,7 @@
 {
   "ADD_WORKOUT": "Ajouter une séance",
+  "DISTANCE": "distance",
+  "DURATION": "durée",
   "KM": "km",
   "SPORT": "sport | sports",
   "WORKOUT": "séance | séances"

fittrackee_client/src/types/statistics.ts

@@ -31,7 +31,7 @@ export type TStatisticsFromApi = {
 export interface IStatisticsChartDataset {
   label: string
   backgroundColor: string[]
-  data: (number | null)[]
+  data: number[]
 }
 
 export type TStatisticsDatasets = Record<
@@ -40,6 +40,6 @@ export type TStatisticsDatasets = Record<
 >
 
 export interface IStatisticsChartData {
-  labels: string[]
+  labels: unknown[]
   datasets: TStatisticsDatasets
 }

fittrackee_client/src/utils/statistics.ts

@@ -36,14 +36,24 @@ export const getDateKeys = (
   return days
 }
 
+export const sportColors: Record<string, string> = {
+  'Cycling (Sport)': '#55A8A3',
+  'Cycling (Transport)': '#98C3A9',
+  Hiking: '#D0838A',
+  'Mountain Biking': '#ECC77E',
+  Running: '#926692',
+  Walking: '#929292',
+}
+
 const getStatisticsChartDataset = (
-  sportLabel: string
+  sportLabel: string,
+  color: string
 ): IStatisticsChartDataset =>
   Object.assign(
     {},
     {
       label: sportLabel,
-      backgroundColor: [],
+      backgroundColor: [color],
       data: [],
     }
   )
@@ -55,9 +65,10 @@ export const getDatasets = (displayedSports: ISport[]): TStatisticsDatasets => {
     total_duration: [],
   }
   displayedSports.map((sport) => {
-    datasets.nb_workouts.push(getStatisticsChartDataset(sport.label))
-    datasets.total_distance.push(getStatisticsChartDataset(sport.label))
-    datasets.total_duration.push(getStatisticsChartDataset(sport.label))
+    const color = sportColors[sport.label]
+    datasets.nb_workouts.push(getStatisticsChartDataset(sport.label, color))
+    datasets.total_distance.push(getStatisticsChartDataset(sport.label, color))
+    datasets.total_duration.push(getStatisticsChartDataset(sport.label, color))
   })
   return datasets
 }
@@ -85,15 +96,15 @@ export const formatStats = (
     const date: string = format(key, dateFormat)
     labels.push(date)
     data.map((datasetKey) => {
-      datasets[datasetKey].map((dataset) =>
+      datasets[datasetKey].map((dataset) => {
         dataset.data.push(
           apiStats !== {} &&
             date in apiStats &&
             sportsId[dataset.label] in apiStats[date]
             ? apiStats[date][sportsId[dataset.label]][datasetKey]
-            : null
+            : 0
         )
-      )
+      })
     })
   })
   return {