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
... ... @@ -383,6 +383,7 @@ angular.module('acufuel')
383 383 $scope.getCS = function() {
384 384 //var makeId = makeId;
385 385 analyticsService.getCS().then(function(result) {
  386 + console.log("===customersupports===",result)
386 387 $scope.csValues = result;
387 388 $scope.optionscs = {
388 389 chart: {
... ... @@ -418,124 +419,204 @@ angular.module('acufuel')
418 419 }
419 420  
420 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 434 $scope.getHfpChartData = function() {
425   - //var makeId = makeId;
426 435 analyticsService.gethfpChart().then(function(result) {
427   - $scope.hfpValues = result;
428   - //console.log('---kd result--',$scope.hfpValues);
429   -
430   - /*Historic Fuel Price */
431   -
432   - $scope.optionshfp = {
433   - chart: {
434   - type: 'cumulativeLineChart',
435   - height: 450,
436   - margin: {
437   - top: 40,
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
  436 + for(var i=0; i<result.length; i++) {
  437 + if(result[i].includes("JET-A Full Service") ){
  438 + let datePusha = result[i][0];
  439 + let tempValue = result[i][1].toFixed(2);
  440 + let valePusha = parseInt(tempValue);
  441 + $scope.hfpValuesOne.values.push([datePusha, valePusha])
  442 + }else if(result[i].includes("100LL Full Service") ) {
  443 + let datePushb = result[i][0];
  444 + let tempvalePushb = result[i][1].toFixed(2);
  445 + let valePushb = parseInt(tempvalePushb);
  446 + $scope.hfpValuesTwo.values.push([datePushb, valePushb])
476 447 }
477 448 }
478   - };
479   - $scope.datahfp = [{
480   - key: "Long",
481   - values: $scope.hfpValues,
482   - mean: 0
483   - }];
484   -
485   - })
  449 + $scope.hfpFinalData.push($scope.hfpValuesOne, $scope.hfpValuesTwo);
  450 + // console.log('$scope.hfpFinalData', $scope.hfpFinalData);
  451 +
  452 + var chart = nv.models.lineChart()
  453 + .x(function(d) { return d[0] })
  454 + //adjusting, 100% is 1.00, not 100 as it is in the data
  455 + .y(function(d) { return d[1]})
  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 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 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 500 $scope.fillForm = false;
497 501 var today = new Date();
498 502 var DefaultToDate = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2);
499 503 //from date format
500   - $scope.dat1 = $scope.drf.fromDate;
  504 + $scope.dat1 = $scope.hfp.fromDate;
501 505 $scope.fd1 = $scope.dat1.split("/").reverse();
502 506 $scope.tmp = $scope.fd1[2];
503 507 $scope.fd1[2] = $scope.fd1[1];
504 508 $scope.fd1[1] = $scope.tmp;
505 509 $scope.fd = $scope.fd1.join("-");
506   - analyticsService.getDRFChart($scope.fd, DefaultToDate).then(function(result) {
507   - $scope.datamfs = [];
508   - $scope.datamfs = result;
509   - })
510   -
511   - analyticsService.orderCostAndCountByDate($scope.fd, DefaultToDate).then(function(result) {
512   - $scope.ordersCost = result.cost;
513   - $scope.ordersCount = result.count;
  510 + analyticsService.getDRFHfpChart($scope.fd, DefaultToDate).then(function(result) {
  511 + // console.log("===date range===",$scope.fd,DefaultToDate)
  512 + for(var i=0; i<result.length; i++) {
  513 + if(result[i].includes("JET-A Full Service") ){
  514 + let datePusha = result[i][0];
  515 + let tempValue = result[i][1].toFixed(2);
  516 + let valePusha = parseInt(tempValue);
  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 559 $scope.fillForm = false;
517 560 //from date format
518   - $scope.dat1 = $scope.drf.fromDate;
  561 + $scope.dat1 = $scope.hfp.fromDate;
519 562 $scope.fd1 = $scope.dat1.split("/").reverse();
520 563 $scope.tmp = $scope.fd1[2];
521 564 $scope.fd1[2] = $scope.fd1[1];
522 565 $scope.fd1[1] = $scope.tmp;
523 566 $scope.fd = $scope.fd1.join("-");
524   - $scope.dat2 = $scope.drf.toDate;
  567 + //to date format
  568 + $scope.dat2 = $scope.hfp.toDate;
525 569 $scope.td1 = $scope.dat2.split("/").reverse();
526 570 $scope.tmp1 = $scope.td1[2];
527 571 $scope.td1[2] = $scope.td1[1];
528 572 $scope.td1[1] = $scope.tmp1;
529 573 $scope.td = $scope.td1.join("-");
530 574  
531   - analyticsService.getDRFChart($scope.fd, $scope.td).then(function(result) {
532   - $scope.datamfs = [];
533   - $scope.datamfs = result;
534   - })
535   -
536   - analyticsService.orderCostAndCountByDate($scope.fd, $scope.td).then(function(result) {
537   - $scope.ordersCost = result.cost;
538   - $scope.ordersCount = result.count;
  575 + analyticsService.getDRFHfpChart($scope.fd, $scope.td).then(function(result) {
  576 + //console.log("===date range22===",result);
  577 + for(var i=0; i<result.length; i++) {
  578 + if(result[i].includes("JET-A Full Service") ){
  579 + let datePusha = result[i][0];
  580 + let tempValue = result[i][1].toFixed(2);
  581 + let valePusha = parseInt(tempValue);
  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 622 } else {
... ... @@ -545,151 +626,55 @@ angular.module(&#39;acufuel&#39;)
545 626  
546 627 }
547 628  
548   - /*Date Range Filter for Historic fuel Price*/
549   - $scope.submitDateHfp = function() {
550   -
551   - if ($scope.hfp.fromDate === undefined) {
552   -
  629 +
  630 + /*Date Range Filter for Monthly fuel Sales*/
  631 + $scope.submitDate = function() {
  632 + if ($scope.drf.fromDate === undefined) {
553 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 635 $scope.fillForm = false;
556 636 var today = new Date();
557 637 var DefaultToDate = today.getFullYear() + '-' + ("0" + (today.getMonth() + 1)).slice(-2) + '-' + ("0" + today.getDate()).slice(-2);
558 638 //from date format
559   - $scope.dat1 = $scope.hfp.fromDate;
  639 + $scope.dat1 = $scope.drf.fromDate;
560 640 $scope.fd1 = $scope.dat1.split("/").reverse();
561 641 $scope.tmp = $scope.fd1[2];
562 642 $scope.fd1[2] = $scope.fd1[1];
563 643 $scope.fd1[1] = $scope.tmp;
564 644 $scope.fd = $scope.fd1.join("-");
565   - analyticsService.getDRFHfpChart($scope.fd, DefaultToDate).then(function(result) {
566   - $scope.hfpValues = result;
567   - $scope.optionshfp = {
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   - }];
  645 + analyticsService.getDRFChart($scope.fd, DefaultToDate).then(function(result) {
  646 + $scope.datamfs = [];
  647 + $scope.datamfs = result;
619 648 })
620   -
621   -
622   - } else if ($scope.hfp.fromDate != undefined && $scope.hfp.toDate != undefined) {
  649 +
  650 + analyticsService.orderCostAndCountByDate($scope.fd, DefaultToDate).then(function(result) {
  651 + $scope.ordersCost = result.cost;
  652 + $scope.ordersCount = result.count;
  653 + })
  654 + } else if ($scope.drf.fromDate != undefined && $scope.drf.toDate != undefined) {
623 655 $scope.fillForm = false;
624 656 //from date format
625   - $scope.dat1 = $scope.hfp.fromDate;
  657 + $scope.dat1 = $scope.drf.fromDate;
626 658 $scope.fd1 = $scope.dat1.split("/").reverse();
627 659 $scope.tmp = $scope.fd1[2];
628 660 $scope.fd1[2] = $scope.fd1[1];
629 661 $scope.fd1[1] = $scope.tmp;
630 662 $scope.fd = $scope.fd1.join("-");
631   - //to date format
632   - $scope.dat2 = $scope.hfp.toDate;
  663 + $scope.dat2 = $scope.drf.toDate;
633 664 $scope.td1 = $scope.dat2.split("/").reverse();
634 665 $scope.tmp1 = $scope.td1[2];
635 666 $scope.td1[2] = $scope.td1[1];
636 667 $scope.td1[1] = $scope.tmp1;
637 668 $scope.td = $scope.td1.join("-");
638 669  
639   - analyticsService.getDRFHfpChart($scope.fd, $scope.td).then(function(result) {
640   - $scope.hfpValues = result;
641   - $scope.optionshfp = {
642   - chart: {
643   - type: 'cumulativeLineChart',
644   - height: 450,
645   - margin: {
646   - top: 40,
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   - },
684   - axisLabelDistance: 5
685   - }
686   - }
687   - };
688   - $scope.datahfp = [{
689   - key: "Long",
690   - values:$scope.hfpValues,
691   - mean: 0
692   - }];
  670 + analyticsService.getDRFChart($scope.fd, $scope.td).then(function(result) {
  671 + $scope.datamfs = [];
  672 + $scope.datamfs = result;
  673 + })
  674 +
  675 + analyticsService.orderCostAndCountByDate($scope.fd, $scope.td).then(function(result) {
  676 + $scope.ordersCost = result.cost;
  677 + $scope.ordersCount = result.count;
693 678 })
694 679  
695 680 } else {
... ... @@ -699,6 +684,9 @@ angular.module(&#39;acufuel&#39;)
699 684  
700 685 }
701 686  
  687 +
  688 +
  689 +
702 690 /*Date Range Filter for Customer Sources*/
703 691 $scope.submitDateCs = function() {
704 692 if ($scope.cs.fromDate === undefined) {
... ...
app/partials/analytics/analytics.html
Diff comments   View file @bb09cc2
... ... @@ -33,6 +33,9 @@
33 33 border-color: grey;
34 34 }
35 35  
  36 + #chart svg {
  37 + height: 400px;
  38 + }
36 39 @import 'https://code.highcharts.com/css/themes/sand-signika.css';
37 40 </style>
38 41  
... ... @@ -88,9 +91,10 @@
88 91 <h3>Historic Fuel Pricing</h3>
89 92 </div>
90 93 <!-- /widget-header -->
91   - <div class="widget-content">
92   - <nvd3 options="optionshfp" data="datahfp"></nvd3>
  94 + <div class="widget-content">
  95 + <!-- <nvd3 options="optionshfp" data="datahfp"></nvd3> -->
93 96 <!-- /pie-chart -->
  97 + <div id="chart"><svg></svg></div>
94 98 </div>
95 99 <!-- /widget-content -->
96 100 </div>
... ...