80/feat/summary card popup

src/assets/summaryCardChartData.js

@@ -0,0 +1,40 @@
+export const summaryCardChartData = {
+    type: 'bar',
+    data: {
+        labels: [],
+        datasets: [{
+            data: [],
+            backgroundColor: [
+                'rgba(0, 99, 132, 0.6)',
+            ],
+            borderColor: [
+                'rgba(0, 99, 132, 1)',
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        responsive: true,
+        plugins: {
+            legend: {
+                display: false
+            },
+        },
+        interaction: {
+            mode: 'x',
+            intersect: false
+        },
+        scales: {
+            x: {
+                type: 'category',
+                ticks: {
+                    display: false
+                }
+            },
+            y: {
+            }
+        }
+    }
+}
+
+export default summaryCardChartData;

src/components/Summary/InteractionCard.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- Interactions Card  -->
-    <div class="flex w-full h-96 bg-white rounded-3xl p-10 mt-5 hover:cursor-pointer filter drop-shadow-lg
+    <div class="flex w-full h-full bg-white rounded-3xl p-10 mt-5 hover:cursor-pointer filter drop-shadow-lg
         transform transition duration-500">
         <!-- Card Information -->
         <div class="flex flex-col w-5/12 justify-self-center self-center space-y-3">

src/components/Summary/SummaryCard.vue

@@ -1,9 +1,11 @@
 <template>
     <div class="flex flex-col w-full bg-white rounded-3xl filter drop-shadow-lg
-    transform transition duration-500 hover:scale-[101%] p-10 pb-5" :class="card_status ? 'pb-10': null">
+    transform transition duration-500 hover:scale-[101%] p-10 pb-5 cursor-pointer"
+         @click="show_details"
+         :class="card_status ? 'pb-10': null">
         <!-- Card information -->
         <template v-if="card_status">
-            <svg-icon class="items-end place-self-end hover:cursor-pointer text-gray-400" type="mdi" :path=close_icon @click="changeView()"></svg-icon>
+            <svg-icon class="items-end place-self-end hover:cursor-pointer text-gray-400" type="mdi" :path=close_icon @click.stop="changeView()"></svg-icon>
             <span class="flex h-full mx-3 text-xl font-bold text-center self-center place-self-center items-center">
                 {{ statistic.info }}
             </span>
@@ -21,7 +23,7 @@
                 <svg-icon class ="justify-self-end" height="100" width="100" type="mdi" :path="statistic.icon"></svg-icon>
             </div>
             <!-- Card Information Icon -->
-            <svg-icon class="items-end place-self-end hover:cursor-pointer" type="mdi" :path=help_icon @click="changeView()"></svg-icon>
+            <svg-icon class="items-end place-self-end hover:cursor-pointer z-50" type="mdi" :path=help_icon @click.stop="changeView()"></svg-icon>
         </template>
     </div>
 </template>
@@ -33,6 +35,7 @@ import {mdiClose, mdiHelpCircleOutline} from "@mdi/js"
 export default {
     name: "SummaryCard",
     props: ['statistic'],
+    emits: ['popUp'],
     components: {
         SvgIcon
     },
@@ -51,6 +54,12 @@ export default {
     methods: {
         changeView: function () {
             this.card_status = !this.card_status;
+        },
+        /**
+         * Renders a popup with in the parent component
+         */
+        show_details: function () {
+            this.$emit('popUp');
         }
     }
 }

src/components/Summary/SummaryPopUp.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="flex flex-col absolute w-full h-full justify-center place-items-center bg-gray-400 bg-opacity-75 transition-opacity"
+         role="dialog" aria-modal="true">
+
+        <!-- PopUp white background -->
+        <div class="flex flex-col bg-white w-11/12 h-5/6 rounded-xl z-50 p-5 gap-y-5">
+            <div class="flex w-full justify-between">
+                <!-- PopUp Title -->
+                <div class="w-auto bg-blue-300 rounded-xl py-2 px-5 font-bold">
+                    {{ card_name }}
+                </div>
+                <!-- Close button -->
+                <button type="button" class=" justify-self-end bg-gray-100 text-gray-400 rounded-lg focus:ring-2 focus:ring-gray-200
+                hover:bg-gray-200 inline-flex hover:bg-blue-500 rounded-xl w-10 h-10 place-content-center items-center"
+                        @click="close_pop_up({card_name, summaryID})">
+                    <SvgIcon class="hover:cursor-pointer" type="mdi" :path="close_icon"/>
+                </button>
+            </div>
+
+            <!-- Summary card chart -->
+            <div class="flex w-full h-3/6">
+                <div class="flex relative w-full w-full text-center mx-6 font-bold text-4xl rounded-3xl">
+                    <canvas class="max-h-full max-w-full" id="summary_chart"></canvas>
+                </div>
+            </div>
+            <!-- Summary card table -->
+            <div v-if="!withData" class="self-center"> No data </div>
+            <div v-else class="flex w-full max-h-full justify-center overflow-y-scroll">
+                <table class="table-auto">
+                    <thead class="bg-blue-300">
+                        <tr class="text-left uppercase">
+                            <th class="p-3"> Interactions type </th>
+                            <th class="p-3"> Number of interactions </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    <tr class="bg-blue-100 hover:bg-blue-400" v-for="(interaction, index) in summary_interactions" :key="index">
+                        <td class="font-bold p-3"> {{ interaction[0] }} </td>
+                        <td class="p-3"> {{ interaction[1] }} </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="absolute w-full h-full filter backdrop-blur-sm z-10"></div>
+    </div>
+</template>
+
+<script>
+import SvgIcon from "@jamescoyle/vue-icon";
+import {mdiClose} from "@mdi/js";
+import {Chart, registerables} from "chart.js";
+import summaryCardChartData from "@/assets/summaryCardChartData";
+
+export default {
+    name: "SummaryPopUp",
+    components: {
+        SvgIcon
+    },
+    props: ['summaryID', 'card_name'],
+    methods: {
+        close_pop_up: function ({card_name, summaryID}) {
+            this.$emit('popUp', {card_name, summaryID});
+        },
+        summary_chart: function (chartId, chartData) {
+            let ctx = document.getElementById(chartId);
+            Chart.register(...registerables);
+            this.interactions_chart = new Chart(ctx, {
+                type: chartData.type,
+                data: chartData.data,
+                options: chartData.options,
+            });
+        }
+    },
+    mounted() {
+        try {
+            let unsorted_interactions = Object.entries(this.$store.state.summary_cards[this.summaryID]);
+            // Sort by interaction value - TimSort
+            // Each object ['Interaction Name', 'Interaction Value']
+            this.summary_interactions = unsorted_interactions.sort(
+                (a, b) => {
+                    return b[1] - a[1]
+                }
+            );
+
+            let labels = [];
+            let data = [];
+            this.summary_interactions.forEach( interaction => {
+                labels.push(interaction[0]);
+                data.push(interaction[1])
+            })
+            this.summaryCardChartData.options.scales.x.labels = labels;
+            this.summaryCardChartData.data.datasets[0].data = data;
+            // Create Summary PopUp chart once the component is mounted
+            this.summary_chart('summary_chart', this.summaryCardChartData);
+        } catch (error) {
+            // No interactions for the selected summary card
+            this.withData = false;
+        }
+    },
+    data(){
+        return {
+            close_icon: mdiClose,
+            summary_interactions: {},
+            withData: true,
+            summaryCardChartData: summaryCardChartData
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/Dashboard/DashboardPage.vue

@@ -1,20 +1,35 @@
 <template>
-    <section id="dashboard" class="flex flex-col w-screen h-screen p-10 overflow-y-auto">
-        <!-- Tabs buttons -->
-        <div class="flex flex-row pb-5 space-x-5">
-            <router-link :to="tab.tab_path" v-for="(tab, index) in tabs" :key="index" class="">
-                <button class="bg-blue-100 hover:bg-blue-200 rounded-lg text-2xl font-bold py-3 px-10"> {{ tab.tab_name }}</button>
-            </router-link>
+    <section id="dashboard" class="relative flex flex-col w-full h-full">
+        <div class="flex flex-col w-full h-full p-10 overflow-y-auto">
+            <!-- Tabs buttons -->
+            <div class="flex flex-row pb-5 space-x-5">
+                <router-link :to="tab.tab_path" v-for="(tab, index) in tabs" :key="index" class="">
+                    <button class="bg-blue-100 hover:bg-blue-200 rounded-lg text-2xl font-bold py-3 px-10"> {{ tab.tab_name }}</button>
+                </router-link>
+            </div>
+            <!-- Dashboard deeply nested component view -->
+            <router-view @popUp="toggle_popup"></router-view>
         </div>
-        <!-- Dashboard deeply nested component view -->
-        <router-view></router-view>
+        <SummaryPopUp v-if="popup" @popUp="toggle_popup" :summaryID="summaryID" :card_name="card_name" class="absolute"/>
     </section>
 </template>
 
 <script>
 
+import SummaryPopUp from "@/components/Summary/SummaryPopUp";
+
 export default {
     name: "DashboardPage",
+    components: {
+        SummaryPopUp
+    },
+    methods: {
+        toggle_popup: function ({card_name, summaryID}) {
+            this.summaryID = summaryID;
+            this.card_name = card_name;
+            this.popup = !this.popup;
+        }
+    },
     data() {
         return {
             tabs: [
@@ -34,7 +49,10 @@ export default {
                     tab_name: "Sentimental",
                     tab_path: "/dashboard/sentimental-analysis"
                 },
-            ]
+            ],
+            popup: false,
+            summaryID: 0,
+            card_name: ""
         }
     }
 }

src/pages/Dashboard/Summary/Summary.vue

@@ -8,7 +8,9 @@
                 sm:auto-rows-auto sm:grid-cols-1
                 md:auto-rows-auto md:grid-cols-2
                 xl:auto-rows-auto xl:grid-cols-3">
-      <SummaryCard v-for="(statistic, index) in summary.statistics" :statistic="statistic" :key="index"/>
+        <SummaryCard v-for="(statistic, index) in summary.statistics"
+                   :statistic="statistic" :key="index"
+                    @popUp="detailed_information_pop_up({card_name: statistic.statistic_name, summaryID: index})"/>
     </div>
 </template>
 
@@ -26,6 +28,7 @@ import {
 
 export default {
     name: "Summary",
+    emits: ['popUp'],
     components: {
         InteractionCard,
         SummaryCard
@@ -35,20 +38,28 @@ export default {
             let summary_types = this.$store.state.summary.summary_types;
             let total_interactions = this.$store.state.summary.total_interactions;
 
-            this.statistics.forEach( (stat) => {
+            // TODO: Fix this hardcoded part for future releases. Specially when re-ordering is enabled
+            this.statistics.forEach( (stat, index) => {
                 switch ( stat.statistic_name ) {
                     case 'Tasks':
                         stat.number = summary_types['Tarea'].count;
+                        this.$store.commit('saveSummaryCard', {summaryID: index, summary: summary_types['Tarea'].interactions});
                         break;
                     case 'URL':
                         stat.number = summary_types['URL'].count;
+                        this.$store.commit('saveSummaryCard', {summaryID: index, summary: summary_types['URL'].interactions});
                         break;
                 }
             });
             return { total_interactions: total_interactions, statistics: this.statistics }
         },
         logs() {
             return this.$store.state.logs;
+        },
+    },
+    methods: {
+        detailed_information_pop_up: function ({card_name, summaryID}){
+            this.$emit('popUp', {card_name, summaryID});
         }
     },
     data(){

src/services/forum-processing.js

@@ -1,6 +1,7 @@
 import {summary_processing} from "@/services/Summary/summary-processing";
 import Log from "@/services/model/Log";
 import store from "@/vuex/store";
+import router from "@/router/router";
 
 function forum_processing(data){
     let logs = [];
@@ -19,6 +20,9 @@ function forum_processing(data){
         summary_types: summary_types
         }
     );
+
+    // Push to Dashboard > Summary
+    router.push('/dashboard/summary');
 }
 
 export { forum_processing };

src/vuex/store.js

@@ -40,6 +40,7 @@ const store = createStore({
                 total_interactions: 0,
                 summary_types: null,
             },
+            summary_cards: []
         }
     },
     mutations: {
@@ -69,6 +70,9 @@ const store = createStore({
         // Store computed logs
         saveLogs(state, logs) {
             this.state.logs = logs;
+        },
+        saveSummaryCard(state, { summaryID, summary }) {
+            this.state.summary_cards[summaryID] = summary;
         }
     }
 });