index.edge

@layout('layouts.main')

@section('content')
<div class="columns">
  <div class="column">
    <div class="tile is-parent has-text-centered">
      <article class="tile is-child box">
        <p class="title">{{numThemes}}</p>
        <p class="subtitle">Themes</p>
      </article>
    </div>
  </div>
  <div class="column">
    <div class="tile is-parent has-text-centered">
      <article class="tile is-child box">
        <p class="title">{{numElements}}</p>
        <p class="subtitle">Elements</p>
      </article>
    </div>
  </div>
</div>
<div class="columns">
  <div class="column">
    <div class="tile is-parent has-text-centered">
      <article class="tile is-child box">
        <p class="title" id="active-submissions"></p>
        <p class="subtitle">Active Submissions</p>
      </article>
    </div>
  </div>
</div>
<div class="columns">
  <div class="column">
    <div class="tile is-parent has-text-centered">
      <article class="tile is-child box">
        <canvas id="myChart"></canvas>
        <p class="subtitle">Submission Status</p>
      </article>
    </div>
  </div>
</div>
<div class="columns">
  <div class="column">
    <div class="tile is-parent has-text-centered">
      <article class="tile is-child box">
        <p class="title">{{stewards.length}}</p>
        <p class="subtitle">Stewards</p>
      </article>
    </div>
  </div>
  <div class="column">
    <div class="tile is-parent has-text-centered">
      <article class="tile is-child box">
        <canvas id="myChart2"></canvas>
        <p class="subtitle">Stewards by Org Type</p>
      </article>
    </div>
  </div>
</div>

@section('scripts')
<script>
  var submissions = {{{ toJSON(submissions) }}}
  var stewards = {{{ toJSON(stewards) }}}
  var steward_types = {}
  stewards.forEach((s) => {
    if(steward_types[s.contact.organization.type.type]) {
      steward_types[s.contact.organization.type.type] += 1
    } else {
      steward_types[s.contact.organization.type.type] = 1
    }
  })
  console.log(steward_types)
  // number non completed submissions
  var pending = submissions.filter(s => s.status.status !== 'Completed')
  document.querySelector('#active-submissions').innerHTML = pending.length
  var type_count = {}
  submissions.forEach((s,i) => {
    if(s.status.status == 'Completed') return
    if(type_count[s.status.status]) {
      type_count[s.status.status] += 1
    } else {
      type_count[s.status.status] = 1
    }
  })

  var ctx = document.getElementById('myChart').getContext('2d');
  var myDoughnutChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        datasets: [{
          data: Object.values(type_count),
          backgroundColor: ['#FFA809', '#5CB85C', '#D9534F']
        }],
        labels: Object.keys(type_count)
      }
   });

  var ctx = document.getElementById('myChart2').getContext('2d');
  var myDoughnutChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        datasets: [{
          data: Object.values(steward_types),
          backgroundColor: ['#FFA809', '#5CB85C', '#D9534F']
        }],
        labels: Object.keys(steward_types)
      }
   });
</script>
@endsection

@endsection