{% extends "base.html" %}
{% block title %}Camétéo{% endblock %}

{% block styles %}
  {{super()}}
    <link rel="stylesheet" href="{{url_for('static', filename ='css/data_viz.css', _external = True)}}" />
    <script src="{{url_for('static', filename ='js/d3.min.js', _external = True)}}"></script>
{% endblock %}

{% block content %}
{% from "bootstrap/pagination.html" import render_pagination %}
<div class="container">
    <div id="graph"></div>
    {{ render_pagination(dat) }}
    <div class="table-responsive">
        <table class="table table-hover">
            <thead class="thead-inverse">
                <tr>
                    <th>Date/Heure</th>
                    <th>Valeur</th>
                    <th>Capteur</th>
                </tr>
            </thead>
            <tbody>
                {% for item in dat.items -%}
                    {% if item.value is number %}
                        <tr><td>{{ item.valdate }}</td><td>{{ item.value }} {{ item.unit }}</td><td>{{ item.sensor_id }}</td></tr>
                    {% else %}
                        <tr class="warning"><td>{{ item.valdate }}</td><td>{{ item.value }}</td><td>{{ item.sensor_id }}</td></tr>
                    {% endif %}
                {%- endfor %}            
            </tbody>
        </table>
    {{ render_pagination(dat) }}
    </div>
</div>
<script>
    var data = d3.range(40).map(function(i) {
      return i % 5 ? {x: i / 39, y: (Math.sin(i / 3) + 2) / 4} : null;
    });
    
    var margin = {top: 40, right: 40, bottom: 40, left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var x = d3.scaleLinear()
        .range([0, width]);
    
    var y = d3.scaleLinear()
        .range([height, 0]);
    
    var line = d3.line()
        .defined(function(d) { return d; })
        .x(function(d) { return x(d.x); })
        .y(function(d) { return y(d.y); });
    
    var svg = d3.select("#graph").append("svg")
        .datum(data)
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    svg.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));
    
    svg.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y));
    
    svg.append("path")
        .attr("class", "line")
        .attr("d", line);
    
    svg.selectAll(".dot")
      .data(data.filter(function(d) { return d; }))
      .enter().append("circle")
        .attr("class", "dot")
        .attr("cx", line.x())
        .attr("cy", line.y())
        .attr("r", 3.5);
</script>
{% endblock %}