<!DOCTYPE html>
<html lang="en">
@include('index.head')
<body>
@include('index.navigation')
<main>
    <section class="public-page-hero">
        <div class="container">
            <span class="kicker">Regions</span>
            <h1 class="page-title">Rate of Incidents Per Region</h1>
            <p class="section-intro">Public regional summary generated from approved reporting data.</p>
        </div>
    </section>
    <section class="section">
        <div class="container">
            <div id="region-data" class="chart-shell"></div>
        </div>
    </section>
</main>
@include('index.footer')
<script type="text/javascript">
    if (window.Highcharts) {
        Highcharts.chart('region-data', {
            chart: { type: 'pie' },
            title: { text: 'Rate of Incidents Per Region' },
            tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
            accessibility: { point: { valueSuffix: '%' } },
            plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } },
            series: [{ name: 'Regions', colorByPoint: true, data: {!! $regions ?? '[]' !!} }],
            credits: { enabled: false }
        });
    }
</script>
</body>
</html>