2021-08-02 11:39:41 +04:00

136 lines
5.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
~ 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>