feat: average response time

components/charts/AverageResponseTime.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-container class="text-center py-10">
+    <v-row justify="center" v-if="chartdata">
+      <v-col
+        v-for="(person, index) in chartdata.messagesPerPerson"
+        :key="index"
+        cols="12"
+        sm="6"
+        md="4"
+        class="mb-5"
+      >
+        <div class="text-h4 font-weight-bold">
+          {{ $t("averageResponseTimeFor", { name: person.name }) }}
+        </div>
+        <div class="text-h5">
+          {{
+            person.averageResponseTime !== null
+              ? formatResponseTime(person.averageResponseTime)
+              : $t("noDataAvailable")
+          }}
+        </div>
+      </v-col>
+    </v-row>
+    <div v-else class="text-h5">
+      {{ $t("noDataAvailable") }}
+    </div>
+  </v-container>
+</template>
+
+<script>
+import { Chat } from "~/utils/transformChatData";
+
+export default {
+  name: "AverageResponseTime",
+  props: {
+    chartdata: {
+      type: new Chat(),
+      required: true,
+    },
+  },
+  methods: {
+    formatResponseTime(timeInMillis) {
+      const seconds = Math.floor((timeInMillis / 1000) % 60);
+      const minutes = Math.floor((timeInMillis / (1000 * 60)) % 60);
+      const hours = Math.floor((timeInMillis / (1000 * 60 * 60)) % 24);
+      console.log({ hours, minutes, seconds });
+
+      if (hours > 0) {
+        return this.$t("responseTimeHours", { hours, minutes, seconds });
+      } else if (minutes > 0) {
+        return this.$t("responseTimeMinutes", { minutes, seconds });
+      } else {
+        return this.$t("responseTimeSeconds", { seconds });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped></style>

components/charts/Results.vue

@@ -79,6 +79,11 @@
         </v-col>
       </v-row>
 
+      <div class="text-h3 font-weight-bold pt-10">
+        {{ $t("averageResponseTime") }}
+      </div>
+      <AverageResponseTime :chartdata="chat" class="px-10" />
+
       <div class="text-h3 font-weight-bold pt-10">{{ $t("wordCloud") }}</div>
       <ChartsWordCloud id="wordcloud" :chartdata="chat" class="px-10" />
 
@@ -107,7 +112,10 @@
 </template>
 
 <script>
+import AverageResponseTime from "~/components/charts/AverageResponseTime.vue";
+
 export default {
+  components: { AverageResponseTime },
   props: ["chat", "attachments", "isValidSubscription"],
 };
 </script>

components/charts/WordCloud.vue

@@ -9,7 +9,7 @@ import { withoutEmoji } from "emoji-aware";
 import stopwords from "stopwords-de";
 
 export default {
-  name: "WordCloud",
+      name: "WordCloud",
   props: {
     chartdata: new Chat(),
     minWordLength: {