feat: charts

resources/views/components/apex-charts.blade.php

@@ -0,0 +1,78 @@
+<div wire:ignore id="{!! $chartId !!}"></div>
+
+<script>
+    const options = {
+        chart: {
+            height: '150px',
+            id: '{!! $chartId !!}',
+            type: 'area',
+            stroke: {
+                curve: 'straight',
+            },
+            toolbar: {
+                show: false,
+                tools: {
+                    download: true,
+                    selection: false,
+                    zoom: false,
+                    zoomin: false,
+                    zoomout: false,
+                    pan: false,
+                    reset: false
+                },
+            },
+            animations: {
+                enabled: false,
+            },
+
+
+        },
+
+        grid: {
+            show: true,
+            borderColor: '',
+        },
+        colors: ['red'],
+        xaxis: {
+            type: 'datetime',
+            labels: {
+                show: true,
+                style: {
+                    colors: '#ffffff',
+                }
+            }
+        },
+        yaxis: {
+            show: true,
+            labels: {
+                show: false,
+            }
+        },
+        series: [{
+            name: '{!! $seriesName !!}',
+            data: '{!! $seriesData !!}'
+        }],
+        noData: {
+            text: 'Loading...'
+        },
+        tooltip: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        }
+    }
+    const chart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), options);
+    chart.render();
+    document.addEventListener('livewire:init', () => {
+        Livewire.on('refreshChartData-{!! $chartId !!}', (chartData) => {
+            chart.updateOptions({
+                series: [{
+                    data: chartData[0].seriesData,
+                }],
+
+            });
+
+        });
+    });
+</script>

resources/views/layouts/base.blade.php

@@ -38,6 +38,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/8.3.0/pusher.min.js"
             integrity="sha512-tXL5mrkSoP49uQf2jO0LbvzMyFgki//znmq0wYXGq94gVF6TU0QlrSbwGuPpKTeN1mIjReeqKZ4/NJPjHN1d2Q=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     @endauth
 </head>
 @section('body')

resources/views/livewire/charts/server.blade.php

@@ -0,0 +1,4 @@
+<div wire:poll.5000ms='loadData'>
+    <h1>CPU Usage</h1>
+    <x-apex-charts :chart-id="$chartId" :series-data="$data" :categories="$categories" series-name="Total distance this year"/>
+</div>

resources/views/livewire/dashboard.blade.php

@@ -39,9 +39,9 @@
                                     Add Resource</span>
                             </a>
                             <a class="hover:underline"
-                            href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
-                            Settings
-                        </a>
+                                href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
+                                Settings
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -161,7 +161,6 @@
         </div>
     @endif
 
-
     <script>
         function gotoProject(uuid, environment = 'production') {
             window.location.href = '/project/' + uuid + '/' + environment;

resources/views/livewire/server/show.blade.php

@@ -5,4 +5,9 @@
     <x-server.navbar :server="$server" :parameters="$parameters" />
     <livewire:server.form :server="$server" />
     <livewire:server.delete :server="$server" />
+    @if (isDev())
+        <div class="pt-10">
+            <livewire:charts.server :server="$server" />
+        </div>
+    @endif
 </div>