Client - add total label on chart

fittrackee_client/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "chart.js": "^3.5.1",
+    "chartjs-plugin-datalabels": "^2.0.0",
     "core-js": "^3.6.5",
     "date-fns": "^2.23.0",
     "date-fns-tz": "^1.1.6",

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

@@ -1,11 +1,12 @@
 <template>
   <div class="chart">
-    <BarChart v-bind="barChartProps" />
+    <BarChart v-bind="barChartProps" class="bar-chart" />
   </div>
 </template>
 
 <script lang="ts">
   import { Chart, ChartData, ChartOptions, registerables } from 'chart.js'
+  import ChartDataLabels from 'chartjs-plugin-datalabels'
   import { ComputedRef, PropType, computed, defineComponent } from 'vue'
   import { BarChart, useBarChart } from 'vue-chart-3'
 
@@ -13,6 +14,7 @@
   import { formatTooltipValue } from '@/utils/tooltip'
 
   Chart.register(...registerables)
+  Chart.register(ChartDataLabels)
 
   export default defineComponent({
     name: 'Chart',
@@ -34,6 +36,14 @@
       },
     },
     setup(props) {
+      // eslint-disable-next-line
+      function getNumber(value: any): number {
+        return isNaN(value) ? 0 : +value
+      }
+      // eslint-disable-next-line
+      function getSum(total: any, value: any): number {
+        return getNumber(total) + getNumber(value)
+      }
       let chartData: ComputedRef<ChartData<'bar'>> = computed(() => ({
         labels: props.labels,
         datasets: props.datasets,
@@ -42,7 +52,9 @@
         responsive: true,
         maintainAspectRatio: true,
         layout: {
-          padding: 5,
+          padding: {
+            top: 22,
+          },
         },
         scales: {
           x: {
@@ -64,6 +76,20 @@
           },
         },
         plugins: {
+          datalabels: {
+            anchor: 'end',
+            align: 'end',
+            formatter: function (value, context) {
+              // 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 === 5 && total > 0
+                ? formatTooltipValue(props.displayedData, total, false)
+                : null
+            },
+          },
           legend: {
             display: false,
           },

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

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" scoped>
   import { ComputedRef, PropType, computed, defineComponent } from 'vue'
 
   import Chart from '@/components/Common/StatsChart/Chart.vue'
@@ -72,14 +72,8 @@
   @import '~@/scss/base';
   .stat-chart {
     .chart {
-      height: 335px;
-    }
-  }
-  @media screen and (max-width: $small-limit) {
-    .stat-chart {
-      .chart {
-        height: 280px;
-      }
+      padding: $default-padding;
+      max-height: 100%;
     }
   }
 </style>

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -129,17 +129,31 @@
   })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   @import '~@/scss/base';
 
-  .chart-radio {
-    display: flex;
-    justify-content: space-between;
-    padding: $default-padding;
+  .user-month-stats {
+    ::v-deep(.stat-chart) {
+      .chart {
+        .bar-chart {
+          height: 280px;
+        }
+        @media screen and (max-width: $small-limit) {
+          .bar-chart {
+            height: 100%;
+          }
+        }
+      }
+    }
+    .chart-radio {
+      display: flex;
+      justify-content: space-between;
+      padding: $default-padding;
 
-    label {
-      font-size: 0.9em;
-      font-weight: normal;
+      label {
+        font-size: 0.9em;
+        font-weight: normal;
+      }
     }
   }
 </style>

fittrackee_client/src/views/DashBoard.vue

@@ -6,7 +6,7 @@
     <div class="container dashboard-container">
       <div class="left-container dashboard-sub-container">
         <UserCalendar :user="authUser" />
-        <!--        <UserMonthStats :user="authUser" />-->
+        <UserMonthStats :user="authUser" />
         <!--        <UserRecords />-->
       </div>
       <div class="right-container dashboard-sub-container">
@@ -21,7 +21,7 @@
 
   import Timeline from '@/components/Dashboard/Timeline/index.vue'
   import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
-  // import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
+  import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
   // import UserRecords from '@/components/Dashboard/UserRecords.vue'
   import UserStatsCards from '@/components/Dashboard/UserStartsCards/index.vue'
   import { USER_STORE } from '@/store/constants'
@@ -33,7 +33,7 @@
     components: {
       Timeline,
       UserCalendar,
-      // UserMonthStats,
+      UserMonthStats,
       // UserRecords,
       UserStatsCards,
     },

fittrackee_client/yarn.lock

@@ -2836,6 +2836,11 @@ chart.js@^3.5.1:
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
   integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
 
+chartjs-plugin-datalabels@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
+  integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
+
 check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"