391 lines
17 KiB
HTML
391 lines
17 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" %}
|