+ 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; package de.hsel.spm.baudas.web;
import com.google.gson.Gson; import com.google.gson.Gson;
import de.hsel.spm.baudas.analysis.DayHour;
import de.hsel.spm.baudas.analysis.ShoppingTimes; import de.hsel.spm.baudas.analysis.ShoppingTimes;
import org.jetbrains.annotations.NotNull; import org.jetbrains.annotations.NotNull;
@ -11,9 +12,7 @@ import javax.servlet.http.HttpServletResponse;
import java.io.IOException; import java.io.IOException;
import java.io.PrintWriter; import java.io.PrintWriter;
import java.nio.charset.StandardCharsets; import java.nio.charset.StandardCharsets;
import java.util.HashMap; import java.util.*;
import java.util.List;
import java.util.Map;
/** /**
* @author Johannes Theiner * @author Johannes Theiner
@ -31,7 +30,10 @@ public class ShoppingTimesDiagram extends HttpServlet {
resp.setContentType("application/json"); resp.setContentType("application/json");
PrintWriter out = resp.getWriter(); 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(); Gson gson = new Gson();
@ -42,9 +44,29 @@ public class ShoppingTimesDiagram extends HttpServlet {
} }
assert file.getUuid() != null; assert file.getUuid() != null;
ShoppingTimes shoppingTimes = new ShoppingTimes(Data.get(file.getUuid())); 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.IOException;
import java.io.PrintWriter; import java.io.PrintWriter;
import java.nio.charset.StandardCharsets; import java.nio.charset.StandardCharsets;
import java.util.ArrayList; import java.util.*;
import java.util.Arrays;
import java.util.Comparator;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/** /**
* changes data from week overview into readable format for chart.js * changes data from week overview into readable format for chart.js
@ -58,20 +53,15 @@ public class WeekOverviewDiagram extends HttpServlet {
assert file.getUuid() != null; assert file.getUuid() != null;
WeekOverview overview = new WeekOverview(Data.get(file.getUuid())); WeekOverview overview = new WeekOverview(Data.get(file.getUuid()));
List<String> labels = new ArrayList<>();
List<String> count = new ArrayList<>(); List<String> count = new ArrayList<>();
List<String> revenue = new ArrayList<>(); List<String> revenue = new ArrayList<>();
for (Map.Entry<String, Map.Entry<Double, Integer>> entry : overview.getResult().entrySet()) { List<String> labels = new ArrayList<>(overview.getResult().keySet());
labels.add(entry.getKey());
count.add(entry.getValue().getKey().toString());
revenue.add(entry.getValue().getValue().toString());
}
Comparator<String> comparator = Comparator.comparingInt(definedOrder::indexOf); Comparator<String> comparator = Comparator.comparingInt(definedOrder::indexOf);
labels.sort(comparator); labels.sort(comparator);
System.out.println(labels);
for (String label : labels) { for (String label : labels) {
Map.Entry<Double, Integer> entry = overview.getResult().get(label); 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 type="text/javascript" src="js/materialize_components.js"></script>
<script src="js/overview.js"></script> <script src="js/overview.js"></script>
<script src="js/shoping_times.js"></script> <script src="js/shopping_times.js"></script>
<script src="js/sold_articles.js"></script> <%--<script src="js/sold_articles.js"></script>
<script src="js/top_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--> <!--Ende Skriptbereich-->
</body> </body>

View File

@ -7,13 +7,16 @@
<!--Import Google Icon Font--> <!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css--> <!--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 type="text/css" rel="stylesheet"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" /> 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 charset="UTF-8">
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8"> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8">
<!--Let browser know website is optimized for mobile--> <!--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> </head>
@ -25,19 +28,23 @@
<!--Navbar Tabs--> <!--Navbar Tabs-->
<div class="nav-content col 12 "> <div class="nav-content col 12 ">
<ul class="tabs tabs-transparent blue-grey lighten-3 white-text"> <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> <li class="tab"><a href="#marketing"><i class="material-icons left">public</i>Marketing</a></li>
</ul> </ul>
</div> </div>
<!--Navbar Items--> <!--Navbar Items-->
<div class="nav-wrapper col 2 right"> <div class="nav-wrapper col 2 right">
<ul class="right hide-on-med-and-down"> <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--> <li><a href="login.html"><i class="material-icons left">person_outline</i>Logout</a></li><!--Logout-->
</ul> </ul>
<ul class="right"> <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="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<li><a href="login.html" class="sidenav-trigger"><i class="material-icons">person_outline</i></a></li><!--Logout--> </li><!--Sidenav-->
<li><a href="login.html" class="sidenav-trigger"><i class="material-icons">person_outline</i></a></li>
<!--Logout-->
</ul> </ul>
</div> </div>
</nav> </nav>
@ -46,50 +53,66 @@
<!--Sidenav Content--> <!--Sidenav Content-->
<ul id="slide-out" class="sidenav"> <ul id="slide-out" class="sidenav">
<li><div class="user-view"> <li>
<div class="background"> <div class="user-view">
<img style="width: 100%" src="logoOrginal.gif"> <div class="background">
</div> <img style="width: 100%" src="logoOrginal.gif">
<br>
<br>
</div></li>
<li><div class="divider"></div></li>
<li><div class="input-field container">
<label>Gruppenauswahl</label>
<br>
<select>
<option value="0">alle</option>
<option value="1">Gruppe 1</option>
<option value="2">Gruppe 2</option>
<option value="3">Gruppe 3</option>
</select>
</div></li>
<li><div class="input-field container">
<label>Datensatzauswahl</label>
<br>
<select>
<option value="0">aktuell</option>
<option value="1">Datensatz 1</option>
<option value="2">Datensatz 2</option>
<option value="3">Datensatz 3</option>
<option value="4">Datensatz 4</option>
<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">
<br>
<div class="file-field input-field container">
<div class="btn blue-grey lighten-2">
<span>File</span>
<input type="file" name="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Datei hochladen">
</div> </div>
<br>
<br>
</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>
</button> <li>
</form></li> <div class="divider"></div>
</li>
<li>
<div class="input-field container">
<label>Gruppenauswahl</label>
<br>
<select>
<option value="0">alle</option>
<option value="1">Gruppe 1</option>
<option value="2">Gruppe 2</option>
<option value="3">Gruppe 3</option>
</select>
</div>
</li>
<li>
<div class="input-field container">
<label>Datensatzauswahl</label>
<br>
<select>
<option value="0">aktuell</option>
<option value="1">Datensatz 1</option>
<option value="2">Datensatz 2</option>
<option value="3">Datensatz 3</option>
<option value="4">Datensatz 4</option>
<option value="5">Datensatz 5</option>
</select>
<br>
</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">
<span>File</span>
<input type="file" name="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Datei hochladen">
</div>
</div>
</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>
</li>
</form>
</ul> </ul>

View File

@ -34,16 +34,15 @@
</div> </div>
<div class="center"> <div class="center">
<div class="input-field col s12"> <div class="input-field col s12">
<select> <select id="day" onchange="updateDays()">
<option value="0">Montag</option> <option value="0">Montag</option>
<option value="1">Dienstag</option> <option value="1">Dienstag</option>
<option value="2">Mittwoch</option> <option value="2">Mittwoch</option>
<option value="3">Donnerstag</option> <option value="3">Donnerstag</option>
<option value="4">Freitag</option> <option value="4">Freitag</option>
<option value="5">Samstag</option> <option value="5">Samstag</option>
<option value="6">Sonntag</option>
</select> </select>
<label>Wochentag</label> <label for="day">Wochentag</label>
</div> </div>
</div> </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
}