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

{% block title %}Volumetrie{% endblock %}

{% block body %}
<style>
    body {
  font-size: 9pt;
}

#chartdiv {
  width: 100%;
height: 500px;
}
#chartdivD{
width: 100%;
    height: 450px;
    font-size: 11px;
    border: 1px solid #eee;
    float: left;
  }
  
  /* =========== */
  #legendD {
    width: 100%;
    height: 450px;
    border: 1px solid #eee;
    margin-left: 10px;
    float: left;
  }
  
  #legendD .legend-itemd {
    margin: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
  }
  
  #legendD .legend-itemd .legend-valued {
    font-size: 12px;
    font-weight: normal;
    margin-left: 22px;
  }
  
  #legendD .legend-itemd .legend-markerd {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    margin-right: 10px;
  }
  
  #legendD .legend-itemd.disabled .legend-markerd {
    opacity: 0.5;
    background: #ddd;
  }

  .dataTables_wrapper {
    height:250px;
  }
</style>
               <!-- == filter Section  == -->
           {% include 'Volumetrie/filter.html.twig' %}
                <!-- == filter Section  == -->
          <div class="row">
                <div class="col-md">
                  <div class="card  mt-4">
                    <div class="card-header">
                        <h3 class="card-title text-center">Volumétrie</h3>
                    </div>
                    <div class="card-body">
                      <div id="chartdiv"></div>
                    </div>
                  </div>
                </div>
              </div>
          <div class="row">
            <!-- Table Of chartPieC -->
           <div class="col-xl-6">
            <form method='POST' action="{{path('vol1')}}" enctype="multipart/form-data" >
                          <div class="card">
                            <div class="card-header">
                                <h3 class="card-title text-center">Volumétrie Par Infra</h3>
                            </div>
                            <div class="card-body" style="height:814px">
                                    </p><div class="table-responsive">
                                      <table id="tableInfras" class="table border text-nowrap text-md-nowrap mb-0">
                                          <thead class="table-success">
                                              <tr>
                                                  <th>INFRA</th>
                                                <th>NB OT</th>
                                              </tr>
                                          </thead>
                                          <tbody>
                                          </tfooter>
                                          </tbody>
                                      </table>
                                    <br>
                                    <br>
                                    <div id="chartdivC"></div>
                                </div>
                                <br>
                            </div>
                        </div>
              </form>
            </div>

              <!-- Table Of chartPieD -->
            <div class="col-xl-6">
              <form method='POST' action="{{path('vol1')}}" enctype="multipart/form-data" >
                <div class="card">
                  <div class="card-header">
                      <h3 class="card-title  d-flex justify-content-center">Volumétrie Par Zone</h3>
                  </div>
                  <div class="card-body" style="height:814px">
                          </p><div class="table-responsive">
                              <table id="tableZones" class="table border text-nowrap text-md-nowrap mb-0">
                                  <thead class="table-success">
                                      <tr>
                                          <th>ZONE</th>
                                          <th>NB OT</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                  </tfooter>
                                  </tbody>
                              </table>
                              <br>
                              <br>
                              <div id="chartdivD"></div>
                      </div>
                      <br>
                  </div>
              </div>
    </form>
            </div>



{% endblock %}
{% block script %}
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/plugins/exporting.js"></script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>


<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


<script>

    $(function () {
       
        
    })

</script>

<!-- Chart code -->
<script>
// ================================== chart Serial =============================
am5.ready(function() {

  var tableInfras = $('#tableInfras').DataTable({
    "bProcessing": true,
    "sAutoWidth": false,
    "bDestroy":true,
    "sPaginationType": "bootstrap", // full_numbers
    "iDisplayStart ": 10,
    "iDisplayLength": 10,
    "bPaginate": false, //hide pagination
    "bFilter": false, //hide Search bar
    "bInfo": false, // hide showing entries
  });
  var tableZones = $('#tableZones').DataTable({
    "bProcessing": true,
    "sAutoWidth": false,
    "bDestroy":true,
    "sPaginationType": "bootstrap", // full_numbers
    "iDisplayStart ": 10,
    "iDisplayLength": 10,
    "bPaginate": false, //hide pagination
    "bFilter": false, //hide Search bar
    "bInfo": false, // hide showing entries
  });

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");


// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelX: "panX",
  wheelY: "zoomX",
  pinchZoomX:true
}));

chart.set("scrollbarX", am5.Scrollbar.new(root, {
  orientation: "horizontal"
}));


// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);


// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
  rotation: 0,
  centerY: am5.p50,
  centerX: am5.p50,
});

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  maxDeviation: 0.3,
  categoryField: "mois",
  renderer: xRenderer,
  tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  maxDeviation: 0.3,
  min: 0,
  renderer: am5xy.AxisRendererY.new(root, {})
}));


// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series1 = chart.series.push(am5xy.ColumnSeries.new(root, {
  name: "Series 1",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "nombre_interv",
  sequencedInterpolation: true,
  categoryXField: "mois",
  tooltip: am5.Tooltip.new(root, {
    labelText:"{valueY}"
  })
}));


series1.bullets.push(function () {
                return am5.Bullet.new(root, {
                locationY: 0.9,
                sprite: am5.Label.new(root, {
                    text: "{valueY}",
                    fill: root.interfaceColors.get("alternativeText"),
                    centerY: am5.p50,
                    fontSize: 15,
                    fill: am5.color(0x000000),
                    centerX: am5.p50,
                    populateText: true
                })
                });
            });

series1.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
series1.columns.template.adapters.add("fill", function(fill, target) {
  return chart.get("colors").getIndex(series1.columns.indexOf(target));
});

series1.columns.template.adapters.add("stroke", function(stroke, target) {
  return chart.get("colors").getIndex(series1.columns.indexOf(target));
});


//data=obj;

xAxis.data.setAll([]);
series1.data.setAll([]);

//finir graph 1
// ====================================== Chart Pie 1 ================================= 
// Create chart instance
am4core.useTheme(am4themes_animated);
var chart2 = am4core.create("chartdivC", am4charts.PieChart);

// ====================================== Chart Pie 2 ================================= 

// Create chart instance
var chart3 = am4core.create("chartdivD", am4charts.PieChart);


axios.get('/data-volumetrie', {
        params: {
            load:'oui'
      }
    })
    .then(function (response) {
      console.log('response.data[1]')
      console.log(response.data[1])
      //Chart 1
      data = response.data[0];
      let data0 = response.data[0].map(({ mois, nombre_interv }) => ({ mois: mois, nombre_interv: parseFloat(nombre_interv) }));
      xAxis.data.setAll(data0);
      series1.data.setAll(data0);
      series1.appear(1000);
      chart.appear(1000, 100);

      //Remplir la table des infras
      tableInfras.clear().draw();
      for (let i = 0; i < response.data[1].length; i++) {
        console.log(response.data[1][i].infra)
          tableInfras.row.add([response.data[1][i].infra,response.data[1][i].nombre_interv]).draw(false);
      }
      //Remplir la table des zones
      tableZones.clear().draw();
      for (let i = 0; i < response.data[2].length; i++) {
          tableZones.row.add([response.data[2][i].type_zone,response.data[2][i].nombre_interv]).draw(false);
      }

      // Graphe Infra
      chart2.data = response.data[1];

      // Add and configure Series
      var pieSeries = chart2.series.push(new am4charts.PieSeries());
      pieSeries.dataFields.value = "nombre_interv";
      pieSeries.dataFields.category = "infra";

      chart2.legend = new am4charts.Legend();

      pieSeries.colors.list = [
        am4core.color("#F9F871"),
        am4core.color("#A9EB82"),
        am4core.color("#5AD89B"),
        am4core.color("#00C0B0"),
        am4core.color("#00A5B7"),
        am4core.color("#0088AD"),
      ];
      //

      chart2.exporting.menu = new am4core.ExportMenu();
      chart2.exporting.filePrefix = "Volumétrie Par Infra";

      chart3.data = response.data[2];
      // Add and configure Series
      var pieSeries = chart3.series.push(new am4charts.PieSeries());
      pieSeries.dataFields.value = "nombre_interv";
      pieSeries.dataFields.category = "type_zone";

      chart3.legend = new am4charts.Legend();

      var exporting = am5plugins_exporting.Exporting.new(root, {
              menu: am5plugins_exporting.ExportingMenu.new(root, {}),
              filePrefix: "Volumétrie"
            });

      pieSeries.colors.list = [
        am4core.color("#845EC2"),
        am4core.color("#D65DB1"),
        am4core.color("#FF6F91"),
        am4core.color("#FF9671"),
        am4core.color("#FFC75F"),
        am4core.color("#F9F871"),
      ];

      chart3.exporting.menu = new am4core.ExportMenu();
      chart3.exporting.filePrefix = "Volumétrie Par Zone";
    })
  .catch(function (error) {console.log(error);})
  .then(function () {
});

$( "#btn-filter" ).click(function() {
    axios.get('/data-volumetrie', {
        params: {
            load:'non',
            etrs: $('#etrsSelect').val().join(','),
            annees: $('#anneesSelect').val().join(','),
            mois: $('#moisSelect').val().join(','),
            semaines: $('#semainesSelect').val().join(','),
            jours: $('#joursSelect').val().join(','),
      }
    })
    .then(function (response) {
      console.log(response.data[0])
      data = response.data[0];
      xAxis.data.setAll(data);
      series1.data.setAll(data);
      //Remplir la table des infras
      tableInfras.clear().draw();
      for (let i = 0; i < response.data[1].length; i++) {
        console.log(response.data[1][i].infra)
          tableInfras.row.add([response.data[1][i].infra,response.data[1][i].nombre_interv]).draw(false);
      }
      //Remplir la table des zones
      tableZones.clear().draw();
      for (let i = 0; i < response.data[2].length; i++) {
          tableZones.row.add([response.data[2][i].type_zone,response.data[2][i].nombre_interv]).draw(false);
      }

      // Graphe Infra
      chart2.data = response.data[1];
      // Graph zone
      chart3.data = response.data[2];
    })
    .catch(function (error) {console.log(error);})
    .then(function () {
    });
  })

}); // end am5.ready()

</script>
<script>
  $('.filterBtn').click(function () {
    $('.filterside').slideToggle();
  })

</script>
{% endblock %}