Client - move to vue-chartjs + refacto

2023-11-12 10:45:39 +01:00 · 2023-11-12 10:45:39 +01:00 · e4d4ffb3e8
commit e4d4ffb3e8
parent 473d0aca53
5 changed files with 277 additions and 327 deletions
--- a/fittrackee_client/package.json
+++ b/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",
--- a/fittrackee_client/src/components/Common/StatsChart/Chart.vue
+++ b/fittrackee_client/src/components/Common/StatsChart/Chart.vue
@ -1,70 +1,43 @@
 <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 type { PropType } from 'vue'
-  import { BarChart, useBarChart } from 'vue-chart-3'
+  import { computed, toRefs } from 'vue'
+  import { Bar } from 'vue-chartjs'
  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({
-    name: 'Chart',
-    components: {
-      BarChart,
-    },
-    props: {
-      datasets: {
-        type: Object as PropType<IChartDataset[]>,
-        required: true,
-      },
-      labels: {
-        type: Object as PropType<unknown[]>,
-        required: true,
-      },
-      displayedData: {
-        type: String as PropType<TStatisticsDatasetKeys>,
-        required: true,
-      },
-      displayedSportIds: {
-        type: Array as PropType<number[]>,
-        required: true,
-      },
-      fullStats: {
-        type: Boolean,
-        required: true,
-      },
-      useImperialUnits: {
-        type: Boolean,
-        required: true,
-      },
-    },
-    setup(props) {
+  interface Props {
+    datasets: IChartDataset[]
+    labels: unknown[]
+    displayedData: TStatisticsDatasetKeys
+    displayedSportIds: number[]
+    fullStats: boolean
+    useImperialUnits: boolean
+  }
+  const props = defineProps<Props>()
+  const {
+    datasets,
+    labels,
+    displayedData,
+    displayedSportIds,
+    fullStats,
+    useImperialUnits,
+  } = toRefs(props)
+
  const { t } = useI18n()
-      // 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'
-      }
+
  const chartData = computed(() => ({
-        labels: props.labels,
+    labels: labels.value,
    // workaround to avoid dataset modification
-        datasets: JSON.parse(JSON.stringify(props.datasets)),
+    datasets: JSON.parse(JSON.stringify(datasets.value)),
  }))
  const options = computed<ChartOptions<'bar'>>(() => ({
    responsive: true,
@ -72,7 +45,7 @@
    animation: false,
    layout: {
      padding: {
-            top: props.fullStats ? 40 : 22,
+        top: fullStats.value ? 40 : 22,
      },
    },
    scales: {
@ -83,7 +56,7 @@
        },
      },
      y: {
-            stacked: props.displayedData !== 'average_speed',
+        stacked: displayedData.value !== 'average_speed',
        grid: {
          drawOnChartArea: false,
        },
@ -91,16 +64,16 @@
          maxTicksLimit: 6,
          callback: function (value) {
            return formatTooltipValue(
-                  props.displayedData,
+              displayedData.value,
              +value,
-                  props.useImperialUnits,
+              useImperialUnits.value,
              false,
-                  getUnit(props.displayedData)
+              getUnit(displayedData.value)
            )
          },
        },
        afterFit: function (scale: LayoutItem) {
-              scale.width = props.fullStats ? 90 : 60
+          scale.width = fullStats.value ? 90 : 60
        },
      },
    },
@ -109,7 +82,7 @@
        anchor: 'end',
        align: 'end',
        color: function (context) {
-              return props.displayedData === 'average_speed' &&
+          return displayedData.value === 'average_speed' &&
            context.dataset.backgroundColor
            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
@ -117,25 +90,25 @@
            : '#666666'
        },
        rotation: function (context) {
-              return props.fullStats && context.chart.chartArea.width < 580
+          return fullStats.value && context.chart.chartArea.width < 580
            ? 310
            : 0
        },
        display: function (context) {
-              return props.fullStats && context.chart.chartArea.width < 300
+          return fullStats.value && context.chart.chartArea.width < 300
            ? false
-                : props.displayedData === 'average_speed'
-                ? props.displayedSportIds.length == 1
+            : displayedData.value === 'average_speed'
+            ? displayedSportIds.value.length == 1
              ? 'auto'
              : false
            : true
        },
        formatter: function (value, context) {
-              if (props.displayedData === 'average_speed') {
+          if (displayedData.value === 'average_speed') {
            return formatTooltipValue(
-                  props.displayedData,
+              displayedData.value,
              value,
-                  props.useImperialUnits,
+              useImperialUnits.value,
              false
            )
          } else {
@ -145,13 +118,13 @@
              .map((d) => d.data[context.dataIndex])
              .reduce((total, value) => getSum(total, value), 0)
            return context.datasetIndex ===
-                  props.displayedSportIds.length - 1 && total > 0
+              displayedSportIds.value.length - 1 && total > 0
              ? formatTooltipValue(
-                      props.displayedData,
+                  displayedData.value,
                  total,
-                      props.useImperialUnits,
+                  useImperialUnits.value,
                  false,
-                      getUnit(props.displayedData)
+                  getUnit(displayedData.value)
                )
              : null
          }
@ -165,7 +138,7 @@
          intersect: true,
          mode: 'index',
          position:
-                props.displayedData === 'average_speed' ? 'nearest' : 'average',
+            displayedData.value === 'average_speed' ? 'nearest' : 'average',
        },
        filter: function (tooltipItem) {
          return tooltipItem.formattedValue !== '0'
@ -178,17 +151,17 @@
            }
            if (context.parsed.y !== null) {
              label += formatTooltipValue(
-                    props.displayedData,
+                displayedData.value,
                context.parsed.y,
-                    props.useImperialUnits,
+                useImperialUnits.value,
                true,
-                    getUnit(props.displayedData)
+                getUnit(displayedData.value)
              )
            }
            return label
          },
          footer: function (tooltipItems) {
-                if (props.displayedData === 'average_speed') {
+            if (displayedData.value === 'average_speed') {
              return ''
            }
            let sum = 0
@ -198,11 +171,11 @@
            return (
              `${t('common.TOTAL')}: ` +
              formatTooltipValue(
-                    props.displayedData,
+                displayedData.value,
                sum,
-                    props.useImperialUnits,
+                useImperialUnits.value,
                true,
-                    getUnit(props.displayedData)
+                getUnit(displayedData.value)
              )
            )
          },
@ -210,11 +183,18 @@
      },
    },
  }))
-      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>
--- a/fittrackee_client/src/components/Common/StatsChart/index.vue
+++ b/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 type { ComputedRef, PropType, Ref } from 'vue'
+  import { computed, ref, toRefs, watch, onBeforeMount } from 'vue'
+  import type { ComputedRef, Ref } from 'vue'

  import Chart from '@/components/Common/StatsChart/Chart.vue'
  import { STATS_STORE } from '@/store/constants'
@ -98,42 +98,31 @@
  import { useStore } from '@/use/useStore'
  import { formatStats } from '@/utils/statistics'

-  export default defineComponent({
-    name: 'UserMonthStats',
-    components: {
-      Chart,
-    },
-    props: {
-      sports: {
-        type: Object as PropType<ISport[]>,
-        required: true,
-      },
-      user: {
-        type: Object as PropType<IAuthUserProfile>,
-        required: true,
-      },
-      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) {
+  interface Props {
+    sports: ISport[]
+    user: IAuthUserProfile
+    chartParams: IStatisticsDateParams
+    displayedSportIds?: number[]
+    fullStats?: boolean
+    hideChartIfNoData?: boolean
+    isDisabled?: boolean
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    displayedSportIds: () => [],
+    fullStats: false,
+    hideChartIfNoData: false,
+    isDisabled: false,
+  })
+  const {
+    sports,
+    user,
+    chartParams,
+    displayedSportIds,
+    fullStats,
+    hideChartIfNoData,
+    isDisabled,
+  } = toRefs(props)
+
  const store = useStore()

  const displayedData: Ref<TStatisticsDatasetKeys> = ref('total_distance')
@ -142,23 +131,28 @@
  )
  const formattedStats: ComputedRef<IStatisticsChartData> = computed(() =>
    formatStats(
-          props.chartParams,
-          props.user.weekm,
-          props.sports,
-          props.displayedSportIds,
+      chartParams.value,
+      user.value.weekm,
+      sports.value,
+      displayedSportIds.value,
      statistics.value,
-          props.user.imperial_units,
-          props.user.date_format
+      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(props.chartParams, props.user))
+    getStatistics(getApiParams(chartParams.value, user.value))
  )

  function getStatistics(apiParams: IStatisticsParams) {
    store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, {
-          username: props.user.username,
+      username: user.value.username,
      filterType: 'by_time',
      params: apiParams,
    })
@ -182,23 +176,11 @@
  }

  watch(
-        () => props.chartParams,
+    () => chartParams.value,
    async (newParams) => {
-          getStatistics(getApiParams(newParams, props.user))
+      getStatistics(getApiParams(newParams, user.value))
    }
  )
-
-      return {
-        datasets: computed(
-          () => formattedStats.value.datasets[displayedData.value]
-        ),
-        labels: computed(() => formattedStats.value.labels),
-        emptyStats: computed(() => Object.keys(statistics.value).length === 0),
-        displayedData,
-        updateDisplayData,
-      }
-    },
-  })
 </script>

 <style lang="scss" scoped>
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue
@ -24,9 +24,11 @@
          </label>
        </div>
        <div id="chart-legend" />
-        <LineChart
-          v-bind="lineChartProps"
+        <Line
          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({
-    chartData,
-    options,
-    plugins: [htmlLegendPlugin],
-  })
+  const plugins = [htmlLegendPlugin]

  function updateDisplayDistance() {
    displayDistance.value = !displayDistance.value
--- a/fittrackee_client/yarn.lock
+++ b/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:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/vue-chart-3/-/vue-chart-3-3.1.8.tgz#4ca4cba0a51ea2851a657a132bc14bf8c3ba1da2"
-  integrity sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==
-  dependencies:
-    "@vue/runtime-core" latest
-    "@vue/runtime-dom" latest
-    csstype latest
-    lodash-es latest
+vue-chartjs@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-5.2.0.tgz#3d0076ccf8016d1bf8fab5ccd837e7fb81005ded"
+  integrity sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==

 vue-component-type-helpers@1.8.4:
  version "1.8.4"