113 lines
3.5 KiB
Twig
113 lines
3.5 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% 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</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END: Subheader -->
|
|
<div class="m-content">
|
|
<!--Begin::Section-->
|
|
{% 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>
|
|
|
|
{% 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";
|
|
|
|
// 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";
|
|
|
|
var l2018 = chart2.series.push(new am4charts.LineSeries());
|
|
l2018.name = "2018";
|
|
l2018.stroke = am4core.color("#0000FF");
|
|
l2018.strokeWidth = 2;
|
|
l2018.dataFields.valueY = "y2018";
|
|
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";
|
|
l2019.dataFields.categoryX = "hour";
|
|
|
|
{% endfor %}
|
|
|
|
</script>
|
|
{% endblock %}
|