feat: init metrics

resources/views/livewire/project/shared/logs.blade.php

@@ -54,4 +54,74 @@
             @endforelse
         </div>
     @endif
+    {{-- <section x-data="apex_app" class="container p-5 mx-auto my-20 bg-white drop-shadow-xl rounded-xl">
+        <div class="w-full" x-ref="chart"></div>
+    </section>
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+    <script>
+        document.addEventListener("alpine:init", () => {
+            Alpine.data("apex_app", () => ({
+                data: @js($cpu),
+                init() {
+                    let chart = new ApexCharts(this.$refs.chart, this.options);
+                    chart.render();
+                    this.$watch("data", () => {
+                        chart.updateOptions(this.options);
+                    });
+                },
+
+                get options() {
+                    return {
+                        colors: [function({
+                            value,
+                            seriesIndex,
+                            w
+                        }) {
+                            if (value < 55) {
+                                return '#7E36AF'
+                            } else {
+                                return '#D9534F'
+                            }
+                        }, function({
+                            value,
+                            seriesIndex,
+                            w
+                        }) {
+                            if (value < 111) {
+                                return '#7E36AF'
+                            } else {
+                                return '#D9534F'
+                            }
+                        }],
+                        xaxis: {
+                            type: 'datetime'
+                        },
+                        dataLabels: {
+                            enabled: false
+                        },
+                        series: [{
+                            name: "Series name",
+                            data: this.data
+                        }],
+                        tooltip: {
+                            enabled: true
+                        },
+                        chart: {
+                            height: 500,
+                            width: "100%",
+                            type: "area",
+                            toolbar: {
+                                show: true
+                            },
+                            animations: {
+                                initialAnimation: {
+                                    enabled: false
+                                }
+                            }
+                        },
+                    };
+                }
+            }));
+        });
+    </script> --}}
 </div>