390 lines
18 KiB
HTML
390 lines
18 KiB
HTML
{% 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" %} |