Working article ranking
Signed-off-by: Johannes Theiner <j.theiner@live.de> #SPM-22: add work 4h development
This commit is contained in:
parent
fb607592a6
commit
76a54ed93c
@ -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));
|
||||
}
|
||||
}
|
@ -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
|
||||
]
|
||||
}
|
@ -1,18 +0,0 @@
|
||||
{
|
||||
"labels": [
|
||||
"8-9",
|
||||
"9-10",
|
||||
"10-11",
|
||||
"11-12",
|
||||
"12-13",
|
||||
"13-14"
|
||||
],
|
||||
"data1": [
|
||||
12,
|
||||
19,
|
||||
3,
|
||||
5,
|
||||
2,
|
||||
3
|
||||
]
|
||||
}
|
@ -1,12 +0,0 @@
|
||||
{
|
||||
"labels": [
|
||||
"Gruppe 1",
|
||||
"Gruppe 2",
|
||||
"Gruppe 3"
|
||||
],
|
||||
"data1": [
|
||||
2055,
|
||||
816,
|
||||
953
|
||||
]
|
||||
}
|
@ -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
|
||||
]
|
||||
|
||||
}
|
@ -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>
|
||||
|
@ -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>
|
@ -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>
|
||||
|
@ -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.
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -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
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
@ -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'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
@ -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
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
56
src/main/webapp/js/top_flop.js
Normal file
56
src/main/webapp/js/top_flop.js
Normal 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();
|
||||
|
||||
}
|
Loading…
Reference in New Issue
Block a user