<!DOCTYPE html>
<html>
<%- include partial/head.ejs %>
  <body>
    <div class="container-fluid" id="container">
      <div class="row row-offcanvas row-offcanvas-left">
<%- include partial/stranski-menu.ejs %>
        <div class="container-fluid main col-sm-12">
          <div class="page-header">
            <h1><%= title %></h1>
          </div>
<%- include partial/iskalnik.ejs %>
          <h2>Statistike aktivnih podjetij v poslovnem registru Slovenije</h2>
          <div class="row">
            <div class="col-lg-4"><canvas id="chart-area" width="300" height="300" /></div>
            <div class="col-lg-8">
              <table class="table" id="prsporegijah">
                <thead>
                  <tr>
                    <th>Regija</th>
                    <th>Število družb</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div><!--/row-->
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#prsporegijah').DataTable({
          "ajax": {
            "url": '/api/statistike/prsporegijah',
            "cache": "true"
          },
          "columns": [
            {"data": "regija"},
            {"data": "stevilo"},
          ],
          "columnDefs": [{
            className: "dt-right", "targets": [ 1 ]
          }],
          language: {
            decimal:        ",",
            thousands:      ".",
            processing:     "Obdelava v teku...",
            search:         "Išči:",
            lengthMenu:     "Prikaži _MENU_ elementov",
            info:           "Elementi od _START_ do _END_ od skupaj _TOTAL_ elementov",
            infoEmpty:      "Ni elementov za prikaz",
            infoFiltered:   "(filtrirano od _MAX_ elementov)",
            infoPostFix:    "",
            loadingRecords: "Rezultati se nalagajo ...",
            zeroRecords:    "Noben element ne ustreza",
            emptyTable:     "Ni podatkov za prikaz",
            paginate: {
              first:      "Prva",
              previous:   "&lt;",
              next:       "&gt;",
              last:       "Zadnja"
            },
            aria: {
              sortAscending:  ": razvrsti naraščajoče",
              sortDescending: ": razvrsti padajoče"
            }
          }
        })    
        $.getJSON('/api/statistike/prsporegijahgraf', function(dataM) {
          var newDataset = {
            backgroundColor: [randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7)],
            data: dataM
          }
          config.data.datasets.push(newDataset)
          window.myPie.update();
        })
      })

      var randomColorFactor = function() {
        return Math.round(Math.random() * 255);
      };
      var randomColor = function(opacity) {
        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
      };


      var config = {
        type: 'pie',
        data: {
          datasets: [],
          labels: [
            "GORENJSKA",
            "GORIŠKA",
            "JUGOVZHODNA SLOVENIJA",
            "KOROŠKA",
            "OBALNO-KRAŠKA",
            "OSREDNJESLOVENSKA",
            "PODRAVSKA",
            "POMURSKA",
            "POSAVSKA",
            "PRIMORSKO-NOTRANJSKA",
            "SAVINJSKA",
            "ZASAVSKA"
          ]
        },
        options: {
          responsive: true
        }
      };

      window.onload = function() {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPie = new Chart(ctx, config);
      };
    </script>
<%- include partial/eof.ejs %>
  </body>
</html>
