graph_painter.dart

class GraphShapes extends CustomPainter {
  const GraphShapes({
    required this.stepSize,
    required this.centerOffset,
    required this.activeStep,
    required this.history,
    required this.scores,
  });

  final double stepSize;
  final double centerOffset;
  final int activeStep;
  final GraphPointHistory history;
  final List<int> scores;

  @override
  void paint(Canvas canvas, Size size) {
    if (history.isEmpty) return;

    final length = history.seo.length;

    final seoPath = Path()..moveTo(-stepSize, size.height);
    final displayPath = Path()..moveTo(-stepSize, size.height);
    final socialPath = Path()..moveTo(-stepSize, size.height);
    final paidPath = Path()..moveTo(-stepSize, size.height);
    final crmPath = Path()..moveTo(-stepSize, size.height);
    final croPath = Path()..moveTo(-stepSize, size.height);

    final currentScore = scores.last;

    for (var index = 0; index < length; index++) {
      var heightPercentage = scores[index] / currentScore;
      if (heightPercentage.isNaN) heightPercentage = 0;

      final scaledHeight = size.height * heightPercentage;

      var height = size.height;

      final addedOffset = index == length - 1 ? centerOffset : 0.0;
      final xOffset = (index * stepSize) - addedOffset;

      height -= scaledHeight * history.cro[index].percentage;
      croPath.lineTo(xOffset, height);

      height -= scaledHeight * history.crm[index].percentage;
      crmPath.lineTo(xOffset, height);

      height -= scaledHeight * history.paid[index].percentage;
      paidPath.lineTo(xOffset, height);

      height -= scaledHeight * history.social[index].percentage;
      socialPath.lineTo(xOffset, height);

      height -= scaledHeight * history.display[index].percentage;
      displayPath.lineTo(xOffset, height);

      height -= scaledHeight * history.seo[index].percentage;
      seoPath.lineTo(xOffset, height);
    }

    final endOffset = ((activeStep + 1) * stepSize) - centerOffset;
    seoPath
      ..lineTo(endOffset, size.height)
      ..lineTo(-stepSize, size.height)
      ..close();
    displayPath
      ..lineTo(endOffset, size.height)
      ..lineTo(-stepSize, size.height)
      ..close();
    socialPath
      ..lineTo(endOffset, size.height)
      ..lineTo(-stepSize, size.height)
      ..close();
    paidPath
      ..lineTo(endOffset, size.height)
      ..lineTo(-stepSize, size.height)
      ..close();
    crmPath
      ..lineTo(endOffset, size.height)
      ..lineTo(-stepSize, size.height)
      ..close();
    croPath
      ..lineTo(endOffset, size.height)
      ..lineTo(-stepSize, size.height)
      ..close();
      

    final seo = Path.combine(
      PathOperation.difference,
      seoPath,
      displayPath,
    );

    final display = Path.combine(
      PathOperation.difference,
      displayPath,
      socialPath,
    );

    final social = Path.combine(
      PathOperation.difference,
      socialPath,
      paidPath,
    );

    final paid = Path.combine(
      PathOperation.difference,
      paidPath,
      crmPath,
    );

    final crm = Path.combine(
      PathOperation.difference,
      crmPath,
      croPath,
    );

    final cro = croPath;

    canvas
      ..drawPath(
        seo,
        Paint()..color = history.seo.first.color.withOpacity(0.4),
      )
      ..drawPath(
        display,
        Paint()..color = history.display.first.color.withOpacity(0.4),
      )
      ..drawPath(
        social,
        Paint()..color = history.social.first.color.withOpacity(0.4),
      )
      ..drawPath(
        paid,
        Paint()..color = history.paid.first.color.withOpacity(0.4),
      )
      ..drawPath(
        crm,
        Paint()..color = history.crm.first.color.withOpacity(0.4),
      )
      ..drawPath(
        cro,
        Paint()..color = history.cro.first.color.withOpacity(0.4),
      );
  }

  @override
  bool shouldRepaint(covariant GraphShapes oldDelegate) {
    return activeStep != oldDelegate.activeStep;
  }
}