analytics.html 7.94 KB
<style>
   .chart-holder {
   height: 325px;
   }
   .cirque-stats {
   text-align: center;
   }
   .cirque-stats .cirque-container {   
   margin-top: 1.5em;
   margin-bottom: 1.5em;   
   margin-right: 2em;
   margin-left: 2em;
   }
   .subnavbar .mainnav > li:nth-child(6) > a{
   color: #ca5c6a;
   }
   .table {
   border-collapse: separate;
   padding: 0px;
    
   }

   .highcharts-button-box{
    display: none;
   }
   
   .highcharts-button-symbol{
    display: none;
   }
   
   .highcharts-map-navigation{
    background-color: #eee;
    border-color: grey;
   }
    
  #chart svg {
  height: 400px;
  }  
@import 'https://code.highcharts.com/css/themes/sand-signika.css';   
</style>

<div class="main">
  <div style="padding: 0 3%; margin-left: 15px;">
    <div class="row">
      <div class="col-md-6">
        <div class="customInputWrap">
          <div style="margin-left: 0px;">
             <label>Date Range Filter</label>
             <form name="myForm">
	              <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;"/>
	              <input type="text" ng-model="drf.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
	                <button class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="submitDate()" style="float: left; display: none;">Apply</button>
	                <button class="btn btn-primary" ng-click="submitDate()" style="float: left;">Apply</button>
	                <div class="clearfix"></div>
              </form>
           </div>
            <div class="clearfix"></div>
       </div>
          <div class="widget stacked">
            <div class="widget-header">
              <i class="icon-bar-chart"></i>
              <h3>${{ordersCost | number :2}}/{{ordersCount}} Fuel Sales</h3>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
              <nvd3 options="optionsmfs" data="datamfs"></nvd3>
              <!-- /bar-chart -->
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
        </div>
        <!-- /.span6 -->
        <div class="col-md-6">
          <div class="customInputWrap">
            <div style="margin-left: 0px;">
              <label>Date Range Filter</label>
              <form name="myForm1">
                <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;"/>
                <input type="text" ng-model="hfp.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
                  <button class="btn btn-primary" ng-disabled="myForm1.$invalid" ng-click="submitDateHfp()" style="float: left; display: none;">Apply</button>
                  <button class="btn btn-primary" ng-click="submitDateHfp()" style="float: left;">Apply</button>
                  <div class="clearfix"></div>
                </form>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="widget stacked">
              <div class="widget-header">
                <i class="icon-bar-chart"></i>
                <h3>Historic Fuel Pricing</h3>
              </div>
              <!-- /widget-header -->
               <div class="widget-content">
              <!--  <nvd3 options="optionshfp" data="datahfp"></nvd3> -->
                <!-- /pie-chart -->
                <div id="chart"><svg></svg></div>
              </div>
              <!-- /widget-content -->
            </div>
            <!-- /widget -->
          </div>
          <!-- /span6 -->
        </div>
        <div class="row"></div>
        <div class="row">
          <div class="col-md-6">
            <div class="customInputWrap">
              <div style="margin-left: 0px;">
                <label>Date Range Filter</label>
                <form name="myForm2">
                  <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;"/>
                  <input type="text" ng-model="cs.toDate" datepicker class="form-control" placeholder="To Date" style="width: 120px; float: left; margin-right: 15px;">
                    <button class="btn btn-primary" ng-disabled="myForm2.$invalid" ng-click="submitDateCs()" style="float: left; display: none;">Apply</button>
                    <button class="btn btn-primary" ng-click="submitDateCs()" style="float: left;">Apply</button>
                    <div class="clearfix"></div>
                  </form>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="widget stacked customersource">
                <div class="widget-header">
                  <i class="icon-bar-chart"></i>
                  <h3>Customer Sources</h3>
                </div>
                <!-- /widget-header -->
                <div class="widget-content">
                  <div style="margin-left: -15px;">
                    <nvd3 options="optionscs" class="custom-graph" data="datacs"></nvd3>
                  </div>
                  <!-- /pie-chart -->
                </div>
                <!-- /widget-content -->
              </div>
              <!-- /widget -->
            </div>
            <!-- /span6 -->
            <div class="col-md-6">
               <div class="customInputWrap">
                <div class="clearfix"></div>
                </div> 
                <div class="widget stacked">
                  <div class="widget-header">
                    <i class="icon-bar-chart"></i>
                    <h3>Regional PAP Pricing</h3>
                  </div>
                  <!-- /widget-header -->
                  <div class="widget-content">
                    <div ng-show="flag">
                     <center><img id="spinner" src="/img/spinner.gif"/></center>  
                    </div>

                    <div ng-hide="flag" id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
                  </div>
                  <!-- /widget-content -->
                </div>
                <!-- /widget -->
              </div>
              <!-- /.span6 -->
            </div>
          </div>
          <!-- /container -->
          </div>
        <!-- /main -->
              <div class="customConfirmPopBackdrop" id="popup1">
               <div class="customModalInner" style="max-width: 400px;">
                  <div class="customModelBody" style="border-radius: 5px 5px 0 0;max-height: 200px;overflow: hidden;overflow-y: auto;"">
                     <table border="1">
                        
                          <tr>
                           <th style="padding: 5px">Region</th> 
                           <th style="padding: 5px">Average PAP</th> 
                          </tr>
                          <tr ng-repeat="data in rppData">
                           <td style="padding: 5px">
                            {{data.region}}
                           </td>
                           <td style="padding: 5px">
                            {{data.averagePAP | number :4 }}
                           </td>
                        </tr>
                     </table>
                  </div>
                  <div class="customModelFooter text-right" style="border-top: 0px !important">
                     <button class="btn btn-primary" style="padding: 4px 0; width: 80px;" ng-click="cancelStatus()">Close</button>
                  </div>
               </div>
            </div>