{% extends "layout.html" %}
        {% block title %}
       Chennai Zone wise corona cases Stats
        {% endblock %}
        {% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="{{ url_for('static', filename='js/genericchart.js') }}"></script>
<script src="{{ url_for('static', filename='js/chennai.js') }}"></script>
<h3 class="display-4 text-center">Chennai</h3>
<div class="row align-items-center justify-content-center">
<small class="text-muted text-center">Chennai Street wise report available <a href="{{ url_for('chennaistreetwise') }}">here</a></small>
</div>
<div class="row align-items-center justify-content-center">
<p><small class="text-muted text-center">Cases as of {{formatteddate}}</small></p>
</div>


<!--Start Here-->
<div class="container">
<div class="row">
<div class="col">
<div class="table-responsive">    
 <table class="table table-sm text-center">
    <tbody>
     <tr class="bg-light pr-3">
     
        <th class="bg-primary">Active</th>
        <th class="bg-success">Recovered</th>
        <th class="bg-danger">Deceased</th>
        
      </tr>
      <tr class="">
        <td><b>{{ onlychennai_data['hospitalized'][-1] | safe | comafy}}<b></td>
        <td><b> {{onlychennai_data['recovered'][-1] | safe | comafy}} </b></div></td>
        <td><b>{{onlychennai_data['deceased'][-1] | safe | comafy}} </b> </td>
      </tr>
      </tbody>
  </table>
 </div>
  </div>
</div>
</div>

<div class="table-responsive">    
 <table class="table table-striped table-sm  text-md-center text-lg-center">
  <thead class="thead-light">
    <tr>
      <th scope="col">ZNo</th>
      <th scope="col" >ZoneName</th>
      <th scope="col">Confirm</th>
      <th scope="col">Active</th>
      <th scope="col">Cured</th>
      <th scope="col">Deaths</th>
    </tr>
  </thead>
  <tbody>
   
     {% for zones in chennaidata %}
    
      <tr>
      <td>{{zones['zoneNo']}}</td>
      <th scope="row">{{(zones['zoneName'] | capitalize) }}</th>
      <td class="text-secondary">{{zones['confirmedCases'] | comafy }}</td>
      <td class=""><b>{{zones['hospitalized'] | comafy }}</b></td>
      <td class="text-success"><b>{{zones['recovered'] | comafy }}</b></td>
      <td class="text-danger"><b>{{zones['deceased'] | comafy }}</b></td>
      </tr>
       
     {%- endfor %}
  </div>
  </tbody>


</table>
<hr>
    <canvas id="ChartChennai" width="400" height="270" ></canvas>
<hr>

    <button type="active" class="btn btn-info btn-sm" onclick="myFunction('active')">Active</button>
    <button type="recovered" class="btn btn-success btn-sm" onclick="myFunction('recovered')">Recovered</button>
    <button type="deceased" class="btn btn-danger btn-sm" onclick="myFunction('deceased')">Deceased</button>


    <canvas id="barChart" width="400" height="250"></canvas>
<hr>
    <div class="row ml-2"><small>Last 30 days Trends   
    <select id="selectNumber" onchange="functionToTriggerClick(this.value)">
            <option> {{zones_list[0] | safe}}</option>
      </select></small>
</div>
    <canvas id="LineChartSeries" width="400" height="270" ></canvas>
    
     <script>
     //      var colours =['#00429d', '#325da9', '#4e78b5', '#6694c1', '#80b1cc', '#9dced6', '#c0eade', '#ffffe0', '#ffdac4', '#ffb3a7', '#fb8a8c', '#eb6574', '#d5405e', '#b81b4a', '#93003a']

      var colours =['#00429d', '#555887', '#5c6da7', '#7484ad', '#abdfe5', '#798fa3', '#b4cec6', '#e59348', '#97e5c3', '#b8cab0', '#ceaf9d', '#db938c', '#e3767c', '#e3586f', '#cf4969','#659aa3']
      //var colours2 = ['#00429d', '#3e57a2', '#5c6da7', '#7484ad', '#8b9cb4', '#a0b5bc', '#b4cec6', '#c8e7d6', '#abdfe5', '#c9c3cc', '#daa7b2', '#e38a98', '#e56d7e', '#e25064', '#d9304a', '#cb0030']
      // get bar chart canvas
      var mychart = document.getElementById("barChart").getContext("2d");
       var myChart = new Chart(mychart,{
          type: 'bar',
          data:{ labels: {{zones_list | safe}},
          datasets: [
          { 
             label: 'No. of Active cases',data: {{active_list1}},
             backgroundColor: colours
          
            },{
              label: 'No. of Active cases',data: {{active_list}},
              backgroundColor: colours
            }
            
            ]
          },

    options: {
    
        legend: {
            display: false,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            },
        
        },title: {
            display: true,
            text: 'Last 2 days Chennai zone wise Active cases'
        },
        responsive:true,
        
        scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               gridLines: {
                  display: false
               }
            }]
       }
    }
    });

    function myFunction(flag) {
	//		var zero = Math.random() < 0.2 ? true : false;
      var datasetA;
      var datasetB;
      if (flag == 'active') {
        //  block of code to be executed if condition1 is true
         datasetA = {{active_list}}
         datasetB = {{active_list1}}
      } else if (flag == 'recovered') {
        //  block of code to be executed if the condition1 is false and condition2 is true
        datasetA = {{recovered_list}}
        datasetB = {{recovered_list1}}
      } else {
        datasetA = {{deceased_list}}
        datasetB = {{deceased_list1}}
      }
        var case_type = flag.charAt(0).toUpperCase() + flag.slice(1)
		    myChart.config.data.datasets[0].data = datasetB;
        myChart.config.data.datasets[1].data = datasetA;
        myChart.config.data.datasets[0].label = case_type + " cases"
        myChart.config.options.title.text = "Last 2 days Chennai zone wise "+ case_type +" cases"
				myChart.update();
		};

  var ListofZonedata = {{fivedaysstat | safe}}
  var select = document.getElementById("selectNumber"); 
  var ZoneSelected = select.options[select.selectedIndex].value.toUpperCase();
  var test = ListofZonedata[ZoneSelected];
  var data_Chennai = {{onlychennai_data |safe}}
  assignvalues();
  plotChartSeries();


plotChennaiChartSeries(data_Chennai)

  var options = {{zones_list | safe}}; 

for(var i = 1; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}


function functionToTriggerClick(data) {
     if(data != ''){
        test = ListofZonedata[data.toUpperCase()];
        UpdateChart(data);
        }
    }  


    </script>
<BR>
<hr>
<center>
<H3>Chennai Weather </h3>
<br>
<iframe width="650" height="450" src="https://embed.windy.com/embed2.html?lat=13.005&lon=80.323&detailLat=13.065&detailLon=80.266&width=650&height=450&zoom=11&level=surface&overlay=rain&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&metricWind=default&metricTemp=%C2%B0C&radarRange=-1" frameborder="0"></iframe>
</center>
<br>
    		<div class="alert alert-primary align-center" role="alert">
		  <small>Recovered data is subject to further verification, there could be a slight variation with the data available in here and district page,the data of this page gets updated once a day</small>
		</div>
    <p class="bg-light text-muted text-center">Stay home, stay safe</p>
     {% endblock %}