@use('App\Services\ApexChartService')
@props([
    'id' => 'chart-' . uniqid(),
    'title' => '',
    'subtitle' => '',
    'chart' => [
        ...ApexChartService::$chart,
        'height'=> 40,
        'width' => 80,
        'type' => 'area',
        ],
    'colors' => [
        '#616161',
        ],
    'series' => [],
    'categories' => [],
])
<div id="{{ $id }}"></div>
@once
    @vite('resources/js/plugins/apexcharts.js')
@endonce

@push('scripts')
    <script type="module">
        const options = {
            chart: {
                ...@json($chart),
                sparkline: {
                    enabled: true,
                },
                toolbar: {
                    show: false,
                }
            },
            dataLabels: {
                enabled: false,
            },
            stroke: {
                width: 1,
            },
            colors: @json($colors),
            series: @json($series),
            xaxis: {
                type: 'category',
                categories: @json($categories),
                crosshairs: {
                    show: false,
                },
            },
            yaxis: {
                labels: {
                    show: false,
                }
            },
            tooltip: {
                enabled: false,
            }
        }

        const chart = new ApexCharts(document.querySelector("#{{ $id }}"), options);
        chart.render();

    </script>
@endpush