add new project stats

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@quasar/extras": "^1.0.0",
     "axios": "^0.24.0",
+    "chart.js": "^4.4.6",
     "codemirror": "^5.65.17",
     "codemirror-editor-vue3": "^0.2.4",
     "conllup": "^3.1.3",
@@ -40,6 +41,7 @@
     "uuid": "^9.0.0",
     "vue": "^3.2.0",
     "vue-audio-visual": "^2.4.0",
+    "vue-chartjs": "^5.3.2",
     "vue-i18n": "^9.1.9",
     "vue-matomo": "^4.2.0",
     "vue-next-select": "^2.10.1",

src/components/charts/PieChart.vue

@@ -0,0 +1,63 @@
+<template>
+  <Pie :key="key" :options="options" :data="data"></Pie>
+</template>
+<script lang="ts">
+import { Pie } from 'vue-chartjs';
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
+import { PropType, defineComponent } from 'vue';
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+export default defineComponent({
+  name: 'PieChart',
+  components: {
+    Pie
+  }, 
+  props: {
+    labels: {
+      type: Object as PropType<string[]>,
+      required: true,
+    }, 
+    values: {
+      type: Object as PropType<number[]>,
+      required: true,
+    }
+  },
+  data() {
+    const options = {
+      responsive: true,
+      maintainAspectRatio: false
+    }
+    const data = {
+      labels: [] as string[],
+      datasets: [
+        {
+          backgroundColor: [] as string[],
+          data: [] as number[],
+        }
+      ]
+    };
+    const backgroundColors: string[] = [];
+    return {
+      options,
+      data,
+      backgroundColors,
+      key: 0,
+    }
+  },
+  mounted() {
+    this.backgroundColors = this.values.map(() => this.getRandomColor());
+    this.data.labels = this.labels;
+    this.data.datasets[0].backgroundColor = this.backgroundColors;
+    this.data.datasets[0].data = this.values;
+    this.key += 1;
+  }, 
+  methods: {
+    getRandomColor() {
+      const r = Math.floor(Math.random() * 255);
+      const g = Math.floor(Math.random() * 255);
+      const b = Math.floor(Math.random() * 255);
+      return `rgba(${r}, ${g}, ${b}, 0.7)`;
+    }
+  }
+});
+</script>

src/components/project/StatisticsProject.vue

@@ -117,8 +117,24 @@
       </q-card-section>
     </q-card>
   </div>
+  <div class="row q-pa-md justify-between q-gutter-md">
+    <q-card v-if="labels.length && values.length" flat bordered class="col">
+      <q-card-section class="text-center text-h6">
+        Users' contributions
+      </q-card-section>
+      <q-card-section>
+        <PieChart :labels="labels" :values="values"></PieChart>
+      </q-card-section>
+
+    </q-card>
+    <q-card flat bordered class="col">
+
+    </q-card>
+  </div>
 </template>
 <script lang="ts">
+import PieChart from 'src/components/charts/PieChart.vue';
+
 import { sample_t } from 'src/api/backend-types';
 import { mapState } from 'pinia';
 import { useStatisticStore } from 'src/pinia/modules/stats';
@@ -128,6 +144,9 @@ import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
   name: 'StatisticsProject',
+  components: {
+    PieChart,
+  },
   props: {
     projectName: {
       type: String as PropType<string>,
@@ -138,16 +157,35 @@ export default defineComponent({
       required: true,
     }
   },
+  data() {
+    return {
+      labels: [] as string[],
+      values: [] as number[],
+    }
+  },
   computed: {
     ...mapState(useStatisticStore, ['projectStats', 'topUserProgress', 'topUserProgressLabel']),
     projectTags() {
       return this.samples.map((sample) => Object.keys(sample.tags)).reduce((a: string[], b: string[]) => [...a, ...b], []);
     }
   },
+  mounted() {
+    this.getTotalTreesByUser();
+  },
   methods: {
     timeAgo(secsAgo: number) {
       return timeAgo(secsAgo);
     },
+    getTotalTreesByUser() {
+      const totalTreesByUser = this.samples.map(sample => sample.treeByUser).reduce((total, sampleTrees) => {
+        for (const user in sampleTrees) {
+          total[user] = (total[user] || 0) + sampleTrees[user];
+        }
+        return total
+      }, {});
+      this.labels = Object.keys(totalTreesByUser);
+      this.values = Object.values(totalTreesByUser);
+    },
   }
 });