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

{% block stylesheets %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
{% endblock %}

{% block body %}
    <!-- BEGIN: Subheader -->
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title">Analytics Forecasting - {{ date | date('M - l') }}</h3>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        <!--Begin::Section-->
        <div id="map_coverage" style="height:600px; margin-bottom: 15px;">
        </div>

        {% for hub in hub_list %}
        <div class="row">
            <div class="col-xl-12">
                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title col-xl-12">
                                <h3 class="m-portlet__head-text col-xl-4">
                                    {{ hub.label }}
                                </h3>
                            </div>
                        </div>
                    </div>

                    <div id="year-day-chart-{{ hub.id }}" style="height: 400px;">
                    </div>

                    <div id="month-weekday-chart-{{ hub.id }}" style="height: 400px;">
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% endblock %}

{% block scripts %}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script>


// map

var map = L.map('map_coverage').setView([{% trans %}default_lat{% endtrans %}, {% trans %}default_long{% endtrans %}], 13);
	L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={{ maptiler_api_key }}',{
	tileSize: 512,
	zoomOffset: -1,
	minZoom: 1,
	crossOrigin: true
}).addTo(map);

{% for cover in hub_coverage %}
L.circle([{{ cover.latitude }}, {{ cover.longitude }}], { radius: {{ cover.distance }} }).addTo(map);
{% endfor %}

{% for hub in hub_list %}
// create chart instance
var chart = am4core.create("year-day-chart-{{ hub.id }}", am4charts.XYChart);

// add data
chart.data = {{ hub.data_year|json_encode|raw }};

// create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "date";
categoryAxis.title.text = "Date";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Orders";
valueAxis.maxPrecision = 0;

// year day
var s2018 = chart.series.push(new am4charts.LineSeries());
s2018.name = "2018";
s2018.stroke = am4core.color("#0000FF");
s2018.strokeWidth = 2;
s2018.dataFields.valueY = "y2018";
s2018.dataFields.categoryX = "date";

var s2019 = chart.series.push(new am4charts.LineSeries());
s2019.name = "2019";
s2019.stroke = am4core.color("#FF0000");
s2019.strokeWidth = 2;
s2019.dataFields.valueY = "y2019";
s2019.dataFields.categoryX = "date";

var s2020 = chart.series.push(new am4charts.LineSeries());
s2020.name = "2020";
s2020.stroke = am4core.color("#00FF00");
s2020.strokeWidth = 2;
s2020.dataFields.valueY = "y2020";
s2020.dataFields.categoryX = "date";


//------------------------------------------------------------------------

var chart2 = am4core.create("month-weekday-chart-{{ hub.id }}", am4charts.XYChart);
chart2.data = {{ hub.data_weekday|json_encode|raw }};

var xAxis = chart2.xAxes.push(new am4charts.CategoryAxis());
xAxis.dataFields.category = "hour";
xAxis.title.text = "Hour";
var yAxis = chart2.yAxes.push(new am4charts.ValueAxis());
yAxis.title.text = "Orders";
yAxis.maxPrecision = 0;

var l2018 = chart2.series.push(new am4charts.LineSeries());
l2018.name = "2018";
l2018.stroke = am4core.color("#0000FF");
l2018.strokeWidth = 2;
l2018.dataFields.valueY = "y2018_average";
l2018.dataFields.categoryX = "hour";

var l2019 = chart2.series.push(new am4charts.LineSeries());
l2019.name = "2019";
l2019.stroke = am4core.color("#FF0000");
l2019.strokeWidth = 3;
l2019.dataFields.valueY = "y2019_average";
l2019.dataFields.categoryX = "hour";

{% endfor %}

</script>
{% endblock %}