From 90a267578a89308992bcfa3c022f777fedab7c23 Mon Sep 17 00:00:00 2001
From: Troplo <troplo@troplo.com>
Date: Sat, 30 Jul 2022 22:25:24 +1000
Subject: [PATCH] Update Message.vue

---
 frontend/src/components/Message.vue | 38 ++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Message.vue b/frontend/src/components/Message.vue
index 95f9e89..d35aafb 100644
--- a/frontend/src/components/Message.vue
+++ b/frontend/src/components/Message.vue
@@ -236,7 +236,12 @@
                           <h3>
                             {{ graph.name }}
                           </h3>
-                          <p>Chart data could not be loaded.</p>
+                          <Chart
+                            :chart-data="graph.data"
+                            v-if="graph.data"
+                            :options="graphOptions"
+                          ></Chart>
+                          <p v-else>Chart data could not be loaded.</p>
                         </v-col>
                       </v-row>
                       <v-row
@@ -655,7 +660,26 @@
 
 <script>
 import CommsInput from "./CommsInput.vue"
-
+import { Line as Chart } from "vue-chartjs/legacy"
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+} from "chart.js"
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+)
 export default {
   name: "Message",
   props: [
@@ -674,10 +698,18 @@ export default {
     "deleteMessage"
   ],
   components: {
-    CommsInput
+    CommsInput,
+    Chart
   },
   data() {
     return {
+      graphOptions: {
+        responsive: true,
+        maintainAspectRatio: false,
+        title: {
+          display: false
+        }
+      },
       fileTypes: {
         png: "mdi-file-image",
         jpg: "mdi-file-image",