#18 - Update graphic

This commit is contained in:
Anton Romanov 2021-04-08 10:59:45 +04:00
parent 660dcb9fea
commit 2a09db80d1
2 changed files with 104 additions and 49 deletions

View File

@ -41,6 +41,12 @@ public class StatisticController {
date[i] = timeCommits.get(i)[0].toString();
}
model.addAttribute("datas", date);
String[] url = new String[urlCommits.size()];
for (int i = 0; i < urlCommits.size(); i++) {
url[i] = urlCommits.get(i)[0].toString();
}
model.addAttribute("urls", url);
return "statistic";
}
}

View File

@ -12,52 +12,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<div class="container" layout:fragment="content">
<script src="https://www.google.com/jsapi"></script>
<script th:inline="javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var onlyCommitData = [[${commitAuthorData}]];
var commitAuthorData = [
['Автор', '% коммитов']
].concat(onlyCommitData);
var data = google.visualization.arrayToDataTable(commitAuthorData);
var options = {
title: '% коммитов авторов',
is3D: true,
width: 600,
height: 300,
pieResidueSliceLabel: 'Остальные'
};
var chart = new google.visualization.PieChart(document.getElementById('air'));
chart.draw(data, options);
}
</script>
<script th:inline="javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var onlyCommitUrlData = [[${commitUrlData}]];
var commitUrlData = [
['Url', 'Коммиты']
].concat(onlyCommitUrlData);
var data = google.visualization.arrayToDataTable(commitUrlData);
var options = {
title: 'Количество коммитов',
hAxis: {title: 'Url'},
vAxis: {
title: 'Кол-во',
width: 600,
height: 300
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('oil'));
chart.draw(data, options);
}
</script>
<script src="/webjars/highcharts/7.0.0/highcharts.js"></script>
<script th:inline="javascript">
$(document).ready(function () {
@ -69,7 +23,7 @@
text: 'Количество коммитов во времени'
};
var xAxis = {
categories: [],
categories: [[${datas}]],
title: {
enabled: true,
text: 'Дата'
@ -125,10 +79,105 @@
$('#container').highcharts(json);
});
</script>
<script th:inline="javascript">
$(document).ready(function () {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = {
text: '% коммитов авторов'
};
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: [[${commitAuthorData}]]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
$('#containerPie').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: 'Url'
}
};
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} mm</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>
<div class="row">
<div id="air" class="col-sm-12 col-lg-6" style="width: 200px"></div>
<div id="oil" class="col-sm-12 col-lg-6" style="width: 200px"></div>
<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>
</div>
</html>