{{ enablePlugins('nvd3,simpleweather,prettify') }}
{% set title = "Dashboard v1" %}

{% extends "layouts/application.html" %}

{% block content %}
  {% include "shared/page-title.html" %}

  <!-- Stats Panels -->
  <div class="row sortable">
    <div class="col l3 m6 s12">
      <a href="#" class="card-panel stats-card red lighten-2 red-text text-lighten-5">
        <i class="fa fa-comments-o"></i>
        <span class="count">145</span>
        <div class="name">Feedbacks</div>
      </a>
    </div>
    <div class="col l3 m6 s12">
      <a href="#" class="card-panel stats-card blue lighten-2 blue-text text-lighten-5">
        <i class="fa fa-send"></i>
        <span class="count">342</span>
        <div class="name">Posts</div>
      </a>
    </div>
    <div class="col l3 m6 s12">
      <a href="#" class="card-panel stats-card amber lighten-2 amber-text text-lighten-5">
        <i class="fa fa-cloud-upload"></i>
        <span class="count">58</span>
        <div class="name">Uploads</div>
      </a>
    </div>
    <div class="col l3 m6 s12">
      <div class="card-panel stats-card green lighten-2 green-text text-lighten-5">
        <i class="fa fa-spinner"></i>
        <span class="count">37%</span>
        <div class="name">Server Load</div>
      </div>
    </div>
  </div>
  <!-- /Stats Panels -->

  <div class="row sortable">
    <!-- Weather -->
    <div class="col l4 s12">
      <div class="card-panel weather-card blue-grey lighten-2 white-text">
        <p class="center"><i class="fa fa-spinner fa-pulse"></i> Weather</p>
      </div>
    </div>
    <!-- /Weather -->

    <!-- Chart with Visits -->
    <div class="col l8 s12">
      <div class="card-panel" id="chart1" style="height: 191px;"></div>
    </div>
    <!-- /Chart with Visits -->
  </div>

  <div class="row sortable">
    <!-- Orders Card -->
    <div class="col l4 s12">
      <div class="card">
        <div class="title">
          <h5>Orders</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        <div class="content orders-card">

          <h4>3,729</h4>
          <div class="row">
            <div class="col s6">
              <small>Total Orders</small>
            </div>
            <div class="col s6 right-align">
              77% <i class="fa fa-level-down red-text"></i>
            </div>
          </div>
          <div class="progress small">
            <div class="determinate" style="width: 77%"></div>
          </div>

          <h4>$7,180</h4>
          <div class="row">
            <div class="col s6">
              <small>Total Income</small>
            </div>
            <div class="col s6 right-align">
              43% <i class="fa fa-level-up green-text"></i>
            </div>
          </div>
          <div class="progress small">
            <div class="determinate" style="width: 43%"></div>
          </div>

          <h4>27</h4>
          <div class="row">
            <div class="col s6">
              <small>Total Refunds</small>
            </div>
            <div class="col s6 right-align">
              7%
            </div>
          </div>
          <div class="progress small">
            <div class="determinate" style="width: 7%"></div>
          </div>

        </div>
      </div>
    </div>
    <!-- /Orders Card -->

    <!-- ToDo Card -->
    <div class="col l4 s12">
      <div class="card">
        <div class="title">
          <h5>Todo</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        

        <div class="content todo-card">
          <div class="todo-task">
            <input type="checkbox" id="checkbox1" checked />
            <label for="checkbox1">Transfer projects to the Gulp <span class="todo-remove mdi-action-delete"></span></label>
          </div>

          <div class="todo-task">
            <input type="checkbox" id="checkbox2">
            <label for="checkbox2">Make video for Youtube <span class="todo-remove mdi-action-delete"></span></label>
          </div>

          <div class="todo-task">
            <input type="checkbox" id="checkbox4">
            <label for="checkbox4">Learn Meteor.js <span class="todo-remove mdi-action-delete"></span></label>
          </div>

          <div class="input-field">
            <input id="todo-add" type="text">
            <label for="todo-add">Add New</label>
          </div>
        </div>

      </div>
    </div>
    <!-- /ToDo Card -->

    <!-- Mail Card -->
    <div class="col l4 s12">
      <div class="card">
        <div class="title">
          <h5>Mail</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        <div class="content mail-card">

          <div class="row">
            <div class="col s8">
              <a href="mail-view.html">
                <strong>Dianne Chambers</strong>
              </a>
            </div>
            <div class="col s4 right-align">
              <small>9:02 AM</small>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <a href="mail-view.html">
                Ut feugiat tempus felis, sit amet mattis dolor accumsan quis. Aenean pharetra tempus justo, vitae euismod ipsum congue a.
              </a>
            </div>
          </div>

          <hr>

          <div class="row">
            <div class="col s8">
              <a href="mail-view.html">
                <strong>Joanne Stephens</strong>
              </a>
            </div>
            <div class="col s4 right-align">
              <small>Dec 19</small>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <a href="mail-view.html">
                Proin suscipit lobortis porta. Interdum et malesuada fames ac ante ipsum primis in faucibus.
              </a>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- /Mail Card -->
  </div>

  <div class="row sortable">
    <!-- Stacked Area Chart -->
    <div class="col s12 l7">
      <div class="card">
        <div class="title">
          <h5>Stacked Area Chart</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        <div class="content">
          <div id="chart2" style="height: 350px;"></div>
        </div>
      </div>
    </div>
    <!-- /Stacked Area Chart -->

    <!-- Pie Chart -->
    <div class="col s12 l5">
      <div class="card">
        <div class="title">
          <h5>Pie Chart</h5>
          <a class="close" href="#">
            <i class="mdi-content-clear"></i>
          </a>
          <a class="minimize" href="#">
            <i class="mdi-navigation-expand-less"></i>
          </a>
        </div>
        <div class="content">
          <div id="chart4" style="height: 350px;"></div>
        </div>
      </div>
    </div>
    <!-- /Pie Chart -->
  </div>

{% endblock %}


{% block javascript %}
  <script>


  /*
   * Stacked Bar Chart
   */
  (function() {
    nv.addGraph(function() {
        var chart = nv.models.multiBarChart()
          .color(["#64B5F6","#42A5F5"])
          .margin({left: 20, bottom: 20, right: 20})
          .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
          .rotateLabels(0)      //Angle to rotate x-axis labels.
          .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
          .groupSpacing(0.1)    //Distance between each group of bars.
        ;

        chart.xAxis
            .tickFormat(d3.format(',f'));

        chart.yAxis
            .tickFormat(d3.format(',.1f'));

        d3.select('#chart1').append('svg')
            .datum(exampleData())
            .call(chart);

        return chart;
    });


    /* Inspired by Lee Byron's test data generator. */
    function stream_layers(n, m, o) {
      if (arguments.length < 3) o = 0;
      function bump(a) {
        var x = 1 / (.1 + Math.random()),
            y = 2 * Math.random() - .5,
            z = 10 / (.1 + Math.random());
        for (var i = 0; i < m; i++) {
          var w = (i / m - y) * z;
          a[i] += x * Math.exp(-w * w);
        }
      }
      return d3.range(n).map(function() {
          var a = [], i;
          for (i = 0; i < m; i++) a[i] = o + o * Math.random();
          for (i = 0; i < 5; i++) bump(a);
          return a.map(stream_index);
        });
    }

    function stream_index(d, i) {
      return {x: i, y: Math.max(0, d)};
    }


    //Generate some nice data.
    function exampleData() {
      return stream_layers(2,30,50).map(function(data, i) {
        return {
          key: i?'Visitors':'New Posts',
          values: data
        };
      });
    }
  }());



  /*
   * Stacked Area Chart
   */
  (function() {
    /*Data sample:
    { 
          "key" : "North America" , 
          "values" : [ [ 1025409600000 , 23.041422681023] , [ 1028088000000 , 19.854291255832],
           [ 1030766400000 , 21.02286281168], 
           [ 1033358400000 , 22.093608385173],
           [ 1036040400000 , 25.108079299458],
           [ 1038632400000 , 26.982389242348]
           ...

    */
    d3.json('assets/_con/nvd3/stackedAreaData.json', function(data) {
      nv.addGraph(function() {
        var chart = nv.models.stackedAreaChart()
            .margin({bottom: 20})
            .color(["#E27272","#64B5F6", "#FFD83C", "#81C784"])
            .margin({right: 40, left: 40})
            .x(function(d) { return d[0] })   //We can modify the data accessor functions...
            .y(function(d) { return d[1] })   //...in case your data is formatted differently.
            .useInteractiveGuideline(true)    //Tooltips which show all data points. Very nice!
            .rightAlignYAxis(true)      //Let's move the y-axis to the right side.
            .showControls(true)       //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
            .clipEdge(true);

        //Format x-axis labels with custom function.
        chart.xAxis
            .tickFormat(function(d) { 
              return d3.time.format('%x')(new Date(d)) 
        });

        chart.yAxis
            .tickFormat(d3.format(',.2f'));

        d3.select('#chart2').append('svg')
          .datum(data)
          .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
      });
    })
  }());


  /*
   * Pie Chart
   */
  (function() {
    //Donut chart example
    nv.addGraph(function() {
      var chart = nv.models.pieChart()
          .color(["#E27272","#64B5F6", "#FFD83C", "#81C784"])
          .x(function(d) { return d.label })
          .y(function(d) { return d.value })
          .showLabels(true)     //Display pie labels
          .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
          .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
          .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
          ;

        d3.select('#chart4').append('svg')
            .datum(exampleData())
            .transition().duration(350)
            .call(chart);

      return chart;
    });

    //Pie chart example data. Note how there is only a single array of key-value pairs.
    function exampleData() {
      return  [
          { 
            "label": "India",
            "value" : 29.765957771107
          } , 
          { 
            "label": "USA",
            "value" : 13.4783623743534
          } , 
          { 
            "label": "Russia",
            "value" : 32.807804682612
          } , 
          { 
            "label": "Turkey",
            "value" : 56.45946739256
          }
        ];
    }
  }());


  // setTimeout(function() {
  //   toast('Welcome to Con!', 2000);
  // }, 1000);

  </script>
{% endblock %}