@if($PocetKontrolPodlaEmisnehoSystemuVozidlaEChartSource->isNotEmpty())
    <div id="EChartPocetKontrolPodlaEmisnehoSystemuVozidla" style="height:400px"></div>

    @push('scripts')
        <script type="text/javascript">
            $(document).ready(function () {
                const EChartPocetKontrolPodlaEmisnehoSystemuVozidla = echarts.init(document.getElementById('EChartPocetKontrolPodlaEmisnehoSystemuVozidla'), 'macarons');

                window.addEventListener('resize', function () {
                    EChartPocetKontrolPodlaEmisnehoSystemuVozidla.resize();
                });

                EChartPocetKontrolPodlaEmisnehoSystemuVozidla.setOption({
                    backgroundColor: 'transparent',
                    grid: {
                        height: 200,
                        top: 'auto',
                    },
                    legend: {
                        show: true,
                        type: 'plain',
                        orient: 'horizontal',
                        align: 'left',
                        top: 0,
                        zlevel: 100,
                        width: '80%',
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    toolbox: {
                        show: true,
                        orient: 'horizontal',
                        top: 0,
                        right: 0,
                        zlevel: 100,
                        feature: {
                            saveAsImage: {
                                type: 'png',
                                name: 'tek-pocet-kontrol-podla-emisneho-systemu-vozidla',
                                backgroundColor: 'white',
                                show: true,
                                title: 'Uložiť ako obrázok',
                            },
                            restore: {
                                show: true,
                                title: 'Obnoviť',
                            },
                        },
                    },
                    dataset: [
                        {
                            dimensions: [
                                {
                                    name: 'label',
                                    type: 'ordinal',
                                    displayName: 'Technik',
                                },
                                {
                                    name: 'D_BKAT_NKAT',
                                    type: 'int',
                                    displayName: 'D/BKAT, D/NKAT',
                                },
                                {
                                    name: 'D_NKAT_OBD',
                                    type: 'int',
                                    displayName: 'D/NKAT OBD',
                                },
                                {
                                    name: 'RKAT',
                                    type: 'int',
                                    displayName: '*/RKAT',
                                },
                                {
                                    name: 'RKAT_OBD',
                                    type: 'int',
                                    displayName: '*/RKAT OBD',
                                },
                                {
                                    name: 'BKAT_NKAT',
                                    type: 'int',
                                    displayName: '*/BKAT, */NKAT',
                                },
                                {
                                    name: 'NEDEFINOVANY',
                                    type: 'int',
                                    displayName: 'Nedefinovaný',
                                },
                            ],
                            source: @json($PocetKontrolPodlaEmisnehoSystemuVozidlaEChartSource ?? []),
                        },
                    ],
                    xAxis: {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            rotate: -30,
                            margin: 15,
                            overflow: 'truncate',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                    },
                    series: [
                        {
                            type: 'bar',
                            stack: 'total',
                        },
                        {
                            type: 'bar',
                            stack: 'total',
                        },
                        {
                            type: 'bar',
                            stack: 'total',
                        },
                        {
                            type: 'bar',
                            stack: 'total',
                        },
                        {
                            type: 'bar',
                            stack: 'total',
                        },
                        {
                            type: 'bar',
                            stack: 'total',
                        },
                    ],
                });
            });
        </script>
    @endpush
@else
    <p class="h4 text-center text-muted">Nie sú k dispozícii žiadne údaje...</p>
@endif
