136 lines
5.0 KiB
HTML
136 lines
5.0 KiB
HTML
<!--
|
||
~ Copyright (C) 2021 Anton Romanov - All Rights Reserved
|
||
~ You may use, distribute and modify this code, please write to: romanov73@gmail.com.
|
||
~
|
||
-->
|
||
|
||
<!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 title = {
|
||
text: 'Прогноз временного ряда'
|
||
};
|
||
var xAxis = {
|
||
categories: [[${dates}]],
|
||
title: {
|
||
enabled: true,
|
||
text: 'Дата'
|
||
},
|
||
startOnTick: true,
|
||
endOnTick: true,
|
||
showLastLabel: true
|
||
};
|
||
var yAxis = {
|
||
title: {
|
||
text: 'Уровень'
|
||
}
|
||
};
|
||
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: 'Временной ряд',
|
||
color: 'rgba(119,152,191,0.5)',
|
||
data: [[${timeSeries}]]
|
||
},
|
||
{
|
||
name: 'Модель',
|
||
color: 'rgba(255,200,0,0.5)',
|
||
data: [[${model}]]
|
||
},
|
||
{
|
||
name: 'Тестовый прогноз',
|
||
color: 'rgba(255,0,0,0.5)',
|
||
data: [[${testForecast}]]
|
||
},
|
||
{
|
||
name: 'Прогноз',
|
||
color: 'rgba(255,0,0,0.5)',
|
||
data: [[${forecast}]]
|
||
}
|
||
];
|
||
|
||
var json = {};
|
||
json.title = title;
|
||
json.xAxis = xAxis;
|
||
json.yAxis = yAxis;
|
||
json.series = series;
|
||
json.plotOptions = plotOptions;
|
||
$('#chart').highcharts(json);
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
<form action="#" th:action="chart" 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>
|
||
<p> Метод прогнозирования: <span th:text="${forecastDescription.timeSeriesMethod}"> </span>
|
||
<p> Оценка: <span th:text="${forecastDescription.score.value}"> </span>
|
||
</div>
|
||
<div class="col-9">
|
||
<div id="chart" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</html>
|