+ day selector
~correct values for shopping times & week overview #SPM-18: add work 4h development
This commit is contained in:
parent
ee14f2b295
commit
303fad71d8
@ -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));
|
||||
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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
|
||||
]
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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ü</a></li><!--Sidenav-->
|
||||
<li><a data-target="slide-out" class="sidenav-trigger show-on-large"><i
|
||||
class="material-icons left">menu</i>Menü</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,50 +53,66 @@
|
||||
|
||||
<!--Sidenav Content-->
|
||||
<ul id="slide-out" class="sidenav">
|
||||
<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">
|
||||
<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">
|
||||
<li>
|
||||
<div class="user-view">
|
||||
<div class="background">
|
||||
<img style="width: 100%" src="logoOrginal.gif">
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
<button class="btn blue-grey waves-effect waves-light" type="submit" name="action">Hochladen<i class="material-icons right">file_upload</i>
|
||||
</button>
|
||||
</form></li>
|
||||
</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>
|
||||
<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>
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
},
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
105
src/main/webapp/js/shopping_times.js
Normal file
105
src/main/webapp/js/shopping_times.js
Normal 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
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user