<section {{ $attributes->merge(['class' => 'chart js-chart']) }}
data-chart-canvas="{{ $chart ? '.js-chart-canvas' : '' }}"
data-chart-type="{{ $chart ? $chart['type'] : '' }}"
data-chart-json="{{ $chart ? json_encode($chart) : null }}"
data-chart-legends-container=".js-chart-legends"
>
@if($title || $viewToggle)
<div class="chart__header">
@if($title)
<h2 class="chart__title title">
{!! $title !!}
</h2>
@endif
@if($tableToggler)
<div class="chart__togglers js-chart-togglers"
data-chart-toggler-active-class="button--dark"
data-chart-toggler-class="button--outline-light"
data-chart-toggler-selector=".js-chart-toggler"
data-chart-toggler-target-selector=".js-chart-toggle"
data-chart-toggler-target-active-class="active"
>
<button class="button button--outline-light js-chart-toggler gtm-tabel" type="button">
@icon('table')
</button>
<button class="button button--dark js-chart-toggler gtm-grafiek" type="button">
@icon('chart-simple')
</button>
</div>
@endif
</div>
@endif
{{-- @dump($chart)--}}
@if($map)
@pushonce('footer-scripts')
<script>
const mapData = {!! json_encode($mapData) !!};
</script>
@endpushonce
<div class="map js-interactive-map"
data-region-selector=".map-region"
data-legend-selector=".js-map-legend"
data-highlight-class="is-highlighted"
@if($mapHighlightTarget) data-highlight-target="{{ $mapHighlightTarget }}" @endif
>
<div class="map-legend map-legend--invisible js-map-legend" data-visibility-class="map-legend--invisible"></div>
@inlineAsset($map)
</div>
@foreach($chart['legend'] as $legend)
<div class="d-flex align-items-center text-small gap-2">
<div style="height: 12px; width: 25px; background-color: {{ $legend['color'] }};"></div>
{{ $legend['min'] }}{{ !is_null($legend['min']) ? ' - ' : null }}{{ $legend['max'] }}
</div>
@endforeach
<style>
@foreach($chart['dataSet'] as $dataSet)
@php($label = str_replace([' ', '/'], ['_', '\/'], $dataSet['label']))
#{{ $label }} {
fill: {{ $dataSet['color'] }};
}
@endforeach
</style>
@else
<div class="chart__inner active js-chart-toggle"
>
<div
@if($chart['customHeight'] ?? false)
style="height: {{ $chart['customHeight'] }}px;"
@endif
>
<canvas class="chart__canvas js-chart-canvas"></canvas>
</div>
@php($legendDisplay = $chart['options']['plugins']['legend']['display'] ?? true)
@if($legendDisplay)
<div class="chart__legends">
<div class="chart__legends__inner js-chart-legends"></div>
</div>
@endif
</div>
<div class="chart__table table-responsive js-chart-toggle">
<table class="table">
@php($heads = [])
@if(!$chart['hideTableHead'])
<thead>
<tr>
<th></th>
@if($chart['type'] === 'boxplot')
@foreach($chart['dataSet'][0]['data'][0] as $key => $head)
<th>{{ __('charts.boxplot.' . $key) }}</th>
@endforeach
@elseif(isset($chart['useJavaScriptGraph']))
@foreach($chart['dataSetColumns'] as $head)
<th>{{ $head }}</th>
@endforeach
@elseif($chart['type'] === 'line')
@foreach($chart['dataSet'] as $head)
@if(!isset($head['totalSet']))
<th>{{ $head['label'] }}</th>
@endif
@endforeach
@elseif($chart['invertedTable'])
@php(ksort($chart['dataSet'][0]['data']))
@foreach($chart['dataSet'][0]['data'] as $name => $head)
<th>{{ $name }}</th>
@endforeach
@elseif($chart['type'] === 'bar')
@foreach($chart['dataSet'] as $key => $item)
@if(isset($item['totalSet']) && $item['totalSet'])
@continue
@elseif($item['label'] ?? false)
@php(array_push($heads, $item['label']))
@elseif(isset($chart['labels']))
@php(array_push($heads, $chart['labels'][$key]))
@endif
@endforeach
@php(sort($heads, SORT_NUMERIC))
@foreach($heads as $head)
<th>{{ $head }}</th>
@endforeach
@endif
</tr>
</thead>
@endif
<tbody>
@if($chart['type'] === 'boxplot')
@foreach($chart['labels'] as $key => $item)
<tr>
<th>{{ $item }}</th>
@foreach($chart['dataSet'][0]['data'][$key] as $cell)
<td>
{{ number_format($cell, !is_null($chart['forceNumberOfDecimals']) ? $chart['forceNumberOfDecimals'] : ($cell === round($cell) ? 0 : 1), ',', '.') }}
</td>
@endforeach
</tr>
@endforeach
@elseif(isset($chart['useJavaScriptGraph']))
@foreach($chart['dataSet'] as $key => $row)
<tr>
<th>{{ array_values($row)[0] }}</th>
@foreach($chart['dataSetColumns'] as $name)
<td>
{{ number_format($row[$name], !is_null($chart['forceNumberOfDecimals']) ? $chart['forceNumberOfDecimals'] : ($row[$name] === round($row[$name]) ? 0 : 1), ',', '.') }}
</td>
@endforeach
</tr>
@endforeach
@elseif($chart['invertedTable'])
@foreach($chart['dataSet'] as $row)
<tr>
<th>{{ $row['label'] }}</th>
@php(ksort($row['data']))
@foreach($row['data'] as $value)
<td>
{{ number_format($value, !is_null($chart['forceNumberOfDecimals']) ? $chart['forceNumberOfDecimals'] : ($value === round($value) ? 0 : 1), ',', '.') }}
</td>
@endforeach
</tr>
@endforeach
@else
{{-- @elseif(count($chart['dataSet'][0]['data']) > 1)--}}
@php($key = 0)
@foreach($chart['dataSet'][0]['data'] as $name => $value)
@if($key < count($chart['labels'])) {{-- To fix more values than labels --}}
<tr>
<th>{{ $chart['labels'][$name] ?? $chart['labels'][$key] }}</th>
@foreach($chart['dataSet'] as $item)
@php($num = $item['data'][$name] ?? 0)
@if(isset($item['totalSet']) && $item['totalSet'])
@php($totalSet = $item)
@elseif($chart['type'] !== 'line' && count($chart['dataSet']) > 1)
@foreach($heads as $label)
@if($item['label'] === $label)
<td>
{{ number_format($num, !is_null($chart['forceNumberOfDecimals']) ? $chart['forceNumberOfDecimals'] : ($num === round($num) ? 0 : 1), ',', '.') }}
</td>
@endif
@endforeach
@else
<td>
{{ number_format($num, !is_null($chart['forceNumberOfDecimals']) ? $chart['forceNumberOfDecimals'] : ($num === round($num) ? 0 : 1), ',', '.') }}
</td>
@endif
@endforeach
</tr>
@endif
@php($key++)
@endforeach
{{-- @else--}}
{{-- @foreach($chart['dataSet'] as $item)--}}
{{-- @if(count($item['data']) > 0) --}}{{-- Fix for 4_2 no data --}}
{{-- <tr>--}}
{{-- <th>{{ array_keys($item['data'])[0] }}</th>--}}
{{-- @php($num = array_values($item['data'])[0])--}}
{{-- <td>--}}
{{-- {{ number_format($num, !is_null($chart['forceNumberOfDecimals']) ? $chart['forceNumberOfDecimals'] : ($num === round($num) ? 0 : 1), ',', '.') }}--}}
{{-- </td>--}}
{{-- </tr>--}}
{{-- @endif--}}
{{-- @endforeach--}}
@endif
{{-- @if($totalSet ?? false)--}}
{{-- <tr>--}}
{{-- <th>{{ $totalSet['label'] }}</th>--}}
{{-- @foreach($totalSet['data'] as $chart)--}}
{{-- <td>{{ $chart }}</td>--}}
{{-- @endforeach--}}
{{-- </tr>--}}
{{-- @endif--}}
</tbody>
</table>
</div>
@endif
</section>
@pushonce('footer-scripts')
<script src="{{ mix('/assets/js/chart.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
(charts => {
charts.forEach(chart => {
const chartCanvas = chart.querySelector(chart.dataset.chartCanvas);
const chartLegendsContainer = chart.querySelector(chart.dataset.chartLegendsContainer);
const chartType = chart.dataset.chartType;
if (!chartCanvas || !chartType) return;
window.chartInit(chartCanvas, chartType, JSON.parse(chart.dataset.chartJson), chartLegendsContainer);
(chartTogglersSelector => {
const chartTogglers = chart.querySelectorAll(chartTogglersSelector);
chartTogglers.forEach(togglersParent => {
const togglerClass = togglersParent.dataset.chartTogglerClass ?? null;
const togglerActiveClass = togglersParent.dataset.chartTogglerActiveClass ?? null;
const chartTogglerSelector = togglersParent.dataset.chartTogglerSelector ?? null;
const chartTogglerTargetSelector = togglersParent.dataset.chartTogglerTargetSelector ?? null;
const chartTogglerTargetActiveClass = togglersParent.dataset.chartTogglerTargetActiveClass ?? null;
const togglers = togglersParent.querySelectorAll(chartTogglerSelector) ?? null;
const targets = chart.querySelectorAll(chartTogglerTargetSelector) ?? null;
togglersParent.addEventListener('click', event => {
const clickedButton = event.target.closest(chartTogglerSelector);
if (clickedButton.classList.contains(togglerActiveClass)) return;
togglers.forEach(toggler => {
toggler.classList.toggle(togglerActiveClass);
toggler.classList.toggle(togglerClass);
});
targets.forEach(target => {
target.classList.toggle(chartTogglerTargetActiveClass);
});
});
});
})('.js-chart-togglers');
});
})(document.querySelectorAll('.js-chart'));
(function _initMapLegend(selector) {
const maps = document.querySelectorAll(selector);
maps.forEach(map => {
const highlighted = map.querySelector(map.dataset.highlightTarget) ?? null;
const highlightClass = map.dataset.highlightClass ?? null;
const legendSelector = map.dataset.legendSelector ?? null;
const legend = map.querySelector(legendSelector);
const visibilityClass = legend.dataset.visibilityClass;
const regions = map.querySelectorAll(map.dataset.regionSelector) ?? null;
if (!legend || !regions.length) return;
let enableCall = true;
document.addEventListener('mousemove', event => {
if (!enableCall) return; // throttle
enableCall = false;
const insideMap = event.target.closest(selector);
if (!insideMap) legend.classList.add(visibilityClass); // hide
setTimeout(() => enableCall = true, 10); // throttle
});
let debounceTimeoutId;
regions.forEach(region => {
region.addEventListener('mouseenter', () => {
clearTimeout(debounceTimeoutId);
debounceTimeoutId = setTimeout(() => {
if (region.hasAttribute('id')) {
legend.innerText = mapData ? mapData[region.id].label + ' - ' + mapData[region.id].amount : region.id.replace(/_/g, ' ');
legend.classList.remove(visibilityClass); // show
}
}, 300);
});
region.addEventListener('mouseleave', () => {
clearTimeout(debounceTimeoutId);
setTimeout(() => {
legend.classList.add(visibilityClass); // hide
}, 10);
});
});
map.addEventListener('mousemove', event => {
legend.style.top = event.clientY + 'px';
legend.style.left = event.clientX + 'px';
});
map.addEventListener('mouseleave', () => {
legend.classList.add(visibilityClass); // hide
});
if (highlighted && highlightClass) {
highlighted.classList.add(highlightClass);
highlighted.parentNode.appendChild(highlighted);
}
});
})('.js-interactive-map');
});
</script>
@endpushonce