#68 added demo version of charts, using highcharts lib
This commit is contained in:
Nightblade73
parent
b16b3ed2e3
commit
f556b969b4
@ -21,6 +21,7 @@ import springfox.documentation.annotations.ApiIgnore;
|
||||
import javax.validation.Valid;
|
||||
import java.io.IOException;
|
||||
import java.util.ArrayList;
|
||||
import java.util.Arrays;
|
||||
import java.util.Calendar;
|
||||
import java.util.List;
|
||||
import java.util.stream.Collectors;
|
||||
@ -57,6 +58,26 @@ public class ConferenceController {
|
||||
@GetMapping("/dashboard")
|
||||
public void getDashboard(ModelMap modelMap) {
|
||||
modelMap.put("conferences", conferenceService.findAllActiveDto());
|
||||
//first, add the regional sales
|
||||
Integer northeastSales = 17089;
|
||||
Integer westSales = 10603;
|
||||
Integer midwestSales = 5223;
|
||||
Integer southSales = 10111;
|
||||
|
||||
modelMap.addAttribute("northeastSales", northeastSales);
|
||||
modelMap.addAttribute("southSales", southSales);
|
||||
modelMap.addAttribute("midwestSales", midwestSales);
|
||||
modelMap.addAttribute("westSales", westSales);
|
||||
|
||||
//now add sales by lure type
|
||||
List<Integer> inshoreSales = Arrays.asList(4074, 3455, 4112);
|
||||
List<Integer> nearshoreSales = Arrays.asList(3222, 3011, 3788);
|
||||
List<Integer> offshoreSales = Arrays.asList(7811, 7098, 6455);
|
||||
|
||||
modelMap.addAttribute("inshoreSales", inshoreSales);
|
||||
modelMap.addAttribute("nearshoreSales", nearshoreSales);
|
||||
modelMap.addAttribute("offshoreSales", offshoreSales);
|
||||
|
||||
}
|
||||
|
||||
@GetMapping("/conference")
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
layout:decorator="default" xmlns:th="">
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../css/conference.css"/>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div layout:fragment="content">
|
||||
@ -21,8 +22,136 @@
|
||||
<div th:replace="conferences/fragments/confDashboardFragment :: confDashboard(conference=${conference})"/>
|
||||
</th:block>
|
||||
</div>
|
||||
<hr/>
|
||||
<nav>
|
||||
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
||||
<a class="nav-item nav-link active" id="nav-main-tab" data-toggle="tab"
|
||||
href="#nav-stat1" role="tab" aria-controls="nav-stat1" aria-selected="true">Стат1</a>
|
||||
<a class="nav-item nav-link" id="nav-latex-tab" data-toggle="tab"
|
||||
href="#nav-stat2" role="tab" aria-controls="nav-stat2" aria-selected="false">Стат2</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="nav-stat1" role="tabpanel"
|
||||
aria-labelledby="nav-main-tab">
|
||||
<div id="salesByType" style="width:100%; height:400px;"></div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="nav-stat2" role="tabpanel"
|
||||
aria-labelledby="nav-profile-tab">
|
||||
<div id="salesByRegion" style="width:100%; height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script th:inline="javascript">
|
||||
/*<![CDATA[*/
|
||||
$(function () {
|
||||
Highcharts.setOptions({
|
||||
lang: {
|
||||
decimalPoint: '.',
|
||||
thousandsSep: ','
|
||||
}
|
||||
});
|
||||
|
||||
drawSalesByTypeChart();
|
||||
drawSalesByRegionChart();
|
||||
});
|
||||
|
||||
|
||||
function drawSalesByRegionChart() {
|
||||
var salesByRegionChart = Highcharts.chart('salesByRegion', {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
margin: 40,
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 45,
|
||||
beta: 0
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Sales by Region'
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: "${point.y:,.0f}"
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
depth: 35
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Regions',
|
||||
colorByPoint:true,
|
||||
data: [{
|
||||
name: 'Northeast',
|
||||
y: /*[[${northeastSales}]]*/ 0
|
||||
},{
|
||||
name: 'South',
|
||||
y: /*[[${southSales}]]*/ 0
|
||||
},{
|
||||
name: 'Midwest',
|
||||
y: /*[[${midwestSales}]]*/ 0
|
||||
},{
|
||||
name: 'West',
|
||||
y: /*[[${westSales}]]*/ 0
|
||||
}]
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
function drawSalesByTypeChart() {
|
||||
var salesByTypeChart = Highcharts.chart('salesByType', {
|
||||
chart: {
|
||||
type: 'column',
|
||||
margin: 75,
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 15,
|
||||
beta: 15,
|
||||
depth: 110
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Sales by Lure Type'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['May', 'June', 'July']
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Sales (US $)'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: "${point.y:,.0f}"
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
depth: 60,
|
||||
stacking: true,
|
||||
grouping: false,
|
||||
groupZPadding: 10
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Inshore',
|
||||
data: /*[[${inshoreSales}]]*/ []
|
||||
}, {
|
||||
name: 'Nearshore',
|
||||
data: /*[[${nearshoreSales}]]*/ []
|
||||
}, {
|
||||
name: 'Offshore',
|
||||
data: /*[[${offshoreSales}]]*/ []
|
||||
}]
|
||||
});
|
||||
}
|
||||
/*]]>*/
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -21,7 +21,7 @@
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3">
|
||||
<a href="./conference?id=0" class="btn btn-light toolbar-button">
|
||||
<i class="fa fa-plus-circle" aria-hidden="true"></i>
|
||||
Новая конференцию</a>
|
||||
Новая конференция</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user