Merge pull request #47 from LS-LEDA/38/feat/SummaryCard

38/feat/summary card

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@jamescoyle/vue-icon": "^0.1.2",
     "@mdi/js": "^6.3.95",
+    "chart.js": "^3.6.0",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.12"

src/assets/totalInteractionChartData.js

@@ -0,0 +1,64 @@
+export const totalInteractionChartData = {
+    type: 'bar',
+    data: {
+        labels: [
+            "Interaction 1",
+            "Interaction 2",
+            "Interaction 3",
+            "Interaction 4",
+            "Interaction 5",
+            "Interaction 6",
+            "Interaction 7",
+            "Interaction 8",
+            "Interaction 9",
+            "Interaction 10",
+            "Interaction 11",
+            "Interaction 12",
+            "Interaction 13",
+            "Interaction 14",
+            "Interaction 15",
+            "Interaction 16",
+            "Interaction 17",
+            "Interaction 18",
+            "Interaction 19",
+            "Interaction 20"
+        ],
+        datasets: [{
+            label: '',
+            data: [85, 151, 100, 200, 67, 10, 23, 85, 19, 49, 85, 151, 100, 200, 67, 10, 23, 85, 19, 49],
+            backgroundColor: [
+                'rgba(0, 99, 132, 0.6)',
+                'rgba(30, 99, 132, 0.6)',
+                'rgba(60, 99, 132, 0.6)',
+                'rgba(90, 99, 132, 0.6)',
+                'rgba(120, 99, 132, 0.6)',
+                'rgba(150, 99, 132, 0.6)',
+                'rgba(180, 99, 132, 0.6)',
+                'rgba(210, 99, 132, 0.6)',
+                'rgba(240, 99, 132, 0.6)'
+            ],
+            borderColor: [
+                'rgba(0, 99, 132, 1)',
+                'rgba(30, 99, 132, 1)',
+                'rgba(60, 99, 132, 1)',
+                'rgba(90, 99, 132, 1)',
+                'rgba(120, 99, 132, 1)',
+                'rgba(150, 99, 132, 1)',
+                'rgba(180, 99, 132, 1)',
+                'rgba(210, 99, 132, 1)',
+                'rgba(240, 99, 132, 1)'
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        responsive: true,
+        plugins: {
+            legend: {
+                display: false
+            },
+        }
+    }
+}
+
+export default totalInteractionChartData;

src/components/Summary/InteractionCard.vue

@@ -0,0 +1,59 @@
+<template>
+    <!-- Interactions Card  -->
+    <div class="flex w-full h-72 bg-white rounded-3xl p-10 mt-5 hover:cursor-pointer filter drop-shadow-lg
+        transform transition duration-500 hover:scale-[101%]">
+        <!-- Card Information -->
+        <div class="flex flex-col w-5/12 justify-self-center self-center space-y-3">
+            <span class="text-5xl"> Total of Interactions </span>
+            <span class="text-6xl font-bold"> {{ interactions_count.toLocaleString() }} </span>
+        </div>
+        <!-- Card graphics -->
+        <div class="w-full w-full text-center mx-6 font-bold text-4xl rounded-3xl">
+            <canvas class="max-h-full" id="total_interactions_chart"></canvas>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Chart, registerables } from 'chart.js';
+import totalInteractionChartData from "@/assets/totalInteractionChartData";
+
+export default {
+    name: "InteractionCard",
+    data() {
+        return {
+            interactions_count: 10394,
+            totalInteractionChartData: totalInteractionChartData,
+            interactions_chart: null,
+        }
+    },
+    methods: {
+        /**
+         * Renders a chart in total interaction card
+         * @param chartId: canvas chart ID
+         * @param chartData chart data
+         */
+        totalInteractionChart (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() {
+        // Create Total Interactions chart once component is mounted
+        this.totalInteractionChart('total_interactions_chart', this.totalInteractionChartData)
+    },
+    unmounted() {
+        // Clear chart once the component is unmounted
+        this.interactions_chart.clear();
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Summary/SummaryCard.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="flex flex-col w-full bg-white rounded-3xl w-full filter drop-shadow-lg
+    transform transition duration-500 hover:scale-[101%] select-none p-10 pb-5" :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>
+            <span class="flex h-full mx-3 text-xl font-bold text-center self-center place-self-center items-center">
+                {{ statistic.info }}
+            </span>
+        </template>
+        <template v-else>
+            <!-- Card title -->
+            <span class="text-xl text-gray-500 font-bold row-start-1 row-end-1 col-start-1 col-end-1">
+                {{ statistic.statistic_name }}
+            </span>
+            <!-- Card Statistics & Logo -->
+            <div class="flex w-full flex-1 justify-between items-center">
+                <span class="text-6xl font-bold row-start-2 row-end-2 col-start-1 col-end-1" >
+                    {{ statistic.number }}
+                </span>
+                <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>
+        </template>
+    </div>
+</template>
+
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+import {mdiClose, mdiHelpCircleOutline} from "@mdi/js"
+
+export default {
+    name: "SummaryCard",
+    props: ['statistic'],
+    components: {
+        SvgIcon
+    },
+    data() {
+        return {
+            help_icon: mdiHelpCircleOutline,
+            close_icon: mdiClose,
+            /**
+             * Cart Status
+             * false:   Front
+             * true:    Back
+             */
+            card_status: false
+        }
+    },
+    methods: {
+        changeView: function () {
+            this.card_status = !this.card_status
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/Dashboard/DashboardPage.vue

@@ -0,0 +1,43 @@
+<template>
+    <section id="dashbboard" class="flex flex-col w-full h-full p-10">
+        <!-- Tabs buttons -->
+        <div class="flex flex-row pb-5 space-x-5">
+            <div 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>
+            </div>
+        </div>
+        <!-- TODO: router view -->
+        <Summary/>
+    </section>
+</template>
+
+<script>
+import Summary from "@/pages/Dashboard/Summary/Summary";
+
+export default {
+    name: "DashboardPage",
+    components: {Summary},
+    data() {
+        return {
+            tabs: [
+                {
+                    tab_name: "Summary",
+                    tab_path: "summary"
+                },
+                {
+                    tab_name: "Students",
+                    tab_path: "students"
+                },
+                {
+                    tab_name: "Resources",
+                    tab_path: "resources"
+                },
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/Dashboard/Summary/Summary.vue

@@ -0,0 +1,79 @@
+<template>
+    <h1 class="text-4xl font-extrabold"> Summary of all course interactions </h1>
+    <span class="font-bold text-2xl text-gray-500"> Information on the number of interactions </span>
+    <!-- Dashboard Summary Total Interactions card-->
+    <InteractionCard/>
+    <!-- Dashboard Summary cards-->
+    <div class="grid grid-rows-2 grid-cols-3 gap-x-5 gap-y-5 w-full h-full mt-5">
+      <SummaryCard v-for="(statistic, index) in statistics" :statistic="statistic" :key="index"/>
+    </div>
+</template>
+
+<script>
+import InteractionCard from "@/components/Summary/InteractionCard";
+import SummaryCard from "@/components/Summary/SummaryCard";
+import {
+  mdiFileDocumentOutline,
+  mdiTextBoxCheck,
+  mdiHammerScrewdriver,
+  mdiWikipedia,
+  mdiLinkVariant,
+  mdiViewDashboardOutline
+} from "@mdi/js";
+
+export default {
+    name: "Summary",
+    components: {
+        InteractionCard,
+        SummaryCard
+    },
+      data(){
+        return{
+          statistics:[
+            {
+              statistic_name: "Tasks",
+              number: 7342,
+              icon: mdiTextBoxCheck ,
+              info:"The total number of interactions with all deliveries of a subject. "
+            },
+            {
+              statistic_name: "Files",
+              number: 1913,
+              icon: mdiFileDocumentOutline,
+              info:" The total number of interactions with all files of a subject."
+            },
+            {
+              statistic_name: "Pages",
+              number:75,
+              icon: mdiViewDashboardOutline,
+              info:"The total number of interactions with the pages of a subject."
+            },
+            {
+              statistic_name: "URL",
+              number:34,
+              icon: mdiLinkVariant ,
+              info: "The total number of interactions with the URL resource of a subject."
+            },
+            {
+              statistic_name: "Learning Tools Interoperability",
+              number:0,
+              icon: mdiHammerScrewdriver ,
+              info:"The total number of interactions with the learning tools interoperability resources of a subject."
+            },
+            {
+              statistic_name: "Wiki",
+              number:1,
+              icon: mdiWikipedia ,
+              info:"The total number of interactions with the wikis of a subject."
+            }
+          ]
+        }
+
+
+      }
+}
+</script>
+
+<style scoped>
+
+</style>

src/router/router.js

@@ -1,13 +1,23 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ImportDataPage from "@/pages/ImportData/ImportDataPage";
-import Dashboard from "@/pages/Dashboard";
+import DashboardPage from "@/pages/Dashboard/DashboardPage";
 import Plugins from "@/pages/Plugins";
 import Settings from "@/pages/Settings";
+import Summary from "@/pages/Dashboard/Summary/Summary";
 
 const routes = [
     { path: '/', component: ImportDataPage },
     { path: '/import-data', component: ImportDataPage },
-    { path: '/dashboard', component: Dashboard },
+    {
+        path: '/dashboard',
+        component: DashboardPage,
+        children:[
+            {
+                path: '/dashboard/summary',
+                component: Summary
+            }
+        ]
+    },
     { path: '/plugins', component: Plugins },
     { path: '/settings', component: Settings },
 ]