- Updated all dependancies to their latest version.

- Capitalized the CPU and RAM labels since they're abbreviations - Broadened the hit radius for the tooltips
GijsGoudzwaard · Jul 5, 2019 · ba0c24f · ba0c24f
1 parent a3a8b9e
commit ba0c24f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ phpunit.xml
 .phpunit.result.cache
 .DS_Store
 Thumbs.db
+yarn.lock
diff --git a/dist/js/card.js b/dist/js/card.js
diff --git a/package.json b/package.json
@@ -14,10 +14,10 @@
         "laravel-mix": "^1.0"
     },
     "dependencies": {
-        "axios": "^0.18.0",
-        "chart.js": "^2.7.2",
-        "chartjs-plugin-streaming": "^1.6.0",
-        "moment": "^2.22.2",
-        "vue": "^2.5.0"
+        "axios": "^0.19.0",
+        "chart.js": "^2.8.0",
+        "chartjs-plugin-streaming": "^1.8.0",
+        "moment": "^2.24.0",
+        "vue": "^2.6.0"
     }
 }
diff --git a/resources/js/chart.js b/resources/js/chart.js
@@ -15,7 +15,8 @@ export default function lineChart(usage, resource, element) {
                 borderColor: '#4099de',
                 backgroundColor: '#fff',
                 fill: false,
-                borderWidth: 2
+                borderWidth: 2,
+                pointHitRadius: 15
             }]
         },
         options: {
@@ -54,6 +55,8 @@ export default function lineChart(usage, resource, element) {
                                     y: Math.round(result.data)
                                 });
                             });
+
+                            chart.update();
                         });
                     }
                 }

diff --git a/resources/js/components/Card.vue b/resources/js/components/Card.vue
@@ -1,6 +1,8 @@
 <template>
     <card class="px-6 py-4 resources-card">
-        <h3 class="mr-3 text-base text-80 font-bold">{{ resource }} usage</h3>
+        <h3 class="mr-3 text-base text-80 font-bold">
+            <span class="uppercase">{{ resource }}</span> usage
+        </h3>
 
         <div class="flex mb-4 resources">
             <canvas v-bind:id="resource" height="150"></canvas>
@@ -9,19 +11,23 @@
 </template>
 
 <script>
-    import lineChart from '../chart'
+    import lineChart from "../chart";
 
     export default {
-        props: ['card'],
+        props: ["card"],
 
         mounted() {
-            lineChart(this.card.usage, this.resource, document.getElementById(this.resource))
+            lineChart(
+                this.card.usage,
+                this.resource,
+                document.getElementById(this.resource)
+            );
         },
 
         data() {
             return {
                 resource: this.card.resource
-            }
+            };
         }
-    }
+    };
 </script>