API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 24th, 2017
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.   <title>Dashboard</title>
  7.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  8.   <link href="bootstrap/css/bootstrap-material-design.min.css" rel="stylesheet">
  9.   <link href="bootstrap/css/bootstrap-dropdown-slide.css" rel="stylesheet">
  10.   <style>
  11.   .aer-blue {
  12.     background-color: #56A1FF;
  13.   }
  14.   .aer-dark{
  15.     background-color: #429cd5;
  16.   }
  17.   .colour-success{
  18.     color: #58B447;
  19.   }
  20.   .panel-default{
  21.     font-weight: bold;
  22.   }
  23.   .panel-title{
  24.     color:#439BD5;
  25.   }
  26.   .card {
  27.     border-radius: 10px;
  28.     padding: 10px 10px;
  29.     margin: 10px 10px;
  30.     background-color: #fff;
  31.     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  32.   }
  33.   .panel-heading {
  34.     padding: 5px 5px;
  35.     border-bottom: 1px solid transparent;
  36.   }
  37.   .dropdown-menu .dropdown-item {
  38.     min-height:0rem;
  39.   }
  40.   .container{
  41.     padding:10px 5px;
  42.   }
  43.   .alignleft {
  44.     float: left;
  45.   }
  46.   .alignright {
  47.     float: right;
  48.   }
  49.   .fa-check-circle:before {
  50.     content: "\f058";
  51.     font-size: 20px;
  52.   }
  53.   .col-md-4{
  54.     padding:5px 10px;
  55.   }
  56.   .alerts-panel{
  57.     overflow-x:hidden;
  58.     overflow-y:auto;
  59.     word-wrap: break-word;
  60.     padding:0px;
  61.     height:200px;
  62.   }
  63.   </style>
  64. </head>
  65. <body>
  66.   <nav class="navbar navbar-expand-lg navbar-dark aer-blue">
  67.   <a class="navbar-brand" href="#">
  68.     <img class="d-inline-block align-top" src="/images/logo.png" width=115 height=30>
  69.   </a>
  70.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  71.     <span class="navbar-toggler-icon"></span>
  72.   </button>
  73.   <div class="collapse navbar-collapse" id="navbarSupportedContent">
  74.     <ul class="navbar-nav mr-auto">
  75.       <li class="nav-item active">
  76.         <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
  77.       </li>
  78.       <li class="nav-item">
  79.         <a class="nav-link" href="#">Devices</a>
  80.       </li>
  81.       <li class="nav-item">
  82.         <a class="nav-link" href="#">Reports</a>
  83.       </li>
  84.       <li class="nav-item dropdown">
  85.         <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Quicklinks</a>
  86.           <ul class="dropdown-menu">
  87.             <div class="float:left">
  88.               <h6 class="dropdown-header">Manage devices</h6>
  89.                 <a class="dropdown-item" href="#">Provision avaliable devices</a>
  90.               <a class="dropdown-item" href="#">Troubleshoot devices</a>
  91.               <a class="dropdown-item" href="#">Setup MyAlerts</a>
  92.               <h6 class="dropdown-header">Analytics</h6>
  93.                 <a class="dropdown-item" href="#">View billing</a>
  94.               <a class="dropdown-item" href="#">View usage</a>
  95.               <a class="dropdown-item" href="#">View tower map</a>
  96.               <h6 class="dropdown-header">Develop applications</h6>
  97.                 <a class="dropdown-item" href="#">Aeris IoT Data Management</a>
  98.             </div>
  99.             <div class="float:left; position:relative; left=80px">
  100.               <h6 class="dropdown-header">Administer account</h6>
  101.                 <a class="dropdown-item" href="#">View current account details</a>
  102.               <a class="dropdown-item" href="#">Manage accounts</a>
  103.               <a class="dropdown-item" href="#">Manage API key</a>
  104.           </div>
  105.         </ul>
  106.       </li>
  107.     </ul>
  108.   </nav>
  109.   <div class="container">
  110.     <div class="row">
  111.       <div class="col-md-4"style="min-width:400px">
  112.         <div class="card" style="min-height:100%;min-width:100%">
  113.           <div class="panel-default panel-title panel-heading">
  114.             <div class="panel-heading panel-default">Devices in use (<span id="device_text"></span>)</div>
  115.           </div>
  116.           <div class="container">
  117.             <canvas id="donutchart"></canvas>
  118.           </div>
  119.         </div>
  120.       </div>
  121.       <div class="col-md-4" style="min-width:400px">
  122.         <div class="card" style="min-height:100%;min-width:100%">
  123.           <div class="panel-default panel-title panel-heading">
  124.             <div class="panel-heading panel-default">Service status</div>
  125.           </div>
  126.           <div class="container">
  127.             <div class="row">
  128.               <div class="col-md-6" style="max-width:50%; min-height:30px">Aeris VPN</div><div class="col-md-6"style="max-width:50%"><span class="float-right"><i class="fa fa-check-circle colour-success"></i></span></div>
  129.               <div class="col-md-6" style="max-width:50%; min-height:30px">Data</div><div class="col-md-6"style="max-width:50%"><span class="float-right"><i class="fa fa-check-circle colour-success"></i></span></div>
  130.               <div class="col-md-6" style="max-width:50%; min-height:30px">Voice</div><div class="col-md-6"style="max-width:50%"><span class="float-right"><i class="fa fa-check-circle colour-success"></i></span></div>
  131.               <div class="col-md-6" style="max-width:50%; min-height:30px">SMS</div><div class="col-md-6"style="max-width:50%"><span class="float-right"><i class="fa fa-check-circle colour-success"></i></span></div>
  132.               <div class="col-md-6" style="max-width:50%; min-height:30px">Portal</div><div class="col-md-6"style="max-width:50%"><span class="float-right"><i class="fa fa-check-circle colour-success"></i></span></div>
  133.               <div class="col-md-6" style="max-width:50%; min-height:30px">API's</div><div class="col-md-6"style="max-width:50%"><span class="float-right"><i class="fa fa-check-circle colour-success"></i></span></div>
  134.             </div>
  135.           </div>
  136.         </div>
  137.       </div>
  138.       <div class="col-md-4"style="min-width:400px">
  139.         <div class="card" style="min-height:100%;min-width:100%">
  140.           <div class="panel-default panel-title panel-heading">
  141.             <div class="panel-heading panel-default">MyAlerts</div>
  142.           </div>
  143.           <div class="container">
  144.             <div class="panel-body alerts-panel">
  145.                 <a href="#" class="list-group-item list-group-item-action">Alert 1</a>
  146.                 <a href="#" class="list-group-item list-group-item-action">Alert 2</a>
  147.                 <a href="#" class="list-group-item list-group-item-action">Alert 3</a>
  148.                 <a href="#" class="list-group-item list-group-item-action">Alert 4</a>
  149.                 <a href="#" class="list-group-item list-group-item-action">Alert 5</a>
  150.             </div>
  151.           </div>
  152.         </div>
  153.       </div>
  154.     </div>
  155.   </div>
  156. <div class="card" style="max-width:auto">
  157.   <div class="panel-default panel-title panel-heading">
  158.     <div class="panel-heading panel-default">Usage trends</div>
  159.   </div>
  160.   <div class="container">
  161.     <div class="row">
  162.         <div class="col-xs-6" style="min-width:50%">
  163.           <canvas id="usage_chart"></canvas>
  164.         </div>
  165.         <div class="col-xs-6" style="min-width:50%">
  166.           <canvas id="usage_chart2"></canvas>
  167.         </div>
  168.     </div>
  169.   </div>
  170. </div>
  171. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  172. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
  173. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
  174. <script src="bootstrap/js/bootstrap.min.js"></script>
  175. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  176. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  177. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  178. <script>
  179.   function add(a, b) {
  180.     return a + b;
  181.   }
  182.   function getdate(days_ago){
  183.     var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
  184.     var d = new Date();
  185.     d.setDate(d.getDate()-days_ago);
  186.     return monthNames[d.getMonth()].toString().substring(0,3)+" "+d.getDate().toString();
  187.   }
  188.   //devices[Provisioned,Billed,Suspended]
  189.   var devices=[341, 523, 9];
  190.   var labels = ["Provisioned ("+devices[0]+")","Billed ("+devices[1]+")","Suspended ("+devices[2]+")"];
  191.   var sum = devices.reduce(add,0);
  192.   document.getElementById('device_text').textContent=sum;
  193.   var device_chart = new Chart(document.getElementById("donutchart"), {
  194.       type: 'doughnut',
  195.       data: {
  196.         labels: labels,
  197.         datasets:[{
  198.           data: devices,
  199.           backgroundColor: [
  200.                   'rgba(250, 212, 7, 1)',
  201.                   'rgba(66, 156, 213, 1)',
  202.                   'rgba(237, 72, 71, 1)'
  203.           ]
  204.         }]
  205.       },
  206.     options:{
  207.       tooltips:{
  208.         mode: 'label',
  209.         callbacks:{
  210.           label:function(tooltipItem, data){
  211.             return data.labels[tooltipItem.index]+" ~"+((devices[tooltipItem.index]/sum)*100).toFixed(1)+"%";
  212.           }
  213.         }
  214.       },
  215.       legend:{
  216.         position:'right'
  217.       },
  218.       animation:{
  219.         duration:1000,
  220.         easing:'easeInOutCirc'
  221.       }
  222.     }
  223.   });
  224.   var usagegraph = new Chart(document.getElementById("usage_chart"), {
  225.       type: 'bar',
  226.       data: {
  227.         labels: [getdate(5),getdate(4),getdate(3),getdate(2),getdate(1)],
  228.         datasets:[{
  229.           label:'Data usage KB',
  230.           data: [42306.25,75748.66,25633.06,39905.6,44925.7],
  231.           backgroundColor: [
  232.                   'rgba(66, 156, 213, 1)',
  233.                   'rgba(66, 156, 213, 1)',
  234.                   'rgba(66, 156, 213, 1)',
  235.                   'rgba(66, 156, 213, 1)',
  236.                   'rgba(66, 156, 213, 1)'
  237.           ]
  238.         }]
  239.       },
  240.     options:{
  241.       animation:{
  242.         duration:1000,
  243.         easing:'easeInOutCirc'
  244.       },
  245.       legend:{
  246.         display:false
  247.       },
  248.       tooltips:{
  249.         mode: 'label',
  250.         callbacks:{
  251.           label:function(tooltipItem, data){
  252.             return tooltipItem.yLabel+"KB";
  253.           }
  254.         }
  255.       },
  256.       scales: {
  257.             yAxes: [{
  258.                 ticks: {
  259.                     beginAtZero:true
  260.                 }
  261.             }]
  262.         }
  263.     }
  264.   });
  265. </script>
  266. </body>
  267. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!