+ day selector

~correct values for shopping times & week overview #SPM-18: add work 4h development
2019-05-09 18:14:43 +02:00 · 2019-05-09 18:14:43 +02:00 · 303fad71d8
parent ee14f2b295
commit 303fad71d8
8 changed files with 214 additions and 158 deletions
--- a/src/main/java/de/hsel/spm/baudas/web/ShoppingTimesDiagram.java
+++ b/src/main/java/de/hsel/spm/baudas/web/ShoppingTimesDiagram.java
@ -1,6 +1,7 @@
 package de.hsel.spm.baudas.web;

 import com.google.gson.Gson;
+import de.hsel.spm.baudas.analysis.DayHour;
 import de.hsel.spm.baudas.analysis.ShoppingTimes;
 import org.jetbrains.annotations.NotNull;

@ -11,9 +12,7 @@ import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
 import java.io.PrintWriter;
 import java.nio.charset.StandardCharsets;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;

 /**
 * @author Johannes Theiner
@ -31,7 +30,10 @@ public class ShoppingTimesDiagram extends HttpServlet {
        resp.setContentType("application/json");
        PrintWriter out = resp.getWriter();

-        Map<String, List<Integer>> result = new HashMap<>();
+        List<String> definedOrder = Arrays.asList("<10 Uhr", "10-12 Uhr", "12-14 Uhr", "14-17 Uhr", ">17 Uhr");
+        Comparator<String> comparator = Comparator.comparingInt(definedOrder::indexOf);
+
+        Map<String, Collection<String>> result = new HashMap<>();

        Gson gson = new Gson();

@ -42,9 +44,29 @@ public class ShoppingTimesDiagram extends HttpServlet {
        }
        assert file.getUuid() != null;
        ShoppingTimes shoppingTimes = new ShoppingTimes(Data.get(file.getUuid()));
+        Map<DayHour, Integer> map = shoppingTimes.getResult();

-        out.print(gson.toJson(shoppingTimes.getResult()));
+        Set<String> days = new TreeSet<>();
+        Set<String> hours = new TreeSet<>(comparator);
+        for (DayHour dayHour : map.keySet()) {
+            days.add(dayHour.getDay());
+            hours.add(dayHour.getHour());
+        }
+        result.put("labels", hours);


+        for (String day : days) {
+            if (!result.containsKey(day))
+                result.put(day, new ArrayList<>());
+            for (String hour : hours) {
+                if (map.containsKey(new DayHour(day, hour))) {
+                    result.get(day).add(map.get(new DayHour(day, hour)).toString());
+                } else result.get(day).add("0");
+            }
+        }
+
+
+        out.print(gson.toJson(result));
+
    }
 }
--- a/src/main/java/de/hsel/spm/baudas/web/WeekOverviewDiagram.java
+++ b/src/main/java/de/hsel/spm/baudas/web/WeekOverviewDiagram.java
@ -11,12 +11,7 @@ import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
 import java.io.PrintWriter;
 import java.nio.charset.StandardCharsets;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Comparator;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;

 /**
 * changes data from week overview into readable format for chart.js
@ -58,20 +53,15 @@ public class WeekOverviewDiagram extends HttpServlet {
        assert file.getUuid() != null;
        WeekOverview overview = new WeekOverview(Data.get(file.getUuid()));

-        List<String> labels = new ArrayList<>();
-
        List<String> count = new ArrayList<>();
        List<String> revenue = new ArrayList<>();

-        for (Map.Entry<String, Map.Entry<Double, Integer>> entry : overview.getResult().entrySet()) {
-            labels.add(entry.getKey());
-            count.add(entry.getValue().getKey().toString());
-            revenue.add(entry.getValue().getValue().toString());
-        }
+        List<String> labels = new ArrayList<>(overview.getResult().keySet());


        Comparator<String> comparator = Comparator.comparingInt(definedOrder::indexOf);
        labels.sort(comparator);
+        System.out.println(labels);

        for (String label : labels) {
            Map.Entry<Double, Integer> entry = overview.getResult().get(label);
--- a/src/main/webapp/data/overview.json
+++ b/src/main/webapp/data/overview.json
@ -1,26 +0,0 @@
-{
-    "labels": [
-      "1 Jan",
-      "2 Jan", 
-      "3 Jan", 
-      "4 Jan", 
-      "5 Jan", 
-      "6 Jan"
-    ],
-    "data1": [
-      200, 
-      150, 
-      190, 
-      99, 
-      142, 
-      222
-    ],
-    "data2": [
-      434, 
-      300, 
-      324, 
-      198, 
-      349, 
-      353
-    ]
-  }
--- a/src/main/webapp/footer.jsp
+++ b/src/main/webapp/footer.jsp
@ -10,10 +10,10 @@
 <script type="text/javascript" src="js/materialize_components.js"></script>

 <script src="js/overview.js"></script>
-<script src="js/shoping_times.js"></script>
-<script src="js/sold_articles.js"></script>
+<script src="js/shopping_times.js"></script>
+<%--<script src="js/sold_articles.js"></script>
 <script src="js/top_articles.js"></script>
-<script src="js/flop_articles.js"></script>
+<script src="js/flop_articles.js"></script>--%>

 <!--Ende Skriptbereich-->
 </body>
--- a/src/main/webapp/header.jsp
+++ b/src/main/webapp/header.jsp
@ -7,13 +7,16 @@
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
-    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
+    <link type="text/css" rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
+          media="screen,projection"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"
+          integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous"/>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">

    <!--Let browser know website is optimized for mobile-->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


 </head>
@ -25,19 +28,23 @@
        <!--Navbar Tabs-->
        <div class="nav-content col 12 ">
            <ul class="tabs tabs-transparent blue-grey lighten-3 white-text">
-                <li class="tab"><a class="active" href="#analysis"><i class="material-icons left">poll</i>Analyse</a></li>
+                <li class="tab"><a class="active" href="#analysis"><i class="material-icons left">poll</i>Analyse</a>
+                </li>
                <li class="tab"><a href="#marketing"><i class="material-icons left">public</i>Marketing</a></li>
            </ul>
        </div>
        <!--Navbar Items-->
        <div class="nav-wrapper col 2 right">
            <ul class="right hide-on-med-and-down">
-                <li><a data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons left">menu</i>Men&uuml;</a></li><!--Sidenav-->
+                <li><a data-target="slide-out" class="sidenav-trigger show-on-large"><i
+                        class="material-icons left">menu</i>Men&uuml;</a></li><!--Sidenav-->
                <li><a href="login.html"><i class="material-icons left">person_outline</i>Logout</a></li><!--Logout-->
            </ul>
            <ul class="right">
-                <li><a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a></li><!--Sidenav-->
-                <li><a href="login.html" class="sidenav-trigger"><i class="material-icons">person_outline</i></a></li><!--Logout-->
+                <li><a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+                </li><!--Sidenav-->
+                <li><a href="login.html" class="sidenav-trigger"><i class="material-icons">person_outline</i></a></li>
+                <!--Logout-->
            </ul>
        </div>
    </nav>
@ -46,15 +53,20 @@

 <!--Sidenav Content-->
 <ul id="slide-out" class="sidenav">
-    <li><div class="user-view">
+    <li>
+        <div class="user-view">
            <div class="background">
                <img style="width: 100%" src="logoOrginal.gif">
            </div>
            <br>
            <br>
-    </div></li>
-    <li><div class="divider"></div></li>
-    <li><div class="input-field container">
+        </div>
+    </li>
+    <li>
+        <div class="divider"></div>
+    </li>
+    <li>
+        <div class="input-field container">
            <label>Gruppenauswahl</label>
            <br>
            <select>
@ -63,8 +75,10 @@
                <option value="2">Gruppe 2</option>
                <option value="3">Gruppe 3</option>
            </select>
-    </div></li>
-    <li><div class="input-field container">
+        </div>
+    </li>
+    <li>
+        <div class="input-field container">
            <label>Datensatzauswahl</label>
            <br>
            <select>
@ -76,9 +90,13 @@
                <option value="5">Datensatz 5</option>
            </select>
            <br>
-    </div></li>
-    <li><div class="divider"></div></li>
-    <li><form action="upload" method="post" enctype="multipart/form-data">
+        </div>
+    </li>
+    <li>
+        <div class="divider"></div>
+    </li>
+    <form action="upload" method="post" enctype="multipart/form-data">
+        <li>
            <br>
            <div class="file-field input-field container">
                <div class="btn blue-grey lighten-2">
@ -89,7 +107,12 @@
                    <input class="file-path validate" type="text" placeholder="Datei hochladen">
                </div>
            </div>
-        <button class="btn blue-grey waves-effect waves-light" type="submit" name="action">Hochladen<i class="material-icons right">file_upload</i>
+        </li>
+        <li>
+            <div class="col s12 offset-s6">
+                <button class="btn blue-grey waves-effect waves-light" type="submit" name="action">Hochladen<i class="material-icons right">file_upload</i></button>
+            </div>
            </button>
-    </form></li>
+        </li>
+    </form>
 </ul>
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@ -34,16 +34,15 @@
                </div>
                <div class="center">
                    <div class="input-field col s12">
-                        <select>
+                        <select id="day" onchange="updateDays()">
                            <option value="0">Montag</option>
                            <option value="1">Dienstag</option>
                            <option value="2">Mittwoch</option>
                            <option value="3">Donnerstag</option>
                            <option value="4">Freitag</option>
                            <option value="5">Samstag</option>
-                            <option value="6">Sonntag</option>
                        </select>
-                        <label>Wochentag</label>
+                        <label for="day">Wochentag</label>
                    </div>
                </div>
                <div>
--- a/src/main/webapp/js/shoping_times.js
+++ b/src/main/webapp/js/shoping_times.js
@ -1,57 +0,0 @@
-
-$.ajax({
-    url: 'data/shoping_times.json',
-    dataType: 'json'
-}).done(function (results) {
-    new Chart(document.getElementById("shoping_times_chart"), {
-        type: 'bar',
-        data: {
-            labels: results.labels,
-            datasets: [{
-                label: 'Anzahl verkaufter Artikel',
-                data: results.data1,
-                backgroundColor: [
-                    'rgba(143, 170, 220, 0.9)',
-                    'rgba(255, 50, 1, 0.9)',
-                    'rgba(143, 170, 220, 0.9)',
-                    'rgba(143, 170, 220, 0.9)',
-                    'rgba(103, 215, 153, 0.9)',
-                    'rgba(143, 170, 220, 0.9)',
-                ],
-                borderColor: [
-                    'rgba(143, 170, 220, 0.9)',
-                    'rgba(255, 50, 1, 1)',
-                    'rgba(143, 170, 220, 1)',
-                    'rgba(143, 170, 220, 1)',
-                    'rgba(103, 215, 153, 1)',
-                    'rgba(143, 170, 220, 1)',
-                ],
-                borderWidth: 1
-            }]
-        },
-        options: {
-            responsive: true,
-            title: {
-                display: false,
-                text: 'Einkaufszeiten'
-            },
-            legend: {
-                display: false
-            },
-            scales: {
-                yAxes: [{
-                    categoryPercentage: 1.0,
-                    barPercentage: 0.5,
-                    ticks: {
-                        beginAtZero: true
-                    }
-                }],
-                xAxes: [{
-                    gridLines: {
-                        display: false
-                    },
-                }]
-            }
-        }
-    });
-});
--- a/src/main/webapp/js/shopping_times.js
+++ b/src/main/webapp/js/shopping_times.js
@ -0,0 +1,105 @@
+let shopping_result;
+
+let shopping_chart = new Chart(document.getElementById("shoping_times_chart"), {
+    type: 'bar',
+    data: {
+        labels: [1, 2, 3, 4, 5],
+        datasets: [{
+            label: 'Anzahl verkaufter Artikel',
+            data: [0, 0, 0, 0, 0],
+            backgroundColor: [
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(143, 170, 220, 0.9)',
+                'rgba(143, 170, 220, 0.9)',
+            ],
+            borderColor: [
+                'rgba(143, 170, 220, 1)',
+                'rgba(143, 170, 220, 1)',
+                'rgba(143, 170, 220, 1)',
+                'rgba(143, 170, 220, 1)',
+                'rgba(143, 170, 220, 1)',
+                'rgba(143, 170, 220, 1)',
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        responsive: true,
+        title: {
+            display: false,
+            text: 'Einkaufszeiten'
+        },
+        legend: {
+            display: false
+        },
+        scales: {
+            yAxes: [{
+                categoryPercentage: 1.0,
+                barPercentage: 0.5,
+                ticks: {
+                    beginAtZero: true
+                }
+            }],
+            xAxes: [{
+                gridLines: {
+                    display: false
+                },
+            }]
+        }
+    }
+});
+
+$.ajax({
+    url: 'shopping_times',
+    dataType: 'json'
+}).done(function (results) {
+    shopping_result = results;
+    updateDays();
+});
+
+function updateDays() {
+    let e = document.getElementById("day");
+    let value = e.options[e.selectedIndex].text;
+    shopping_chart.data.labels = shopping_result.labels;
+    shopping_chart.data.datasets[0].data = shopping_result[value];
+
+    let color = shopping_result[value].map(x => 'rgba(143, 170, 220, 0.9)');
+
+    console.log("max");
+    argMax(shopping_result[value]).slice().forEach(function (item) {
+        console.log(item);
+        color[item] = 'green';
+    });
+    /*console.log("min");
+    argMin(shopping_result[value]).forEach(function(item) {
+        console.log(item);
+       color[item] = 'red';
+    });*/
+
+    shopping_chart.data.datasets[0].backgroundColor = color;
+
+    shopping_chart.update();
+}
+
+function argMax(array) {
+    let result = [];
+    console.log(Math.max.apply(null, array));
+    array.forEach(function(item) {
+        console.log(item);
+        if(item == Math.max.apply(null, array)) {
+           console.log(true);
+           result.push(array.indexOf(item));
+       }
+    });
+    console.log(result);
+    return result;
+}
+
+function argMin(array) {
+    let arr = array.slice().sort();
+    console.log(arr[0]);
+    return arr
+}