Fix server stats widget (#12864)

* Fix Server Stats Widget
JustGage update
removed title feature, so re-implement

* Improve layout

resources/views/overview/default.blade.php

@@ -167,6 +167,8 @@
 
 @section('javascript')
 <script src="{{ asset('js/jquery.gridster.min.js?ver=05072021') }}"></script>
+<script src="{{ asset('js/raphael.min.js?ver=05072021') }}"></script>
+<script src="{{ asset('js/justgage.min.js?ver=05072021') }}"></script>
 @endsection
 
 @push('scripts')

resources/views/widgets/server-stats.blade.php

@@ -1,50 +1,58 @@
 <div class="col-sm-{{ $columns }}">
+    <div class="gauge-title">@lang('CPU Usage')</div>
     <div
         id="cpu-{{ $id }}"
-        class="guage-{{ $id }}"
+        class="gauge-{{ $id }} gauge-container"
         data-value="{{ $cpu }}"
         data-max="100"
         data-symbol="%"
-        data-title="CPU Usage"
     ></div>
 </div>
 
 @foreach($mempools as $key => $mem)
     <div class="col-sm-{{ $columns }}">
+        <div class="gauge-title">{{ $mem->mempool_descr}} @lang('Usage')</div>
         <div
             id="mem-{{ $key }}-{{ $id }}"
-            class="guage-{{ $id }}"
-            data-value="{{ $mem['used'] }}"
-            data-max="{{ $mem['total'] }}"
+            class="gauge-{{ $id }} gauge-container"
+            data-value="{{ $mem->used}}"
+            data-max="{{ $mem->total}}"
             data-label="Mbytes"
-            data-title="{{ $mem['mempool_descr'] }} Usage"
         ></div>
     </div>
 @endforeach
 
 @foreach($disks as $key => $disk)
     <div class="col-sm-{{ $columns }}">
+        <div class="gauge-title">{{ $disk->storage_descr}} @lang('Usage')</div>
         <div
             id="disk-{{ $key }}-{{ $id }}"
-            class="guage-{{ $id }}"
-            data-value="{{ $disk['used'] }}"
-            data-max="{{ $disk['total'] }}"
+            class="gauge-{{ $id }} gauge-container"
+            data-value="{{ $disk->used}}"
+            data-max="{{ $disk->total}}"
             data-label="Mbytes"
-            data-title="{{ $disk['storage_descr'] }} Usage"
         ></div>
     </div>
 @endforeach
 
 <script type='text/javascript'>
-    loadjs('js/raphael.min.js', function() {
-        loadjs('js/justgage.js', function() {
-            $('.guage-{{ $id }}').each(function() {
-                new JustGage({
-                    id: this.id,
-                    min: 0,
-                    valueFontSize: '2px'
-                });
-            });
+    $('.gauge-{{ $id }}').each(function() {
+        new JustGage({
+            id: this.id,
+            min: 0,
+            valueFontSize: '2px'
         });
     });
 </script>
+
+<style>
+    .gauge-title {
+        text-align:center;
+        font-family: Arial, sans-serif; font-size: 0.8em; font-weight: bold;
+        color:#999999;
+    }
+    .gauge-container {
+        height: 80px;
+        margin-bottom: 15px;
+    }
+</style>