Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <link href="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.css" rel="stylesheet" />
  2. <div class="row">
  3.     <div class="col-sm-3 flex-column d-flex stretch-card">
  4.         <div class="row flex-grow">
  5.             <div class="col-sm-12 grid-margin stretch-card">
  6.                 <div class="card">
  7.                     <div class="card-body">
  8.                         <h4 class="card-title">Kasus Per Provinsi</h4>
  9.                         <div class="row">
  10.                             <div class="col-sm-12">
  11.                                 <div class="table-responsive">
  12.                                     <table class="table table-hover table-sm table-provinsi">
  13.                                         <thead>
  14.                                             <tr>
  15.                                                 <th rowspan="2">Provinsi</th>
  16.                                                 <th colspan="3" style="text-align: center !important;">Jumlah (Orang)</th>
  17.                                                 <th colspan="3" style="text-align: center !important;">Persentase (%)</th>
  18.                                             </tr>
  19.                                             <tr>
  20.                                                 <th style="width: 10px;text-align: center !important;">Positif</th>
  21.                                                 <th style="width: 10px;text-align: center !important;">Sembuh</th>
  22.                                                 <th style="width: 10px;text-align: center !important;">Meninggal</th>
  23.  
  24.                                                 <th style="width: 10px;text-align: center !important;">Positif</th>
  25.                                                 <th style="width: 10px;text-align: center !important;">Sembuh</th>
  26.                                                 <th style="width: 10px;text-align: center !important;">Meninggal</th>
  27.                                             </tr>
  28.                                         </thead>
  29.                                         <tfoot>
  30.                                             <tr>
  31.                                                 <th colspan="7">Provinsi</th>
  32.                                             </tr>
  33.                                         </tfoot>
  34.                                         <tbody></tbody>
  35.                                     </table>
  36.                                 </div>
  37.                                 <!-- <canvas id="chart-per-wilayah" style="display: block; height: 580px;"></canvas> -->
  38.                             </div>
  39.                         </div>
  40.                     </div>
  41.                 </div>
  42.             </div>
  43.         </div>
  44.     </div>
  45.  
  46.     <div class="col-lg-6 grid-margin stretch-card">
  47.         <div class="card">
  48.             <div class="card-body">
  49.                 <div class="row">
  50.                     <div class="col-lg-12">
  51.                         <div class="row">
  52.                             <div class="col-sm-12">
  53.                                 <div class="row" style="padding: 0px 15px;">
  54.                                     <div style="padding: 0px;" class="col-sm-3 grid-margin ">
  55.                                         <div class="card card-solid bg-primary">
  56.                                             <div class="card-body text-white slim-widget">
  57.                                                 <h3 class="font-weight-bold mb-1">
  58.                                                     <span class="total-data"><?= number_format($last_info['Jumlah_Kasus_Kumulatif'], 0, '.', ','); ?></span> (+<?= number_format($last_info['Jumlah_Kasus_Baru_per_Hari'], 0, '.', ','); ?>)
  59.                                                 </h3>
  60.                                                 <div class="progress mb-2">
  61.                                                     <div class="progress-bar bg-dark" role="progressbar" style="width: <?= number_format($avg, 0, '.', ',') . '%'; ?>" aria-valuenow="<?= number_format($avg, 0, '.', ','); ?>" aria-valuemin="0" aria-valuemax="100"></div>
  62.                                                 </div>
  63.                                                 <p class="pb-0 mb-0">Terkonfirmasi</p>
  64.                                             </div>
  65.                                         </div>
  66.                                     </div>
  67.                                     <div style="padding: 0px;" class="col-sm-3 grid-margin ">
  68.                                         <div class="card card-solid bg-warning">
  69.                                             <div class="card-body text-white slim-widget">
  70.                                                 <h3 class="font-weight-bold mb-1">
  71.                                                     <span class="total-perawatan"><?= number_format($last_info['Jumlah_pasien_dalam_perawatan'], 0, '.', ','); ?></span> (<?= number_format($last_info['Persentase_Pasien_dalam_Perawatan'], 2, '.', ','); ?>%)
  72.                                                 </h3>
  73.                                                 <div class="progress mb-2">
  74.                                                     <div class="progress-bar bg-dark" role="progressbar" style="width: <?= number_format($last_info['Persentase_Pasien_dalam_Perawatan'], 0, '.', ',') . '%'; ?>" aria-valuenow="<?= number_format($last_info['Persentase_Pasien_dalam_Perawatan'], 0, '.', ','); ?>" aria-valuemin="0" aria-valuemax="100"></div>
  75.                                                 </div>
  76.                                                 <p class="pb-0 mb-0">Perawatan</p>
  77.                                             </div>
  78.                                         </div>
  79.                                     </div>
  80.                                     <div style="padding: 0px;" class="col-sm-3 grid-margin ">
  81.                                         <div class="card card-solid bg-success">
  82.                                             <div class="card-body text-white slim-widget">
  83.                                                 <h3 class="font-weight-bold mb-1">
  84.                                                     <span class="total-sembuh"><?= number_format($last_info['Jumlah_Pasien_Sembuh'], 0, '.', ','); ?></span> (<?= number_format($last_info['Persentase_Pasien_Sembuh'], 2, '.', ','); ?>%)
  85.                                                 </h3>
  86.                                                 <div class="progress mb-2">
  87.                                                     <div class="progress-bar bg-dark" role="progressbar" style="width: <?= number_format($last_info['Persentase_Pasien_Sembuh'], 0, '.', ',') . '%'; ?>" aria-valuenow="<?= number_format($last_info['Persentase_Pasien_Sembuh'], 0, '.', ','); ?>" aria-valuemin="0" aria-valuemax="100"></div>
  88.                                                 </div>
  89.                                                 <p class="pb-0 mb-0">Sembuh</p>
  90.                                             </div>
  91.                                         </div>
  92.                                     </div>
  93.                                     <div style="padding: 0px;" class="col-sm-3 grid-margin ">
  94.                                         <div class="card card-solid bg-danger">
  95.                                             <div class="card-body text-white slim-widget">
  96.                                                 <h3 class="font-weight-bold mb-1">
  97.                                                     <span class="total-meninggal"><?= number_format($last_info['Jumlah_Pasien_Meninggal'], 0, '.', ','); ?></span> (<?= number_format($last_info['Persentase_Pasien_Meninggal'], 2, '.', ','); ?>%)
  98.                                                 </h3>
  99.                                                 <div class="progress mb-2">
  100.                                                     <div class="progress-bar bg-dark" role="progressbar" style="width: <?= number_format($last_info['Persentase_Pasien_Meninggal'], 0, '.', ',') . '%'; ?>" aria-valuenow="<?= number_format($last_info['Persentase_Pasien_Meninggal'], 0, '.', ','); ?>" aria-valuemin="0" aria-valuemax="100"></div>
  101.                                                 </div>
  102.                                                 <p class="pb-0 mb-0">Meninggal</p>
  103.                                             </div>
  104.                                         </div>
  105.                                     </div>
  106.                                 </div>
  107.                             </div>
  108.                             <div class="col-sm-12">
  109.                                 <div id="mapid" style="height: 400px;"></div>
  110.                                 <table>
  111.                                     <tr>
  112.                                         <td>
  113.                                             Sumber Data : <a href="https://bnpb-inacovid19.hub.arcgis.com/datasets/covid19-indonesia-per-provinsi/geoservice">bnpb-inacovid19.hub.arcgis.com</a>
  114.                                         </td>
  115.                                     </tr>
  116.                                 </table>
  117.                             </div>
  118.                             <div class="col-sm-12">
  119.                                 <small>
  120.                                     Catatan:
  121.                                     <br>
  122.                                     1. Titik lokasi yang ditunjukkan pada peta didasarkan pada centroid geografis dan mewakili kasus terkonfirmasi COVID-19 pada tingkat provinsi, serta tidak mewakili alamat tertentu, bangunan, atau lokasi apa pun.
  123.                                     <br>
  124.                                     2. Terdapat <strong class="unknown-case"></strong> kasus terkonfirmasi yang masih dalam investigasi di lapangan, oleh karena itu belum terpetakan di atas peta untuk lokasi provinsi kasusnya.
  125.                                 </small>
  126.                             </div>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.             </div>
  131.         </div>
  132.     </div>
  133.  
  134.     <div class="col-sm-3 flex-column d-flex stretch-card">
  135.         <div class="row flex-grow">
  136.             <div class="col-sm-12 grid-margin stretch-card">
  137.                 <div class="card">
  138.                     <div class="card-body">
  139.                         <div class="row">
  140.                             <div class="col-sm-12 mt-4 mt-lg-0">
  141.                                 <div class="bg-primary text-white px-4 py-4 card">
  142.                                     <div class="row">
  143.                                         <div class="col-sm-6 text-center ">
  144.                                             <h3 class="avg-value-recover">0</h3>
  145.                                             <small class="mb-0 avg-label-recover">Rata-Rata Pasien Sembuh</small>
  146.                                         </div>
  147.                                         <div class="col-sm-6 text-center ">
  148.                                             <h3 class="avg-value-death">0</h3>
  149.                                             <small class="mb-0 avg-label-death">Rata-Rata Pasien Meninggal</small>
  150.                                         </div>
  151.                                     </div>
  152.                                 </div>
  153.                             </div>
  154.                         </div>
  155.  
  156.                         <div class="row mt-md-1">
  157.                             <div class="col-sm-6">
  158.                                 <div class="d-flex purchase-detail-legend align-items-center">
  159.                                     <canvas id="chart-top-recover" style="display: block; height: 200px;"></canvas>
  160.                                 </div>
  161.                             </div>
  162.                             <div class="col-sm-6">
  163.                                 <div class="d-flex purchase-detail-legend align-items-center">
  164.                                     <canvas id="chart-top-death" style="display: block; height: 200px;"></canvas>
  165.                                 </div>
  166.                             </div>
  167.                             <div class="col-sm-12 pt-3 ">
  168.                                 <div class="d-flex purchase-detail-legend align-items-center">
  169.                                     <canvas id="chart-death-recover" style="display: block; height: 260px;"></canvas>
  170.                                 </div>
  171.                             </div>
  172.                         </div>
  173.                     </div>
  174.                 </div>
  175.             </div>
  176.         </div>
  177.     </div>
  178. </div>
  179. <div class="row">
  180.     <div class="col-sm-3 flex-column d-flex stretch-card">
  181.         <div class="row flex-grow">
  182.             <div class="col-sm-12 stretch-card">
  183.                 <div class="card">
  184.                     <div class="card-body slim-widget">
  185.                         <div class="row">
  186.                             <div class="col-sm-12">
  187.                                 <canvas id="chart-history-cases" style="display: block; height: 200px;"></canvas>
  188.                             </div>
  189.                         </div>
  190.                     </div>
  191.                 </div>
  192.             </div>
  193.         </div>
  194.     </div>
  195.     <div class="col-sm-3 flex-column d-flex stretch-card">
  196.         <div class="row flex-grow">
  197.             <div class="col-sm-12 stretch-card">
  198.                 <div class="card">
  199.                     <div class="card-body slim-widget">
  200.                         <div class="row">
  201.                             <div class="col-sm-12">
  202.                                 <canvas id="chart-history-active" style="display: block; height: 200px;"></canvas>
  203.                             </div>
  204.                         </div>
  205.                     </div>
  206.                 </div>
  207.             </div>
  208.         </div>
  209.     </div>
  210.     <div class="col-sm-3 flex-column d-flex stretch-card">
  211.         <div class="row flex-grow">
  212.             <div class="col-sm-12 stretch-card">
  213.                 <div class="card">
  214.                     <div class="card-body slim-widget">
  215.                         <div class="row">
  216.                             <div class="col-sm-12">
  217.                                 <canvas id="chart-history-recover" style="display: block; height: 200px;"></canvas>
  218.                             </div>
  219.                         </div>
  220.                     </div>
  221.                 </div>
  222.             </div>
  223.         </div>
  224.     </div>
  225.     <div class="col-sm-3 flex-column d-flex stretch-card">
  226.         <div class="row flex-grow">
  227.             <div class="col-sm-12 stretch-card">
  228.                 <div class="card">
  229.                     <div class="card-body slim-widget">
  230.                         <div class="row">
  231.                             <div class="col-sm-12">
  232.                                 <canvas id="chart-history-death" style="display: block; height: 200px;"></canvas>
  233.                             </div>
  234.                         </div>
  235.                     </div>
  236.                 </div>
  237.             </div>
  238.         </div>
  239.     </div>
  240. </div>
  241. <!-- chartjs -->
  242. <script src="<?= base_url('plugins/chartjs/Chart.bundle.js'); ?>" type="text/javascript"></script>
  243. <script src="<?= base_url('plugins/chartjs/utils.js'); ?>" type="text/javascript"></script>
  244.  
  245. <script src="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js"></script>
  246. <script src="<?= base_url('kapella/js/home.js'); ?>" type="text/javascript"></script>