<?php if ($block->canRenderWidget()): ?>
    <div id="countrymap" class="stat-container container-width-50"></div>

    <script type="text/javascript">
        require(['jquery', 'echarts'], function ($, echarts) {
            var chartDom = document.getElementById('countrymap');
            var myChart = echarts.init(chartDom);

            var data = <?= json_encode($block->getSalesByCountry()) ?>;

            var titleText = <?= json_encode(__('Sales by Country')) ?>;
            var tooltipSales = <?= json_encode(__('Sales')) ?>;
            var visualHigh = <?= json_encode(__('High')) ?>;
            var visualLow = <?= json_encode(__('Low')) ?>;

            var option = {
                title: {
                    text: titleText,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>' + tooltipSales + ': ${c}'
                },
                visualMap: {
                    min: 0,
                    max: 200000,
                    left: 'left',
                    top: 'bottom',
                    text: [visualHigh, visualLow],
                    calculable: true,
                    inRange: {
                        color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4']
                    }
                },
                series: [
                    {
                        name: tooltipSales,
                        type: 'map',
                        map: 'world',
                        roam: true,
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        data: data
                    }
                ]
            };

            // Load the world map
            $.get('<?= $block->getViewFileUrl('Originalapp_Reports::js/map/world.json'); ?>', function (geoJson) {
                echarts.registerMap('world', geoJson);
                myChart.setOption(option);
            });
        });
    </script>
<?php endif; ?>
