Merge pull request #357 from SpiritFour/add_emoji_cloud

Add emoji cloud
SpiritFour · Jan 14, 2025 · 937cc8a · 937cc8a
2 parents b79db2f + 2a4074e
commit 937cc8a
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 35 deletions.
diff --git a/components/charts/EmojiCloud.vue b/components/charts/EmojiCloud.vue
@@ -0,0 +1,87 @@
+<template>
+  <div ref="chartdiv"></div>
+</template>
+
+<script>
+import { Chat } from "~/utils/transformChatData";
+import { onlyEmoji } from "emoji-aware";
+
+export default {
+  name: "EmojiCloud",
+  props: {
+    chartdata: new Chat(),
+    minWordLength: {
+      type: Number,
+      default: 0,
+    },
+    minFontSize: {
+      type: Number,
+      default: 6,
+    },
+    randomness: {
+      type: Number,
+      default: 0.1,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      series: null,
+    };
+  },
+  watch: {
+    chartdata: {
+      handler() {
+        this.updateGraph();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    let { am4core, am4themes_animated, am4plugins_wordCloud } = this.$am4core();
+    am4core.useTheme(am4themes_animated);
+    am4core.options.onlyShowOnViewport = true;
+
+    this.chart = am4core.create(
+      this.$refs.chartdiv,
+      am4plugins_wordCloud.WordCloud
+    );
+    this.series = this.chart.series.push(
+      new am4plugins_wordCloud.WordCloudSeries()
+    );
+    this.series.dataFields.word = "word";
+    this.series.dataFields.value = "freq";
+    this.series.labels.template.tooltipText = "[bold]{freq}[/] x {word}";
+    this.series.accuracy = 5;
+    // Dynamic font scaling based on frequency
+    this.series.minFontSize = 12;
+    this.series.maxFontSize = 36;
+    this.series.minWordLength = 0;
+    this.updateGraph();
+  },
+  beforeDestroy: function () {
+    this.chart.dispose();
+  },
+  methods: {
+    updateGraph() {
+      this.chartdata.getEmojiCloudData().then((words) => {
+        // Regex pattern to match currency like '24,95€'
+        const filterPattern = /(?:€|\$|R\$|₹)?\d+[,.]?\d*(?:€|\$|R\$|₹)?|[!?]|^\.$/;
+
+        const wordData = words.filter((wordObj) => {
+          // Check if the word matches the currency pattern
+          const isCurrency = filterPattern.test(wordObj.word);
+
+          // Remove words that are currencies or entirely emojis
+          return !isCurrency && onlyEmoji(wordObj.word).length > 0;
+        });
+
+        // Assign the filtered data
+        this.series.data = wordData;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/components/charts/Results.vue b/components/charts/Results.vue
@@ -82,6 +82,9 @@
       <div class="text-h3 font-weight-bold pt-10">{{ $t("wordCloud") }}</div>
       <ChartsWordCloud id="wordcloud" :chartdata="chat" class="px-10" />
 
+      <div class="text-h3 font-weight-bold pt-10">Emojis</div>
+      <ChartsEmojiCloud id="emojicloud" :chartdata="chat" class="px-10" />
+
       <DownloadPopup
         :chat="chat"
         data-html2canvas-ignore

diff --git a/components/charts/WordCloud.vue b/components/charts/WordCloud.vue
@@ -4,6 +4,7 @@
 
 <script>
 import { Chat } from "~/utils/transformChatData";
+import { withoutEmoji } from "emoji-aware";
 
 import stopwords from "stopwords-de";
 
@@ -36,7 +37,13 @@ export default {
   },
   methods: {
     updateGraph() {
-      this.chartdata.getAllWords().then((x) => (this.series.data = x));
+      this.chartdata.getAllWords().then((words) => {
+        const wordData = words.filter((wordObj) => {
+          // Remove Emojis
+          return withoutEmoji(wordObj.word).length > 0;
+        });
+        this.series.data = wordData
+      });
     },
   },
   watch: {
@@ -62,7 +69,8 @@ export default {
     this.series.dataFields.word = "word";
     this.series.dataFields.value = "freq";
     this.series.labels.template.tooltipText = "[bold]{freq}[/] x {word}";
-    this.series.accuracy = 5;
+    this.series.accuracy = 4;
+    this.series.minFontSize = 8;
     this.updateGraph();
   },
   beforeDestroy: function () {

diff --git a/pages/whatsapp-wrapped-year-review.vue b/pages/whatsapp-wrapped-year-review.vue
@@ -300,7 +300,6 @@ body {
 }
 
 .container {
-  max-width: 800px;
   margin: auto;
   padding: 20px;
 }
@@ -310,7 +309,7 @@ body {
   background: linear-gradient(135deg, #25d366, #128c7e);
   color: white;
   text-align: center;
-  padding: 50px 20px;
+  padding: 20px 20px;
 }
 
 .hero-section h1 {
@@ -331,34 +330,4 @@ body {
 .cta-button:hover {
   background: #ddd;
 }
-
-/* Upload Section */
-.upload-box {
-  border: 2px dashed #ccc;
-  text-align: center;
-  padding: 20px;
-  margin: 20px 0;
-}
-
-.upload-box input {
-  display: block;
-  margin: 10px auto;
-  font-size: 1rem;
-}
-
-/* Footer */
-.footer {
-  text-align: center;
-  background: #f4f4f4;
-  padding: 10px 20px;
-}
-
-.footer a {
-  color: #128c7e;
-  text-decoration: none;
-}
-
-.footer a:hover {
-  text-decoration: underline;
-}
 </style>
diff --git a/utils/transformChatData.js b/utils/transformChatData.js
@@ -110,14 +110,22 @@ export class Chat {
     return hours;
   }
 
-  constructor(chatObject = [], groupAfter = 9, maxWordsWordCloud = 150) {
+  // please help with maxWordsEmojiCloud
+  constructor(
+    chatObject = [],
+    groupAfter = 9,
+    maxWordsWordCloud = 150,
+    maxWordsEmojiCloud = 50000
+  ) {
     // this one is the complete input
     this.chatObject = chatObject;
 
     // for groupmessages we probably want to group after some time
     this._groupAfter = groupAfter;
     // max number of words shown in word cloud
     this._maxWordsWordCloud = maxWordsWordCloud;
+    // max number of words shown in emoji cloud
+    this._maxWordsEmojiCloud = maxWordsEmojiCloud;
     // here we remove messages (i.e. system messages)
     this.filterdChatObject = Chat.removeSystemMessages(this.chatObject);
     //number of persons in chat
@@ -444,6 +452,14 @@ export class Chat {
               "_omitted",
               "_weggelassen",
               "_attached",
+              "edited>",
+              "<This",
+              "message",
+              "Missed",
+              "voice",
+              "call.",
+              "Location:",
+              "deleted",
             ].includes(word[0].toLowerCase())
           ) && word[1] > 1
       )
@@ -455,4 +471,9 @@ export class Chat {
   getAllWords() {
     return this._allWords.then((x) => x.slice(0, this._maxWordsWordCloud));
   }
+
+  // New method to extract and count emojis, limited to 1000 emojis
+  getEmojiCloudData() {
+    return this._allWords.then((x) => x.slice(0, this._maxWordsEmojiCloud));
+  }
 }