viithiisys / Acufuel

Download as
Browse Code ยป

Commit 89c9d6ecd7590ffd5cf474602ce6b4997756b3ec

Authored by Kuldeep Arora
1 parent 938f3037d6
Exists in master

drilldown map for regional pap

Showing 3 changed files with 221 additions and 13 deletions   Show diff stats
... ... @@ -254,5 +254,19 @@
254 254 <link rel="stylesheet" href="bower_components/angular-ui-clock/dist/angular-clock.css">
255 255 <link href="//fonts.googleapis.com/css?family=Syncopate:400,700" rel="stylesheet" type="text/css">
256 256  
  257 + <!--for drill down regional chart-->
  258 + <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  259 + <script src="https://code.highcharts.com/maps/highmaps.js"></script>
  260 + <script src="https://code.highcharts.com/maps/modules/data.js"></script>
  261 + <script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
  262 + <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
  263 + <script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
  264 + <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
  265 +
  266 + <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  267 +
  268 +
  269 +
  270 +
257 271 </body>
258 272 </html>
259 273 \ No newline at end of file
... ...
app/partials/analytics/analytics.controller.js
Diff comments   View file @89c9d6e
... ... @@ -3,8 +3,8 @@ angular.module(&#39;acufuel&#39;)
3 3 .controller('analyticsController', ['$scope', 'analyticsService', function($scope, analyticsService) {
4 4  
5 5  
6   -
7   - $scope.getAllRegionalPap = function() {
  6 + // Sand Signika Overview without drill down -KD
  7 + /* $scope.getAllRegionalPap = function() {
8 8 $scope.flag=true;
9 9 $scope.stateList = [{region:'Alabama',code:'AL'},{region:'Alaska',code:'AK'},{region:'Arizona',code:'AZ'},{region:'Arkansas',code:'AR'},
10 10 {region:'California',code:'CA' },{region:'Colorado',code:'CO'},{region:'Connecticut',code:'CT'},{region:'Delaware',code:'DE'},
... ... @@ -63,7 +63,7 @@ angular.module(&#39;acufuel&#39;)
63 63 enabled: true
64 64 },
65 65  
66   - /* colorAxis: {
  66 + colorAxis: {
67 67 min: 1,
68 68 type: 'logarithmic',
69 69 minColor: '#2b908f',
... ... @@ -73,7 +73,7 @@ angular.module(&#39;acufuel&#39;)
73 73 [5, '#f45b5b'],
74 74 [10, 'rgb(117,0,0)']
75 75 ]
76   - },*/
  76 + },
77 77  
78 78 series: [{
79 79 animation: {
... ... @@ -95,7 +95,195 @@ angular.module(&#39;acufuel&#39;)
95 95 })
96 96 }
97 97  
98   - $scope.getAllRegionalPap();
  98 + $scope.getAllRegionalPap();*/
  99 +
  100 +
  101 + //Implemented drill down chart and Now used this on 07 Sep 2018 -KD
  102 +
  103 + /*
  104 + TODO:
  105 + - Check data labels after drilling. Label rank? New positions?
  106 + */
  107 + $scope.getAllRegionalPapDrilldown = function() {
  108 + $scope.flag=true;//for spinner
  109 + var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
  110 + var separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline');
  111 + // Some responsiveness
  112 + //var small = $('#container').width() < 400;
  113 +
  114 + analyticsService.getAllRPP().then(function(result) {
  115 + for (var i = 0; i < data.length; i++) {
  116 + for (var j = 0; j<result.length; j++){
  117 + if (data[i].name === result[j].region) {
  118 +
  119 + data[i].value = result[j].averagePAP.toFixed(2);
  120 +
  121 + }
  122 + }
  123 +
  124 + }
  125 +
  126 + $.each(data, function (i) {
  127 + this.drilldown = this.properties['hc-key'];
  128 + this.value = this.value;
  129 + });
  130 +
  131 + $scope.flag=false;
  132 + // Instantiate the map
  133 + Highcharts.mapChart('container', {
  134 + chart: {
  135 + events: {
  136 + drilldown: function (e) {
  137 + if (!e.seriesOptions) {
  138 + var chart = this,
  139 + mapKey = 'countries/us/' + e.point.drilldown + '-all',
  140 +
  141 + // Handle error, the timeout is cleared on success
  142 + fail = setTimeout(function () {
  143 + if (!Highcharts.maps[mapKey]) {
  144 + chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
  145 + fail = setTimeout(function () {
  146 + chart.hideLoading();
  147 + }, 1000);
  148 + }
  149 + }, 3000);
  150 +
  151 + // Show the spinner
  152 + chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
  153 +
  154 + // Load the drilldown map
  155 + $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
  156 +
  157 + var region = e.point.name;
  158 + //called the get api region wise
  159 + analyticsService.getRPP(region).then(function(result) {
  160 +
  161 + data = Highcharts.geojson(Highcharts.maps[mapKey]);
  162 +
  163 + for (var i = 0; i < data.length; i++) {
  164 + for (var j = 0; j<result.length; j++){
  165 +
  166 + //delete the County word from api result to match with map data
  167 + result[j].region = result[j].region.replace("County","");
  168 +
  169 + if (data[i].name.trim() === result[j].region.trim()) {
  170 +
  171 + data[i].value = result[j].averagePAP.toFixed(2);
  172 +
  173 + }
  174 + }
  175 +
  176 + }
  177 + })
  178 +
  179 + // Set a non-random bogus value
  180 +
  181 + $.each(data, function (i) {
  182 + this.value = this.value;
  183 + });
  184 +
  185 + // Hide loading and add series
  186 + chart.hideLoading();
  187 + clearTimeout(fail);
  188 + chart.addSeriesAsDrilldown(e.point, {
  189 + name: e.point.name,
  190 + data: data,
  191 + dataLabels: {
  192 + enabled: true,
  193 + format: '{point.name}'
  194 + }
  195 + });
  196 + });
  197 + }
  198 +
  199 + this.setTitle(null, { text: e.point.name });
  200 + },
  201 + drillup: function () {
  202 + this.setTitle(null, { text: '' });
  203 + }
  204 + }
  205 + },
  206 +
  207 + title: {
  208 + text: 'USA Map-Drilldown for Regional Pricing'
  209 + },
  210 +
  211 + subtitle: {
  212 + text: '',
  213 + floating: true,
  214 + align: 'right',
  215 + y: 50,
  216 + style: {
  217 + fontSize: '16px'
  218 + }
  219 + },
  220 +
  221 + /* legend: small ? {} : {
  222 + layout: 'vertical',
  223 + align: 'right',
  224 + verticalAlign: 'middle'
  225 + },
  226 +
  227 + colorAxis: {
  228 + min: 0,
  229 + minColor: '#E6E7E8',
  230 + maxColor: '#005645'
  231 + },*/
  232 +
  233 + mapNavigation: {
  234 + enabled: true,
  235 + buttonOptions: {
  236 + verticalAlign: 'bottom'
  237 + }
  238 + },
  239 +
  240 + plotOptions: {
  241 + map: {
  242 + states: {
  243 + hover: {
  244 + color: '#EEDD66'
  245 + }
  246 + }
  247 + }
  248 + },
  249 +
  250 + series: [{
  251 + data: data,
  252 + name: 'USA',
  253 + dataLabels: {
  254 + enabled: true,
  255 + format: '{point.properties.postal-code}'
  256 + }
  257 + }, {
  258 + type: 'mapline',
  259 + data: separators,
  260 + color: 'silver',
  261 + enableMouseTracking: false,
  262 + animation: {
  263 + duration: 500
  264 + }
  265 + }],
  266 +
  267 + drilldown: {
  268 + activeDataLabelStyle: {
  269 + color: '#FFFFFF',
  270 + textDecoration: 'none',
  271 + textOutline: '1px #000000'
  272 + },
  273 + drillUpButton: {
  274 + relativeTo: 'spacingBox',
  275 + position: {
  276 + x: 0,
  277 + y: 60
  278 + }
  279 + }
  280 + }
  281 + });
  282 + })
  283 + }
  284 +
  285 + $scope.getAllRegionalPapDrilldown();
  286 +
99 287  
100 288 /*$(document).ready(function() {
101 289 $(function() {
... ... @@ -118,7 +306,8 @@ angular.module(&#39;acufuel&#39;)
118 306 normalizeFunction: 'polynomial'
119 307 });
120 308 });
121   - })*/
  309 + })
  310 +
122 311  
123 312  
124 313 function getRegionPap(code) {
... ... @@ -128,8 +317,9 @@ angular.module(&#39;acufuel&#39;)
128 317 $scope.showLoader = false;
129 318 $('#popup1').css('display', 'block');
130 319 })
131   - }
  320 + }*/
132 321  
  322 +
133 323 $scope.cancelStatus = function() {
134 324 $('#popup1').css('display', 'none');
135 325 }
... ...
app/partials/analytics/analytics.html
Diff comments   View file @89c9d6e
... ... @@ -23,15 +23,16 @@
23 23 .highcharts-button-box{
24 24 display: none;
25 25 }
  26 +
  27 + .highcharts-button-symbol{
  28 + display: none;
  29 + }
  30 +
26 31 .highcharts-map-navigation{
27 32 background-color: #eee;
28 33 border-color: grey;
29 34 }
30   -
31   - /*.highcharts-legend{
32   - transform: unset;
33   - margin-top: 250px;
34   - }*/
  35 +
35 36 @import 'https://code.highcharts.com/css/themes/sand-signika.css';
36 37 </style>
37 38  
... ... @@ -155,7 +156,10 @@
155 156 <center><img id="spinner" src="/img/spinner.gif"/></center>
156 157 </div>
157 158 <!-- <div id="map" style="width: 100%; height: 325px;"></div> -->
158   - <div ng-hide="flag" id="regional-pap" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
  159 +
  160 + <!-- <div ng-hide="flag" id="regional-pap" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> -->
  161 +
  162 + <div ng-hide="flag" id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
159 163 </div>
160 164 <!-- /widget-content -->
161 165 </div>
... ...