drawDataPoints method

Implementation

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

  for (var dpe in dataPoints.entries) {
    var g = SVGGElement();
    g.id = '$id-${dpe.key}';
    g.style.transition = 'opacity 0.2s ease';

    final radians = 2*pi/points.toDouble();
    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;
    var polygons = <List<double>>[];
    var i = 0;
    for (var label in labels) {
      var x = dpe.value[label] ?? 0;

      var dataR = gridR*max(min(x, 1), 0);
      polygons.add([
        dataR*sin((radians*i)+pi) + r + dx,
        dataR*cos((radians*i)+pi) + r + dy,
      ]);
      i++;
    }

    var pointStr = polygons.map((e) => e.join(' ')).join(', ');
    var fill = chartFillStyle[dpe.key] ?? chartFillStyle[keyAllGraph]!;
    g.insertAdjacentHTML('beforeend', '<polygon points="$pointStr" fill="$fill" stroke-width="1" stroke="$fill" />'.toJS);

    var fillRgba = fill.rgba;
    for (var p in polygons) {
      var dotFill = Color.createRgba(fillRgba.r, fillRgba.g, fillRgba.b);
      g.insertAdjacentHTML('beforeend', '<circle cx="${p[0]}" cy="${p[1]}" r="3" fill="$dotFill" />'.toJS);
    }

    _pointsElem.appendChild(g);
  }
}