Crispi
/
dogstats
Archived
2
0
Fork 0
Code Issues 1 Pull Requests Projects Wiki Activity

better graphs
Build and push / Pulling repo on server (push) Successful in 2s Details

This commit is contained in:
Chris 2023-11-29 13:53:05 +01:00
parent 44c0cfcfae
commit 153e5d6305
4 changed files with 159 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/pages/demo/controller.php
View File

@ -17,9 +17,53 @@ class Demo extends Page{
function test()
{
$u = new User();
$u->load('Chris','firstname');
var_dump($u->data);
$graph1 = partial('graph.html.php', [
'id' => 'graph1',
'title' => 'Graph 1',
'legend' => ['Geschwindigkeit', 'Fehler', 'Verweigerungen', 'Zeit', 'Geschwindigkeit', 'Punkte', 'Platz'],
'xaxis' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
'seriesdata' => [
['name' => 'Geschwindigkeit', 'type'=>'line','stack'=>'Total', 'data' => [120, 132, 101, 134, 90, 230, 210]],
['name' => 'Fehler', 'type'=>'line','stack'=>'Total', 'data' => [220, 182, 191, 234, 290, 330, 310]],
['name' => 'Verweigerungen', 'type'=>'line','stack'=>'Total', 'data' => [150, 232, 201, 154, 190, 330, 410]],
['name' => 'Zeit', 'type'=>'line','stack'=>'Total', 'data' => [320, 332, 301, 334, 390, 330, 320]],
['name' => 'Punkte', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]],
['name' => 'Platz', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]]
],
]);
$graph2 = partial('graph.html.php', [
'id' => 'graph2',
'title' => 'Punkte',
'xaxis' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
'seriesdata' => [
['name' => 'Punkte', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]],
],
]);
$graph3 = partial('graph.html.php', [
'id' => 'graph3',
'title' => 'Graph 3',
'legend' => ['Punkte'],
'xaxis' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
'seriesdata' => [
['name' => 'Punkte', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]],
],
]);
return '<div class="container text-center">
<div class="row">
<div class="col">
'.$graph1.'
</div>
<div class="col">
'.$graph2.'
</div>
<div class="col">
'.$graph3.'
</div>
</div>
</div>';
}
function index()

1
web/pages/smart/controller.php
View File

@ -57,7 +57,6 @@ class Smart extends Page {
$this->set('results_dogs', $results);
$this->set('dogs', $dogs);
$this->set('query', $query);
$this->set('template', 'search.html.php');
}

120
web/pages/smart/search.html.php
View File

@ -37,8 +37,7 @@
<?php foreach ($results as $res) :
// graph data preparation
if ($res['bew'] != 'DIS' && $res['punkte'] != 'DIS')
{
if ($res['bew'] != 'DIS' && $res['punkte'] != 'DIS') {
$sdata['dates'][] = date("d.m.Y", strtotime($res['date']));
$sdata['speed'][] = $res['msek'] ?: 0;
$sdata['errors'][] = $res['f'] ?: 0;
@ -71,88 +70,47 @@
<?php endforeach; ?>
</table>
<?php if (count($results) > 0) : ?>
<div class="col">
<div id="graph<?= $dog ?>" data-bs-theme="light" class="card bg-light text-black" style="min-height: 400px;"></div>
<div class="row">
<?php if (count($results) > 0) : ?>
<div class="col">
<?= partial('graph.html.php', [
'id' => 'graph1'.$dog,
'title' => 'Fehler und Verweigerungen',
'xaxis' => $sdata['dates'],
'seriesdata' => [
['name' => 'Fehler', 'type' => 'line', 'stack' => 'Total', 'data' => $sdata['errors']],
['name' => 'Verweigerungen', 'type' => 'line', 'stack' => 'Total', 'data' => $sdata['refusals']],
],
]);
?>
</div>
<script type="text/javascript">
// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('graph<?= $dog ?>'));
<div class="col">
<?= partial('graph.html.php', [
'id' => 'graph2'.$dog,
'title' => 'Geschwindigkeit',
'xaxis' => $sdata['dates'],
'seriesdata' => [
['name' => 'Geschwindigkeit', 'type' => 'line', 'stack' => 'Total', 'data' => $sdata['speed']],
],
]);
?>
</div>
// Specify the configuration items and data for the chart
var option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Geschwindigkeit', 'Fehler', 'Verweigerungen', 'Zeit', 'Geschwindigkeit', 'Punkte', 'Platz']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: <?= json_encode($sdata['dates']); ?>
},
yAxis: {
type: 'value'
},
series: [{
name: 'Geschwindigkeit',
type: 'line',
stack: 'Total',
data: <?= json_encode($sdata['speed']); ?>
},
{
name: 'Fehler',
type: 'line',
stack: 'Total',
data: <?= json_encode($sdata['errors']); ?>
},
{
name: 'Verweigerungen',
type: 'line',
stack: 'Total',
data: <?= json_encode($sdata['refusals']); ?>
},
{
name: 'Zeit',
type: 'line',
stack: 'Total',
data: <?= json_encode($sdata['time']); ?>
},
{
name: 'Punkte',
type: 'line',
stack: 'Total',
data: <?= json_encode($sdata['points']); ?>
},
{
name: 'Platz',
type: 'line',
stack: 'Total',
data: <?= json_encode($sdata['ranking']); ?>
}
]
};
<div class="col">
<?= partial('graph.html.php', [
'id' => 'graph3'.$dog,
'title' => 'Platzierung',
'xaxis' => $sdata['dates'],
'seriesdata' => [
['name' => 'Platzierung', 'type' => 'line', 'stack' => 'Total', 'data' => $sdata['ranking']],
],
]);
?>
</div>
</div>
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
</script>
</div>
<?php endif; ?>
<?php endif; ?>
<hr>

73
web/templates/partials/graph.html.php Normal file
View File

@ -0,0 +1,73 @@
<?php
/*
usage:
partial('graph.html.php', [
'id' => 'graph1',
'title' => 'Graph 1',
'gclass' => '', // classes for the graph div
'legend' => ['Geschwindigkeit', 'Fehler', 'Verweigerungen', 'Zeit', 'Geschwindigkeit', 'Punkte', 'Platz'],
'xaxis' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
'seriesdata' => [
['name' => 'Geschwindigkeit', 'type'=>'line','stack'=>'Total', 'data' => [120, 132, 101, 134, 90, 230, 210]],
['name' => 'Fehler', 'type'=>'line','stack'=>'Total', 'data' => [220, 182, 191, 234, 290, 330, 310]],
['name' => 'Verweigerungen', 'type'=>'line','stack'=>'Total', 'data' => [150, 232, 201, 154, 190, 330, 410]],
['name' => 'Zeit', 'type'=>'line','stack'=>'Total', 'data' => [320, 332, 301, 334, 390, 330, 320]],
['name' => 'Punkte', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]],
['name' => 'Platz', 'type'=>'line','stack'=>'Total', 'data' => [820, 932, 901, 934, 1290, 1330, 1320]]
],
])
*/
?>
<div id="graph<?= $id ?>" data-bs-theme="light" class="card bg-light text-black <?= $gclass ?>" style="min-height: 200px;"></div>
<script type="text/javascript">
// Initialize the echarts instance based on the prepared dom
var myChart<?= $id ?> = echarts.init(document.getElementById('graph<?= $id ?>'));
// Specify the configuration items and data for the chart
var option = {
title: {
text: '<?= $title ?>'
},
tooltip: {
trigger: 'axis'
},
<?php if(isset($legend)): ?>
legend: {
data: <?= json_encode($legend); ?>
},
<?php endif; ?>
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: <?= json_encode($xaxis); ?>
},
yAxis: {
type: 'value'
},
series: <?= json_encode($seriesdata, JSON_PRETTY_PRINT); ?>
};
// Display the chart using the configuration items and data just specified.
myChart<?= $id ?>.setOption(option);
window.addEventListener('resize', function(event) {
if(myChart<?= $id ?> != null && myChart<?= $id ?> != undefined){
myChart<?= $id ?>.resize();
}
}, true);
</script>