+ day selector

~correct values for shopping times & week overview
#SPM-18: add work 4h development
This commit is contained in:
Johannes Theiner 2019-05-09 18:14:43 +02:00
parent ee14f2b295
commit 303fad71d8
8 changed files with 214 additions and 158 deletions

View File

@ -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));
}
}

View File

@ -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);

View File

@ -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
]
}

View File

@ -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>

View File

@ -7,8 +7,11 @@
<!--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">
@ -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>

View File

@ -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>

View File

@ -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
},
}]
}
}
});
});

View File

@ -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
}