Implemented multilingual support

composer.json

@@ -26,5 +26,7 @@
         "sort-packages": true
     },
     "minimum-stability": "dev",
-    "prefer-stable": true
+    "prefer-stable": true,
+    "require-dev": {
+    }
 }

dist/css/card.css

@@ -1 +1,14 @@
-.resources-card{height:auto;padding-bottom:1px}.resources-card h3:first-letter{text-transform:capitalize}.resources{width:100%!important;height:200px!important}
+.resources-card {
+  height: auto;
+  padding-bottom: 1px;
+}
+
+.resources-card h3::first-letter {
+  text-transform: capitalize;
+}
+
+.resources {
+  width: 100% !important;
+  height: 200px !important;
+}
+

resources/js/chart.js

@@ -1,16 +1,18 @@
 import 'chartjs-plugin-streaming';
 import axios from 'axios';
+import * as moment from 'moment';
 
-export default function lineChart(usage, resource, element) {
+export default function lineChart(ctx, element) {
     let chart = element.getContext("2d");
+    let resources = buildData(ctx.card.usage);
 
-    let resources = buildData(usage);
+    moment.locale(ctx.card.locale);
 
     chart = new Chart(chart, {
         type: 'line',
         data: {
             datasets: [{
-                label: 'Usage',
+                label: ctx.$root.__('usage'),
                 data: resources,
                 borderColor: '#4099de',
                 backgroundColor: '#fff',
@@ -48,10 +50,10 @@ export default function lineChart(usage, resource, element) {
                     delay: 10000,
                     refresh: 5000,
                     onRefresh: function (chart) {
-                        axios.get('/nova-vendor/systemResources/' + resource).then(function (result) {
+                        axios.get('/nova-vendor/systemResources/' + ctx.resource).then(function (result) {
                             chart.data.datasets.forEach(function (dataset) {
                                 dataset.data.push({
-                                    x: Date.now(),
+                                    x: moment(),
                                     y: Math.round(result.data)
                                 });
                             });
@@ -64,20 +66,20 @@ export default function lineChart(usage, resource, element) {
         }
     });
 
-    axios.get('/nova-vendor/systemResources/' + resource).then(function (result) {
+    axios.get('/nova-vendor/systemResources/' + ctx.resource).then(function (result) {
         chart.data.datasets.forEach(function (dataset) {
-            if (usage === null) {
+            if (ctx.card.usage === null) {
                 dataset.data.push({
-                    x: Date.now() - (10000),
+                    x: moment().subtract(10, 'seconds'),
                     y: Math.round(result.data)
                 });
                 dataset.data.push({
-                    x: Date.now() - (5000),
+                    x: moment().subtract(5, 'seconds'),
                     y: Math.round(result.data)
                 });
             }
             dataset.data.push({
-                x: Date.now(),
+                x: moment(),
                 y: Math.round(result.data)
             });
         });
@@ -91,7 +93,7 @@ function buildData(usage) {
 
     for (let i in usage) {
         resources.push({
-            x: Date.now() - ((usage.length * 5000) - (i * 5000)),
+            x: moment().subtract((usage.length * 5) - (i * 5), 'seconds'),
             y: usage[i]
         });
     }

resources/js/components/Card.vue

@@ -1,8 +1,6 @@
 <template>
     <card class="px-6 py-4 resources-card">
-        <h3 class="mr-3 text-base text-80 font-bold">
-            <span class="uppercase">{{ resource }}</span> usage
-        </h3>
+        <h3 class="mr-3 text-base text-80 font-bold">{{ __(`${resource}_usage`) }}</h3>
 
         <div class="flex mb-4 resources">
             <canvas v-bind:id="resource" height="150"></canvas>
@@ -17,11 +15,7 @@
         props: ["card"],
 
         mounted() {
-            lineChart(
-                this.card.usage,
-                this.resource,
-                document.getElementById(this.resource)
-            );
+            lineChart(this, document.getElementById(this.resource));
         },
 
         data() {

resources/lang/en.json

@@ -0,0 +1,5 @@
+{
+    "cpu_usage": "CPU usage",
+    "ram_usage": "RAM usage",
+    "usage": "Usage"
+}

resources/lang/nl.json

@@ -0,0 +1,5 @@
+{
+    "cpu_usage": "CPU verbruik",
+    "ram_usage": "RAM verbruik",
+    "usage": "Verbruik"
+}

routes/api.php

@@ -1,6 +1,5 @@
 <?php
 
-use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -17,4 +16,3 @@
 Route::get('ram', 'GijsG\SystemResources\SystemResources@ram');
 
 Route::get('cpu', 'GijsG\SystemResources\SystemResources@cpu');
-

src/Adapters/LinuxSystemResources.php

@@ -19,7 +19,7 @@ class LinuxSystemResources implements SystemResourcesInterface
     public function __construct()
     {
         $free = shell_exec('free');
-        $free = (string)trim($free);
+        $free = (string) trim($free);
 
         $free_arr = explode("\n", $free);
 
@@ -46,7 +46,7 @@ public function cpuResources()
      */
     public function ramResources()
     {
-        return (int)$this->ram_resources[2];
+        return (int) $this->ram_resources[2];
     }
 
     /**
@@ -56,7 +56,7 @@ public function ramResources()
      */
     public function ramTotalResources()
     {
-        return (int)$this->ram_resources[1];
+        return (int) $this->ram_resources[1];
     }
 
     /**

src/Adapters/WindowsSystemResources.php

@@ -25,6 +25,7 @@ public function ramResources()
     {
         $ram = shell_exec("wmic OS get FreePhysicalMemory /Value");
         $ram = (int) str_replace('FreePhysicalMemory=', '', $ram);
+
         return (int) ($ram / 1024);
     }
 
@@ -37,6 +38,7 @@ public function ramTotalResources()
     {
         $ram = shell_exec("wmic OS get TotalVisibleMemorySize /Value");
         $ram = (int) str_replace('TotalVisibleMemorySize=', '', $ram);
+
         return (int) ($ram / 1024);
     }
 

src/CardServiceProvider.php

@@ -20,9 +20,11 @@ public function boot()
             $this->routes();
         });
 
+        Nova::translations(__DIR__ . '/../resources/lang/' . app()->getLocale() . '.json');
+
         Nova::serving(function (ServingNova $event) {
-            Nova::script('systemResources', __DIR__.'/../dist/js/card.js');
-            Nova::style('systemResources', __DIR__.'/../dist/css/card.css');
+            Nova::script('systemResources', __DIR__ . '/../dist/js/card.js');
+            Nova::style('systemResources', __DIR__ . '/../dist/css/card.css');
         });
     }
 
@@ -38,8 +40,8 @@ protected function routes()
         }
 
         Route::middleware(['nova'])
-                ->prefix('nova-vendor/systemResources')
-                ->group(__DIR__.'/../routes/api.php');
+            ->prefix('nova-vendor/systemResources')
+            ->group(__DIR__ . '/../routes/api.php');
     }
 
     /**

src/SystemResources.php

@@ -86,6 +86,7 @@ public function component()
         return $this->withMeta([
             'usage' => $this->usage,
             'resource' => $this->resource,
+            'locale' => app()->getLocale(),
             'component' => 'systemAnalytics'
         ]);
     }

webpack.mix.js

@@ -1,4 +1,4 @@
 let mix = require('laravel-mix')
 
 mix.js('resources/js/card.js', 'dist/js')
-   .sass('resources/sass/card.scss', 'dist/css')
+    .sass('resources/sass/card.scss', 'dist/css')