From 3ee69d424f84b367cd3a8e269db417ded90a209d Mon Sep 17 00:00:00 2001
From: Vitaly Davidenko <9862028+vitalikda@users.noreply.github.com>
Date: Tue, 1 Dec 2020 17:45:53 +0300
Subject: [PATCH] add doughnut chart

---
 components/DoughnutChart.vue | 17 +++++++++
 pages/demo.vue               | 70 +++++++++++++++++++++++++++++-------
 utils.js                     | 46 ++++++++++++++++++++++--
 3 files changed, 118 insertions(+), 15 deletions(-)
 create mode 100644 components/DoughnutChart.vue

diff --git a/components/DoughnutChart.vue b/components/DoughnutChart.vue
new file mode 100644
index 0000000..d1ff354
--- /dev/null
+++ b/components/DoughnutChart.vue
@@ -0,0 +1,17 @@
+<script>
+import { Doughnut } from "vue-chartjs";
+
+export default {
+  extends: Doughnut,
+  props: ["labels", "datasets"],
+  mounted() {
+    this.renderChart(
+      {
+        labels: this.labels,
+        datasets: this.datasets
+      },
+      { responsive: true, maintainAspectRatio: false }
+    );
+  }
+};
+</script>
diff --git a/pages/demo.vue b/pages/demo.vue
index a34584c..eaf78b4 100644
--- a/pages/demo.vue
+++ b/pages/demo.vue
@@ -11,37 +11,59 @@
 
       <v-container id="workout-stats" v-show="status === 2" fluid>
         <v-row>
-          <v-col cols="12" sm="4">
+          <v-col cols="12" sm="3">
             <v-card shaped>
               <v-card-title class="display-2">
-                {{ workoutStats.totalWorkouts }}
+                {{ workoutStats.totalWorkouts | fInteger }}
               </v-card-title>
               <v-card-text>Total workouts</v-card-text>
             </v-card>
           </v-col>
-          <v-col cols="12" sm="4">
+          <v-col cols="12" sm="3">
             <v-card shaped>
               <v-card-title class="display-2">
-                {{ workoutStats.hoursTrained }}
+                {{ workoutStats.hoursTrained | fInteger }}
               </v-card-title>
               <v-card-text>Hours trained</v-card-text>
             </v-card>
           </v-col>
-          <v-col cols="12" sm="4">
+          <v-col cols="12" sm="3">
             <v-card shaped>
               <v-card-title class="display-2">
-                {{ workoutStats.yearsTrained }}
+                {{ workoutStats.yearsTrained | fInteger }}
               </v-card-title>
               <v-card-text>Years trained</v-card-text>
             </v-card>
           </v-col>
+          <v-col cols="12" sm="3">
+            <v-card shaped>
+              <v-card-title class="display-2">
+                {{ workoutStats.workoutsPerWeek | fInteger }}
+              </v-card-title>
+              <v-card-text>Workouts per week</v-card-text>
+            </v-card>
+          </v-col>
         </v-row>
       </v-container>
 
       <v-container id="line-chart" v-if="status === 2" fluid>
         <v-row>
-          <v-col>
-            <line-chart :datasets="chartData" />
+          <v-col cols="12" sm="8">
+            <v-card>
+              <v-card-text>
+                <line-chart :datasets="lineChartData" />
+              </v-card-text>
+            </v-card>
+          </v-col>
+          <v-col cols="12" sm="4">
+            <v-card>
+              <v-card-text>
+                <doughnut-chart
+                  :labels="doughnutChartData.labels"
+                  :datasets="doughnutChartData.datasets"
+                />
+              </v-card-text>
+            </v-card>
           </v-col>
         </v-row>
       </v-container>
@@ -91,8 +113,13 @@
 
 <script>
 import dayjs from "dayjs";
-import { calculateTrainedHours, getWorkoutsDataForLineChart } from "../utils";
+import {
+  calculateTrainedHours,
+  getWorkoutsDataForLineChart,
+  getWorkoutsDataForDoughnutChart
+} from "../utils";
 import LineChart from "../components/LineChart";
+import DoughnutChart from "../components/DoughnutChart";
 
 const STATUS_INITIAL = 0,
   STATUS_LOADING = 1,
@@ -101,7 +128,8 @@ const STATUS_INITIAL = 0,
 
 export default {
   components: {
-    LineChart
+    LineChart,
+    DoughnutChart
   },
   data() {
     return {
@@ -111,9 +139,12 @@ export default {
       workoutStats: {
         totalWorkouts: 0,
         hoursTrained: 0,
-        yearsTrained: 0
+        yearsTrained: 0,
+        workoutsPerWeek: 0
       },
-      chartData: null
+      lineChartData: null,
+      doughnutChartData: null,
+      doughnutChartOutputLength: 5
     };
   },
   async fetch() {
@@ -125,6 +156,9 @@ export default {
     fDate(date) {
       date = new Date(date);
       return dayjs(date).format("DD MMM YYYY HH:mm:ss");
+    },
+    fInteger(number) {
+      return Math.floor(number);
     }
   },
   methods: {
@@ -143,7 +177,17 @@ export default {
           this.workouts[this.workouts.length - 1].performed_at,
           "year"
         );
-        this.chartData = await getWorkoutsDataForLineChart(this.workouts);
+        this.workoutStats.workoutsPerWeek =
+          this.workouts.length /
+          (await dayjs(this.workouts[0].performed_at).diff(
+            this.workouts[this.workouts.length - 1].performed_at,
+            "week"
+          ));
+        this.lineChartData = await getWorkoutsDataForLineChart(this.workouts);
+        this.doughnutChartData = await getWorkoutsDataForDoughnutChart(
+          this.workouts,
+          this.doughnutChartOutputLength
+        );
         this.status = STATUS_SUCCESS;
       } catch (e) {
         this.showError(e);
diff --git a/utils.js b/utils.js
index 8cdab4e..a0eb325 100644
--- a/utils.js
+++ b/utils.js
@@ -43,11 +43,53 @@ function getWorkoutsDataForLineChart(workouts) {
     datasets.push({
       label: key,
       data: d[key],
-      backgroundColor: "#" + Math.floor(Math.random() * 16777215).toString(16)
+      backgroundColor: random_rgba()
     });
   });
 
   return datasets;
 }
 
-export { calculateTrainedHours, getWorkoutsDataForLineChart };
+// generate random rgba
+function random_rgba() {
+  let o = Math.round,
+    r = Math.random,
+    s = 255;
+  return `rgba(${o(r() * s)},${o(r() * s)},${o(r() * s)},${r().toFixed(2)})`;
+}
+
+// util to calculate data for Doughnut chart
+function getWorkoutsDataForDoughnutChart(workouts, outputLength) {
+  const d = {};
+  workouts.forEach(w => {
+    const name = w.workout;
+    if (!d[name]) {
+      d[name] = 0;
+    }
+    d[name]++;
+  });
+
+  const chartData = {
+    labels: [],
+    datasets: [{ data: [], backgroundColor: [], borderWidth: 0 }]
+  };
+  Object.keys(d)
+    .sort((a, b) => {
+      return d[b] - d[a];
+    })
+    .forEach((key, index) => {
+      if (index < outputLength) {
+        chartData["labels"].push(key);
+        chartData["datasets"][0]["data"].push(d[key]);
+        chartData["datasets"][0]["backgroundColor"].push(random_rgba());
+      }
+    });
+
+  return chartData;
+}
+
+export {
+  calculateTrainedHours,
+  getWorkoutsDataForLineChart,
+  getWorkoutsDataForDoughnutChart
+};