#1 -- add choosing method on page
This commit is contained in:
parent
d5c99caeb3
commit
c96c3978c6
@ -50,15 +50,44 @@ public class IndexController {
|
||||
if (chartForm.getTimeSeriesMeta() != null
|
||||
&& chartForm.getTimeSeriesMeta().getKey() != null
|
||||
&& !chartForm.getTimeSeriesMeta().getKey().isEmpty()) {
|
||||
addChartToModel(dbService.getTimeSeries(chartForm.getSet(), chartForm.getTimeSeriesMeta().getKey()), model);
|
||||
addChartToModel(dbService.getTimeSeries(chartForm.getSet(), chartForm.getTimeSeriesMeta().getKey()), null, model);
|
||||
}
|
||||
return "index";
|
||||
}
|
||||
|
||||
private void addChartToModel(TimeSeries timeSeries, Model model) throws ExecutionException, InterruptedException, InvocationTargetException, NoSuchMethodException, InstantiationException, IllegalAccessException, ModelingException {
|
||||
@GetMapping("/method")
|
||||
public String method(Model model) throws IOException {
|
||||
model.addAttribute("sets", dbService.getSets());
|
||||
model.addAttribute("methods", timeSeriesService.getAvailableMethods());
|
||||
model.addAttribute("chartForm", new ChartForm());
|
||||
return "method";
|
||||
}
|
||||
|
||||
@GetMapping("chartMethod")
|
||||
public String chartMethod(@ModelAttribute ChartForm chartForm, Model model) throws IOException, ModelingException, ExecutionException, InterruptedException, InvocationTargetException, NoSuchMethodException, InstantiationException, IllegalAccessException {
|
||||
model.addAttribute("sets", dbService.getSets());
|
||||
model.addAttribute("methods", timeSeriesService.getAvailableMethods());
|
||||
if (chartForm.getSet() != null && !chartForm.getSet().getKey().equals("")) {
|
||||
model.addAttribute("listTimeSeries", dbService.getTimeSeriesMeta(chartForm.getSet()));
|
||||
}
|
||||
if (chartForm.getTimeSeriesMeta() != null
|
||||
&& chartForm.getTimeSeriesMeta().getKey() != null
|
||||
&& !chartForm.getTimeSeriesMeta().getKey().isEmpty()
|
||||
&& chartForm.getMethodClassName() != null) {
|
||||
addChartToModel(dbService.getTimeSeries(chartForm.getSet(), chartForm.getTimeSeriesMeta().getKey()), chartForm.getMethodClassName(), model);
|
||||
}
|
||||
return "method";
|
||||
}
|
||||
|
||||
private void addChartToModel(TimeSeries timeSeries, String method, Model model) throws ExecutionException, InterruptedException, InvocationTargetException, NoSuchMethodException, InstantiationException, IllegalAccessException, ModelingException {
|
||||
int countForecastPoints = timeSeries.getLength() > 20 ? 10 : timeSeries.getLength() / 3;
|
||||
TimeSeries timeSeriesModel = timeSeriesService.smoothTimeSeries(timeSeries).getTimeSeries();
|
||||
ModelingResult modelingResult = timeSeriesService.getForecast(timeSeries, countForecastPoints);
|
||||
ModelingResult modelingResult;
|
||||
if (method == null) {
|
||||
modelingResult = timeSeriesService.getForecast(timeSeries, countForecastPoints);
|
||||
} else {
|
||||
modelingResult = timeSeriesService.getForecast(timeSeries, method, countForecastPoints);
|
||||
}
|
||||
TimeSeries forecast = modelingResult.getTimeSeries();
|
||||
TimeSeries testForecast = modelingResult.getTestForecast();
|
||||
model.addAttribute("dates", getDatesForChart(timeSeries, forecast));
|
||||
|
||||
@ -6,6 +6,7 @@ import ru.ulstu.db.model.TimeSeriesSet;
|
||||
public class ChartForm {
|
||||
private TimeSeriesSet set;
|
||||
private TimeSeriesMeta timeSeriesMeta;
|
||||
private String methodClassName = null;
|
||||
|
||||
public TimeSeriesSet getSet() {
|
||||
return set;
|
||||
@ -22,4 +23,12 @@ public class ChartForm {
|
||||
public void setTimeSeriesMeta(TimeSeriesMeta timeSeriesMeta) {
|
||||
this.timeSeriesMeta = timeSeriesMeta;
|
||||
}
|
||||
|
||||
public String getMethodClassName() {
|
||||
return methodClassName;
|
||||
}
|
||||
|
||||
public void setMethodClassName(String methodClassName) {
|
||||
this.methodClassName = methodClassName;
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,7 +116,7 @@ public abstract class Method {
|
||||
return getName();
|
||||
}
|
||||
|
||||
public String getId() {
|
||||
public String getKey() {
|
||||
return getClass().getSimpleName();
|
||||
}
|
||||
|
||||
|
||||
@ -13,10 +13,24 @@
|
||||
<link rel="stylesheet" href="/webjars/font-awesome/4.7.0/css/font-awesome.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="img/logo.png" width="180" height="60" alt="">
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="/">Главная <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/method">Выбрать метод</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="wrapper">
|
||||
<div id="sidebar" class="collapse navbar-collapse sidebar-mobile">
|
||||
|
||||
156
src/main/resources/templates/method.html
Normal file
156
src/main/resources/templates/method.html
Normal file
@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
|
||||
<html
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.w3.org/1999/xhtml"
|
||||
layout:decorate="~{default}">
|
||||
<head>
|
||||
<title>Time series smoothing</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
</head>
|
||||
<div class="container" layout:fragment="content">
|
||||
<script src="/webjars/highcharts/7.0.0/highcharts.js"></script>
|
||||
<script th:inline="javascript" th:if="${timeSeries != null}">
|
||||
$(document).ready(function () {
|
||||
var chart = {
|
||||
renderTo: 'container',
|
||||
style: {
|
||||
fontFamily: 'arial'
|
||||
}
|
||||
};
|
||||
|
||||
var title = {
|
||||
text: [[#{messages.time_series_forecast}]]
|
||||
};
|
||||
var xAxis = {
|
||||
categories: [[${dates}]],
|
||||
title: {
|
||||
enabled: true,
|
||||
text: [[#{messages.date}]]
|
||||
},
|
||||
startOnTick: true,
|
||||
endOnTick: true,
|
||||
showLastLabel: true
|
||||
};
|
||||
var yAxis = {
|
||||
title: {
|
||||
text: [[#{messages.value}]]
|
||||
}
|
||||
};
|
||||
var plotOptions = {
|
||||
scatter: {
|
||||
marker: {
|
||||
radius: 5,
|
||||
states: {
|
||||
hover: {
|
||||
enabled: true,
|
||||
lineColor: 'rgb(100,100,100)'
|
||||
}
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
marker: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<b>{series.name}</b><br>',
|
||||
pointFormat: '{point.y}'
|
||||
}
|
||||
}
|
||||
};
|
||||
var series = [
|
||||
{
|
||||
name: [[#{messages.time_series}]],
|
||||
color: 'rgba(119,152,191,0.5)',
|
||||
data: [[${timeSeries}]]
|
||||
},
|
||||
{
|
||||
name: [[#{messages.time_series_model}]],
|
||||
color: 'rgba(255,200,0,0.5)',
|
||||
data: [[${model}]]
|
||||
},
|
||||
{
|
||||
name: [[#{messages.time_series_test_forecast}]],
|
||||
color: 'rgba(255,0,0,0.5)',
|
||||
data: [[${testForecast}]]
|
||||
},
|
||||
{
|
||||
name: [[#{messages.time_series_forecast_short}]],
|
||||
color: 'rgba(255,0,0,0.5)',
|
||||
data: [[${forecast}]]
|
||||
}
|
||||
];
|
||||
|
||||
var json = {};
|
||||
json.chart = chart;
|
||||
json.title = title;
|
||||
json.xAxis = xAxis;
|
||||
json.yAxis = yAxis;
|
||||
json.series = series;
|
||||
json.plotOptions = plotOptions;
|
||||
$('#chart').highcharts(json);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<form action="#" th:action="chartMethod" th:object="${chartForm}">
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<select id="select-set" class="selectpicker" data-live-search="true" th:field="*{set}"
|
||||
data-width="90%" onchange="$('#select-ts').val(''); form.submit();">
|
||||
<option value="">Набор временных рядов</option>
|
||||
<option th:each="set : ${sets}"
|
||||
th:value="${set.key}"
|
||||
th:utext="${set.key}">
|
||||
</option>
|
||||
</select>
|
||||
<script th:inline="javascript" th:if="*{set != null}">
|
||||
$('#select-set').val([[*{set.key}]]);
|
||||
$('#select-set').selectpicker('refresh');
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<select id="select-ts" class="selectpicker" data-live-search="true" th:field="*{timeSeriesMeta}"
|
||||
data-width="90%" onchange="form.submit();">
|
||||
<option value="">Временной ряд</option>
|
||||
<option th:each="ts : ${listTimeSeries}"
|
||||
th:value="${ts.key}"
|
||||
th:utext="${ts.key}">
|
||||
</option>
|
||||
</select>
|
||||
<script th:inline="javascript" th:if="*{timeSeriesMeta != null}">
|
||||
$('#select-ts').val([[*{timeSeriesMeta.key}]]);
|
||||
$('#select-ts').selectpicker('refresh');
|
||||
|
||||
</script>
|
||||
|
||||
<select id="select-method" class="selectpicker" data-live-search="true" th:field="*{methodClassName}"
|
||||
data-width="90%" onchange="form.submit();">
|
||||
<option value="">Метод прогнозирования</option>
|
||||
<option th:each="method : ${methods}"
|
||||
th:value="${method.key}"
|
||||
th:utext="${method.name}">
|
||||
</option>
|
||||
</select>
|
||||
<script th:inline="javascript" th:if="*{methodClassName != null && methodClassName != ''}">
|
||||
$('#select-method').val([[*{methodClassName}]]);
|
||||
$('#select-method').selectpicker('refresh');
|
||||
|
||||
</script>
|
||||
|
||||
<div th:if="${forecastDescription != null && forecastDescription.timeSeriesMethod != null}">
|
||||
<p> Метод прогнозирования: <span th:text="${forecastDescription.timeSeriesMethod}"> </span>
|
||||
<p> Оценка: <span th:text="${forecastDescription.score.value}"> </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div id="chart" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user