Client - move to vue-chartjs + refacto

fittrackee_client/package.json

@@ -35,7 +35,7 @@
     "sanitize-html": "^2.11.0",
     "snarkdown": "^2.0.0",
     "vue": "^3.3.8",
-    "vue-chart-3": "^3.1.8",
+    "vue-chartjs": "^5.2.0",
     "vue-fullscreen": "^3.1.1",
     "vue-i18n": "^9.6.5",
     "vue-router": "^4.2.5",

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

@@ -1,220 +1,200 @@
 <template>
   <div class="chart">
-    <BarChart v-bind="barChartProps" class="bar-chart" />
+    <Bar :data="chartData" :options="options" class="bar-chart" />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import type { ChartOptions, LayoutItem } from 'chart.js'
-  import { computed, defineComponent } from 'vue'
+  import { computed, toRefs } from 'vue'
-  import type { PropType } from 'vue'
+  import { Bar } from 'vue-chartjs'
-  import { BarChart, useBarChart } from 'vue-chart-3'
   import { useI18n } from 'vue-i18n'
 
   import type { IChartDataset } from '@/types/chart'
   import type { TStatisticsDatasetKeys } from '@/types/statistics'
   import { formatTooltipValue } from '@/utils/tooltip'
 
-  export default defineComponent({
+  interface Props {
-    name: 'Chart',
+    datasets: IChartDataset[]
-    components: {
+    labels: unknown[]
-      BarChart,
+    displayedData: TStatisticsDatasetKeys
-    },
+    displayedSportIds: number[]
-    props: {
+    fullStats: boolean
-      datasets: {
+    useImperialUnits: boolean
-        type: Object as PropType<IChartDataset[]>,
+  }
-        required: true,
+  const props = defineProps<Props>()
-      },
+  const {
-      labels: {
+    datasets,
-        type: Object as PropType<unknown[]>,
+    labels,
-        required: true,
+    displayedData,
-      },
+    displayedSportIds,
-      displayedData: {
+    fullStats,
-        type: String as PropType<TStatisticsDatasetKeys>,
+    useImperialUnits,
-        required: true,
+  } = toRefs(props)
-      },
+
-      displayedSportIds: {
+  const { t } = useI18n()
-        type: Array as PropType<number[]>,
+
-        required: true,
+  const chartData = computed(() => ({
-      },
+    labels: labels.value,
-      fullStats: {
+    // workaround to avoid dataset modification
-        type: Boolean,
+    datasets: JSON.parse(JSON.stringify(datasets.value)),
-        required: true,
+  }))
-      },
+  const options = computed<ChartOptions<'bar'>>(() => ({
-      useImperialUnits: {
+    responsive: true,
-        type: Boolean,
+    maintainAspectRatio: true,
-        required: true,
+    animation: false,
+    layout: {
+      padding: {
+        top: fullStats.value ? 40 : 22,
       },
     },
-    setup(props) {
+    scales: {
-      const { t } = useI18n()
+      x: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        stacked: true,
-      function getNumber(value: any): number {
+        grid: {
-        return isNaN(value) ? 0 : +value
+          drawOnChartArea: false,
-      }
+        },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      },
-      function getSum(total: any, value: any): number {
+      y: {
-        return getNumber(total) + getNumber(value)
+        stacked: displayedData.value !== 'average_speed',
-      }
+        grid: {
-      function getUnit(displayedData: string) {
+          drawOnChartArea: false,
-        return ['total_ascent', 'total_descent'].includes(displayedData)
+        },
-          ? 'm'
+        ticks: {
-          : 'km'
+          maxTicksLimit: 6,
-      }
+          callback: function (value) {
-      const chartData = computed(() => ({
+            return formatTooltipValue(
-        labels: props.labels,
+              displayedData.value,
-        // workaround to avoid dataset modification
+              +value,
-        datasets: JSON.parse(JSON.stringify(props.datasets)),
+              useImperialUnits.value,
-      }))
+              false,
-      const options = computed<ChartOptions<'bar'>>(() => ({
+              getUnit(displayedData.value)
-        responsive: true,
+            )
-        maintainAspectRatio: true,
-        animation: false,
-        layout: {
-          padding: {
-            top: props.fullStats ? 40 : 22,
           },
         },
-        scales: {
+        afterFit: function (scale: LayoutItem) {
-          x: {
+          scale.width = fullStats.value ? 90 : 60
-            stacked: true,
+        },
-            grid: {
+      },
-              drawOnChartArea: false,
+    },
-            },
+    plugins: {
-          },
+      datalabels: {
-          y: {
+        anchor: 'end',
-            stacked: props.displayedData !== 'average_speed',
+        align: 'end',
-            grid: {
+        color: function (context) {
-              drawOnChartArea: false,
+          return displayedData.value === 'average_speed' &&
-            },
+            context.dataset.backgroundColor
-            ticks: {
+            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              maxTicksLimit: 6,
+              // @ts-ignore
-              callback: function (value) {
+              context.dataset.backgroundColor[0]
-                return formatTooltipValue(
+            : '#666666'
-                  props.displayedData,
+        },
-                  +value,
+        rotation: function (context) {
-                  props.useImperialUnits,
+          return fullStats.value && context.chart.chartArea.width < 580
+            ? 310
+            : 0
+        },
+        display: function (context) {
+          return fullStats.value && context.chart.chartArea.width < 300
+            ? false
+            : displayedData.value === 'average_speed'
+            ? displayedSportIds.value.length == 1
+              ? 'auto'
+              : false
+            : true
+        },
+        formatter: function (value, context) {
+          if (displayedData.value === 'average_speed') {
+            return formatTooltipValue(
+              displayedData.value,
+              value,
+              useImperialUnits.value,
+              false
+            )
+          } else {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            const total: number = context.chart.data.datasets
+              .map((d) => d.data[context.dataIndex])
+              .reduce((total, value) => getSum(total, value), 0)
+            return context.datasetIndex ===
+              displayedSportIds.value.length - 1 && total > 0
+              ? formatTooltipValue(
+                  displayedData.value,
+                  total,
+                  useImperialUnits.value,
                   false,
-                  getUnit(props.displayedData)
+                  getUnit(displayedData.value)
                 )
-              },
+              : null
-            },
+          }
-            afterFit: function (scale: LayoutItem) {
+        },
-              scale.width = props.fullStats ? 90 : 60
+      },
-            },
+      legend: {
+        display: false,
+      },
+      tooltip: {
+        interaction: {
+          intersect: true,
+          mode: 'index',
+          position:
+            displayedData.value === 'average_speed' ? 'nearest' : 'average',
+        },
+        filter: function (tooltipItem) {
+          return tooltipItem.formattedValue !== '0'
+        },
+        callbacks: {
+          label: function (context) {
+            let label = t(`sports.${context.dataset.label}.LABEL`) || ''
+            if (label) {
+              label += ': '
+            }
+            if (context.parsed.y !== null) {
+              label += formatTooltipValue(
+                displayedData.value,
+                context.parsed.y,
+                useImperialUnits.value,
+                true,
+                getUnit(displayedData.value)
+              )
+            }
+            return label
+          },
+          footer: function (tooltipItems) {
+            if (displayedData.value === 'average_speed') {
+              return ''
+            }
+            let sum = 0
+            tooltipItems.map((tooltipItem) => {
+              sum += tooltipItem.parsed.y
+            })
+            return (
+              `${t('common.TOTAL')}: ` +
+              formatTooltipValue(
+                displayedData.value,
+                sum,
+                useImperialUnits.value,
+                true,
+                getUnit(displayedData.value)
+              )
+            )
           },
         },
-        plugins: {
+      },
-          datalabels: {
-            anchor: 'end',
-            align: 'end',
-            color: function (context) {
-              return props.displayedData === 'average_speed' &&
-                context.dataset.backgroundColor
-                ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  // @ts-ignore
-                  context.dataset.backgroundColor[0]
-                : '#666666'
-            },
-            rotation: function (context) {
-              return props.fullStats && context.chart.chartArea.width < 580
-                ? 310
-                : 0
-            },
-            display: function (context) {
-              return props.fullStats && context.chart.chartArea.width < 300
-                ? false
-                : props.displayedData === 'average_speed'
-                ? props.displayedSportIds.length == 1
-                  ? 'auto'
-                  : false
-                : true
-            },
-            formatter: function (value, context) {
-              if (props.displayedData === 'average_speed') {
-                return formatTooltipValue(
-                  props.displayedData,
-                  value,
-                  props.useImperialUnits,
-                  false
-                )
-              } else {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                const total: number = context.chart.data.datasets
-                  .map((d) => d.data[context.dataIndex])
-                  .reduce((total, value) => getSum(total, value), 0)
-                return context.datasetIndex ===
-                  props.displayedSportIds.length - 1 && total > 0
-                  ? formatTooltipValue(
-                      props.displayedData,
-                      total,
-                      props.useImperialUnits,
-                      false,
-                      getUnit(props.displayedData)
-                    )
-                  : null
-              }
-            },
-          },
-          legend: {
-            display: false,
-          },
-          tooltip: {
-            interaction: {
-              intersect: true,
-              mode: 'index',
-              position:
-                props.displayedData === 'average_speed' ? 'nearest' : 'average',
-            },
-            filter: function (tooltipItem) {
-              return tooltipItem.formattedValue !== '0'
-            },
-            callbacks: {
-              label: function (context) {
-                let label = t(`sports.${context.dataset.label}.LABEL`) || ''
-                if (label) {
-                  label += ': '
-                }
-                if (context.parsed.y !== null) {
-                  label += formatTooltipValue(
-                    props.displayedData,
-                    context.parsed.y,
-                    props.useImperialUnits,
-                    true,
-                    getUnit(props.displayedData)
-                  )
-                }
-                return label
-              },
-              footer: function (tooltipItems) {
-                if (props.displayedData === 'average_speed') {
-                  return ''
-                }
-                let sum = 0
-                tooltipItems.map((tooltipItem) => {
-                  sum += tooltipItem.parsed.y
-                })
-                return (
-                  `${t('common.TOTAL')}: ` +
-                  formatTooltipValue(
-                    props.displayedData,
-                    sum,
-                    props.useImperialUnits,
-                    true,
-                    getUnit(props.displayedData)
-                  )
-                )
-              },
-            },
-          },
-        },
-      }))
-      const { barChartProps } = useBarChart({
-        chartData,
-        options,
-      })
-      return { barChartProps }
     },
-  })
+  }))
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function getNumber(value: any): number {
+    return isNaN(value) ? 0 : +value
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function getSum(total: any, value: any): number {
+    return getNumber(total) + getNumber(value)
+  }
+  function getUnit(displayedData: string) {
+    return ['total_ascent', 'total_descent'].includes(displayedData)
+      ? 'm'
+      : 'km'
+  }
 </script>

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

@@ -79,10 +79,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { format } from 'date-fns'
-  import { computed, defineComponent, ref, watch, onBeforeMount } from 'vue'
+  import { computed, ref, toRefs, watch, onBeforeMount } from 'vue'
-  import type { ComputedRef, PropType, Ref } from 'vue'
+  import type { ComputedRef, Ref } from 'vue'
 
   import Chart from '@/components/Common/StatsChart/Chart.vue'
   import { STATS_STORE } from '@/store/constants'
@@ -98,107 +98,89 @@
   import { useStore } from '@/use/useStore'
   import { formatStats } from '@/utils/statistics'
 
-  export default defineComponent({
+  interface Props {
-    name: 'UserMonthStats',
+    sports: ISport[]
-    components: {
+    user: IAuthUserProfile
-      Chart,
+    chartParams: IStatisticsDateParams
-    },
+    displayedSportIds?: number[]
-    props: {
+    fullStats?: boolean
-      sports: {
+    hideChartIfNoData?: boolean
-        type: Object as PropType<ISport[]>,
+    isDisabled?: boolean
-        required: true,
+  }
-      },
+  const props = withDefaults(defineProps<Props>(), {
-      user: {
+    displayedSportIds: () => [],
-        type: Object as PropType<IAuthUserProfile>,
+    fullStats: false,
-        required: true,
+    hideChartIfNoData: false,
-      },
+    isDisabled: false,
-      chartParams: {
-        type: Object as PropType<IStatisticsDateParams>,
-        required: true,
-      },
-      displayedSportIds: {
-        type: Array as PropType<number[]>,
-        default: () => [],
-      },
-      fullStats: {
-        type: Boolean,
-        default: false,
-      },
-      hideChartIfNoData: {
-        type: Boolean,
-        default: false,
-      },
-      isDisabled: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props) {
-      const store = useStore()
-
-      const displayedData: Ref<TStatisticsDatasetKeys> = ref('total_distance')
-      const statistics: ComputedRef<TStatisticsFromApi> = computed(
-        () => store.getters[STATS_STORE.GETTERS.USER_STATS]
-      )
-      const formattedStats: ComputedRef<IStatisticsChartData> = computed(() =>
-        formatStats(
-          props.chartParams,
-          props.user.weekm,
-          props.sports,
-          props.displayedSportIds,
-          statistics.value,
-          props.user.imperial_units,
-          props.user.date_format
-        )
-      )
-
-      onBeforeMount(() =>
-        getStatistics(getApiParams(props.chartParams, props.user))
-      )
-
-      function getStatistics(apiParams: IStatisticsParams) {
-        store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, {
-          username: props.user.username,
-          filterType: 'by_time',
-          params: apiParams,
-        })
-      }
-      function updateDisplayData(event: Event) {
-        displayedData.value = (event.target as HTMLInputElement)
-          .name as TStatisticsDatasetKeys
-      }
-      function getApiParams(
-        chartParams: IStatisticsDateParams,
-        user: IAuthUserProfile
-      ): IStatisticsParams {
-        return {
-          from: format(chartParams.start, 'yyyy-MM-dd'),
-          to: format(chartParams.end, 'yyyy-MM-dd'),
-          time:
-            chartParams.duration === 'week'
-              ? `week${user.weekm ? 'm' : ''}`
-              : chartParams.duration,
-        }
-      }
-
-      watch(
-        () => props.chartParams,
-        async (newParams) => {
-          getStatistics(getApiParams(newParams, props.user))
-        }
-      )
-
-      return {
-        datasets: computed(
-          () => formattedStats.value.datasets[displayedData.value]
-        ),
-        labels: computed(() => formattedStats.value.labels),
-        emptyStats: computed(() => Object.keys(statistics.value).length === 0),
-        displayedData,
-        updateDisplayData,
-      }
-    },
   })
+  const {
+    sports,
+    user,
+    chartParams,
+    displayedSportIds,
+    fullStats,
+    hideChartIfNoData,
+    isDisabled,
+  } = toRefs(props)
+
+  const store = useStore()
+
+  const displayedData: Ref<TStatisticsDatasetKeys> = ref('total_distance')
+  const statistics: ComputedRef<TStatisticsFromApi> = computed(
+    () => store.getters[STATS_STORE.GETTERS.USER_STATS]
+  )
+  const formattedStats: ComputedRef<IStatisticsChartData> = computed(() =>
+    formatStats(
+      chartParams.value,
+      user.value.weekm,
+      sports.value,
+      displayedSportIds.value,
+      statistics.value,
+      user.value.imperial_units,
+      user.value.date_format
+    )
+  )
+  const datasets = computed(
+    () => formattedStats.value.datasets[displayedData.value]
+  )
+  const labels = computed(() => formattedStats.value.labels)
+  const emptyStats = computed(() => Object.keys(statistics.value).length === 0)
+
+  onBeforeMount(() =>
+    getStatistics(getApiParams(chartParams.value, user.value))
+  )
+
+  function getStatistics(apiParams: IStatisticsParams) {
+    store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, {
+      username: user.value.username,
+      filterType: 'by_time',
+      params: apiParams,
+    })
+  }
+  function updateDisplayData(event: Event) {
+    displayedData.value = (event.target as HTMLInputElement)
+      .name as TStatisticsDatasetKeys
+  }
+  function getApiParams(
+    chartParams: IStatisticsDateParams,
+    user: IAuthUserProfile
+  ): IStatisticsParams {
+    return {
+      from: format(chartParams.start, 'yyyy-MM-dd'),
+      to: format(chartParams.end, 'yyyy-MM-dd'),
+      time:
+        chartParams.duration === 'week'
+          ? `week${user.weekm ? 'm' : ''}`
+          : chartParams.duration,
+    }
+  }
+
+  watch(
+    () => chartParams.value,
+    async (newParams) => {
+      getStatistics(getApiParams(newParams, user.value))
+    }
+  )
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue

@@ -24,9 +24,11 @@
           </label>
         </div>
         <div id="chart-legend" />
-        <LineChart
+        <Line
-          v-bind="lineChartProps"
           class="line-chart"
+          :data="chartData"
+          :options="options"
+          :plugins="plugins"
           @mouseleave="emitEmptyCoordinates"
         />
         <div class="chart-info">
@@ -54,7 +56,7 @@
   import type { ChartData, ChartOptions } from 'chart.js'
   import { computed, ref, toRefs } from 'vue'
   import type { ComputedRef } from 'vue'
-  import { LineChart, useLineChart } from 'vue-chart-3'
+  import { Line } from 'vue-chartjs'
   import { useI18n } from 'vue-i18n'
 
   import { htmlLegendPlugin } from '@/components/Workout/WorkoutDetail/WorkoutChart/legend'
@@ -204,11 +206,7 @@
       },
     },
   }))
-  const { lineChartProps } = useLineChart({
+  const plugins = [htmlLegendPlugin]
-    chartData,
-    options,
-    plugins: [htmlLegendPlugin],
-  })
 
   function updateDisplayDistance() {
     displayDistance.value = !displayDistance.value

fittrackee_client/yarn.lock

@@ -648,7 +648,7 @@
   dependencies:
     "@vue/shared" "3.3.8"
 
-"@vue/runtime-core@3.3.8", "@vue/runtime-core@latest":
+"@vue/runtime-core@3.3.8":
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.8.tgz#fba5a632cbf2b5d29e171489570149cb6975dcdb"
   integrity sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==
@@ -656,7 +656,7 @@
     "@vue/reactivity" "3.3.8"
     "@vue/shared" "3.3.8"
 
-"@vue/runtime-dom@3.3.8", "@vue/runtime-dom@latest":
+"@vue/runtime-dom@3.3.8":
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz#e2d7aa795cf50914dda9a951887765a594b38af4"
   integrity sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==
@@ -1138,7 +1138,7 @@ cssstyle@^3.0.0:
   dependencies:
     rrweb-cssom "^0.6.0"
 
-csstype@^3.1.2, csstype@latest:
+csstype@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -2426,11 +2426,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@latest:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
-  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
-
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -3554,15 +3549,10 @@ vitest@^0.34.6:
     vite-node "0.34.6"
     why-is-node-running "^2.2.2"
 
-vue-chart-3@^3.1.8:
+vue-chartjs@^5.2.0:
-  version "3.1.8"
+  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/vue-chart-3/-/vue-chart-3-3.1.8.tgz#4ca4cba0a51ea2851a657a132bc14bf8c3ba1da2"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-5.2.0.tgz#3d0076ccf8016d1bf8fab5ccd837e7fb81005ded"
-  integrity sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==
+  integrity sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==
-  dependencies:
-    "@vue/runtime-core" latest
-    "@vue/runtime-dom" latest
-    csstype latest
-    lodash-es latest
 
 vue-component-type-helpers@1.8.4:
   version "1.8.4"