Merge pull request #71 from LS-LEDA/dev

Sentiment Analysis
LS-LEDA · Nov 27, 2021 · 3de3ec2 · 3de3ec2
2 parents aa36624 + 080397d
commit 3de3ec2
Show file tree

Hide file tree

Showing 24 changed files with 677 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -15,8 +15,16 @@
   "dependencies": {
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^6.3.95",
+    "@nlpjs/core": "^4.22.0",
+    "@nlpjs/lang-ca": "^4.22.0",
+    "@nlpjs/lang-es": "^4.22.0",
+    "@nlpjs/lang-en": "^4.22.0",
+    "@nlpjs/language": "^4.21.1",
+    "@nlpjs/nlp": "^4.22.0",
+    "@nlpjs/sentiment": "^4.22.0",
     "chart.js": "^3.6.0",
     "core-js": "^3.6.5",
+    "node-nlp": "^4.22.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.2"

diff --git a/src/App.vue b/src/App.vue
@@ -4,16 +4,33 @@
         <NavigationBar/>
         <!-- Page rendered by router -->
         <router-view/>
+        <!-- Alert -->
+        <Alert v-if="alert_status.status" :message="alert_status.message"
+               @closeAlert="close_alert"/>
     </div>
 </template>
 
 <script>
 import NavigationBar from "@/components/NavigationBar/NavigationBar";
+import Alert from "@/components/UI/Alert";
 
 export default {
     name: 'App',
     components: {
+        Alert,
         NavigationBar
+    },
+    computed: {
+        alert_status(){
+            return this.$store.state.alert;
+        }
+    },
+    methods: {
+        close_alert: function(){
+            // Clears toggle alert timeout if alert is dismissed by the user
+            clearTimeout(this.$store.state.alert.timeout);
+            this.$store.state.alert.status = false;
+        }
     }
 }
 </script>

diff --git a/src/assets/overallSentimentChartData.js b/src/assets/overallSentimentChartData.js
@@ -0,0 +1,36 @@
+export const overallSentimentChartData = {
+    type: 'doughnut',
+    data: {
+        labels: [
+            "Positive",
+            "Neutral",
+            "Negative",
+        ],
+        datasets: [{
+            label: '',
+            data: [],
+            backgroundColor: [
+                'rgba(66, 196, 158, 0.6)',
+                'rgba(233, 196, 106, 0.6)',
+                'rgba(225, 86, 86, 0.6)',
+            ],
+            borderColor: [
+                'rgba(66, 196, 158, 1)',
+                'rgba(233, 196, 106, 1)',
+                'rgba(225, 86, 86, 1)',
+            ],
+            borderWidth: 2
+        }]
+    },
+    options: {
+        responsive: true,
+        plugins: {
+            legend: {
+                display: true,
+                position: 'right',
+            },
+        }
+    }
+}
+
+export default overallSentimentChartData;
diff --git a/src/components/ImportData/DragDropArea.vue b/src/components/ImportData/DragDropArea.vue
@@ -43,14 +43,14 @@ export default {
     setup() {
         const active = ref(false)
         const toggleActive = () => {
-            active.value = !active.value
+            active.value = !active.value;
         }
 
         return { active, toggleActive }
     },
     methods: {
         informationPopUp: function () {
-          this.$emit('popUp')
+          this.$emit('popUp');
         },
         /**
          * Checks whether is a drop or a input change event
@@ -59,23 +59,23 @@ export default {
          * @param e: drop or change event
          */
         select_file: function (e) {
-            let uploaded_file
+            let uploaded_file;
             if (e.type === "drop") {
-                this.toggleActive()
-                uploaded_file = e.dataTransfer.files[0]
-                if ( !uploaded_file ) return
-                this.data_file = uploaded_file
-                this.confirm_upload()
-                return
+                this.toggleActive();
+                uploaded_file = e.dataTransfer.files[0];
+                if ( !uploaded_file ) return;
+                this.data_file = uploaded_file;
+                this.confirm_upload();
+                return;
             }
-            uploaded_file = e.target.files[0]
-            if ( !uploaded_file ) return
-            this.data_file = uploaded_file
-            this.$refs.moodle_file.value = null
-            this.confirm_upload()
+            uploaded_file = e.target.files[0];
+            if ( !uploaded_file ) return;
+            this.data_file = uploaded_file;
+            this.$refs.moodle_file.value = null;
+            this.confirm_upload();
         },
         confirm_upload: function () {
-            this.$emit('onUpload', this.data_file.name)
+            this.$emit('onUpload', this.data_file);
         }
     }
 }

diff --git a/src/components/ImportData/InformationPopUp.vue b/src/components/ImportData/InformationPopUp.vue
@@ -19,7 +19,7 @@ export default {
     emits: ['infoPopUp'],
     methods: {
         hidePopUp: function () {
-              this.$emit('infoPopUp')
+            this.$emit('infoPopUp');
         }
     }
 }

diff --git a/src/components/ImportData/UploadConfirmation.vue b/src/components/ImportData/UploadConfirmation.vue
@@ -47,7 +47,7 @@ export default {
             file_icon: mdiFile,
             cancel_icon: mdiClose,
             upload_icon: mdiUpload,
-            alive: false,
+            alive: true,
         }
     }
 }

diff --git a/src/components/NavigationBar/DownloadButton.vue b/src/components/NavigationBar/DownloadButton.vue
@@ -22,7 +22,7 @@ export default {
          * false: shrank
          */
         nav_state() {
-            return this.$store.state.navigation_bar_status
+            return this.$store.state.navigation_bar_status;
         }
     },
     data() {

diff --git a/src/components/NavigationBar/NavigationBar.vue b/src/components/NavigationBar/NavigationBar.vue
@@ -35,7 +35,7 @@ export default {
          * false: shrank
          */
         nav_state() {
-            return this.$store.state.navigation_bar_status
+            return this.$store.state.navigation_bar_status;
         }
     },
     data() {

diff --git a/src/components/NavigationBar/NavigationButton.vue b/src/components/NavigationBar/NavigationButton.vue
@@ -18,7 +18,7 @@ export default {
          * false: shrank
          */
         nav_state() {
-            return this.$store.state.navigation_bar_status
+            return this.$store.state.navigation_bar_status;
         }
     },
     props: ['page'],

diff --git a/src/components/NavigationBar/NavigationHeader.vue b/src/components/NavigationBar/NavigationHeader.vue
@@ -24,7 +24,7 @@
                 @click="changeNavigationBarStatus"
                 @mouseover="logo_hover"
                 @mouseleave="logo_not_hover">
-            <svg-icon size="36" type="mdi" :path="path" class="hover:drop-shadow shrink_icon place-self-center"/>
+            <svg-icon size="36" type="mdi" :path="path" class="hover:drop-shadow text-gray-500 place-self-center"/>
         </button>
     </div>
 </template>
@@ -41,10 +41,10 @@ export default {
     },
     computed: {
         nav_state() {
-            return this.$store.state.navigation_bar_status
+            return this.$store.state.navigation_bar_status;
         },
         imported_data() {
-            return this.$store.state.imported_data
+            return this.$store.state.imported_data;
         }
     },
     data() {
@@ -56,29 +56,20 @@ export default {
     methods: {
         // Expand or shrink navigation bar
         changeNavigationBarStatus() {
-            this.$store.commit('changeNavigationBarStatus')
+            this.$store.commit('changeNavigationBarStatus');
         },
         logo_hover() {
             if(!this.nav_state) {
-                this.logo_hovered = true
+                this.logo_hovered = true;
             }
         },
         logo_not_hover() {
-            this.logo_hovered = false
+            this.logo_hovered = false;
         }
     }
 }
 </script>
 
 <style scoped>
-    .shrink_icon {
-        color: gray;
-    }
 
-    .fade-enter-active, .fade-leave-active {
-        transition: opacity .5s;
-    }
-    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-        opacity: 0;
-    }
 </style>
diff --git a/src/components/Sentiment/SentimentChatCard.vue b/src/components/Sentiment/SentimentChatCard.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="flex w-full h-auto gap-x-3 hover:cursor-pointer">
+        <!-- Profile Logo -->
+        <div class="flex rounded-xl bg-blue-300 h-16 w-1/12">
+            <svg-icon class="w-full h-full" type="mdi" :path="profile_icon"/>
+        </div>
+
+        <!-- Message Box -->
+        <div class="flex flex-col w-full bg-blue-200 rounded-xl p-10 text-justify border-r-8"
+             :class="border_color()">
+            <div class="flex justify-between">
+                <div class="text-gray-500 font-bold"> @{{ messages.username }} </div>
+                <div class="text-gray-400"> {{ messages.created }} </div>
+            </div>
+            <div> {{ messages.message }} </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SvgIcon from "@jamescoyle/vue-icon";
+import {mdiAccount} from "@mdi/js";
+
+export default {
+    name: "SentimentChatCard",
+    components: {
+        SvgIcon
+    },
+    props: ['messages'],
+    data() {
+        return {
+            profile_icon: mdiAccount,
+        }
+    },
+    methods: {
+        border_color: function () {
+            switch (this.messages.sentiment){
+                case "positive":
+                    return 'border-green-500';
+                case "negative":
+                    return 'border-red-500';
+                default:
+                    return 'border-yellow-500';
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Sentiment/SentimentFileCard.vue b/src/components/Sentiment/SentimentFileCard.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="flex flex-col rounded-lg bg-white w-full h-full p-10">
+        <div class="font-extrabold uppercase"> Forum File Data </div>
+        <div class="flex flex-col">
+            <!-- Forum message file name -->
+            <div class="flex justify-between">
+                <div class="font-bold"> File name </div>
+                <div class="flex"> {{ file_name }} </div>
+            </div>
+            <!-- Forum total messages -->
+            <div class="flex justify-between">
+                <div class="font-bold"> Messages </div>
+                <div> {{ messages }} </div>
+            </div>
+            <!-- Forum total users -->
+            <div class="flex justify-between">
+                <div class="font-bold"> Users </div>
+                <div> {{ users }} </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SentimentFileCard",
+    props: ['file_name', 'messages', 'users']
+}
+</script>
+
+<style scoped>
+
+</style>