<table class="admin__table-primary dashboard-data" width="100%">
    <thead>
        <tr>
            <th><?php echo __('Property') ?></th>
            <th><?php echo __('Value') ?></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach($block->getHealth() as $row): ?>
            <tr>
                <td><?php echo __('Conversion Action') ?></td>
                <td><?php echo $row['conversionActionName'] ?></td>
            </tr>
            <tr>
                <td><?php echo __('Status') ?></td>
                <td><?php echo $row['status'] ?></td>
            </tr>
            <tr>
                <td><?php echo __('Total events count') ?></td>
                <td><?php echo $row['totalEventCount'] ?></td>
            </tr>
            <tr>
                <td><?php echo __('Successful events count') ?></td>
                <td><?php echo $row['successfulEventCount'] ?></td>
            </tr>
            <tr>
                <td><?php echo __('Last upload date time') ?></td>
                <td><?php echo $row['lastUploadDateTime'] ?></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div style="position: relative; height:30vh; width:55vw"><canvas id="canvas"></canvas></div>
                    <script>
                        require(['https://cdn.jsdelivr.net/npm/chart.js@3.2.0/dist/chart.min.js'], function(Chart)
                        {
                            let dailySummaries = <?php echo json_encode($row['dailySummaries']) ?>;
                            let jobSummaries   = <?php echo json_encode($row['jobSummaries']) ?>;  

                            (async function() 
                                {
                                    const data = dailySummaries;

                                    const chart = new Chart(document.getElementById('canvas'),
                                    {
                                        type: 'bar',
                                        data: 
                                        {
                                            labels: data.map(row => row.uploadDate),
                                            datasets: 
                                            [
                                                {
                                                    label: <?php echo json_encode(__('Daily summaries')) ?>,
                                                    data: data.map(row => row.successfulCount),
                                                    backgroundColor: 
                                                    [
                                                        'rgba(255, 99, 132, 0.2)',
                                                        'rgba(255, 159, 64, 0.2)',
                                                        'rgba(255, 205, 86, 0.2)',
                                                        'rgba(75, 192, 192, 0.2)',
                                                        'rgba(54, 162, 235, 0.2)',
                                                        'rgba(153, 102, 255, 0.2)',
                                                        'rgba(201, 203, 207, 0.2)'
                                                    ]
                                                }
                                            ]
                                        }
                                    });


                                    window.addEventListener("resize", () => 
                                    {
                                        chart.resize();
                                    });

                                })();
                        });
                    </script>
                </td>
            </tr>
        <?php endforeach ?>
    </tbody>
</table>

