viithiisys / Acufuel

Download as
Browse Code ยป

Commit bb09cc25d49f79daa785da4315a34fee006fe1ac

Authored by Kuldeep Arora
1 parent fcb9c5ee6a
Exists in master

historic fuel chart redesigned

Showing 2 changed files with 200 additions and 208 deletions   Show diff stats
app/partials/analytics/analytics.controller.js
Diff comments   View file @bb09cc2
1 'use strict'; 1 'use strict';
2 angular.module('acufuel') 2 angular.module('acufuel')
3 .controller('analyticsController', ['$scope', 'analyticsService', function($scope, analyticsService) { 3 .controller('analyticsController', ['$scope', 'analyticsService', function($scope, analyticsService) {
4 4
5 5
6 // Sand Signika Overview without drill down -KD 6 // Sand Signika Overview without drill down -KD
7 /* $scope.getAllRegionalPap = function() { 7 /* $scope.getAllRegionalPap = function() {
8 $scope.flag=true; 8 $scope.flag=true;
9 $scope.stateList = [{region:'Alabama',code:'AL'},{region:'Alaska',code:'AK'},{region:'Arizona',code:'AZ'},{region:'Arkansas',code:'AR'}, 9 $scope.stateList = [{region:'Alabama',code:'AL'},{region:'Alaska',code:'AK'},{region:'Arizona',code:'AZ'},{region:'Arkansas',code:'AR'},
10 {region:'California',code:'CA' },{region:'Colorado',code:'CO'},{region:'Connecticut',code:'CT'},{region:'Delaware',code:'DE'}, 10 {region:'California',code:'CA' },{region:'Colorado',code:'CO'},{region:'Connecticut',code:'CT'},{region:'Delaware',code:'DE'},
11 {region:'Florida' ,code:'FL'},{region:'Georgia' ,code:'GA'},{region:'Hawaii' ,code:'HI'},{region:'Idaho' ,code:'ID'}, 11 {region:'Florida' ,code:'FL'},{region:'Georgia' ,code:'GA'},{region:'Hawaii' ,code:'HI'},{region:'Idaho' ,code:'ID'},
12 {region:'Illinois',code:'IL'},{region:'Indiana' ,code:'IN'},{region:'Iowa' ,code:'IA'},{region:'Kansas' ,code:'KS'}, 12 {region:'Illinois',code:'IL'},{region:'Indiana' ,code:'IN'},{region:'Iowa' ,code:'IA'},{region:'Kansas' ,code:'KS'},
13 {region:'Kentucky' ,code:'KY'},{region:'Louisiana' ,code:'LA'},{region:'Maine' ,code:'ME'},{region:'Maryland' ,code:'MD'}, 13 {region:'Kentucky' ,code:'KY'},{region:'Louisiana' ,code:'LA'},{region:'Maine' ,code:'ME'},{region:'Maryland' ,code:'MD'},
14 {region:'Massachusetts' ,code:'MA'},{region:'Michigan' ,code:'MI'},{region:'Minnesota' ,code:'MN'}, 14 {region:'Massachusetts' ,code:'MA'},{region:'Michigan' ,code:'MI'},{region:'Minnesota' ,code:'MN'},
15 {region:'Mississippi' ,code:'MS'},{region:'Missouri' ,code:'MO'},{region:'Montana',code:'MT'},{region:'Nebraska' ,code:'NE'}, 15 {region:'Mississippi' ,code:'MS'},{region:'Missouri' ,code:'MO'},{region:'Montana',code:'MT'},{region:'Nebraska' ,code:'NE'},
16 {region:'Nevada' ,code:'NV'},{region:'New Hampshire' ,code:'NH'},{region:'New Jersey' ,code:'NJ'},{region:'New Mexico' ,code:'NM'}, 16 {region:'Nevada' ,code:'NV'},{region:'New Hampshire' ,code:'NH'},{region:'New Jersey' ,code:'NJ'},{region:'New Mexico' ,code:'NM'},
17 {region:'New York' ,code:'NY'},{region:'North Carolina' ,code:'NC'},{region:'North Dakota' ,code:'ND'},{region:'Ohio' ,code:'OH'}, 17 {region:'New York' ,code:'NY'},{region:'North Carolina' ,code:'NC'},{region:'North Dakota' ,code:'ND'},{region:'Ohio' ,code:'OH'},
18 {region:'Oklahoma' ,code:'OK'},{region:'Oregon' ,code:'OR'},{region:'Pennsylvania',code:'PA'},{region:'Rhode Island' ,code:'RI'}, 18 {region:'Oklahoma' ,code:'OK'},{region:'Oregon' ,code:'OR'},{region:'Pennsylvania',code:'PA'},{region:'Rhode Island' ,code:'RI'},
19 {region:'South Carolina' ,code:'SC'},{region:'South Dakota' ,code:'SD'},{region:'Tennessee' ,code:'TN'},{region:'Texas' ,code:'TX'}, 19 {region:'South Carolina' ,code:'SC'},{region:'South Dakota' ,code:'SD'},{region:'Tennessee' ,code:'TN'},{region:'Texas' ,code:'TX'},
20 {region:'Utah' ,code:'UT'},{region:'Vermont' ,code:'VT'},{region:'Virginia' ,code:'VA'},{region:'Washington' ,code:'WA'}, 20 {region:'Utah' ,code:'UT'},{region:'Vermont' ,code:'VT'},{region:'Virginia' ,code:'VA'},{region:'Washington' ,code:'WA'},
21 {region:'West Virginia' ,code:'WV'},{region:'Wisconsin' ,code:'WI'},{region:'Wyoming',code:'WY'}] 21 {region:'West Virginia' ,code:'WV'},{region:'Wisconsin' ,code:'WI'},{region:'Wyoming',code:'WY'}]
22 22
23 analyticsService.getAllRPP().then(function(result) { 23 analyticsService.getAllRPP().then(function(result) {
24 for (var i = 0; i < $scope.stateList.length; i++) { 24 for (var i = 0; i < $scope.stateList.length; i++) {
25 for (var j = 0; j<result.length; j++){ 25 for (var j = 0; j<result.length; j++){
26 if ($scope.stateList[i].region === result[j].region) { 26 if ($scope.stateList[i].region === result[j].region) {
27 result[j].code = $scope.stateList[i].code; 27 result[j].code = $scope.stateList[i].code;
28 result[j].averagePAP = result[j].averagePAP.toFixed(2); 28 result[j].averagePAP = result[j].averagePAP.toFixed(2);
29 } 29 }
30 } 30 }
31 } 31 }
32 $scope.flag=false; 32 $scope.flag=false;
33 // Instantiate the map 33 // Instantiate the map
34 Highcharts.mapChart('regional-pap', { 34 Highcharts.mapChart('regional-pap', {
35 35
36 chart: { 36 chart: {
37 map: 'countries/us/us-all', 37 map: 'countries/us/us-all',
38 borderWidth: 1, 38 borderWidth: 1,
39 }, 39 },
40 40
41 title: { 41 title: {
42 text: 'Regional PAP' 42 text: 'Regional PAP'
43 }, 43 },
44 44
45 exporting: { 45 exporting: {
46 sourceWidth: 600, 46 sourceWidth: 600,
47 sourceHeight: 500 47 sourceHeight: 500
48 }, 48 },
49 49
50 legend: { 50 legend: {
51 layout: 'vertical', 51 layout: 'vertical',
52 borderWidth: 0, 52 borderWidth: 0,
53 backgroundColor: 'rgba(255,255,255,0.85)', 53 backgroundColor: 'rgba(255,255,255,0.85)',
54 floating: true, 54 floating: true,
55 width:'12px', 55 width:'12px',
56 height:'200px', 56 height:'200px',
57 verticalAlign: 'bottom', 57 verticalAlign: 'bottom',
58 y: 0, 58 y: 0,
59 x: -230, 59 x: -230,
60 }, 60 },
61 61
62 mapNavigation: { 62 mapNavigation: {
63 enabled: true 63 enabled: true
64 }, 64 },
65 65
66 colorAxis: { 66 colorAxis: {
67 min: 1, 67 min: 1,
68 type: 'logarithmic', 68 type: 'logarithmic',
69 minColor: '#2b908f', 69 minColor: '#2b908f',
70 maxColor: '#000022', 70 maxColor: '#000022',
71 stops: [ 71 stops: [
72 [0, '#EFEFFF'], 72 [0, '#EFEFFF'],
73 [5, '#f45b5b'], 73 [5, '#f45b5b'],
74 [10, 'rgb(117,0,0)'] 74 [10, 'rgb(117,0,0)']
75 ] 75 ]
76 }, 76 },
77 77
78 series: [{ 78 series: [{
79 animation: { 79 animation: {
80 duration: 1000 80 duration: 1000
81 }, 81 },
82 data: result, 82 data: result,
83 joinBy: ['postal-code', 'code'], 83 joinBy: ['postal-code', 'code'],
84 dataLabels: { 84 dataLabels: {
85 enabled: true, 85 enabled: true,
86 color: '#FFFFFF', 86 color: '#FFFFFF',
87 format: '{point.code}' 87 format: '{point.code}'
88 }, 88 },
89 name: 'Data' , 89 name: 'Data' ,
90 tooltip: { 90 tooltip: {
91 pointFormat: '{point.region} : {point.averagePAP}' 91 pointFormat: '{point.region} : {point.averagePAP}'
92 }, 92 },
93 }] 93 }]
94 }); 94 });
95 }) 95 })
96 } 96 }
97 97
98 $scope.getAllRegionalPap();*/ 98 $scope.getAllRegionalPap();*/
99 99
100 100
101 //Implemented drill down chart and Now used this on 07 Sep 2018 -KD 101 //Implemented drill down chart and Now used this on 07 Sep 2018 -KD
102 102
103 /* 103 /*
104 TODO: 104 TODO:
105 - Check data labels after drilling. Label rank? New positions? 105 - Check data labels after drilling. Label rank? New positions?
106 */ 106 */
107 $scope.getAllRegionalPapDrilldown = function() { 107 $scope.getAllRegionalPapDrilldown = function() {
108 $scope.flag=true;//for spinner 108 $scope.flag=true;//for spinner
109 var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']); 109 var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);
110 var separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'); 110 var separators = Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline');
111 // Some responsiveness 111 // Some responsiveness
112 //var small = $('#container').width() < 400; 112 //var small = $('#container').width() < 400;
113 113
114 analyticsService.getAllRPP().then(function(result) { 114 analyticsService.getAllRPP().then(function(result) {
115 for (var i = 0; i < data.length; i++) { 115 for (var i = 0; i < data.length; i++) {
116 for (var j = 0; j<result.length; j++){ 116 for (var j = 0; j<result.length; j++){
117 if (data[i].name === result[j].region) { 117 if (data[i].name === result[j].region) {
118 118
119 data[i].value = result[j].averagePAP.toFixed(2); 119 data[i].value = result[j].averagePAP.toFixed(2);
120 120
121 } 121 }
122 } 122 }
123 123
124 } 124 }
125 125
126 $.each(data, function (i) { 126 $.each(data, function (i) {
127 this.drilldown = this.properties['hc-key']; 127 this.drilldown = this.properties['hc-key'];
128 this.value = this.value; 128 this.value = this.value;
129 }); 129 });
130 130
131 $scope.flag=false; 131 $scope.flag=false;
132 // Instantiate the map 132 // Instantiate the map
133 Highcharts.mapChart('container', { 133 Highcharts.mapChart('container', {
134 chart: { 134 chart: {
135 events: { 135 events: {
136 drilldown: function (e) { 136 drilldown: function (e) {
137 if (!e.seriesOptions) { 137 if (!e.seriesOptions) {
138 var chart = this, 138 var chart = this,
139 mapKey = 'countries/us/' + e.point.drilldown + '-all', 139 mapKey = 'countries/us/' + e.point.drilldown + '-all',
140 140
141 // Handle error, the timeout is cleared on success 141 // Handle error, the timeout is cleared on success
142 fail = setTimeout(function () { 142 fail = setTimeout(function () {
143 if (!Highcharts.maps[mapKey]) { 143 if (!Highcharts.maps[mapKey]) {
144 chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name); 144 chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
145 fail = setTimeout(function () { 145 fail = setTimeout(function () {
146 chart.hideLoading(); 146 chart.hideLoading();
147 }, 1000); 147 }, 1000);
148 } 148 }
149 }, 3000); 149 }, 3000);
150 150
151 // Show the spinner 151 // Show the spinner
152 chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner 152 chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
153 153
154 // Load the drilldown map 154 // Load the drilldown map
155 $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () { 155 $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
156 156
157 var region = e.point.name; 157 var region = e.point.name;
158 //called the get api region wise 158 //called the get api region wise
159 analyticsService.getRPP(region).then(function(result) { 159 analyticsService.getRPP(region).then(function(result) {
160 160
161 data = Highcharts.geojson(Highcharts.maps[mapKey]); 161 data = Highcharts.geojson(Highcharts.maps[mapKey]);
162 162
163 for (var i = 0; i < data.length; i++) { 163 for (var i = 0; i < data.length; i++) {
164 for (var j = 0; j<result.length; j++){ 164 for (var j = 0; j<result.length; j++){
165 165
166 //delete the County word from api result to match with map data 166 //delete the County word from api result to match with map data
167 result[j].region = result[j].region.replace("County",""); 167 result[j].region = result[j].region.replace("County","");
168 168
169 if (data[i].name.trim() === result[j].region.trim()) { 169 if (data[i].name.trim() === result[j].region.trim()) {
170 170
171 data[i].value = result[j].averagePAP.toFixed(2); 171 data[i].value = result[j].averagePAP.toFixed(2);
172 172
173 } 173 }
174 } 174 }
175 175
176 } 176 }
177 }) 177 })
178 178
179 // Set a non-random bogus value 179 // Set a non-random bogus value
180 180
181 $.each(data, function (i) { 181 $.each(data, function (i) {
182 this.value = this.value; 182 this.value = this.value;
183 }); 183 });
184 184
185 // Hide loading and add series 185 // Hide loading and add series
186 chart.hideLoading(); 186 chart.hideLoading();
187 clearTimeout(fail); 187 clearTimeout(fail);
188 chart.addSeriesAsDrilldown(e.point, { 188 chart.addSeriesAsDrilldown(e.point, {
189 name: e.point.name, 189 name: e.point.name,
190 data: data, 190 data: data,
191 dataLabels: { 191 dataLabels: {
192 enabled: true, 192 enabled: true,
193 format: '{point.name}' 193 format: '{point.name}'
194 } 194 }
195 }); 195 });
196 }); 196 });
197 } 197 }
198 198
199 this.setTitle(null, { text: e.point.name }); 199 this.setTitle(null, { text: e.point.name });
200 }, 200 },
201 drillup: function () { 201 drillup: function () {
202 this.setTitle(null, { text: '' }); 202 this.setTitle(null, { text: '' });
203 } 203 }
204 } 204 }
205 }, 205 },
206 206
207 title: { 207 title: {
208 text: 'USA Map-Drilldown for Regional Pricing' 208 text: 'USA Map-Drilldown for Regional Pricing'
209 }, 209 },
210 210
211 subtitle: { 211 subtitle: {
212 text: '', 212 text: '',
213 floating: true, 213 floating: true,
214 align: 'right', 214 align: 'right',
215 y: 50, 215 y: 50,
216 style: { 216 style: {
217 fontSize: '16px' 217 fontSize: '16px'
218 } 218 }
219 }, 219 },
220 220
221 /* legend: small ? {} : { 221 /* legend: small ? {} : {
222 layout: 'vertical', 222 layout: 'vertical',
223 align: 'right', 223 align: 'right',
224 verticalAlign: 'middle' 224 verticalAlign: 'middle'
225 }, 225 },
226 226
227 colorAxis: { 227 colorAxis: {
228 min: 0, 228 min: 0,
229 minColor: '#E6E7E8', 229 minColor: '#E6E7E8',
230 maxColor: '#005645' 230 maxColor: '#005645'
231 },*/ 231 },*/
232 232
233 mapNavigation: { 233 mapNavigation: {
234 enabled: true, 234 enabled: true,
235 buttonOptions: { 235 buttonOptions: {
236 verticalAlign: 'bottom' 236 verticalAlign: 'bottom'
237 } 237 }
238 }, 238 },
239 239
240 plotOptions: { 240 plotOptions: {
241 map: { 241 map: {
242 states: { 242 states: {
243 hover: { 243 hover: {
244 color: '#EEDD66' 244 color: '#EEDD66'
245 } 245 }
246 } 246 }
247 } 247 }
248 }, 248 },
249 249
250 series: [{ 250 series: [{
251 data: data, 251 data: data,
252 name: 'USA', 252 name: 'USA',
253 dataLabels: { 253 dataLabels: {
254 enabled: true, 254 enabled: true,
255 format: '{point.properties.postal-code}' 255 format: '{point.properties.postal-code}'
256 } 256 }
257 }, { 257 }, {
258 type: 'mapline', 258 type: 'mapline',
259 data: separators, 259 data: separators,
260 color: 'silver', 260 color: 'silver',
261 enableMouseTracking: false, 261 enableMouseTracking: false,
262 animation: { 262 animation: {
263 duration: 500 263 duration: 500
264 } 264 }
265 }], 265 }],
266 266
267 drilldown: { 267 drilldown: {
268 activeDataLabelStyle: { 268 activeDataLabelStyle: {
269 color: '#FFFFFF', 269 color: '#FFFFFF',
270 textDecoration: 'none', 270 textDecoration: 'none',
271 textOutline: '1px #000000' 271 textOutline: '1px #000000'
272 }, 272 },
273 drillUpButton: { 273 drillUpButton: {
274 relativeTo: 'spacingBox', 274 relativeTo: 'spacingBox',
275 position: { 275 position: {
276 x: 0, 276 x: 0,
277 y: 60 277 y: 60
278 } 278 }
279 } 279 }
280 } 280 }
281 }); 281 });
282 }) 282 })
283 } 283 }
284 284
285 $scope.getAllRegionalPapDrilldown(); 285 $scope.getAllRegionalPapDrilldown();
286 286
287 287
288 /*$(document).ready(function() { 288 /*$(document).ready(function() {
289 $(function() { 289 $(function() {
290 jQuery('#map').vectorMap({ 290 jQuery('#map').vectorMap({
291 map: 'us_lcc', 291 map: 'us_lcc',
292 backgroundColor: '#ffce99', 292 backgroundColor: '#ffce99',
293 color: '#dfdfdd', 293 color: '#dfdfdd',
294 hoverOpacity: 0, 294 hoverOpacity: 0,
295 selectedColor: '#5f8b98', 295 selectedColor: '#5f8b98',
296 hoverColor: '#5f8b98', 296 hoverColor: '#5f8b98',
297 enableZoom: true, 297 enableZoom: true,
298 showTooltip: true, 298 showTooltip: true,
299 scaleColors: ['#dfdfdd'], 299 scaleColors: ['#dfdfdd'],
300 //values: sample_data 300 //values: sample_data
301 onRegionClick: function(event, code) { 301 onRegionClick: function(event, code) {
302 var map = $('#map').vectorMap('get', 'mapObject'); 302 var map = $('#map').vectorMap('get', 'mapObject');
303 var name = map.getRegionName(code); 303 var name = map.getRegionName(code);
304 getRegionPap(name); 304 getRegionPap(name);
305 }, 305 },
306 normalizeFunction: 'polynomial' 306 normalizeFunction: 'polynomial'
307 }); 307 });
308 }); 308 });
309 }) 309 })
310 310
311 311
312 312
313 function getRegionPap(code) { 313 function getRegionPap(code) {
314 $scope.showLoader = true; 314 $scope.showLoader = true;
315 analyticsService.getRPP(code).then(function(result) { 315 analyticsService.getRPP(code).then(function(result) {
316 $scope.rppData = result; 316 $scope.rppData = result;
317 $scope.showLoader = false; 317 $scope.showLoader = false;
318 $('#popup1').css('display', 'block'); 318 $('#popup1').css('display', 'block');
319 }) 319 })
320 }*/ 320 }*/
321 321
322 322
323 $scope.cancelStatus = function() { 323 $scope.cancelStatus = function() {
324 $('#popup1').css('display', 'none'); 324 $('#popup1').css('display', 'none');
325 } 325 }
326 $scope.ordersCost = 0; 326 $scope.ordersCost = 0;
327 $scope.ordersCount = 0; 327 $scope.ordersCount = 0;
328 328
329 $scope.orderCostAndCount = function() { 329 $scope.orderCostAndCount = function() {
330 analyticsService.orderCostAndCount().then(function(result) { 330 analyticsService.orderCostAndCount().then(function(result) {
331 $scope.ordersCost = result.cost; 331 $scope.ordersCost = result.cost;
332 $scope.ordersCount = result.count; 332 $scope.ordersCount = result.count;
333 }) 333 })
334 } 334 }
335 335
336 $scope.drf = {}; 336 $scope.drf = {};
337 $scope.hfp = {}; 337 $scope.hfp = {};
338 $scope.cs = {}; 338 $scope.cs = {};
339 $scope.mfsValues = []; 339 $scope.mfsValues = [];
340 $scope.msfarray = []; 340 $scope.msfarray = [];
341 $scope.getMFS = function() { 341 $scope.getMFS = function() {
342 //var makeId = makeId; 342 //var makeId = makeId;
343 analyticsService.getMFS().then(function(result) { 343 analyticsService.getMFS().then(function(result) {
344 $scope.mfsValues = result; 344 $scope.mfsValues = result;
345 $scope.optionsmfs = { 345 $scope.optionsmfs = {
346 chart: { 346 chart: {
347 type: 'multiBarChart', 347 type: 'multiBarChart',
348 height: 450, 348 height: 450,
349 reduceXTicks: false, 349 reduceXTicks: false,
350 margin: { 350 margin: {
351 top: 45, 351 top: 45,
352 right: 20, 352 right: 20,
353 bottom: 45, 353 bottom: 45,
354 left: 45 354 left: 45
355 }, 355 },
356 clipEdge: true, 356 clipEdge: true,
357 //staggerLabels: true, 357 //staggerLabels: true,
358 duration: 500, 358 duration: 500,
359 stacked: false, 359 stacked: false,
360 /*color: ["#FEDFC3", "#990000", "#000099", "#009900"],*/ 360 /*color: ["#FEDFC3", "#990000", "#000099", "#009900"],*/
361 color: ["#A9A9A9", "#000099", "#990000", "#009900"], 361 color: ["#A9A9A9", "#000099", "#990000", "#009900"],
362 xAxis: { 362 xAxis: {
363 axisLabel: 'Months', 363 axisLabel: 'Months',
364 showMaxMin: false, 364 showMaxMin: false,
365 }, 365 },
366 yAxis: { 366 yAxis: {
367 axisLabel: 'Orders', 367 axisLabel: 'Orders',
368 axisLabelDistance: -20, 368 axisLabelDistance: -20,
369 tickFormat: function(d) { 369 tickFormat: function(d) {
370 return d3.format(',.1f')(d); 370 return d3.format(',.1f')(d);
371 } 371 }
372 } 372 }
373 373
374 } 374 }
375 }; 375 };
376 $scope.datamfs = $scope.mfsValues; 376 $scope.datamfs = $scope.mfsValues;
377 }) 377 })
378 } 378 }
379 379
380 $scope.orderCostAndCount(); 380 $scope.orderCostAndCount();
381 $scope.getMFS(); 381 $scope.getMFS();
382 $scope.csValues = []; 382 $scope.csValues = [];
383 $scope.getCS = function() { 383 $scope.getCS = function() {
384 //var makeId = makeId; 384 //var makeId = makeId;
385 analyticsService.getCS().then(function(result) { 385 analyticsService.getCS().then(function(result) {
386 console.log("===customersupports===",result)
386 $scope.csValues = result; 387 $scope.csValues = result;
387 $scope.optionscs = { 388 $scope.optionscs = {
388 chart: { 389 chart: {
389 type: 'pieChart', 390 type: 'pieChart',
390 height: 500, 391 height: 500,
391 // color: ["#FEDFC3","#D89700","#FFE8B3","FFD980","#FF7F0E","#fff2e6","#ffcc99","#ffa64d","#ff8c1a","#B37D00","#f5f5f0","#e0e0d1","#ccccb3","#adad85","#999966","#7a7a52"], 392 // color: ["#FEDFC3","#D89700","#FFE8B3","FFD980","#FF7F0E","#fff2e6","#ffcc99","#ffa64d","#ff8c1a","#B37D00","#f5f5f0","#e0e0d1","#ccccb3","#adad85","#999966","#7a7a52"],
392 x: function(d) { 393 x: function(d) {
393 return d.key; 394 return d.key;
394 }, 395 },
395 y: function(d) { 396 y: function(d) {
396 return d.y; 397 return d.y;
397 }, 398 },
398 showLabels: false, 399 showLabels: false,
399 segmentShowStroke: false, 400 segmentShowStroke: false,
400 animationSteps: 20, 401 animationSteps: 20,
401 animationEasing: "linear", 402 animationEasing: "linear",
402 animateScale: true, 403 animateScale: true,
403 duration: 500, 404 duration: 500,
404 labelThreshold: 0.01, 405 labelThreshold: 0.01,
405 labelSunbeamLayout: true, 406 labelSunbeamLayout: true,
406 legend: { 407 legend: {
407 margin: { 408 margin: {
408 top: 5, 409 top: 5,
409 right: 35, 410 right: 35,
410 bottom: 5, 411 bottom: 5,
411 left: 0 412 left: 0
412 } 413 }
413 } 414 }
414 } 415 }
415 }; 416 };
416 $scope.datacs = $scope.csValues; 417 $scope.datacs = $scope.csValues;
417 }) 418 })
418 } 419 }
419 420
420 $scope.getCS(); 421 $scope.getCS();
422
423
424 $scope.hfpValuesOne = {};
425 $scope.hfpValuesOne.key = "JET-A Full Service";
426 $scope.hfpValuesOne.values = [];
427
428 $scope.hfpValuesTwo = {};
429 $scope.hfpValuesTwo.key = "100LL Full Service";
430 $scope.hfpValuesTwo.values = [];
431
432 $scope.hfpFinalData = [];
421 433
422
423 $scope.hfpValues = [];
424 $scope.getHfpChartData = function() { 434 $scope.getHfpChartData = function() {
425 //var makeId = makeId;
426 analyticsService.gethfpChart().then(function(result) { 435 analyticsService.gethfpChart().then(function(result) {
427 $scope.hfpValues = result; 436 for(var i=0; i<result.length; i++) {
428 //console.log('---kd result--',$scope.hfpValues); 437 if(result[i].includes("JET-A Full Service") ){
429 438 let datePusha = result[i][0];
430 /*Historic Fuel Price */ 439 let tempValue = result[i][1].toFixed(2);
431 440 let valePusha = parseInt(tempValue);
432 $scope.optionshfp = { 441 $scope.hfpValuesOne.values.push([datePusha, valePusha])
433 chart: { 442 }else if(result[i].includes("100LL Full Service") ) {
434 type: 'cumulativeLineChart', 443 let datePushb = result[i][0];
435 height: 450, 444 let tempvalePushb = result[i][1].toFixed(2);
436 margin: { 445 let valePushb = parseInt(tempvalePushb);
437 top: 40, 446 $scope.hfpValuesTwo.values.push([datePushb, valePushb])
438 right: 20,
439 bottom: 50,
440 left: 65
441 },
442 x: function(d) {
443 return d[0];
444 },
445 y: function(d) {
446 return d[1] / 100 ;
447 },
448 average: function(d) {
449 return d.mean / 100;
450 },
451
452 color: ["#FEDFC3"],
453 duration: 300,
454 useInteractiveGuideline: true,
455 clipVoronoi: false,
456
457 xAxis: {
458 axisLabel: '',
459
460 tickFormat: function(d) {
461 return d3.time.format('%m/%d/%y')(new Date(d))
462 //return d3.time.format('%b \-%y')(new Date(d))
463 },
464 showMaxMin: false,
465 staggerLabels: true
466 },
467
468 yAxis: {
469 axisLabel: 'PaP/Retail Price',
470
471 tickFormat: function(d) {
472 //return d3.format('')(d).toFixed(2);
473 return '$ '+d.toFixed(2)
474 },
475 axisLabelDistance: 5
476 } 447 }
477 } 448 }
478 }; 449 $scope.hfpFinalData.push($scope.hfpValuesOne, $scope.hfpValuesTwo);
479 $scope.datahfp = [{ 450 // console.log('$scope.hfpFinalData', $scope.hfpFinalData);
480 key: "Long", 451
481 values: $scope.hfpValues, 452 var chart = nv.models.lineChart()
482 mean: 0 453 .x(function(d) { return d[0] })
483 }]; 454 //adjusting, 100% is 1.00, not 100 as it is in the data
484 455 .y(function(d) { return d[1]})
485 }) 456 .color(d3.scale.category10().range())
457 .useInteractiveGuideline(true)
458 ;
459
460 chart.xAxis
461 .tickFormat(function(d) {
462 return d3.time.format('%x')(new Date(d))
463 });
464
465 chart.yAxis
466 .axisLabel("PaP / Retail Price")
467 .axisLabelDistance(-5)
468 .tickFormat(d3.format(',.2f')).showMaxMin(false);
469
470 d3.select('#chart svg')
471 .datum($scope.hfpFinalData)
472 .transition().duration(500)
473 .call(chart)
474 ;
475
476 nv.utils.windowResize(chart.update);
477
478 return chart;
479 });
486 } 480 }
487
488 $scope.getHfpChartData(); 481 $scope.getHfpChartData();
489 482
483 /*Date Range Filter for Historic fuel Price*/
484 $scope.submitDateHfp = function() {
485
486 $scope.hfpValuesFirst = {};
487 $scope.hfpValuesFirst.key = "JET-A Full Service";
488 $scope.hfpValuesFirst.values = [];
489
490 $scope.hfpValuesSecond = {};
491 $scope.hfpValuesSecond.key = "100LL Full Service";
492 $scope.hfpValuesSecond.values = [];
493
494 $scope.hfpRangeData = [];
495
496 if ($scope.hfp.fromDate === undefined) {
490 497
491 /*Date Range Filter for Monthly fuel Sales*/
492 $scope.submitDate = function() {
493 if ($scope.drf.fromDate === undefined) {
494 $scope.fillForm = true; 498 $scope.fillForm = true;
495 } else if ($scope.drf.fromDate != undefined && $scope.drf.toDate === undefined || $scope.drf.toDate === '') { 499 } else if ($scope.hfp.fromDate != undefined && $scope.hfp.toDate === undefined || $scope.hfp.toDate === '') {
496 $scope.fillForm = false; 500 $scope.fillForm = false;
497 var today = new Date(); 501 var today = new Date();
498 var DefaultToDate = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2); 502 var DefaultToDate = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2);
499 //from date format 503 //from date format
500 $scope.dat1 = $scope.drf.fromDate; 504 $scope.dat1 = $scope.hfp.fromDate;
501 $scope.fd1 = $scope.dat1.split("/").reverse(); 505 $scope.fd1 = $scope.dat1.split("/").reverse();
502 $scope.tmp = $scope.fd1[2]; 506 $scope.tmp = $scope.fd1[2];
503 $scope.fd1[2] = $scope.fd1[1]; 507 $scope.fd1[2] = $scope.fd1[1];
504 $scope.fd1[1] = $scope.tmp; 508 $scope.fd1[1] = $scope.tmp;
505 $scope.fd = $scope.fd1.join("-"); 509 $scope.fd = $scope.fd1.join("-");
506 analyticsService.getDRFChart($scope.fd, DefaultToDate).then(function(result) { 510 analyticsService.getDRFHfpChart($scope.fd, DefaultToDate).then(function(result) {
507 $scope.datamfs = []; 511 // console.log("===date range===",$scope.fd,DefaultToDate)
508 $scope.datamfs = result; 512 for(var i=0; i<result.length; i++) {
509 }) 513 if(result[i].includes("JET-A Full Service") ){
510 514 let datePusha = result[i][0];
511 analyticsService.orderCostAndCountByDate($scope.fd, DefaultToDate).then(function(result) { 515 let tempValue = result[i][1].toFixed(2);
512 $scope.ordersCost = result.cost; 516 let valePusha = parseInt(tempValue);
513 $scope.ordersCount = result.count; 517 $scope.hfpValuesFirst.values.push([datePusha, valePusha])
518 }else if(result[i].includes("100LL Full Service") ) {
519 let datePushb = result[i][0];
520 let tempvalePushb = result[i][1].toFixed(2);
521 let valePushb = parseInt(tempvalePushb);
522 $scope.hfpValuesSecond.values.push([datePushb, valePushb])
523 }
524 }
525 $scope.hfpRangeData.push($scope.hfpValuesFirst, $scope.hfpValuesSecond);
526 // console.log('$scope.hfpRangeData', $scope.hfpRangeData);
527
528 var chart = nv.models.lineChart()
529 .x(function(d) { if(d.length >0){return d[0]}})
530 //adjusting, 100% is 1.00, not 100 as it is in the data
531 .y(function(d) { return d[1]})
532 .color(d3.scale.category10().range())
533 .useInteractiveGuideline(true)
534 ;
535
536 chart.xAxis
537 .tickFormat(function(d) {
538 return d3.time.format('%x')(new Date(d))
539 });
540
541 chart.yAxis
542 .axisLabel("PaP / Retail Price")
543 .axisLabelDistance(-5)
544 .tickFormat(d3.format(',.2f')).showMaxMin(false);
545
546 d3.select('#chart svg')
547 .datum($scope.hfpRangeData)
548 .transition().duration(500)
549 .call(chart)
550 ;
551
552 nv.utils.windowResize(chart.update);
553
554 return chart;
514 }) 555 })
515 } else if ($scope.drf.fromDate != undefined && $scope.drf.toDate != undefined) { 556
557
558 } else if ($scope.hfp.fromDate != undefined && $scope.hfp.toDate != undefined) {
516 $scope.fillForm = false; 559 $scope.fillForm = false;
517 //from date format 560 //from date format
518 $scope.dat1 = $scope.drf.fromDate; 561 $scope.dat1 = $scope.hfp.fromDate;
519 $scope.fd1 = $scope.dat1.split("/").reverse(); 562 $scope.fd1 = $scope.dat1.split("/").reverse();
520 $scope.tmp = $scope.fd1[2]; 563 $scope.tmp = $scope.fd1[2];
521 $scope.fd1[2] = $scope.fd1[1]; 564 $scope.fd1[2] = $scope.fd1[1];
522 $scope.fd1[1] = $scope.tmp; 565 $scope.fd1[1] = $scope.tmp;
523 $scope.fd = $scope.fd1.join("-"); 566 $scope.fd = $scope.fd1.join("-");
524 $scope.dat2 = $scope.drf.toDate; 567 //to date format
568 $scope.dat2 = $scope.hfp.toDate;
525 $scope.td1 = $scope.dat2.split("/").reverse(); 569 $scope.td1 = $scope.dat2.split("/").reverse();
526 $scope.tmp1 = $scope.td1[2]; 570 $scope.tmp1 = $scope.td1[2];
527 $scope.td1[2] = $scope.td1[1]; 571 $scope.td1[2] = $scope.td1[1];
528 $scope.td1[1] = $scope.tmp1; 572 $scope.td1[1] = $scope.tmp1;
529 $scope.td = $scope.td1.join("-"); 573 $scope.td = $scope.td1.join("-");
530 574
531 analyticsService.getDRFChart($scope.fd, $scope.td).then(function(result) { 575 analyticsService.getDRFHfpChart($scope.fd, $scope.td).then(function(result) {
532 $scope.datamfs = []; 576 //console.log("===date range22===",result);
533 $scope.datamfs = result; 577 for(var i=0; i<result.length; i++) {
534 }) 578 if(result[i].includes("JET-A Full Service") ){
535 579 let datePusha = result[i][0];
536 analyticsService.orderCostAndCountByDate($scope.fd, $scope.td).then(function(result) { 580 let tempValue = result[i][1].toFixed(2);
537 $scope.ordersCost = result.cost; 581 let valePusha = parseInt(tempValue);
538 $scope.ordersCount = result.count; 582 $scope.hfpValuesFirst.values.push([datePusha, valePusha])
583 }else if(result[i].includes("100LL Full Service") ) {
584 let datePushb = result[i][0];
585 let tempvalePushb = result[i][1].toFixed(2);
586 let valePushb = parseInt(tempvalePushb);
587 $scope.hfpValuesSecond.values.push([datePushb, valePushb])
588 }
589 }
590 $scope.hfpRangeData.push($scope.hfpValuesFirst, $scope.hfpValuesSecond);
591 // console.log('$scope.hfpRangeData', $scope.hfpRangeData);
592
593 var chart = nv.models.lineChart()
594 .x(function(d) { if(d.length >0){return d[0] }})
595 //adjusting, 100% is 1.00, not 100 as it is in the data
596 .y(function(d) { return d[1]})
597 .color(d3.scale.category10().range())
598 .useInteractiveGuideline(true)
599 ;
600
601 chart.xAxis
602 .tickFormat(function(d) {
603 return d3.time.format('%x')(new Date(d))
604 });
605
606 chart.yAxis
607 .axisLabel("PaP / Retail Price")
608 .axisLabelDistance(-5)
609 .tickFormat(d3.format(',.2f')).showMaxMin(false);
610
611 d3.select('#chart svg')
612 .datum($scope.hfpRangeData)
613 .transition().duration(500)
614 .call(chart)
615 ;
616
617 nv.utils.windowResize(chart.update);
618
619 return chart;
539 }) 620 })
540 621
541 } else { 622 } else {
542 $scope.fillForm = true; 623 $scope.fillForm = true;
543 } 624 }
544 625
545 626
546 } 627 }
547 628
548 /*Date Range Filter for Historic fuel Price*/ 629
549 $scope.submitDateHfp = function() { 630 /*Date Range Filter for Monthly fuel Sales*/
550 631 $scope.submitDate = function() {
551 if ($scope.hfp.fromDate === undefined) { 632 if ($scope.drf.fromDate === undefined) {
552
553 $scope.fillForm = true; 633 $scope.fillForm = true;
554 } else if ($scope.hfp.fromDate != undefined && $scope.hfp.toDate === undefined || $scope.hfp.toDate === '') { 634 } else if ($scope.drf.fromDate != undefined && $scope.drf.toDate === undefined || $scope.drf.toDate === '') {
555 $scope.fillForm = false; 635 $scope.fillForm = false;
556 var today = new Date(); 636 var today = new Date();
557 var DefaultToDate = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2); 637 var DefaultToDate = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2);
558 //from date format 638 //from date format
559 $scope.dat1 = $scope.hfp.fromDate; 639 $scope.dat1 = $scope.drf.fromDate;
560 $scope.fd1 = $scope.dat1.split("/").reverse(); 640 $scope.fd1 = $scope.dat1.split("/").reverse();
561 $scope.tmp = $scope.fd1[2]; 641 $scope.tmp = $scope.fd1[2];
562 $scope.fd1[2] = $scope.fd1[1]; 642 $scope.fd1[2] = $scope.fd1[1];
563 $scope.fd1[1] = $scope.tmp; 643 $scope.fd1[1] = $scope.tmp;
564 $scope.fd = $scope.fd1.join("-"); 644 $scope.fd = $scope.fd1.join("-");
565 analyticsService.getDRFHfpChart($scope.fd, DefaultToDate).then(function(result) { 645 analyticsService.getDRFChart($scope.fd, DefaultToDate).then(function(result) {
566 $scope.hfpValues = result; 646 $scope.datamfs = [];
567 $scope.optionshfp = { 647 $scope.datamfs = result;
568 chart: {
569 type: 'cumulativeLineChart',
570 height: 450,
571 margin: {
572 top: 40,
573 right: 20,
574 bottom: 50,
575 left: 65
576 },
577 x: function(d) {
578 return d[0];
579 },
580 y: function(d) {
581 return d[1] / 100;
582 },
583 average: function(d) {
584 return d.mean / 100;
585 },
586
587 color: ["#FEDFC3"],
588 duration: 300,
589 useInteractiveGuideline: true,
590 clipVoronoi: false,
591
592 xAxis: {
593 axisLabel: '',
594
595 tickFormat: function(d) {
596 return d3.time.format('%d / %m / %y')(new Date(d))
597 // return d3.time.format('%b \-%y')(new Date(d))
598 },
599 showMaxMin: false,
600 staggerLabels: true
601 },
602
603 yAxis: {
604 axisLabel: 'PaP/Retail Price',
605
606 tickFormat: function(d) {
607 //return d3.format('')(d).toFixed(2);
608 return '$ '+d.toFixed(2)
609 },
610 axisLabelDistance: 5
611 }
612 }
613 };
614 $scope.datahfp = [{
615 key: "Long",
616 values: $scope.hfpValues,
617 mean: 0
618 }];
619 }) 648 })
620 649
621 650 analyticsService.orderCostAndCountByDate($scope.fd, DefaultToDate).then(function(result) {
622 } else if ($scope.hfp.fromDate != undefined && $scope.hfp.toDate != undefined) { 651 $scope.ordersCost = result.cost;
652 $scope.ordersCount = result.count;
653 })
654 } else if ($scope.drf.fromDate != undefined && $scope.drf.toDate != undefined) {
623 $scope.fillForm = false; 655 $scope.fillForm = false;
624 //from date format 656 //from date format
625 $scope.dat1 = $scope.hfp.fromDate; 657 $scope.dat1 = $scope.drf.fromDate;
626 $scope.fd1 = $scope.dat1.split("/").reverse(); 658 $scope.fd1 = $scope.dat1.split("/").reverse();
627 $scope.tmp = $scope.fd1[2]; 659 $scope.tmp = $scope.fd1[2];
628 $scope.fd1[2] = $scope.fd1[1]; 660 $scope.fd1[2] = $scope.fd1[1];
629 $scope.fd1[1] = $scope.tmp; 661 $scope.fd1[1] = $scope.tmp;
630 $scope.fd = $scope.fd1.join("-"); 662 $scope.fd = $scope.fd1.join("-");
631 //to date format 663 $scope.dat2 = $scope.drf.toDate;
632 $scope.dat2 = $scope.hfp.toDate;
633 $scope.td1 = $scope.dat2.split("/").reverse(); 664 $scope.td1 = $scope.dat2.split("/").reverse();
634 $scope.tmp1 = $scope.td1[2]; 665 $scope.tmp1 = $scope.td1[2];
635 $scope.td1[2] = $scope.td1[1]; 666 $scope.td1[2] = $scope.td1[1];
636 $scope.td1[1] = $scope.tmp1; 667 $scope.td1[1] = $scope.tmp1;
637 $scope.td = $scope.td1.join("-"); 668 $scope.td = $scope.td1.join("-");
638 669
639 analyticsService.getDRFHfpChart($scope.fd, $scope.td).then(function(result) { 670 analyticsService.getDRFChart($scope.fd, $scope.td).then(function(result) {
640 $scope.hfpValues = result; 671 $scope.datamfs = [];
641 $scope.optionshfp = { 672 $scope.datamfs = result;
642 chart: { 673 })
643 type: 'cumulativeLineChart', 674
644 height: 450, 675 analyticsService.orderCostAndCountByDate($scope.fd, $scope.td).then(function(result) {
645 margin: { 676 $scope.ordersCost = result.cost;
646 top: 40, 677 $scope.ordersCount = result.count;
647 right: 20,
648 bottom: 50,
649 left: 65
650 },
651 x: function(d) {
652 return d[0];
653 },
654 y: function(d) {
655 return d[1] / 100 ;
656 },
657 average: function(d) {
658 return d.mean / 100;
659 },
660
661 color: ["#FEDFC3"],
662 duration: 300,
663 useInteractiveGuideline: true,
664 clipVoronoi: false,
665
666 xAxis: {
667 axisLabel: '',
668
669 tickFormat: function(d) {
670 return d3.time.format('%d / %m / %y')(new Date(d))
671 //return d3.time.format('%b \-%y')(new Date(d))
672 },
673 showMaxMin: false,
674 staggerLabels: true
675 },
676
677 yAxis: {
678 axisLabel: 'PaP/Retail Price',
679
680 tickFormat: function(d) {
681 //return d3.format('')(d).toFixed(2);
682 return '$ '+d.toFixed(2)
683 },
app/partials/analytics/analytics.html
Diff comments   View file @bb09cc2
1 <style> 1 <style>
2 .chart-holder { 2 .chart-holder {
3 height: 325px; 3 height: 325px;
4 } 4 }
5 .cirque-stats { 5 .cirque-stats {
6 text-align: center; 6 text-align: center;
7 } 7 }
8 .cirque-stats .cirque-container { 8 .cirque-stats .cirque-container {
9 margin-top: 1.5em; 9 margin-top: 1.5em;
10 margin-bottom: 1.5em; 10 margin-bottom: 1.5em;
11 margin-right: 2em; 11 margin-right: 2em;
12 margin-left: 2em; 12 margin-left: 2em;
13 } 13 }
14 .subnavbar .mainnav > li:nth-child(6) > a{ 14 .subnavbar .mainnav > li:nth-child(6) > a{
15 color: #ca5c6a; 15 color: #ca5c6a;
16 } 16 }
17 .table { 17 .table {
18 border-collapse: separate; 18 border-collapse: separate;
19 padding: 0px; 19 padding: 0px;
20 20
21 } 21 }
22 22
23 .highcharts-button-box{ 23 .highcharts-button-box{
24 display: none; 24 display: none;
25 } 25 }
26 26
27 .highcharts-button-symbol{ 27 .highcharts-button-symbol{
28 display: none; 28 display: none;
29 } 29 }
30 30
31 .highcharts-map-navigation{ 31 .highcharts-map-navigation{
32 background-color: #eee; 32 background-color: #eee;
33 border-color: grey; 33 border-color: grey;
34 } 34 }
35 35
36 #chart svg {
37 height: 400px;
38 }
36 @import 'https://code.highcharts.com/css/themes/sand-signika.css'; 39 @import 'https://code.highcharts.com/css/themes/sand-signika.css';
37 </style> 40 </style>
38 41
39 <div class="main"> 42 <div class="main">
40 <div style="padding: 0 3%; margin-left: 15px;"> 43 <div style="padding: 0 3%; margin-left: 15px;">
41 <div class="row"> 44 <div class="row">
42 <div class="col-md-6"> 45 <div class="col-md-6">
43 <div class="customInputWrap"> 46 <div class="customInputWrap">
44 <div style="margin-left: 0px;"> 47 <div style="margin-left: 0px;">
45 <label>Date Range Filter</label> 48 <label>Date Range Filter</label>
46 <form name="myForm"> 49 <form name="myForm">
47 <input type="text" ng-model="drf.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/> 50 <input type="text" ng-model="drf.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/>
48 <input type="text" ng-model="drf.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;"> 51 <input type="text" ng-model="drf.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
49 <button class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="submitDate()" style="float: left; display: none;">Apply</button> 52 <button class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="submitDate()" style="float: left; display: none;">Apply</button>
50 <button class="btn btn-primary" ng-click="submitDate()" style="float: left;">Apply</button> 53 <button class="btn btn-primary" ng-click="submitDate()" style="float: left;">Apply</button>
51 <div class="clearfix"></div> 54 <div class="clearfix"></div>
52 </form> 55 </form>
53 </div> 56 </div>
54 <div class="clearfix"></div> 57 <div class="clearfix"></div>
55 </div> 58 </div>
56 <div class="widget stacked"> 59 <div class="widget stacked">
57 <div class="widget-header"> 60 <div class="widget-header">
58 <i class="icon-bar-chart"></i> 61 <i class="icon-bar-chart"></i>
59 <h3>${{ordersCost | number :2}}/{{ordersCount}} Fuel Sales</h3> 62 <h3>${{ordersCost | number :2}}/{{ordersCount}} Fuel Sales</h3>
60 </div> 63 </div>
61 <!-- /widget-header --> 64 <!-- /widget-header -->
62 <div class="widget-content"> 65 <div class="widget-content">
63 <nvd3 options="optionsmfs" data="datamfs"></nvd3> 66 <nvd3 options="optionsmfs" data="datamfs"></nvd3>
64 <!-- /bar-chart --> 67 <!-- /bar-chart -->
65 </div> 68 </div>
66 <!-- /widget-content --> 69 <!-- /widget-content -->
67 </div> 70 </div>
68 <!-- /widget --> 71 <!-- /widget -->
69 </div> 72 </div>
70 <!-- /.span6 --> 73 <!-- /.span6 -->
71 <div class="col-md-6"> 74 <div class="col-md-6">
72 <div class="customInputWrap"> 75 <div class="customInputWrap">
73 <div style="margin-left: 0px;"> 76 <div style="margin-left: 0px;">
74 <label>Date Range Filter</label> 77 <label>Date Range Filter</label>
75 <form name="myForm1"> 78 <form name="myForm1">
76 <input type="text" ng-model="hfp.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/> 79 <input type="text" ng-model="hfp.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/>
77 <input type="text" ng-model="hfp.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;"> 80 <input type="text" ng-model="hfp.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
78 <button class="btn btn-primary" ng-disabled="myForm1.$invalid" ng-click="submitDateHfp()" style="float: left; display: none;">Apply</button> 81 <button class="btn btn-primary" ng-disabled="myForm1.$invalid" ng-click="submitDateHfp()" style="float: left; display: none;">Apply</button>
79 <button class="btn btn-primary" ng-click="submitDateHfp()" style="float: left;">Apply</button> 82 <button class="btn btn-primary" ng-click="submitDateHfp()" style="float: left;">Apply</button>
80 <div class="clearfix"></div> 83 <div class="clearfix"></div>
81 </form> 84 </form>
82 </div> 85 </div>
83 <div class="clearfix"></div> 86 <div class="clearfix"></div>
84 </div> 87 </div>
85 <div class="widget stacked"> 88 <div class="widget stacked">
86 <div class="widget-header"> 89 <div class="widget-header">
87 <i class="icon-bar-chart"></i> 90 <i class="icon-bar-chart"></i>
88 <h3>Historic Fuel Pricing</h3> 91 <h3>Historic Fuel Pricing</h3>
89 </div> 92 </div>
90 <!-- /widget-header --> 93 <!-- /widget-header -->
91 <div class="widget-content"> 94 <div class="widget-content">
92 <nvd3 options="optionshfp" data="datahfp"></nvd3> 95 <!-- <nvd3 options="optionshfp" data="datahfp"></nvd3> -->
93 <!-- /pie-chart --> 96 <!-- /pie-chart -->
97 <div id="chart"><svg></svg></div>
94 </div> 98 </div>
95 <!-- /widget-content --> 99 <!-- /widget-content -->
96 </div> 100 </div>
97 <!-- /widget --> 101 <!-- /widget -->
98 </div> 102 </div>
99 <!-- /span6 --> 103 <!-- /span6 -->
100 </div> 104 </div>
101 <div class="row"></div> 105 <div class="row"></div>
102 <div class="row"> 106 <div class="row">
103 <div class="col-md-6"> 107 <div class="col-md-6">
104 <div class="customInputWrap"> 108 <div class="customInputWrap">
105 <div style="margin-left: 0px;"> 109 <div style="margin-left: 0px;">
106 <label>Date Range Filter</label> 110 <label>Date Range Filter</label>
107 <form name="myForm2"> 111 <form name="myForm2">
108 <input type="text" ng-model="cs.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/> 112 <input type="text" ng-model="cs.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/>
109 <input type="text" ng-model="cs.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;"> 113 <input type="text" ng-model="cs.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
110 <button class="btn btn-primary" ng-disabled="myForm2.$invalid" ng-click="submitDateCs()" style="float: left; display: none;">Apply</button> 114 <button class="btn btn-primary" ng-disabled="myForm2.$invalid" ng-click="submitDateCs()" style="float: left; display: none;">Apply</button>
111 <button class="btn btn-primary" ng-click="submitDateCs()" style="float: left;">Apply</button> 115 <button class="btn btn-primary" ng-click="submitDateCs()" style="float: left;">Apply</button>
112 <div class="clearfix"></div> 116 <div class="clearfix"></div>
113 </form> 117 </form>
114 </div> 118 </div>
115 <div class="clearfix"></div> 119 <div class="clearfix"></div>
116 </div> 120 </div>
117 <div class="widget stacked"> 121 <div class="widget stacked">
118 <div class="widget-header"> 122 <div class="widget-header">
119 <i class="icon-bar-chart"></i> 123 <i class="icon-bar-chart"></i>
120 <h3>Customer Sources</h3> 124 <h3>Customer Sources</h3>
121 </div> 125 </div>
122 <!-- /widget-header --> 126 <!-- /widget-header -->
123 <div class="widget-content"> 127 <div class="widget-content">
124 <div style="margin-left: -15px;"> 128 <div style="margin-left: -15px;">
125 <nvd3 options="optionscs" class="custom-graph" data="datacs"></nvd3> 129 <nvd3 options="optionscs" class="custom-graph" data="datacs"></nvd3>
126 </div> 130 </div>
127 <!-- /pie-chart --> 131 <!-- /pie-chart -->
128 </div> 132 </div>
129 <!-- /widget-content --> 133 <!-- /widget-content -->
130 </div> 134 </div>
131 <!-- /widget --> 135 <!-- /widget -->
132 </div> 136 </div>
133 <!-- /span6 --> 137 <!-- /span6 -->
134 <div class="col-md-6"> 138 <div class="col-md-6">
135 <div class="customInputWrap"> 139 <div class="customInputWrap">
136 <div style="margin-top: 75px"> 140 <div style="margin-top: 75px">
137 <!-- <label>Date Range Filter</label> 141 <!-- <label>Date Range Filter</label>
138 <form name="myForm3"> 142 <form name="myForm3">
139 <input type="text" ng-model="rpp.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/> 143 <input type="text" ng-model="rpp.fromDate" datepicker class="form-control" placeholder="From Date" required ng-required="true" style="width: 120px; float: left; margin-right: 15px;"/>
140 <input type="text" ng-model="rpp.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;"> 144 <input type="text" ng-model="rpp.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
141 <button class="btn btn-primary" ng-disabled="myForm3.$invalid" ng-click="submitDateRpp()" style="float: left; display: none;">Apply</button> 145 <button class="btn btn-primary" ng-disabled="myForm3.$invalid" ng-click="submitDateRpp()" style="float: left; display: none;">Apply</button>
142 <button class="btn btn-primary" ng-click="submitDateRpp()" style="float: left;">Apply</button> 146 <button class="btn btn-primary" ng-click="submitDateRpp()" style="float: left;">Apply</button>
143 <div class="clearfix"></div> 147 <div class="clearfix"></div>
144 </form> --> 148 </form> -->
145 </div> 149 </div>
146 <div class="clearfix"></div> 150 <div class="clearfix"></div>
147 </div> 151 </div>
148 <div class="widget stacked"> 152 <div class="widget stacked">
149 <div class="widget-header"> 153 <div class="widget-header">
150 <i class="icon-bar-chart"></i> 154 <i class="icon-bar-chart"></i>
151 <h3>Regional PAP Pricing</h3> 155 <h3>Regional PAP Pricing</h3>
152 </div> 156 </div>
153 <!-- /widget-header --> 157 <!-- /widget-header -->
154 <div class="widget-content"> 158 <div class="widget-content">
155 <div ng-show="flag"> 159 <div ng-show="flag">
156 <center><img id="spinner" src="/img/spinner.gif"/></center> 160 <center><img id="spinner" src="/img/spinner.gif"/></center>
157 </div> 161 </div>
158 <!-- <div id="map" style="width: 100%; height: 325px;"></div> --> 162 <!-- <div id="map" style="width: 100%; height: 325px;"></div> -->
159 163
160 <!-- <div ng-hide="flag" id="regional-pap" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> --> 164 <!-- <div ng-hide="flag" id="regional-pap" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> -->
161 165
162 <div ng-hide="flag" id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> 166 <div ng-hide="flag" id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
163 </div> 167 </div>
164 <!-- /widget-content --> 168 <!-- /widget-content -->
165 </div> 169 </div>
166 <!-- /widget --> 170 <!-- /widget -->
167 </div> 171 </div>
168 <!-- /.span6 --> 172 <!-- /.span6 -->
169 </div> 173 </div>
170 </div> 174 </div>
171 <!-- /container --> 175 <!-- /container -->
172 </div> 176 </div>
173 <!-- /main --> 177 <!-- /main -->
174 <div class="customConfirmPopBackdrop" id="popup1"> 178 <div class="customConfirmPopBackdrop" id="popup1">
175 <div class="customModalInner" style="max-width: 400px;"> 179 <div class="customModalInner" style="max-width: 400px;">
176 <div class="customModelBody" style="border-radius: 5px 5px 0 0;max-height: 200px;overflow: hidden;overflow-y: auto;""> 180 <div class="customModelBody" style="border-radius: 5px 5px 0 0;max-height: 200px;overflow: hidden;overflow-y: auto;"">
177 <table border="1"> 181 <table border="1">
178 182
179 <tr> 183 <tr>
180 <th style="padding: 5px">Region</th> 184 <th style="padding: 5px">Region</th>
181 <th style="padding: 5px">Average PAP</th> 185 <th style="padding: 5px">Average PAP</th>
182 </tr> 186 </tr>
183 <tr ng-repeat="data in rppData"> 187 <tr ng-repeat="data in rppData">
184 <td style="padding: 5px"> 188 <td style="padding: 5px">
185 {{data.region}} 189 {{data.region}}
186 </td> 190 </td>
187 <td style="padding: 5px"> 191 <td style="padding: 5px">
188 {{data.averagePAP | number :4 }} 192 {{data.averagePAP | number :4 }}
189 </td> 193 </td>
190 </tr> 194 </tr>
191 </table> 195 </table>
192 </div> 196 </div>
193 <div class="customModelFooter text-right" style="border-top: 0px !important"> 197 <div class="customModelFooter text-right" style="border-top: 0px !important">
194 <button class="btn btn-primary" style="padding: 4px 0; width: 80px;" ng-click="cancelStatus()">Close</button> 198 <button class="btn btn-primary" style="padding: 4px 0; width: 80px;" ng-click="cancelStatus()">Close</button>
195 </div> 199 </div>
196 </div> 200 </div>
197 </div> 201 </div>
198 202
199 203
200 204
201 205
202 206
203 207
204 208
205 209