drawDataPoints method

Implementation

@override
void drawDataPoints() {
  _pointsElem.innerHTML = ''.toJS;
  if (_dataPoints.isEmpty) return;

  final centerX = _svgElem.clientWidth/2;
  final centerY = _svgElem.clientHeight/2;

  final r = min(_svgElem.clientWidth, _svgElem.clientHeight)/2;
  final dx = max(_svgElem.clientWidth/2 - r, 0);
  final dy = max(_svgElem.clientHeight/2 - r, 0);
  var gridR = r - gridLineWidth - textMargin/4 - maxLabelWidth;

  double totalRadii = 0;
  for (var dpe in _dataPoints.entries) {
    var fill = chartFillStyle[dpe.key] ?? chartFillStyle[keyAllGraph]!;
    if (_activeGraphs.isNotEmpty && !_activeGraphs.contains(dpe.key)) {
      fill = Color.createRgba(0, 0, 0, 0.2);
    }

    if (dpe.value >= 1) {
      _pointsElem.insertAdjacentHTML('beforeend', '<circle cx="$centerX" cy="$centerY" r="$gridR" fill="$fill" stroke="rgba(255, 255, 255, 0.1)" stroke-width="1" />'.toJS);
      totalRadii = 1;
      break;
    } else {
      var value = dpe.value;
      var dataRadii = 2*pi*dpe.value;
      var pointStart = [gridR*sin(totalRadii) + r + dx, gridR*cos(totalRadii) + r + dy];
      var pointEnd = [gridR*sin(totalRadii+dataRadii) + r + dx, gridR*cos(totalRadii + dataRadii) + r + dy];

      var largeArc = value > 0.5 ? 1 : 0;
      _pointsElem.insertAdjacentHTML('beforeend', '<path d="M$centerX,$centerY L${pointStart[0]},${pointStart[1]} A$gridR $gridR ${360*value} $largeArc 0 ${pointEnd[0]},${pointEnd[1]} Z" fill="$fill" stroke="rgba(255, 255, 255, 0.1)" stroke-width="1" />'.toJS);
      totalRadii += dataRadii;
    }
  }
}