render method

dynamic render()

Implementation

render() {

  var ctx = this.startRender();
  ctx.fillStyle = 'black';
  ctx.font = '8pt Arial';

  int? minTime = null;
  int? maxTime = null;
  double? minValue = null;
  double? maxValue = null;
  for (var key in items.keys) {
    var time = key;
    var value = items[key]!;
    minTime = (minTime == null ? time : min(minTime, time));
    maxTime = (maxTime == null ? time : max(maxTime, time));
    minValue = (minValue == null ? value : min(minValue, value));
    maxValue = (maxValue == null ? value : max(maxValue, value));
  }

  var m = getMagnitude(maxValue!);
  maxValue = ((maxValue / m) * m).ceilToDouble();
  minValue = ((minValue! / m) * m).floorToDouble();

  var valueLabels = getValueLabels(minValue, maxValue, m);
  var textMargin = 4;

  var valueMargin = 0;
  for (var i = 0; i < valueLabels.length; i++) {
    valueMargin = max(valueMargin, measureText(ctx, valueLabels[i]) + (2 * textMargin));
  }

  var timeMargin = 0;
  var timeLabels = getTimeLabels(minTime!, maxTime!);
  for (var i in timeLabels.keys) {
    timeMargin = max(timeMargin, measureText(ctx, timeLabels[i]!) + (2 * textMargin));
  }

  int smallMargin = 5;
  ctx.lineWidth = 1;
  ctx.strokeStyle = '#ddd';
  var chartWidth = canvas.width! - smallMargin - valueMargin;
  var chartHeight = canvas.height! - timeMargin - smallMargin;
  ctx.strokeRect(valueMargin, smallMargin, chartWidth, chartHeight);

  ctx.strokeStyle = 'black';
  ctx.save();
  ctx.textAlign="right";
  ctx.textBaseline="middle";
  var valueStepWidth = (canvas.height! - timeMargin - smallMargin) / (valueLabels.length - 1);
  for (var i = 0; i < valueLabels.length; i++) {
    ctx.strokeStyle = '#ccc';
    ctx.beginPath();
    ctx.moveTo(valueMargin, smallMargin + (i * valueStepWidth));
    ctx.lineTo(canvas.width! - smallMargin, smallMargin + (i * valueStepWidth));
    ctx.stroke();

    ctx.fillText(valueLabels[i], valueMargin - textMargin, smallMargin + (i * valueStepWidth));
  }

  ctx.translate(valueMargin, canvas.height! - timeMargin);
  ctx.rotate(-pi / 2);
  ctx.textAlign="right";
  ctx.textBaseline="middle";
  for (var time in timeLabels.keys) {
    ctx.save();
    ctx.translate(0, chartWidth * ((time - minTime) / (maxTime - minTime)));
    ctx.strokeStyle = '#ccc';
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(chartHeight, 0);
    ctx.stroke();
    ctx.fillText(timeLabels[time]!, -textMargin, 0);
    ctx.restore();
  }
  ctx.restore();

  bool first = true;
  ctx.beginPath();
  ctx.strokeStyle = _lineColor;
  ctx.fillStyle = _lineColor;
  ctx.lineWidth = _lineWidth;

  List<int> Xs = [];
  List<int> Ys = [];
  for (var key in items.keys) {
    var time = key;
    var value = items[key]!;
    Xs.add((((time - minTime) / (maxTime - minTime)) *
        (canvas.width! - valueMargin - smallMargin) + valueMargin).round());
    Ys.add((canvas.height! - (((value - minValue) / (maxValue - minValue)) *
        (canvas.height! - timeMargin - smallMargin)) - timeMargin).round());
  }

  for (int i =0; i< Xs.length; i++) {
    if (first) {
      ctx.moveTo(Xs[i], Ys[i]);
      first = false;
    } else {
      ctx.lineTo(Xs[i], Ys[i]);
    }
  }
  ctx.stroke();
  for (int i =0; i< Xs.length; i++) {
    ctx.beginPath();
    ctx.arc(Xs[i], Ys[i], _pointSize / 2, 0, 2 * pi);
    ctx.stroke();
    ctx.fill();
  }
}