264 lines
9.4 KiB
HTML
264 lines
9.4 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>Простая обработка формы на Spring MVC</title>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||
</head>
|
||
<div class="container" layout:fragment="content">
|
||
<script src="/webjars/highcharts/7.0.0/highcharts.js"></script>
|
||
<script th:inline="javascript">
|
||
$(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: false
|
||
}
|
||
}
|
||
},
|
||
tooltip: {
|
||
headerFormat: '<b>{series.name}</b><br>',
|
||
pointFormat: '{point.y} commits'
|
||
}
|
||
}
|
||
};
|
||
var series = [
|
||
{
|
||
name: 'Коммиты',
|
||
color: 'rgba(119,152,191,0.5)',
|
||
data: [[${commitTimeData}]]
|
||
},
|
||
{
|
||
name: 'Сущности',
|
||
color: 'rgba(255,0,0,0.5)',
|
||
data: [[${commitTimeEntityData}]]
|
||
}
|
||
];
|
||
|
||
var json = {};
|
||
json.title = title;
|
||
json.xAxis = xAxis;
|
||
json.yAxis = yAxis;
|
||
json.series = series;
|
||
json.plotOptions = plotOptions;
|
||
$('#container').highcharts(json);
|
||
});
|
||
|
||
</script>
|
||
<script th:inline="javascript">
|
||
$(document).ready(function () {
|
||
var chart = {
|
||
type: 'column'
|
||
};
|
||
var title = {
|
||
text: 'Количество коммитов'
|
||
};
|
||
var xAxis = {
|
||
categories: [[${urls}]],
|
||
crosshair: true,
|
||
title: {
|
||
text: 'Репозиторий'
|
||
}
|
||
};
|
||
var yAxis = {
|
||
min: 0,
|
||
title: {
|
||
text: 'Кол-во'
|
||
}
|
||
};
|
||
var tooltip = {
|
||
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
|
||
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
|
||
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
|
||
footerFormat: '</table>',
|
||
shared: true,
|
||
useHTML: true
|
||
};
|
||
var plotOptions = {
|
||
column: {
|
||
pointPadding: 0.2,
|
||
borderWidth: 0
|
||
}
|
||
};
|
||
var credits = {
|
||
enabled: false
|
||
};
|
||
|
||
var series = [{
|
||
name: 'Коммиты',
|
||
data: [[${commitUrlData}]]
|
||
}];
|
||
|
||
var json = {};
|
||
json.chart = chart;
|
||
json.title = title;
|
||
json.tooltip = tooltip;
|
||
json.xAxis = xAxis;
|
||
json.yAxis = yAxis;
|
||
json.series = series;
|
||
json.plotOptions = plotOptions;
|
||
json.credits = credits;
|
||
$('#containerColumn').highcharts(json);
|
||
|
||
});
|
||
|
||
</script>
|
||
<script th:inline="javascript">
|
||
function createPie(data, title) {
|
||
var chart = {
|
||
plotBackgroundColor: null,
|
||
plotBorderWidth: null,
|
||
plotShadow: false
|
||
};
|
||
var title = {
|
||
text: title
|
||
};
|
||
var tooltip = {
|
||
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||
};
|
||
var plotOptions = {
|
||
pie: {
|
||
allowPointSelect: true,
|
||
cursor: 'pointer',
|
||
dataLabels: {
|
||
enabled: false
|
||
},
|
||
showInLegend: true
|
||
}
|
||
};
|
||
var series = [{
|
||
type: 'pie',
|
||
name: 'Browser share',
|
||
data: data
|
||
}];
|
||
|
||
var json = {};
|
||
json.chart = chart;
|
||
json.title = title;
|
||
json.tooltip = tooltip;
|
||
json.series = series;
|
||
json.plotOptions = plotOptions;
|
||
return json;
|
||
};
|
||
$(document).ready(function () {
|
||
$('#containerPie').highcharts(createPie([[${commitAuthorData}]], '% коммитов авторов'));
|
||
$('#containerEntityPie').highcharts(createPie([[${commitEntityData}]], '% коммитов содержащих сущности'));
|
||
});
|
||
|
||
|
||
</script>
|
||
<form action="#" th:action="${@route.STATISTIC}" th:object="${filterForm}" method="get">
|
||
<div class="row">
|
||
<div class="col-md-2 col-sm-12">
|
||
Репозиторий-ветка
|
||
</div>
|
||
<div class="col-md-6 col-sm-12">
|
||
<select id="select-branch" class="selectpicker" data-live-search="true" th:field="*{branchId}"
|
||
data-width="90%">
|
||
<option value="">Все ветки</option>
|
||
<option th:each="branch : ${branches}"
|
||
th:value="${branch.id}"
|
||
th:utext="${branch.repository.url} + ' - '+ ${branch.name}">
|
||
</option>
|
||
</select>
|
||
<script th:inline="javascript">
|
||
$('#select-branch').val([[*{branchId}]]);
|
||
$('#select-branch').selectpicker('refresh');
|
||
|
||
</script>
|
||
</div>
|
||
<div class="col-md-1 col-sm-12">
|
||
Автор
|
||
</div>
|
||
<div class="col-md-3 col-sm-12">
|
||
<select id="select-author" class="selectpicker" data-live-search="true" th:field="*{author}"
|
||
data-width="90%">
|
||
<option value="">Все авторы</option>
|
||
<option th:each="author : ${authors}"
|
||
th:value="${author}"
|
||
th:utext="${author}">
|
||
</option>
|
||
</select>
|
||
<script th:inline="javascript">
|
||
$('#select-author').val([[*{author}]]);
|
||
$('#select-author').selectpicker('refresh');
|
||
|
||
</script>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-2 col-sm-12">
|
||
Искать по тексту:
|
||
</div>
|
||
<div class="col-md-3 col-sm-12">
|
||
<input type="text" class="form-control" size="40" th:field="*{filter}">
|
||
</div>
|
||
<div class="col-md-3 col-sm-12">
|
||
<div class="form-group form-check">
|
||
<select id="select-entity-present" class="selectpicker" th:field="*{entity}"
|
||
data-width="90%">
|
||
<option value="">Не определено</option>
|
||
<option th:each="ep : ${entityPresent}"
|
||
th:value="${ep.value}"
|
||
th:utext="${ep.key}">
|
||
</option>
|
||
</select>
|
||
<script th:inline="javascript">
|
||
$('select[name=selValue]').val([[*{entity}]]);
|
||
$('#select-entity-present').selectpicker('refresh');
|
||
|
||
</script>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-sm-12">
|
||
<input type="submit" class="btn btn-outline-success w-100" value="Применить фильтр"/>
|
||
</div>
|
||
</div>
|
||
|
||
<input type="hidden" th:field="*{branchId}">
|
||
|
||
<div class="row">
|
||
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
||
<div id="containerPie" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
||
<div id="containerColumn" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
||
<div id="containerEntityPie" style="width: 550px; height: 400px; margin: 0 auto"></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</html>
|