{% load static %}


{% include "diaxeirisi/00_head.html" %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<body id="app-container" class="menu-default show-spinner">
{% include "diaxeirisi/01_menu.html" %}

    <main>
        <div class="container-fluid">
            <div class="row mb-4">
             <div class="col-12">
                <h2>Στατιστικά</h2>
                <div class="separator mb-5"></div>
             </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-12 mb-4">
                    <div class="card dashboard-filled-line-chart">
                        <div class="card-body ">
                            <div class="float-left float-none-xs">
                                <div class="d-inline-block">
                                    <h5 class="d-inline">Κρατήσεις Προηγούμενης Εβδομάδας</h5>
                                </div>
                            </div>
                        </div>
                        <div class="chart card-body pt-0">
                            <canvas id="weekLineChart"></canvas>
                            <script>
                            var week_labels = '{{week_labels}}'.split(',');
                            var week_values = '{{week_values}}'.split(',');
                            var ctx = document.getElementById('weekLineChart').getContext('2d');
                            var weekLineChart = new Chart(ctx, {
                              type: 'line',
                                options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                  yAxes: [
                                    {
                                      gridLines: {
                                        display: true,
                                        lineWidth: 1,
                                        color: "rgba(0,0,0,0.1)",
                                       drawBorder: false
                                      },
                                      ticks: {
                                        beginAtZero: true,
                                        padding: 0
                                      }
                                    }
                                  ],
                                  xAxes: [
                                    {
                                      gridLines: {
                                        display: false
                                      }
                                    }
                                  ]
                                },
                                legend: {
                                  display: false
                                },
                              },
                              data: {
                                labels: week_labels,
                                datasets: [
                                  {
                                    label: "",
                                    data: week_values,
                                    backgroundColor: 'rgba(255, 255, 255, 1)',
                                    borderColor: 'rgba(54, 162, 235, 1)',
                                    pointHoverBackgroundColor: 'orange',

                                    pointRadius: 4,
                                    pointBorderWidth: 2,
                                    pointHoverRadius: 5,
                                    fill: false,
                                    borderWidth: 2,

                                  }
                                ]
                              }
                            });
                    </script>

                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-sm-12 mb-4">
                    <div class="card dashboard-filled-line-chart">
                        <div class="card-body ">
                            <div class="float-left float-none-xs">
                                <div class="d-inline-block">
                                    <h5 class="d-inline">Κρατήσεις Προηγούμενου Μήνα</h5>
                                </div>
                            </div>
                        </div>
                        <div class="chart card-body pt-0">
                            <canvas id="monthLineChart"></canvas>
                            <script>
                            var month_labels = '{{month_labels}}'.split(',');
                            var month_values = '{{month_values}}'.split(',');
                            var ctx = document.getElementById('monthLineChart').getContext('2d');
                            var monthLineChart = new Chart(ctx, {
                              type: 'line',
                                options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                  yAxes: [
                                    {
                                      gridLines: {
                                        display: true,
                                        lineWidth: 1,
                                        color: "rgba(0,0,0,0.1)",
                                       drawBorder: false
                                      },
                                      ticks: {
                                        beginAtZero: true,
                                        padding: 0
                                      }
                                    }
                                  ],
                                  xAxes: [
                                    {
                                      gridLines: {
                                        display: false
                                      }
                                    }
                                  ]
                                },
                                legend: {
                                  display: false
                                },
                              },
                              data: {
                                labels: month_labels,
                                datasets: [
                                  {
                                    label: "",
                                    data: month_values,
                                    backgroundColor: 'rgba(255, 255, 255, 1)',
                                    borderColor: 'rgba(54, 162, 235, 1)',
                                    pointHoverBackgroundColor: 'orange',

                                    pointRadius: 4,
                                    pointBorderWidth: 2,
                                    pointHoverRadius: 5,
                                    fill: false,
                                    borderWidth: 2,

                                  }
                                ]
                              }
                            });
                    </script>

                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-sm-12 mb-4">
                    <div class="card dashboard-filled-line-chart">
                        <div class="card-body ">
                            <div class="float-left float-none-xs">
                                <div class="d-inline-block">
                                    <h5 class="d-inline">Κρατήσεις Προηγούμενου 3μήνου</h5>
                                </div>
                            </div>
                        </div>
                        <div class="chart card-body pt-0">
                            <canvas id="ThreeMonthsLineChart"></canvas>
                            <script>
                            var three_months_labels = '{{three_months_labels}}'.split(',');
                            var three_months_values = '{{three_months_values}}'.split(',');
                            var ctx = document.getElementById('ThreeMonthsLineChart').getContext('2d');
                            var ThreeMonthsLineChart = new Chart(ctx, {
                              type: 'line',
                                options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                  yAxes: [
                                    {
                                      gridLines: {
                                        display: true,
                                        lineWidth: 1,
                                        color: "rgba(0,0,0,0.1)",
                                       drawBorder: false
                                      },
                                      ticks: {
                                        beginAtZero: true,
                                        padding: 0
                                      }
                                    }
                                  ],
                                  xAxes: [
                                    {
                                      gridLines: {
                                        display: false
                                      }
                                    }
                                  ]
                                },
                                legend: {
                                  display: false
                                },
                              },
                              data: {
                                labels: three_months_labels,
                                datasets: [
                                  {
                                    label: "",
                                    data: three_months_values,
                                    backgroundColor: 'rgba(255, 255, 255, 1)',
                                    borderColor: 'rgba(54, 162, 235, 1)',
                                    pointHoverBackgroundColor: 'orange',

                                    pointRadius: 4,
                                    pointBorderWidth: 2,
                                    pointHoverRadius: 5,
                                    fill: false,
                                    borderWidth: 2,

                                  }
                                ]
                              }
                            });
                    </script>

                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-sm-12 mb-4">
                    <div class="card dashboard-filled-line-chart">
                        <div class="card-body ">
                            <div class="float-left float-none-xs">
                                <div class="d-inline-block">
                                    <h5 class="d-inline">Κρατήσεις Προηγούμενου 6μήνου</h5>
                                </div>
                            </div>
                        </div>
                        <div class="chart card-body pt-0">
                                <canvas id="SixMonthsLineChart"></canvas>
                            <script>
                            var six_months_labels = '{{six_months_labels}}'.split(',');
                            var six_months_values = '{{six_months_values}}'.split(',');
                            var ctx = document.getElementById('SixMonthsLineChart').getContext('2d');
                            var SixMonthsLineChart = new Chart(ctx, {
                              type: 'line',
                                options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                  yAxes: [
                                    {
                                      gridLines: {
                                        display: true,
                                        lineWidth: 1,
                                        color: "rgba(0,0,0,0.1)",
                                       drawBorder: false
                                      },
                                      ticks: {
                                        beginAtZero: true,
                                        padding: 0
                                      }
                                    }
                                  ],
                                  xAxes: [
                                    {
                                      gridLines: {
                                        display: false
                                      }
                                    }
                                  ]
                                },
                                legend: {
                                  display: false
                                },
                              },
                              data: {
                                labels: six_months_labels,
                                datasets: [
                                  {
                                    label: "",
                                    data: six_months_values,
                                    backgroundColor: 'rgba(255, 255, 255, 1)',
                                    borderColor: 'rgba(54, 162, 235, 1)',
                                    pointHoverBackgroundColor: 'orange',
                                    pointRadius: 4,
                                    pointBorderWidth: 2,
                                    pointHoverRadius: 5,
                                    fill: false,
                                    borderWidth: 2,


                                  }
                                ]
                              }
                            });
                    </script>

                        </div>
                    </div>
                </div>

                <div class="col-md-12 col-sm-12 mb-4">
                    <div class="card dashboard-filled-line-chart">
                        <div class="card-body ">
                            <div class="float-left float-none-xs">
                                <div class="d-inline-block">
                                    <h5 class="d-inline">Κρατήσεις Προηγούμενου Έτους</h5>
                                </div>
                            </div>
                        </div>
                        <div class="chart card-body pt-0">
                                <canvas id="YearLineChart"></canvas>
                            <script>
                            var year_labels = '{{year_labels}}'.split(',');
                            var year_values = '{{year_values}}'.split(',');
                            var ctx = document.getElementById('YearLineChart').getContext('2d');
                            var YearLineChart = new Chart(ctx, {
                              type: 'line',
                                options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                scales: {
                                  yAxes: [
                                    {
                                      gridLines: {
                                        display: true,
                                        lineWidth: 1,
                                        color: "rgba(0,0,0,0.1)",
                                       drawBorder: false
                                      },
                                      ticks: {
                                        beginAtZero: true,
                                        padding: 0
                                      }
                                    }
                                  ],
                                  xAxes: [
                                    {
                                      gridLines: {
                                        display: false
                                      }
                                    }
                                  ]
                                },
                                legend: {
                                  display: false
                                },
                              },
                              data: {
                                labels: year_labels,
                                datasets: [
                                  {
                                    label: "",
                                    data: year_values,
                                    backgroundColor: 'rgba(255, 255, 255, 1)',
                                    borderColor: 'rgba(54, 162, 235, 1)',
                                    pointHoverBackgroundColor: 'orange',
                                    pointRadius: 4,
                                    pointBorderWidth: 2,
                                    pointHoverRadius: 5,
                                    fill: false,
                                    borderWidth: 2,


                                  }
                                ]
                              }
                            });
                    </script>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>


{% include "diaxeirisi/99_footer.html" %}