{% extends 'base.html.twig' %}

{% block title %}
	Chart
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	<link href="{{ asset('styles/chart_style.css') }}" rel="stylesheet"/>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script type="text/javascript" src={{ asset('/scripts/zoom_manager.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/primitives.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/point_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/area_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/smooth_area_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/bar_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/line_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/smooth_line_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/pie_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/donut_chart.js') }}></script>
	<script type="text/javascript" src={{ asset('/scripts/charts/stacked_chart.js') }}></script>

	<script type="text/javascript" src={{ asset('/scripts/chart_loader.js') }}></script>
    <script>
        // Execute when DOM content is fully loaded
        document.addEventListener("DOMContentLoaded", function(event){
            // Get DOM elements
            let canvas = document.getElementById("chartCanvas")
            let effectCanvas = document.getElementById("effectCanvas")
            let detectionCanvas = document.getElementById("detectionCanvas")
            let parent = document.body
            let legend = document.getElementById("chartLegend")
            let tooltip = document.getElementById("tooltip")

            // Create ChartLoader instance
            let chartLoader = new ChartLoader(canvas, effectCanvas, detectionCanvas, parent, legend, tooltip)            
            chartLoader.loadData({{ id | json_encode() | raw() }})
        })
    </script>
{% endblock %}

{% block body %}
    <canvas id="chartCanvas"></canvas>
    <canvas id="effectCanvas"></canvas>
    <canvas id="detectionCanvas"></canvas>
    <div id="chartLegend"></div>
    <div id="tooltip"></div>
{% endblock %}