@props(['data', 'label', 'unit' => ''])

{{-- Tek serili çubuk grafik + tablo görünümü. Renkler CSS sınıflarıyla (resources/css/app.css). --}}
@php($chart = \App\Support\Charts\BarChart::layout($data))

<figure class="chart mb-0">
    <svg viewBox="0 0 {{ $chart['width'] }} {{ $chart['height'] }}" class="chart-svg" role="img" aria-label="{{ $label }}">
        @foreach ($chart['gridlines'] as $grid)
            <line x1="36" x2="{{ $chart['width'] }}" y1="{{ $grid['y'] }}" y2="{{ $grid['y'] }}" class="chart-grid" />
            <text x="30" y="{{ $grid['y'] + 4 }}" class="chart-axis" text-anchor="end">{{ number_format($grid['value'], 0, ',', '.') }}</text>
        @endforeach
        @foreach ($chart['bars'] as $bar)
            <g class="chart-bar-group">
                {{-- Görünmez geniş vuruş alanı: ince çubuğun üzerine gelmek kolay olsun. --}}
                <rect x="{{ $bar['x'] - 4 }}" y="12" width="{{ $bar['w'] + 8 }}" height="{{ $chart['baseline'] - 12 }}" class="chart-hit">
                    <title>{{ $bar['label'] }}: {{ number_format($bar['value'], 0, ',', '.') }}{{ $unit }}</title>
                </rect>
                @if ($bar['h'] > 0)
                    <rect x="{{ $bar['x'] }}" y="{{ $bar['y'] }}" width="{{ $bar['w'] }}" height="{{ $bar['h'] }}" rx="3" class="chart-bar">
                        <title>{{ $bar['label'] }}: {{ number_format($bar['value'], 0, ',', '.') }}{{ $unit }}</title>
                    </rect>
                @endif
                @if ($bar['showLabel'])
                    <text x="{{ $bar['x'] + $bar['w'] / 2 }}" y="{{ $chart['height'] - 8 }}" class="chart-axis" text-anchor="middle">{{ $bar['label'] }}</text>
                @endif
            </g>
        @endforeach
        <line x1="36" x2="{{ $chart['width'] }}" y1="{{ $chart['baseline'] }}" y2="{{ $chart['baseline'] }}" class="chart-baseline" />
    </svg>
    <details class="mt-2">
        <summary class="small text-secondary">Tablo olarak göster</summary>
        <table class="table table-sm mt-2">
            <tbody>
            @foreach ($data as $key => $value)
                <tr><td>{{ $key }}</td><td class="text-end">{{ number_format($value, 0, ',', '.') }}{{ $unit }}</td></tr>
            @endforeach
            </tbody>
        </table>
    </details>
</figure>