Working article ranking

Signed-off-by: Johannes Theiner <j.theiner@live.de>

#SPM-22: add work 4h development
This commit is contained in:
Johannes Theiner 2019-05-18 14:56:07 +02:00
parent fb607592a6
commit 76a54ed93c
13 changed files with 133 additions and 253 deletions

View File

@ -0,0 +1,58 @@
package de.hsel.spm.baudas.web;
import com.google.gson.Gson;
import de.hsel.spm.baudas.analysis.TopFlopArticle;
import org.jetbrains.annotations.NotNull;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.nio.charset.StandardCharsets;
import java.util.*;
/**
* @author Johannes Theiner
* @version 0.1
* @since 0.1
**/
@WebServlet("/top_flop")
public class TopFlopArticleDiagram extends HttpServlet {
private static final long serialVersionUID = 6567531464214L;
@Override
protected void doGet(@NotNull HttpServletRequest req, @NotNull HttpServletResponse resp) throws IOException {
req.setCharacterEncoding(StandardCharsets.UTF_8.name());
resp.setCharacterEncoding(StandardCharsets.UTF_8.name());
resp.setContentType("application/json");
PrintWriter out = resp.getWriter();
Gson gson = new Gson();
UUID uuid = UUID.fromString(req.getParameter("id"));
File file = Data.get(uuid);
TopFlopArticle articles = new TopFlopArticle(file);
Map<String, Integer> map = articles.getResult();
Map<String, List<String>> result = new HashMap<>();
List<String> labels = new ArrayList<>();
List<String> data = new ArrayList<>();
for(Map.Entry<String, Integer> entry : map.entrySet()) {
labels.add(entry.getKey());
data.add(entry.getValue().toString());
}
result.put("labels", labels);
result.put("data", data);
out.print(gson.toJson(result));
}
}

View File

@ -1,26 +0,0 @@
{
"labels": [
"Insgesamt",
"Gruppe 1",
"Gruppe 2",
"Gruppe 3"
],
"data1": [
50,
10,
20,
30
],
"data2": [
30,
5,
20,
5
],
"data3": [
80,
20,
30,
30
]
}

View File

@ -1,18 +0,0 @@
{
"labels": [
"8-9",
"9-10",
"10-11",
"11-12",
"12-13",
"13-14"
],
"data1": [
12,
19,
3,
5,
2,
3
]
}

View File

@ -1,12 +0,0 @@
{
"labels": [
"Gruppe 1",
"Gruppe 2",
"Gruppe 3"
],
"data1": [
2055,
816,
953
]
}

View File

@ -1,30 +0,0 @@
{
"labels": [
"Insgesamt",
"Gruppe 1",
"Gruppe 2",
"Gruppe 3"
],
"label1": "Gartengeräte",
"data1": [
150,
50,
50,
50
],
"label2": "Eisenwaren",
"data2": [
120,
10,
80,
30
],
"label3": "Baumaterialien",
"data3": [
200,
102,
53,
45
]
}

View File

@ -7,17 +7,18 @@
<!--Script für Materlialize-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/google-palette@1.1.0/palette.min.js"></script>
<script>
M.AutoInit();
</script>
<script src="js/cache.js"></script>
<script src="js/week_overview.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/top_flop.js"></script>
<%--<script src="js/sold_articles.js"></script>--%>
<!--Ende Skriptbereich-->
</body>

View File

@ -106,7 +106,6 @@
<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>

View File

@ -52,7 +52,7 @@
</div>
</div>
<!--Verkaufte Artikel-->
<%-- <!--Verkaufte Artikel-->
<div class="col s12 m6">
<div id="sold_articles" class="card white">
<div class="card-content">
@ -74,38 +74,17 @@
</div>
</div>
</div>
</div>
</div>--%>
<!--Top Artikel-->
<!--Top Flop Artikel-->
<div class="col s12 m6">
<div id="top_articles" class="card white">
<div class="center">
<span class="card-title center">Top Artikel</span>
</div>
<div class="card-action center">
<a href="#">Umsatz</a>
<a href="#">Stückzahl</a>
<span class="card-title center">Top/Flop Artikel</span>
</div>
<div class="card-content">
<div>
<canvas id="top_articles_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>
</div>
<!--Flop Artikel-->
<div class="col s12 m6">
<div id="flop_articles" class="card white">
<div class="center">
<span class="card-title center">Flop Artikel</span>
</div>
<div class="card-action center">
<a href="#">Umsatz</a>
<a href="#">Stückzahl</a>
</div>
<div class="card-content">
<div>
<canvas id="flop_articles_chart" width="1000" height="400"></canvas>
<canvas id="top_flop_chart" width="1000" height="400"></canvas>
</div>
</div>
</div>

View File

@ -20,20 +20,25 @@ function updateCache() {
let dataset = $('#dataset');
let selected = $('#dataset :selected');
if (typeof selected !== 'undefined' && selected.index() !== -1) {
updateWeekOverviewChart(selected.val());
updateShoppingTimesChart(selected.val());
updateAll(selected.val());
} else {
//requesting files, getting values from html does not work...
//if no selection is provided, select newest file
request('files').then(results => {
let uuid = results[results.length - 1].uuid;
dataset.val(uuid);
updateWeekOverviewChart(uuid);
updateShoppingTimesChart(uuid);
updateAll(uuid);
dataset.formSelect();
});
}
}
function updateAll(uuid) {
updateWeekOverviewChart(uuid);
updateShoppingTimesChart(uuid);
updateTopFlopChart(uuid);
//add new charts here.
}
/**

View File

@ -1,47 +0,0 @@
$.ajax({
url: 'data/flop_articles.json',
dataType: 'json'
}).done(function (results) {
new Chart(document.getElementById("flop_articles_chart"), {
type: 'horizontalBar',
data: {
labels: results.labels,
datasets: [{
label: 'Holz',
backgroundColor: 'rgba(244, 177, 131, 1)',
stack: 'Stack 0',
data: results.data1
}, {
label: 'Eisenwaren',
backgroundColor: 'rgba(255, 217, 102, 1)',
stack: 'Stack 1',
data: results.data2
}, {
label: 'Baumaterialien',
backgroundColor: 'rgba(196, 209, 142, 1)',
stack: 'Stack 2',
data: results.data3
}]
},
options: {
responsive: true,
title: {
display: false,
text: 'Flop Artikel'
},
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
}
});
});

View File

@ -1,38 +0,0 @@
$.ajax({
url: 'data/sold_articles.json',
dataType: 'json'
}).done(function (results) {
new Chart(document.getElementById("sold_articles_cake"), {
type: 'pie',
data: {
datasets: [{
data: results.data1,
backgroundColor: [
'rgba(237, 125, 49, 0.9)',
'rgba(255, 192, 0, 0.9)',
'rgba(112, 173, 71, 0.9)',
],
label: 'Dataset 1'
}],
labels: results.labels
},
options: {
responsive: true,
title: {
display: false,
text: 'Verkaufte Artikel',
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
legend: {
position: 'bottom'
}
}
});
});

View File

@ -1,47 +0,0 @@
$.ajax({
url: 'data/top_articles.json',
dataType: 'json'
}).done(function (results) {
new Chart(document.getElementById("top_articles_chart"), {
type: 'horizontalBar',
data: {
labels: results.labels,
datasets: [{
label: results.label1,
backgroundColor: 'rgba(244, 177, 131, 1)',
stack: 'Stack 0',
data: results.data1
}, {
label: results.label2,
backgroundColor: 'rgba(255, 217, 102, 1)',
stack: 'Stack 1',
data: results.data2
}, {
label: results.label3,
backgroundColor: 'rgba(196, 209, 142, 1)',
stack: 'Stack 2',
data: results.data3
}]
},
options: {
responsive: true,
title: {
display: false,
text: 'Top Artikel'
},
legend: {
position: 'bottom',
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
}
});
});

View File

@ -0,0 +1,56 @@
let top_flop_result;
let top_flop = new Chart($("#top_flop_chart"), {
type: 'horizontalBar',
data: {
labels: [],
datasets: [{
data: [],
backgroundColor: [],
}]
},
options: {
responsive: true,
title: {
display: false,
text: 'Top Flop Artikel'
},
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
}
});
function updateTopFlopChart(id) {
if (typeof id !== 'undefined') {
request('top_flop', id).then(function (data) {
top_flop_result = data;
updateTopFlop();
});
} else request('top_flop').then(function (data) {
top_flop_result = data;
updateTopFlop();
});
}
function updateTopFlop() {
top_flop.data.labels = top_flop_result.labels;
top_flop.data.datasets[0].data = top_flop_result.data;
let seq = palette('mpn65', 15);
for (let i = 0; i < 15; i++) {
top_flop.data.datasets[0].backgroundColor[i] = "#" + seq[i];
}
top_flop.update();
}