{% extends "base_site.html" %}

{% block title %} Dashboard 1 {% endblock title %}

{% block stylesheets %}
  {{ super() }}
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">
    <!-- top tiles -->
    <div class="row tile_count">
      <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
        <span class="count_top"><i class="fa fa-user"></i> Total Users</span>
        <div class="count">100</div>
        <span class="count_bottom"><i class="green">4% </i> From last Week</span>
      </div>
         </div>
    <!-- /top tiles -->

    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="dashboard_graph">

          <div class="row x_title">
            <div class="col-md-6">
              <h3>Real Time Blood Glucose Level</h3>
            </div>
            <div class="col-md-6">
              <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
                <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                <span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b>
              </div>
            </div>  
          </div>

          <div class="col-md-12 col-sm-12 col-xs-12">
            <div id="chart_plot_01" data-stuff='["a","b","c"]' class="demo-placeholder"></div>
          </div>

          

          <div class="clearfix"></div>
        </div>
      </div>
    </div>

    <br />
    <div class="row">

      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
          <div class="x_title">
            <h2>Insights</h2>
            <ul class="nav navbar-right panel_toolbox">
              <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Settings 1</a>
                  </li>
                  <li><a href="#">Settings 2</a>
                  </li>
                </ul>
              </li>
              <li><a class="close-link"><i class="fa fa-close"></i></a>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>
          <div class="x_content">
            <div class="dashboard-widget-content">
              <ul class="list-unstyled timeline widget" id="insights">
                <li>
                  <div class="block">
                    <div class="block_content">
                      <h2 class="title">
                                        <a>Insight Text Placeholder</a>
                                    </h2>
                      <div class="byline">
                        <span>10 hours ago</span>
                      </div>
                      <p class="excerpt">Graph Placeholder
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    
    
      <div class="col-md-8 col-sm-8 col-xs-12">

        


       
      </div>
    </div>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>Overall Summary Radar Chart <small></small></h2>
              <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Settings 1</a>
                    </li>
                    <li><a href="#">Settings 2</a>
                    </li>
                  </ul>
                </li>
                <li><a class="close-link"><i class="fa fa-close"></i></a>
                </li>
              </ul>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <canvas id="canvasRadar2"></canvas>
            </div>
          </div>
      </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>Nutrino Data Radar Chart<small></small></h2>
              <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Settings 1</a>
                    </li>
                    <li><a href="#">Settings 2</a>
                    </li>
                  </ul>
                </li>
                <li><a class="close-link"><i class="fa fa-close"></i></a>
                </li>
              </ul>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <canvas id="canvasRadar3"></canvas>
            </div>
          </div>
      </div>
  </div>
  </div>
{% endblock content %}

  
{% block javascripts %}
  {{ super()}}
  <script>
  setTimeout('window.location.reload();', 30000);
  $(document).ready(function() {
  
    var chart_plot_01_settings = {
      series: {
      lines: {
        show: false,
        fill: true
      },
      splines: {
        show: true,
        tension: 0.4,
        lineWidth: 1,
        fill: 0.4
      },
      points: {
        radius: 4,
        show: true
      },
      shadowSize: 2
      },
      grid: {
      verticalLines: true,
      hoverable: true,
      clickable: true,
      tickColor: "#d5d5d5",
      borderWidth: 1,
      color: '#fff'
      },
      colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
      xaxis: {
      tickColor: "rgba(51, 51, 51, 0.06)",
      mode: "time",
      tickSize: [5, "minute"],
      //tickLength: 10,
      axisLabel: "Time",
      axisLabelUseCanvas: true,
      axisLabelFontSizePixels: 12,
      axisLabelFontFamily: 'Verdana, Arial',
      axisLabelPadding: 10
      },
      yaxis: {
      ticks: 8,
      tickColor: "rgba(51, 51, 51, 0.06)"
      },
      tooltip: {
      enabled: true
      }
    };  
  
    if ($("#chart_plot_01").length)
    {
      console.log('PLOTTT');
      $.plot( $("#chart_plot_01"), [{{sg_table_data}}],  chart_plot_01_settings );
    }
    
    if ($('#canvasRadar2').length ){ 
        
      var ctx = document.getElementById("canvasRadar2");
      var data = {
        //labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
        labels: ['Weight','Duration','max_Cardio','Minutes_FatBurn','Sensor_Glucose'],
        datasets: [{
          label: "User",
          backgroundColor: "rgba(3, 88, 106, 0.2)",
          borderColor: "rgba(3, 88, 106, 0.80)",
          pointBorderColor: "rgba(3, 88, 106, 0.80)",
          pointBackgroundColor: "rgba(3, 88, 106, 0.80)",
          pointHoverBackgroundColor: "#fff",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          //data: [65, 59, 90, 81, 56, 55, 40]
          data: {{radar_value1}}
        }, {
          label: "All Patients",
          backgroundColor: "rgba(38, 185, 154, 0.2)",
          borderColor: "rgba(38, 185, 154, 0.85)",
          pointColor: "rgba(38, 185, 154, 0.85)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          //data: [28, 48, 40, 19, 96, 27, 100]
          data: {{radar_value2}}
        }]
      };

      var canvasRadar = new Chart(ctx, {
      type: 'radar',
      data: data,
      });
    }
  
  if ($('#canvasRadar3').length ){ 
        
      var ctx = document.getElementById("canvasRadar3");
      var data = {
        //labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
        labels: ["fiber","lipids ","sugars","Carb","Saturatedfattyacids"],
        datasets: [{
          label: "User",
          backgroundColor: "rgba(3, 88, 106, 0.2)",
          borderColor: "rgba(3, 88, 106, 0.80)",
          pointBorderColor: "rgba(3, 88, 106, 0.80)",
          pointBackgroundColor: "rgba(3, 88, 106, 0.80)",
          pointHoverBackgroundColor: "#fff",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          //data: [65, 59, 90, 81, 56, 55, 40]
          data: {{radar2_value1}}
        }, {
          label: "All Patients",
          backgroundColor: "rgba(38, 185, 154, 0.2)",
          borderColor: "rgba(38, 185, 154, 0.85)",
          pointColor: "rgba(38, 185, 154, 0.85)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(151,187,205,1)",
          //data: [28, 48, 40, 19, 96, 27, 100]
          data: {{radar2_value2}}
        }]
      };

      var canvasRadar = new Chart(ctx, {
      type: 'radar',
      data: data,
      });
    
    }
  ///*
  if ($('#insights').length )
  { 
    var listElement = "<li>\
      <div class='block'>\
      <div class='block_content'>\
        <h2 class='title'>\
         <a>{insight}</a>\
        </h2>\
        <div class='byline'>\
        <span></span>\
        </div>\
        <p class='excerpt'>\
        </p>\
      </div>\
      </div>\
    </li>";
    var innerHTML = "";
    var insights = {{insights | safe}};
    console.log(insights);
    for (var i in insights)
    {
      innerHTML = innerHTML + listElement.replace("{insight}", insights[i]);
      console.log(insights[i]);
    }
    document.getElementById("insights").innerHTML = innerHTML;
    
  }
  //*/
  });
  
  
    
  </script>
  <!-- Chart.js -->
  <script src="{{ url_for('static', filename='vendors/Chart.js/dist/Chart.min.js') }}"></script>
  <!-- gauge.js -->
  <script src="{{ url_for('static', filename='vendors/gauge.js/dist/gauge.min.js') }}"></script>
  <!-- Skycons -->
  <script src="{{ url_for('static', filename='vendors/skycons/skycons.js') }}"></script>
  <!-- Flot -->
  <script src="{{ url_for('static', filename='vendors/Flot/jquery.flot.js') }}"></script>
  <script src="{{ url_for('static', filename='vendors/Flot/jquery.flot.pie.js') }}"></script>
  <script src="{{ url_for('static', filename='vendors/Flot/jquery.flot.time.js') }}"></script>
  <script src="{{ url_for('static', filename='vendors/Flot/jquery.flot.stack.js') }}"></script>
  <script src="{{ url_for('static', filename='vendors/Flot/jquery.flot.resize.js') }}"></script>
  <!-- Flot plugins -->
  <script src="{{ url_for('static', filename='vendors/flot.orderbars/js/jquery.flot.orderBars.js') }}"></script>
  <script src="{{ url_for('static', filename='vendors/flot-spline/js/jquery.flot.spline.min.js') }}"></script>
  <script src="{{ url_for('static', filename='vendors/flot.curvedlines/curvedLines.js') }}"></script>
  <!-- DateJS -->
  <script src="{{ url_for('static', filename='vendors/DateJS/build/date.js') }}"></script>
  <!-- JQVMap -->
  <script src="{{ url_for('static', filename='vendors/jqvmap/dist/jquery.vmap.js') }}"></script>
  <script src="{{ url_for('static', filename='vendors/jqvmap/dist/maps/jquery.vmap.world.js') }}"></script>
  <script src="{{ url_for('static', filename='vendors/jqvmap/examples/js/jquery.vmap.sampledata.js') }}"></script>

  <!-- custom js -->
  
{% endblock javascripts %}
