Improve Metric component

resources/assets/js/components/status-page/Metric.vue

@@ -24,7 +24,7 @@
         </div>
         <div class="row">
             <div class="col-xs-12">
-                <canvas :id="metricId" height="160" width="600"></canvas>
+                <canvas :id="metricId" height="200" width="900"></canvas>
             </div>
         </div>
     </div>
@@ -32,20 +32,14 @@
 
 <script>
 const Chart = require('chart.js')
-const _ = require('lodash')
 
-// Configure Chart.js
+export default {
-Chart.defaults.global.elements.point.hitRadius = 10
+    props: {
-Chart.defaults.global.responsiveAnimationDuration = 1000
+        metric: Object,
-Chart.defaults.global.legend.display = false
+        theme: String,
-
+        themeLight: String,
-module.exports = {
+        themeDark: String,
-    props: [
+    },
-        'metric',
-        'theme',
-        'theme-light',
-        'theme-dark'
-    ],
     data () {
         return {
             canvas: null,
@@ -77,15 +71,15 @@ module.exports = {
             this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
 
             this.context.fillStyle = "#666"
-            this.context.font = '44px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+            this.context.font = '20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
 
-            const textString = "Loading data",
+            const textString = "Loading metrics..."
-                textWidth = this.context.measureText(textString).width
+            const textWidth = this.context.measureText(textString).width
 
             this.canvas.textBaseline = 'middle'
             this.canvas.textAlign = "center"
 
-            this.context.fillText(textString , (this.canvas.width / 2) - (textWidth / 2), 100)
+            this.context.fillText(textString, (this.canvas.width / 2) - (textWidth / 2), 100)
         }
     },
     methods: {
@@ -134,6 +128,7 @@ module.exports = {
                     data_keys[i] = data_keys[i].substr(11);
                 }
             }
+
             this.chart = new Chart(this.context, {
                 type: 'line',
                 data: {
@@ -149,6 +144,14 @@ module.exports = {
                     }]
                 },
                 options: {
+                    elements: {
+                        point: {
+                            hitRadius: 5
+                        }
+                    },
+                    legend: {
+                        display: false
+                    },
                     scales: {
                         yAxes: [{
                             ticks: {

resources/views/partials/modules/metrics.blade.php

@@ -4,7 +4,7 @@
     <ul class="list-group">
         @foreach($metrics as $metric)
         <li class="list-group-item metric" data-metric-id="{{ $metric->id }}">
-            <metric-chart :metric="{{ $metric->toJson() }}" :theme-light="{{ json_encode($themeMetrics) }}" :theme="{{ json_encode(color_darken($themeMetrics, -0.1)) }}" :theme-dark="{{ json_encode(color_darken($themeMetrics, -0.2)) }}"></metric-chart>
+            <metric-chart :metric="{{ $metric->toJson() }}" theme-light="{{ $themeMetrics }}" theme="{{ color_darken($themeMetrics, -0.1) }}" theme-dark="{{ color_darken($themeMetrics, -0.2) }}"></metric-chart>
         </li>
         @endforeach
     </ul>