From 668328300ad4c4821529b1b17da7320af3ee91bc Mon Sep 17 00:00:00 2001
From: Felix Kirchner <felix.kirchner.fk@gmail.com>
Date: Fri, 11 Jul 2025 10:34:39 +0200
Subject: [PATCH] Added jitterStip to prevent the graphs overlaying each other

---
 lib/core/custom_theme.dart             |  7 ++++++
 lib/presentation/views/graph_view.dart | 34 ++++++++++++++++----------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/lib/core/custom_theme.dart b/lib/core/custom_theme.dart
index 77a2f5b..259d5fd 100644
--- a/lib/core/custom_theme.dart
+++ b/lib/core/custom_theme.dart
@@ -6,6 +6,13 @@ class CustomTheme {
   static Color backgroundColor = const Color(0xFF101010);
   static Color backgroundTintColor = CupertinoColors.darkBackgroundGray;
 
+  // graph colors
+  static const Color graphColor1 = Color(0xFFF44336);
+  static const Color graphColor2 = Color(0xFF2196F3); //FF2196F3
+  static const Color graphColor3 = Color(0xFFFFA726); //FFFFA726
+  static const Color graphColor4 = Color(0xFF9C27B0); //9C27B0
+  static final Color graphColor5 = primaryColor;
+
   static TextStyle modeTitle = TextStyle(
     color: primaryColor,
     fontSize: 20,
diff --git a/lib/presentation/views/graph_view.dart b/lib/presentation/views/graph_view.dart
index 9ee0bbc..1e91a98 100644
--- a/lib/presentation/views/graph_view.dart
+++ b/lib/presentation/views/graph_view.dart
@@ -1,7 +1,7 @@
+import 'package:cabo_counter/core/custom_theme.dart';
 import 'package:cabo_counter/data/game_session.dart';
 import 'package:cabo_counter/l10n/generated/app_localizations.dart';
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/material.dart';
 import 'package:syncfusion_flutter_charts/charts.dart';
 
 class GraphView extends StatefulWidget {
@@ -15,12 +15,12 @@ class GraphView extends StatefulWidget {
 
 class _GraphViewState extends State<GraphView> {
   /// List of colors for the graph lines.
-  List<Color> lineColors = [
-    Colors.red,
-    Colors.blue,
-    Colors.orange.shade400,
-    Colors.purple,
-    Colors.green,
+  final List<Color> lineColors = [
+    CustomTheme.graphColor1,
+    CustomTheme.graphColor2,
+    CustomTheme.graphColor3,
+    CustomTheme.graphColor4,
+    CustomTheme.graphColor5
   ];
 
   @override
@@ -36,7 +36,10 @@ class _GraphViewState extends State<GraphView> {
                 child: SfCartesianChart(
                   legend: const Legend(
                       isVisible: true, position: LegendPosition.bottom),
-                  primaryXAxis: const NumericAxis(),
+                  primaryXAxis: const NumericAxis(
+                    interval: 1,
+                    decimalPlaces: 0,
+                  ),
                   primaryYAxis: const NumericAxis(),
                   series: getCumulativeScores(),
                 ),
@@ -64,7 +67,7 @@ class _GraphViewState extends State<GraphView> {
   /// Returns a list of LineSeries representing the cumulative scores of each player.
   /// Each series contains data points for each round, showing the cumulative score up to that round.
   /// The x-axis represents the round number, and the y-axis represents the cumulative score.
-  List<LineSeries<(int, int), int>> getCumulativeScores() {
+  List<LineSeries<(int, num), int>> getCumulativeScores() {
     final rounds = widget.gameSession.roundList;
     final playerCount = widget.gameSession.players.length;
     final playerNames = widget.gameSession.players;
@@ -79,21 +82,26 @@ class _GraphViewState extends State<GraphView> {
       }
     }
 
+    const double jitterStep = 0.15;
+
     /// Create a list of LineSeries for each player
     /// Each series contains data points for each round
     return List.generate(playerCount, (i) {
       final data = List.generate(
         cumulativeScores[i].length,
-        (j) => (j + 1, cumulativeScores[i][j]), // (round, score)
+        (j) => (
+          j + 1,
+          cumulativeScores[i][j] + (i - playerCount ~/ 2) * jitterStep
+        ),
       );
 
       /// Create a LineSeries for the player
       /// The xValueMapper maps the round number, and the yValueMapper maps the cumulative score.
-      return LineSeries<(int, int), int>(
+      return LineSeries<(int, num), int>(
         name: playerNames[i],
         dataSource: data,
-        xValueMapper: (record, _) => record.$1, // Runde
-        yValueMapper: (record, _) => record.$2, // Punktestand
+        xValueMapper: (record, _) => record.$1,
+        yValueMapper: (record, _) => record.$2,
         markerSettings: const MarkerSettings(isVisible: true),
         color: lineColors[i],
       );