utils/test/reporting/js/trend.js

   1 // ******************************************
   2 // Trend line for reporting
   3 // based on scenario_history.txt
   4 // where data looks like
   5 // date,scenario,installer,detail,score
   6 // 2016-09-22 13:12,os-nosdn-fdio-noha,apex,4/12,33.0
   7 // 2016-09-22 13:13,os-odl_l2-fdio-noha,apex,12/15,80.0
   8 // 2016-09-22 13:13,os-odl_l2-sfc-noha,apex,18/24,75.0
   9 // .....
  10 // ******************************************
  11 // Set the dimensions of the canvas / graph
  12 var trend_margin = {top: 20, right: 30, bottom: 50, left: 40},
  13   trend_width = 300 - trend_margin.left - trend_margin.right,
  14   trend_height = 130 - trend_margin.top - trend_margin.bottom;
  15
  16 // Parse the date / time
  17 var parseDate = d3.time.format("%Y-%m-%d %H:%M").parse;
  18
  19 // Set the ranges
  20 var trend_x = d3.time.scale().range([0, trend_width]);
  21 var trend_y = d3.scale.linear().range([trend_height, 0]);
  22
  23 // Define the axes
  24 var trend_xAxis = d3.svg.axis().scale(trend_x)
  25   .orient("bottom").ticks(2).tickFormat(d3.time.format("%m-%d"));
  26
  27 var trend_yAxis = d3.svg.axis().scale(trend_y)
  28   .orient("left").ticks(2);
  29
  30 // Define the line
  31 var valueline = d3.svg.line()
  32   .x(function(d) { return trend_x(d.date); })
  33   .y(function(d) { return trend_y(d.score); });
  34
  35 var trend = function(container, trend_data) {
  36
  37     var trend_svg = d3.select(container)
  38     .append("svg")
  39       .attr("width", trend_width + trend_margin.left + trend_margin.right)
  40       .attr("height", trend_height + trend_margin.top + trend_margin.bottom)
  41     .append("g")
  42             .attr("transform",
  43               "translate(" + trend_margin.left + "," + trend_margin.top + ")");
  44
  45     // Scale the range of the data
  46     trend_x.domain(d3.extent(trend_data, function(d) { return d.date; }));
  47     trend_y.domain([0, d3.max(trend_data, function(d) { return d.score; })]);
  48
  49     // Add the X Axis
  50     trend_svg.append("g")
  51         .attr("class", "x axis")
  52         .attr("transform", "translate(0," + trend_height + ")")
  53         .call(trend_xAxis);
  54
  55     // Add the Y Axis
  56     trend_svg.append("g")
  57         .attr("class", "y axis")
  58         .call(trend_yAxis);
  59
  60     // Add the valueline path.
  61     trend_svg.append("path")
  62         .attr("class", "line")
  63         .attr("d", valueline(trend_data))
  64     .attr("stroke", "steelblue")
  65     .attr("fill", "none");
  66
  67     trend_svg.selectAll(".dot")
  68       .data(trend_data)
  69       .enter().append("circle")
  70       .attr("r", 2.5)
  71         .attr("cx", function(d) { return trend_x(d.date); })
  72         .attr("cy", function(d) { return trend_y(d.score); });
  73
  74      return trend;
  75 }