#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 javax.validation.Valid;
|
||||||
import java.io.IOException;
|
import java.io.IOException;
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
|
import java.util.Arrays;
|
||||||
import java.util.Calendar;
|
import java.util.Calendar;
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
import java.util.stream.Collectors;
|
import java.util.stream.Collectors;
|
||||||
@ -57,6 +58,26 @@ public class ConferenceController {
|
|||||||
@GetMapping("/dashboard")
|
@GetMapping("/dashboard")
|
||||||
public void getDashboard(ModelMap modelMap) {
|
public void getDashboard(ModelMap modelMap) {
|
||||||
modelMap.put("conferences", conferenceService.findAllActiveDto());
|
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")
|
@GetMapping("/conference")
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
layout:decorator="default" xmlns:th="">
|
layout:decorator="default" xmlns:th="">
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" type="text/css" href="../css/conference.css"/>
|
<link rel="stylesheet" type="text/css" href="../css/conference.css"/>
|
||||||
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div layout:fragment="content">
|
<div layout:fragment="content">
|
||||||
@ -21,8 +22,136 @@
|
|||||||
<div th:replace="conferences/fragments/confDashboardFragment :: confDashboard(conference=${conference})"/>
|
<div th:replace="conferences/fragments/confDashboardFragment :: confDashboard(conference=${conference})"/>
|
||||||
</th:block>
|
</th:block>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</section>
|
</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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -21,7 +21,7 @@
|
|||||||
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3">
|
<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">
|
<a href="./conference?id=0" class="btn btn-light toolbar-button">
|
||||||
<i class="fa fa-plus-circle" aria-hidden="true"></i>
|
<i class="fa fa-plus-circle" aria-hidden="true"></i>
|
||||||
Новая конференцию</a>
|
Новая конференция</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user