From 153e5d63052617ce20096d1d2b05570745fec8b8 Mon Sep 17 00:00:00 2001
From: Chris <christian@haschek.at>
Date: Wed, 29 Nov 2023 13:53:05 +0100
Subject: [PATCH] better graphs

---
 web/pages/demo/controller.php         |  50 ++++++++++-
 web/pages/smart/controller.php        |   1 -
 web/pages/smart/search.html.php       | 120 +++++++++-----------------
 web/templates/partials/graph.html.php |  73 ++++++++++++++++
 4 files changed, 159 insertions(+), 85 deletions(-)
 create mode 100644 web/templates/partials/graph.html.php

diff --git a/web/pages/demo/controller.php b/web/pages/demo/controller.php
index 5a2c221..62947ce 100644
--- a/web/pages/demo/controller.php
+++ b/web/pages/demo/controller.php
@@ -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()
diff --git a/web/pages/smart/controller.php b/web/pages/smart/controller.php
index 1ff66b6..a22b708 100644
--- a/web/pages/smart/controller.php
+++ b/web/pages/smart/controller.php
@@ -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');
 
     }
diff --git a/web/pages/smart/search.html.php b/web/pages/smart/search.html.php
index 6435d7b..db847c7 100644
--- a/web/pages/smart/search.html.php
+++ b/web/pages/smart/search.html.php
@@ -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>
diff --git a/web/templates/partials/graph.html.php b/web/templates/partials/graph.html.php
new file mode 100644
index 0000000..65d2640
--- /dev/null
+++ b/web/templates/partials/graph.html.php
@@ -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>
\ No newline at end of file