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

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

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

                EChartPocetKontrolPodlaObratu.setOption({
                    backgroundColor: 'transparent',
                    grid: {
                        height: 300,
                        top: 'auto',
                    },
                    legend: {
                        show: true,
                        type: 'scroll',
                        orient: 'vertical',
                        align: 'right',
                        top: 60,
                        right: 0,
                        height: '80%',
                        zlevel: 100,
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    toolbox: {
                        show: true,
                        orient: 'horizontal',
                        top: 0,
                        right: 0,
                        zlevel: 100,
                        feature: {
                            saveAsImage: {
                                type: 'png',
                                name: 'tek-vytvoreny-obrat',
                                backgroundColor: 'white',
                                show: true,
                                title: 'Uložiť ako obrázok',
                            },
                            restore: {
                                show: true,
                                title: 'Obnoviť',
                            },
                        },
                    },
                    series: [
                        {
                            name: 'Počet',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: [0, '40%'],
                            center: ['30%', '50%'],
                            itemStyle: {
                                borderRadius: 6,
                                borderColor: '#fff',
                                borderWidth: 1,
                            },
                            encode: {
                                itemName: 'label',
                                value: 'spolu',
                            },
                            animation: true,
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 100;
                            },
                            label: {
                                show: false,
                            },
                        },
                        {
                            name: 'Obrat',
                            type: 'pie',
                            radius: ['50%', '80%'],
                            center: ['30%', '50%',],
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2,
                            },
                            encode: {
                                itemName: 'label',
                                value: 'obrat',
                            },
                            animation: true,
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 400;
                            },
                            label: {
                                show: true,
                                position: 'outside',
                                rotate: false,
                            },
                            tooltip: {
                                valueFormatter: (value) => value.toLocaleString('sk-SK', {minimumFractionDigits: 2}),
                            },
                            datasetIndex: 1,
                        },
                    ],
                    dataset: [
                        {
                            dimensions: [
                                {
                                    name: 'druh',
                                    type: 'ordinal',
                                },
                                {
                                    name: 'label',
                                    type: 'ordinal',
                                },
                                {
                                    name: 'spolu',
                                    type: 'float',
                                    displayName: 'Počet',
                                },
                                {
                                    name: 'obrat',
                                    type: 'number',
                                    displayName: 'Obrat',
                                }
                            ],
                            source: @json($PocetKontrolSObratomEChartSource ?? []),
                        },
                        {
                            transform: [
                                {
                                    type: 'sort',
                                    config: {
                                        dimension: 'label',
                                        order: 'asc',
                                    },
                                }
                            ],
                        }
                    ],
                });
            });
        </script>
    @endpush
@else
    <p class="h4 text-center text-muted">Nie sú k dispozícii žiadne údaje...</p>
@endif
