<?php if ($block->canRenderWidget()): ?>
    <div id="topProductsChart" class="stat-container container-width-50"></div>
    <?php
    $data = $block->getTopSellingProducts();
    $productNames = $data['names'];
    $productSales = $data['sales'];
    ?>

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

            const titleText = <?= json_encode(__('Top Selling Products')) ?>;
            const yAxisLabel = <?= json_encode(__('Units Sold')) ?>;
            const seriesName = <?= json_encode(__('Sales')) ?>;

            const option = {
                title: {
                    text: titleText,
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: <?= json_encode($productNames) ?>,
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: {
                    type: 'value',
                    name: yAxisLabel
                },
                series: [{
                    name: seriesName,
                    type: 'bar',
                    data: <?= json_encode($productSales) ?>,
                    itemStyle: {
                        color: '#5470C6'
                    },
                    label: {
                        show: true,
                        position: 'top'
                    }
                }]
            };

            myChart.setOption(option);
        });
    </script>
<?php endif; ?>