Add error indicator functionality in the Scatter Chart

imaNNeo · Jan 11, 2025 · 66b5800 · 66b5800
1 parent f652121
commit 66b5800
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 0 deletions.
diff --git a/lib/src/chart/scatter_chart/scatter_chart_data.dart b/lib/src/chart/scatter_chart/scatter_chart_data.dart
@@ -50,6 +50,8 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
     super.backgroundColor,
     ScatterLabelSettings? scatterLabelSettings,
     super.rotationQuarterTurns,
+    this.errorIndicatorData =
+        const FlErrorIndicatorData<ScatterChartSpotErrorRangeCallbackInput>(),
   })  : scatterSpots = scatterSpots ?? const [],
         scatterTouchData = scatterTouchData ?? ScatterTouchData(),
         showingTooltipIndicators = showingTooltipIndicators ?? const [],
@@ -89,6 +91,10 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
 
   final ScatterLabelSettings scatterLabelSettings;
 
+  /// Holds data for showing error indicators on the spots in this line.
+  final FlErrorIndicatorData<ScatterChartSpotErrorRangeCallbackInput>
+      errorIndicatorData;
+
   /// Lerps a [ScatterChartData] based on [t] value, check [Tween.lerp].
   @override
   ScatterChartData lerp(BaseChartData a, BaseChartData b, double t) {
@@ -118,6 +124,11 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
           t,
         ),
         rotationQuarterTurns: b.rotationQuarterTurns,
+        errorIndicatorData: FlErrorIndicatorData.lerp(
+          a.errorIndicatorData,
+          b.errorIndicatorData,
+          t,
+        ),
       );
     } else {
       throw Exception('Illegal State');
@@ -143,6 +154,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
     Color? backgroundColor,
     ScatterLabelSettings? scatterLabelSettings,
     int? rotationQuarterTurns,
+    FlErrorIndicatorData<ScatterChartSpotErrorRangeCallbackInput>? errorIndicatorData,
   }) =>
       ScatterChartData(
         scatterSpots: scatterSpots ?? this.scatterSpots,
@@ -162,6 +174,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
         backgroundColor: backgroundColor ?? this.backgroundColor,
         scatterLabelSettings: scatterLabelSettings ?? this.scatterLabelSettings,
         rotationQuarterTurns: rotationQuarterTurns ?? this.rotationQuarterTurns,
+        errorIndicatorData: errorIndicatorData ?? this.errorIndicatorData,
       );
 
   /// Used for equality check, see [EquatableMixin].
@@ -186,6 +199,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
         borderData,
         touchData,
         rotationQuarterTurns,
+        errorIndicatorData,
       ];
 }
 
@@ -746,3 +760,20 @@ class ScatterLabelSettings with EquatableMixin {
         textDirection,
       ];
 }
+
+class ScatterChartSpotErrorRangeCallbackInput
+    extends FlSpotErrorRangeCallbackInput {
+  ScatterChartSpotErrorRangeCallbackInput({
+    required this.spot,
+    required this.spotIndex,
+  });
+
+  final ScatterSpot spot;
+  final int spotIndex;
+
+  @override
+  List<Object?> get props => [
+        spot,
+        spotIndex,
+      ];
+}
diff --git a/lib/src/chart/scatter_chart/scatter_chart_painter.dart b/lib/src/chart/scatter_chart/scatter_chart_painter.dart
@@ -118,6 +118,8 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
       );
     }
 
+    drawScatterErrorBars(canvasWrapper, holder);
+
     if (data.scatterLabelSettings.showLabel) {
       for (var i = 0; i < data.scatterSpots.length; i++) {
         final scatterSpot = data.scatterSpots[i];
@@ -191,6 +193,65 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
     }
   }
 
+  @visibleForTesting
+  void drawScatterErrorBars(
+    CanvasWrapper canvasWrapper,
+    PaintHolder<ScatterChartData> holder,
+  ) {
+    final data = holder.data;
+    final viewSize = canvasWrapper.size;
+
+    final errorIndicatorData = data.errorIndicatorData;
+    if (!errorIndicatorData.show) {
+      return;
+    }
+    for (var i = 0; i < data.scatterSpots.length; i++) {
+      final spot = data.scatterSpots[i];
+      if (!spot.show || spot.isNull()) {
+        continue;
+      }
+      final x = getPixelX(spot.x, viewSize, holder);
+      final y = getPixelY(spot.y, viewSize, holder);
+      if (spot.xError == null && spot.yError == null) {
+        continue;
+      }
+
+      var left = 0.0;
+      var right = 0.0;
+      if (spot.xError != null) {
+        left = getPixelX(spot.x - spot.xError!.lowerBy, viewSize, holder) - x;
+        right = getPixelX(spot.x + spot.xError!.upperBy, viewSize, holder) - x;
+      }
+
+      var top = 0.0;
+      var bottom = 0.0;
+      if (spot.yError != null) {
+        top = getPixelY(spot.y + spot.yError!.lowerBy, viewSize, holder) - y;
+        bottom = getPixelY(spot.y - spot.yError!.upperBy, viewSize, holder) - y;
+      }
+      final relativeErrorPixelsRect = Rect.fromLTRB(
+        left,
+        top,
+        right,
+        bottom,
+      );
+
+      final painter = errorIndicatorData.painter(
+        ScatterChartSpotErrorRangeCallbackInput(
+          spot: spot,
+          spotIndex: i,
+        ),
+      );
+      canvasWrapper.drawErrorIndicator(
+        painter,
+        spot,
+        Offset(x, y),
+        relativeErrorPixelsRect,
+        holder.data,
+      );
+    }
+  }
+
   @visibleForTesting
   void drawTouchTooltips(
     BuildContext context,