@props(['config', 'altura' => '18rem'])

{{-- A chave muda quando os dados mudam: o Livewire troca o elemento e o
     Alpine redesenha. `wire:ignore` impede o morph de mexer no canvas. --}}
<div wire:ignore
     wire:key="grafico-{{ md5((string) json_encode($config)) }}"
     x-data="grafico(@js($config))"
     {{ $attributes->merge(['class' => 'relative']) }}
     style="height: {{ $altura }}">
    <canvas x-ref="tela" role="img" aria-label="{{ $config['descricao'] ?? 'Gráfico' }}"></canvas>
</div>