<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

<script src="../d3/d3.min.js"></script>

<!--
`d3spark-element`
A simple element to draw sparkline with d3.

@demo demo/index.html
-->

<dom-module id="d3spark-element">
  <template>
    <style>
      :host {
        display: block;
      }
      :host .line {
        fill: none;
        stroke: steelblue;
        stroke-width: 2px;
      }

      :host .overlay {
        fill: none;
        pointer-events: all;
      }

      :host .focus circle {
        fill: none;
        stroke: steelblue;
      }

      :host .xaxis, .xaxis path, .xaxis line {
        stroke: blue;
      }
      :host .xaxis text {
        stroke: none;
        fill: blue;
      }
      :host .yaxis, .yaxis path, .yaxis line {
        stroke: red;
      }
      :host .yaxis text {
        stroke: none;
        fill: red;
      }
      :host .yleg {
        text-anchor: end;
      }

    </style>

    <svg id="sparkline"></svg>
  </template>

  <script>
    Polymer({

      is: 'd3spark-element',

      properties: {
        url: String,
        yleg: {
          type: String
        },
        values: {
                    type: Object,
          observer: "attached"
        },
        ymin: {
          type: Number,
          value: 0
        },
        ymax: {
          type: Number
        }
      },
      ready: function(){
        this.scopeSubtree(this.$.sparkline, true);
      },
      attached: function(){
        var that = this;
        if ((!that.values) || (typeof(that.values) == 'string')) {
          return;
        }
                debugger;
        // set the dimensions and margins of the graph
        var margin = {top: 20, right: 120, bottom: 30, left: 50},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        // parse the date / time
        var parseTime = d3.timeParse("%d-%b-%y");
        var bisectDate = d3.bisector(function(d) {return d.date; }).left

        // set the ranges
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleLinear().range([height, 0]);
        var formatValue = d3.format(",.2f"),
            formatWatt = function(d) {return formatValue(d) + "W"; };

        // append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select(this.$.sparkline)
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
          .append("g")
            .attr("transform",
                  "translate(" + margin.left + "," + margin.top + ")");


        // Get the data
        // d3.json("/src/last.json", function(error, data) {
        data = that.values;
          Object.keys(data).forEach(function(key){
            data[key].forEach(function(d) {
              d.date = new Date(1000*d[0])
              d.watt = 3600000000/d[1]
            })
          data[1].sort(function(a, b) {
              return a.date - b.date;
            });
          x.domain(d3.extent(data[key], function(d) { return d.date; }));
          y.domain([that.ymin, that.ymax]);

          // define the line
          var valueline = d3.line()
            .x(function(d) {return x(d.date); })
            .y(function(d) {return y(d.watt); });

          // Add the valueline path.

          svg.append("g").attr("class", "sparkline")
          svg.selectAll("g.sparkline").selectAll("path")
            .data([data[key]])
            .enter()
              .append("svg:path")
              .attr("class", "line")
              .attr("d", valueline);

          // Add the X Axis
          svg.append("g")
              .attr("class", "xaxis")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x));

          // Add the Y Axis
          svg.append("g")
              .attr("class", "yaxis")
              .call(d3.axisLeft(y))
              .append("text")
                  .attr("class", "yleg")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".71em")
                  .text(that.yleg);


          var focus = svg.append("g")
              .attr("class", "focus")
              .style("display", "none");

          focus.append("circle")
              .attr("r", 4.5);

          focus.append("text")
              .attr("x", 9)
              .attr("dy", ".35em");

          svg.append("rect")
              .attr("class", "overlay")
              .attr("width", width)
              .attr("height", height)
              .on("mouseover", function() { focus.style("display", null); })
              .on("mouseout", function() { focus.style("display", "none"); })
              .on("mousemove", mousemove);

          function mousemove() {
          // To update because multiple points under mouse, only valid when resolution > points
            var x0 = x.invert(d3.mouse(this)[0]),
                i = bisectDate(data[1], x0, 1),
                d0 = data[1][i - 1],
                d1 = data[1][i],
                d = x0 - d0.date > d1.date - x0 ? d1 : d0;
            focus.attr("transform", "translate(" + x(d.date) + "," + y(d.watt) + ")");
            focus.select("text").text(formatWatt(d.watt));
          }
          })
      }
    });
  </script>
</dom-module>