SpitiGlykou
This commit is contained in:
Argyrios Deligiannidis
@@ -0,0 +1,390 @@
|
||||
{% 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" %}
|
||||
Reference in New Issue
Block a user