
{% include 'base/test_nav_emp.html' %}

<style>
.flx{

    width:84rem;
    height:20rem;
    padding-right:1rem;
    padding-left:1rem;
    
   
}
.wid{
    height:450px;
    width:600px;
   
}
.pad{
  padding:1rem;
  

}



.bglocal-primary{background:#17a2b8;}
.bglocalbar-primary{background:#1592a5;}

.bglocal-success{background:#28a745}
.bglocalbar-success{background:#24963e;}

.bglocalbar-warning{background:#ffc107;}
.bglocal-warning{background:#e5ad06;}

.bglocalbar-danger{background:#dc3545;}
.bglocal-danger{background:#c6303e;}

.tab-pane {
    "display: block; box-sizing: border-box; height: 400px; width: 800px;"
}
</style>

{% if obj_help %}
<div class="row  ">
    <div class="col-lg-3 col-6 ">

    {% comment %} <div class="padd"> {% endcomment %}
     <div class="card flx mt-3">
        <div class="card-header p-3 bglocalbar-primary">
            <h5><b>{{obj_help.heading}}</b></h5>
        </div>
        <div class="card-body bglocal-primary">
          {% comment %} <h6 class="card-title"></h6> {% endcomment %}
          <h2>14</h2>
        </div>
      </div>
    </div>

</div>

{% endif %} 


  <center><h3 class="mt-4"><b>Last 7 days Activity</b></h3> </center> 
  <div class="pad">
<nav>
    <div class="nav nav-tabs mb-3 mt-2 " id="nav-tab" role="tablist">
      <button class="nav-link active " id="nav-patient-tab" data-bs-toggle="tab" data-bs-target="#nav-patient" type="button" role="tab" aria-controls="nav-patient" aria-selected="true"><i class="fa-solid fa-pie-chart"></i > Disease</button>

      <button class="nav-link" id="nav-labreport-tab" data-bs-toggle="tab" data-bs-target="#nav-labreport" type="button" role="tab" aria-controls="nav-labreport" aria-selected="false"><i class="fa-solid fa-person"></i> Age Group</button>  

      {% comment %} <button class="nav-link" id="nav-report-tab" data-bs-toggle="tab" data-bs-target="#nav-report" type="button" role="tab" aria-controls="nav-report" aria-selected="false"><i class="fa-solid fa-file  flask"></i> Reports</button> {% endcomment %}
      <button class="nav-link" id="nav-treatment-tab" data-bs-toggle="tab" data-bs-target="#nav-treatment" type="button" role="tab" aria-controls="nav-treatment" aria-selected="false"><i class="fa-solid fa-bed"></i> Treatments</button>
    </div>
  </nav>
    <div class="tab-content " id="nav-tabContent">
        <div class="tab-pane fade show active wid " id="nav-patient" role="tabpanel" aria-labelledby="nav-patient-tab">
            <h3>Disease by Number of patients</h3>
            <canvas id="revenue-chart-canvas" ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-labreport" role="tabpanel" aria-labelledby="nav-labreport-tab" style="position: relative; height: 500px;">
            <h3>Disease by Age Category - Radar Chart</h3>
            <canvas id="radar-chart"  ></canvas>
        </div>

        <div class="tab-pane fade" id="nav-treatment" role="tabpanel" aria-labelledby="nav-treatment-tab" style="position: relative; height: 500px;">
            <canvas id="sales-chart-canvas3" ></canvas>
        </div>
    </div>

  </div>







<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  {% comment %} "list_total_labels": ["SURAM", "IRUMAL ", "IRAIPPU ", "ILAIPPU ", "GUNMAM ", "SOBAI "], "list_total_totals": [5, 15, 2, 10, 4, 4] {% endcomment %}


<script>
  const ch_bar = document.getElementById('revenue-chart-canvas');
  const ch_call = document.getElementById('radar-chart');
  new Chart(ch_bar, {
    type: 'doughnut',
    data: {
      labels: ["SURAM", "IRUMAL", "IRAIPPU", "ILAIPPU", "GUNMAM", "SOBAI"],
      datasets: [{
        label: 'Total Patients',
        data:  [5, 15, 2, 10, 4, 4],
        //backgroundColor: ["rgba(255, 159, 64, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(75, 192, 192, 0.2)"],
        //borderColor: ["rgba(255, 159, 64)", "rgba(153, 102, 255)", "rgba(75, 192, 192)", "rgba(75, 192, 192)", "rgba(153, 102, 255)", "rgba(75, 192, 192)"],
        //backgroundColor: ["rgba(255, 159, 64)", "rgba(153, 102, 255)", "rgba(75, 192, 192)", "rgba(75, 192, 192)", "rgba(153, 102, 255)", "rgba(75, 192, 192)"],
        borderWidth: 1,
      }]
    },


  });


  const radar_data = {
    labels: [
      'Eating',
      'Drinking',
      'Sleeping',
      'Designing',
      'Coding',
      'Cycling',
      'Running'
    ],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 90, 81, 56, 55, 40],
      fill: true,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',
      pointBackgroundColor: 'rgb(255, 99, 132)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(255, 99, 132)'
    }, {
      label: 'My Second Dataset',
      data: [28, 48, 40, 19, 96, 27, 100],
      fill: true,
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgb(54, 162, 235)',
      pointBackgroundColor: 'rgb(54, 162, 235)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(54, 162, 235)'
    }]
  };
  new Chart(ch_call,{
    type: 'radar',
    data: radar_data,
    options: {
      elements: {
        line: {
          borderWidth: 3
        }
      }
    },
  });
  {% comment %} new Chart(ch_call, {
    type: 'bar',
    data: {
      labels: {{sitedata.data_chart.colbl1|safe}} ,//['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: 'Top 10 sales amount ₹',
        data: {{sitedata.data_chart.coval1|safe}} , //[12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: { 
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  }); {% endcomment %}


</script>


