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>