@props(['width' => 'w-auto', 'height' => 'h-auto', 'chartData' => []])

@php
    $chartDataJson = is_array($chartData) ? json_encode($chartData) : $chartData;
    
@endphp

<div class="{{ $width }} {{ $height }}">
    <x-base.chart id="report-pie-chart" data-chart-data="{{ $chartDataJson }}"
        {{ $attributes->merge($attributes->whereDoesntStartWith('class')->getAttributes()) }}>
    </x-base.chart>
</div>

@pushOnce('scripts')
    @vite('resources/js/utils/colors.js')
    @vite('resources/js/components/report-pie-chart.js')
@endPushOnce