render method

HTMLCanvasElement render()

Renders the timeseries into a <canvas> and returns the canvas element.

Implementation

HTMLCanvasElement render() {
  _ctx.translate(0, _kCanvasHeight * window.devicePixelRatio);
  _ctx.scale(1, -window.devicePixelRatio);

  final double barWidth = _screenWidth / _stats.samples.length;
  double xOffset = 0;
  for (int i = 0; i < _stats.samples.length; i++) {
    final AnnotatedSample sample = _stats.samples[i];

    if (sample.isWarmUpValue) {
      // Put gray background behind warm-up samples.
      _ctx.fillStyle = 'rgba(200,200,200,1)'.toJS;
      _ctx.fillRect(xOffset, 0, barWidth, _normalized(_maxValueChartRange));
    }

    if (sample.magnitude > _maxValueChartRange) {
      // The sample value is so big it doesn't fit on the chart. Paint it purple.
      _ctx.fillStyle = 'rgba(100,50,100,0.8)'.toJS;
    } else if (sample.isOutlier) {
      // The sample is an outlier, color it light red.
      _ctx.fillStyle = 'rgba(255,50,50,0.6)'.toJS;
    } else {
      // A non-outlier sample, color it light blue.
      _ctx.fillStyle = 'rgba(50,50,255,0.6)'.toJS;
    }

    _ctx.fillRect(xOffset, 0, barWidth - 1, _normalized(sample.magnitude));
    xOffset += barWidth;
  }

  // Draw a horizontal solid line corresponding to the average.
  _ctx.lineWidth = 1;
  drawLine(0, _normalized(_stats.average), _screenWidth,
      _normalized(_stats.average));

  // Draw a horizontal dashed line corresponding to the outlier cut off.
  _ctx.setLineDash(<JSNumber>[5.toJS, 5.toJS].toJS);
  drawLine(0, _normalized(_stats.outlierCutOff), _screenWidth,
      _normalized(_stats.outlierCutOff));

  // Draw a light red band that shows the noise (1 stddev in each direction).
  _ctx.fillStyle = 'rgba(255,50,50,0.3)'.toJS;
  _ctx.fillRect(
    0,
    _normalized(_stats.average * (1 - _stats.noise)),
    _screenWidth,
    _normalized(2 * _stats.average * _stats.noise),
  );

  return _canvas;
}