Implement simple drawing error functionality (tested in line_chart_sa…

…mple2.dart)
imaNNeo · Jan 8, 2025 · dd5e703 · dd5e703
1 parent 34630a2
commit dd5e703
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 18 deletions.
diff --git a/example/lib/presentation/samples/line/line_chart_sample2.dart b/example/lib/presentation/samples/line/line_chart_sample2.dart
@@ -171,37 +171,44 @@ class _LineChartSample2State extends State<LineChartSample2> {
             FlSpot(
               0,
               3,
-              yError: FlErrorRange.symmetric(5),
+              yError: FlErrorRange.symmetric(1.0),
+              xError: FlErrorRange.symmetric(1.0),
             ),
             FlSpot(
               2.6,
               2,
-              yError: FlErrorRange.symmetric(5),
+              yError: FlErrorRange.symmetric(1.0),
+              xError: FlErrorRange.symmetric(1.0),
             ),
             FlSpot(
               4.9,
               5,
-              yError: FlErrorRange.symmetric(5),
+              yError: FlErrorRange.symmetric(1.0),
+              xError: FlErrorRange.symmetric(1.0),
             ),
             FlSpot(
               6.8,
               3.1,
-              yError: FlErrorRange.symmetric(5),
+              yError: FlErrorRange.symmetric(1.0),
+              xError: FlErrorRange.symmetric(1.0),
             ),
             FlSpot(
               8,
               4,
-              yError: FlErrorRange.symmetric(5),
+              yError: FlErrorRange.symmetric(1.0),
+              xError: FlErrorRange.symmetric(1.0),
             ),
             FlSpot(
               9.5,
               3,
-              yError: FlErrorRange.symmetric(5),
+              yError: FlErrorRange.symmetric(1.0),
+              xError: FlErrorRange.symmetric(1.0),
             ),
             FlSpot(
               11,
               4,
-              yError: FlErrorRange.symmetric(5),
+              yError: FlErrorRange.symmetric(1.0),
+              xError: FlErrorRange.symmetric(1.0),
             ),
           ],
           isCurved: true,

diff --git a/lib/src/chart/base/axis_chart/axis_chart_data.dart b/lib/src/chart/base/axis_chart/axis_chart_data.dart
@@ -1721,6 +1721,7 @@ abstract class FlSpotErrorRangePainter with EquatableMixin {
     Canvas canvas,
     Offset offsetInCanvas,
     FlSpot origin,
+    Rect errorRelativeRect,
   );
 
   Size getSize(FlSpot spot);
@@ -1735,18 +1736,80 @@ class FlSimpleErrorPainter extends FlSpotErrorRangePainter with EquatableMixin {
   const FlSimpleErrorPainter();
 
   @override
-  void draw(Canvas canvas, Offset offsetInCanvas, FlSpot origin) {
-    print('Drawing error indicator at $offsetInCanvas');
-    final lineFrom = Offset(offsetInCanvas.dx, offsetInCanvas.dy - 10);
-    final lineTo = Offset(offsetInCanvas.dx, offsetInCanvas.dy + 10);
+  void draw(
+    Canvas canvas,
+    Offset offsetInCanvas,
+    FlSpot origin,
+    Rect errorRelativeRect,
+  ) {
+    final rect = errorRelativeRect.shift(offsetInCanvas);
+
+    final hasVerticalError = errorRelativeRect.width != 0;
+    if (hasVerticalError) {
+      _drawDirectErrorLine(canvas, rect.topCenter, rect.bottomCenter);
+    }
+
+    final hasHorizontalError = errorRelativeRect.height != 0;
+    if (hasHorizontalError) {
+      _drawDirectErrorLine(canvas, rect.centerLeft, rect.centerRight);
+    }
+  }
+
+  void _drawDirectErrorLine(Canvas canvas, Offset from, Offset to) {
     canvas.drawLine(
-      lineFrom,
-      lineTo,
+      from,
+      to,
       Paint()
-        ..color = Colors.red
-        ..style = PaintingStyle.stroke
-        ..strokeWidth = 2,
+        ..color = Colors.white
+        ..strokeWidth = 1
+        ..style = PaintingStyle.stroke,
     );
+
+    // Draw edge lines
+    const edgeLength = 8.0;
+    if (from.dx == to.dx) {
+      // Line is vertical
+      canvas
+        // draw top edge
+        ..drawLine(
+          Offset(from.dx - (edgeLength / 2), from.dy),
+          Offset(from.dx + (edgeLength / 2), from.dy),
+          Paint()
+            ..color = Colors.white
+            ..strokeWidth = 1
+            ..style = PaintingStyle.stroke,
+        )
+        // draw bottom edge
+        ..drawLine(
+          Offset(to.dx - (edgeLength / 2), to.dy),
+          Offset(to.dx + (edgeLength / 2), to.dy),
+          Paint()
+            ..color = Colors.white
+            ..strokeWidth = 1
+            ..style = PaintingStyle.stroke,
+        );
+    } else {
+      // // Line is horizontal
+      canvas
+        // draw left edge
+        ..drawLine(
+          Offset(from.dx, from.dy - (edgeLength / 2)),
+          Offset(from.dx, from.dy + (edgeLength / 2)),
+          Paint()
+            ..color = Colors.white
+            ..strokeWidth = 1
+            ..style = PaintingStyle.stroke,
+        )
+        // draw right edge
+        ..drawLine(
+          Offset(to.dx, to.dy - (edgeLength / 2)),
+          Offset(to.dx, to.dy + (edgeLength / 2)),
+          Paint()
+            ..color = Colors.white
+            ..strokeWidth = 1
+            ..style = PaintingStyle.stroke,
+        );
+    }
   }
 
   @override

diff --git a/lib/src/chart/line_chart/line_chart_painter.dart b/lib/src/chart/line_chart/line_chart_painter.dart
@@ -391,8 +391,38 @@ class LineChartPainter extends AxisChartPainter<LineChartData> {
       if (spot.isNotNull()) {
         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.errorPainter;
-        canvasWrapper.drawErrorIndicator(painter, spot, Offset(x, y));
+        canvasWrapper.drawErrorIndicator(
+          painter,
+          spot,
+          Offset(x, y),
+          relativeErrorPixelsRect,
+        );
       }
     }
   }

diff --git a/lib/src/utils/canvas_wrapper.dart b/lib/src/utils/canvas_wrapper.dart
@@ -123,8 +123,9 @@ class CanvasWrapper {
     FlSpotErrorRangePainter painter,
     FlSpot origin,
     Offset offset,
+    Rect errorRelativeRect,
   ) {
-    painter.draw(canvas, offset, origin);
+    painter.draw(canvas, offset, origin, errorRelativeRect);
   }
 
   /// Handles performing multiple draw actions rotated.