Advertisement
Guest User

Untitled

a guest
Aug 2nd, 2016
97
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.56 KB | None
  1. <link rel="import" href="../polymer/polymer.html">
  2. <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  3.  
  4. <script src="../d3/d3.min.js"></script>
  5.  
  6. <!--
  7. `d3spark-element`
  8. A simple element to draw sparkline with d3.
  9.  
  10. @demo demo/index.html
  11. -->
  12.  
  13. <dom-module id="d3spark-element">
  14.   <template>
  15.     <style>
  16.       :host {
  17.         display: block;
  18.       }
  19.       :host .line {
  20.         fill: none;
  21.         stroke: steelblue;
  22.         stroke-width: 2px;
  23.       }
  24.  
  25.       :host .overlay {
  26.         fill: none;
  27.         pointer-events: all;
  28.       }
  29.  
  30.       :host .focus circle {
  31.         fill: none;
  32.         stroke: steelblue;
  33.       }
  34.  
  35.       :host .xaxis, .xaxis path, .xaxis line {
  36.         stroke: blue;
  37.       }
  38.       :host .xaxis text {
  39.         stroke: none;
  40.         fill: blue;
  41.       }
  42.       :host .yaxis, .yaxis path, .yaxis line {
  43.         stroke: red;
  44.       }
  45.       :host .yaxis text {
  46.         stroke: none;
  47.         fill: red;
  48.       }
  49.       :host .yleg {
  50.         text-anchor: end;
  51.       }
  52.  
  53.     </style>
  54.  
  55.     <svg id="sparkline"></svg>
  56.   </template>
  57.  
  58.   <script>
  59.     Polymer({
  60.  
  61.       is: 'd3spark-element',
  62.  
  63.       properties: {
  64.         url: String,
  65.         yleg: {
  66.           type: String
  67.         },
  68.         values: {
  69.                     type: Object,
  70.           observer: "attached"
  71.         },
  72.         ymin: {
  73.           type: Number,
  74.           value: 0
  75.         },
  76.         ymax: {
  77.           type: Number
  78.         }
  79.       },
  80.       ready: function(){
  81.         this.scopeSubtree(this.$.sparkline, true);
  82.       },
  83.       attached: function(){
  84.         var that = this;
  85.         if ((!that.values) || (typeof(that.values) == 'string')) {
  86.           return;
  87.         }
  88.                 debugger;
  89.         // set the dimensions and margins of the graph
  90.         var margin = {top: 20, right: 120, bottom: 30, left: 50},
  91.             width = 960 - margin.left - margin.right,
  92.             height = 500 - margin.top - margin.bottom;
  93.  
  94.         // parse the date / time
  95.         var parseTime = d3.timeParse("%d-%b-%y");
  96.         var bisectDate = d3.bisector(function(d) {return d.date; }).left
  97.  
  98.         // set the ranges
  99.         var x = d3.scaleTime().range([0, width]);
  100.         var y = d3.scaleLinear().range([height, 0]);
  101.         var formatValue = d3.format(",.2f"),
  102.             formatWatt = function(d) {return formatValue(d) + "W"; };
  103.  
  104.         // append the svg obgect to the body of the page
  105.         // appends a 'group' element to 'svg'
  106.         // moves the 'group' element to the top left margin
  107.         var svg = d3.select(this.$.sparkline)
  108.             .attr("width", width + margin.left + margin.right)
  109.             .attr("height", height + margin.top + margin.bottom)
  110.           .append("g")
  111.             .attr("transform",
  112.                   "translate(" + margin.left + "," + margin.top + ")");
  113.  
  114.  
  115.         // Get the data
  116.         // d3.json("/src/last.json", function(error, data) {
  117.         data = that.values;
  118.           Object.keys(data).forEach(function(key){
  119.             data[key].forEach(function(d) {
  120.               d.date = new Date(1000*d[0])
  121.               d.watt = 3600000000/d[1]
  122.             })
  123.           data[1].sort(function(a, b) {
  124.               return a.date - b.date;
  125.             });
  126.           x.domain(d3.extent(data[key], function(d) { return d.date; }));
  127.           y.domain([that.ymin, that.ymax]);
  128.  
  129.           // define the line
  130.           var valueline = d3.line()
  131.             .x(function(d) {return x(d.date); })
  132.             .y(function(d) {return y(d.watt); });
  133.  
  134.           // Add the valueline path.
  135.  
  136.           svg.append("g").attr("class", "sparkline")
  137.           svg.selectAll("g.sparkline").selectAll("path")
  138.             .data([data[key]])
  139.             .enter()
  140.               .append("svg:path")
  141.               .attr("class", "line")
  142.               .attr("d", valueline);
  143.  
  144.           // Add the X Axis
  145.           svg.append("g")
  146.               .attr("class", "xaxis")
  147.               .attr("transform", "translate(0," + height + ")")
  148.               .call(d3.axisBottom(x));
  149.  
  150.           // Add the Y Axis
  151.           svg.append("g")
  152.               .attr("class", "yaxis")
  153.               .call(d3.axisLeft(y))
  154.               .append("text")
  155.                   .attr("class", "yleg")
  156.                   .attr("transform", "rotate(-90)")
  157.                   .attr("y", 6)
  158.                   .attr("dy", ".71em")
  159.                   .text(that.yleg);
  160.  
  161.  
  162.           var focus = svg.append("g")
  163.               .attr("class", "focus")
  164.               .style("display", "none");
  165.  
  166.           focus.append("circle")
  167.               .attr("r", 4.5);
  168.  
  169.           focus.append("text")
  170.               .attr("x", 9)
  171.               .attr("dy", ".35em");
  172.  
  173.           svg.append("rect")
  174.               .attr("class", "overlay")
  175.               .attr("width", width)
  176.               .attr("height", height)
  177.               .on("mouseover", function() { focus.style("display", null); })
  178.               .on("mouseout", function() { focus.style("display", "none"); })
  179.               .on("mousemove", mousemove);
  180.  
  181.           function mousemove() {
  182.           // To update because multiple points under mouse, only valid when resolution > points
  183.             var x0 = x.invert(d3.mouse(this)[0]),
  184.                 i = bisectDate(data[1], x0, 1),
  185.                 d0 = data[1][i - 1],
  186.                 d1 = data[1][i],
  187.                 d = x0 - d0.date > d1.date - x0 ? d1 : d0;
  188.             focus.attr("transform", "translate(" + x(d.date) + "," + y(d.watt) + ")");
  189.             focus.select("text").text(formatWatt(d.watt));
  190.           }
  191.           })
  192.       }
  193.     });
  194.   </script>
  195. </dom-module>
Advertisement
RAW Paste Data Copied
Advertisement