#68 added demo version of charts, using highcharts lib

5 years ago · f556b969b4
parent b16b3ed2e3
commit f556b969b4
3 changed files with 151 additions and 1 deletions
--- a/src/main/java/ru/ulstu/conference/controller/ConferenceController.java
+++ b/src/main/java/ru/ulstu/conference/controller/ConferenceController.java
@ -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")
--- a/src/main/resources/templates/conferences/dashboard.html
+++ b/src/main/resources/templates/conferences/dashboard.html
@ -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>
--- a/src/main/resources/templates/conferences/fragments/confNavigationFragment.html
+++ b/src/main/resources/templates/conferences/fragments/confNavigationFragment.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>