Monitoring & Service Management (#163)

Monitoring & Service Management

resources/views/components/chart.blade.php

@@ -0,0 +1,103 @@
+@props([
+    "id",
+    "type",
+    "title",
+    "color",
+    "sets",
+    "categories",
+    "toolbar" => false,
+])
+<x-simple-card {{ $attributes }}>
+    <div class="relative">
+        <div class="absolute left-4 top-4">{{ $title }}</div>
+    </div>
+    <div id="{{ $id }}" class="pt-4"></div>
+    <script>
+        window.addEventListener('load', function () {
+            let options = {
+                series: [
+                    @foreach ($sets as $set)
+                        {
+                            name: '{{ $set["name"] }}',
+                            data: @json($set["data"]),
+                            color: '{{ $set["color"] }}'
+                        },
+                    @endforeach
+                ],
+                chart: {
+                    height: '100%',
+                    maxWidth: '100%',
+                    type: '{{ $type }}',
+                    fontFamily: 'Inter, sans-serif',
+                    dropShadow: {
+                        enabled: false
+                    },
+                    toolbar: {
+                        show: @js($toolbar)
+                    }
+                },
+                tooltip: {
+                    enabled: true,
+                    x: {
+                        show: true
+                    }
+                },
+                legend: {
+                    show: true
+                },
+                @if ($type == 'area')
+                fill: {
+                    type: 'gradient',
+                    gradient: {
+                        opacityFrom: 0.55,
+                        opacityTo: 0,
+                        shade: '{{ $color }}',
+                        gradientToColors: ['{{ $color }}']
+                    }
+                },
+                @endif
+                dataLabels: {
+                    enabled: false
+                },
+                stroke: {
+                    width: 2,
+                    curve: 'smooth'
+                },
+                grid: {
+                    show: false,
+                    strokeDashArray: 4,
+                    padding: {
+                        left: 2,
+                        right: 2,
+                        top: 0
+                    }
+                },
+                xaxis: {
+                    categories: @json($categories),
+                    labels: {
+                        show: false
+                    },
+                    axisBorder: {
+                        show: false
+                    },
+                    axisTicks: {
+                        show: false
+                    }
+                },
+                yaxis: {
+                    show: false,
+                    labels: {
+                        formatter: function (value) {
+                            return parseInt(value);
+                        }
+                    }
+                }
+            };
+
+            if (document.getElementById('{{ $id }}') && typeof ApexCharts !== 'undefined') {
+                const chart = new ApexCharts(document.getElementById('{{ $id }}'), options);
+                chart.render();
+            }
+        });
+    </script>
+</x-simple-card>

resources/views/components/heroicons/o-calendar.blade.php

@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+    />
+</svg>

resources/views/components/heroicons/o-chart-bar.blade.php

@@ -0,0 +1,14 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    {{ $attributes }}
+>
+    <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+    />
+</svg>