Implement clipData feature in scatter chart. (#898)

* feat: Introduce 'clipBubble' attribute to scatter chart. * fix: remove `clipBubble` attribute and implement `clipData` function in scatter chart. * added issue fix #897 to changelog. * modify clip equation to resolve border issue. Co-authored-by: prajwal27wiijii <prajwal@wiijii.co>
imaNNeo · Feb 12, 2022 · 5d01198 · 5d01198
1 parent 29f12ea
commit 5d01198
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,5 @@
 ## newVersion
+* **BUGFIX** Fix `clipData` implementation in ScatterChart, #897.
 * **BUGFIX** Fix PieChart changing sections issue (we have disabled semantics for pieChart badgeWidgets), #861.
 * **BUGFIX** Fix LineChart width smaller width or height lower than 40, #869, #857.
 * **BUGFIX** Allow to show title when axis diff is zero.

diff --git a/lib/src/chart/scatter_chart/scatter_chart_data.dart b/lib/src/chart/scatter_chart/scatter_chart_data.dart
@@ -3,9 +3,9 @@ import 'dart:ui';
 
 import 'package:equatable/equatable.dart';
 import 'package:fl_chart/fl_chart.dart';
+import 'package:fl_chart/src/extensions/color_extension.dart';
 import 'package:fl_chart/src/utils/lerp.dart';
 import 'package:flutter/material.dart';
-import 'package:fl_chart/src/extensions/color_extension.dart';
 
 import 'scatter_chart_helper.dart';
 

diff --git a/lib/src/chart/scatter_chart/scatter_chart_painter.dart b/lib/src/chart/scatter_chart/scatter_chart_painter.dart
@@ -227,6 +227,49 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
     final data = holder.data;
     final viewSize = canvasWrapper.size;
     final chartUsableSize = getChartUsableDrawSize(viewSize, holder);
+    final clip = data.clipData;
+    final border = data.borderData.show ? data.borderData.border : null;
+
+    if (data.clipData.any) {
+      canvasWrapper.saveLayer(
+        Rect.fromLTRB(
+          0,
+          0,
+          canvasWrapper.size.width,
+          canvasWrapper.size.height,
+        ),
+        Paint(),
+      );
+
+      var left = 0.0;
+      var top = 0.0;
+      var right = viewSize.width;
+      var bottom = viewSize.height;
+
+      if (clip.left) {
+        final borderWidth = border?.left.width ?? 0;
+        left = getLeftOffsetDrawSize(holder) + (borderWidth / 2);
+      }
+      if (clip.top) {
+        final borderWidth = border?.top.width ?? 0;
+        top = getTopOffsetDrawSize(holder) + (borderWidth / 2);
+      }
+      if (clip.right) {
+        final borderWidth = border?.right.width ?? 0;
+        right = getLeftOffsetDrawSize(holder) +
+            chartUsableSize.width -
+            (borderWidth / 2);
+      }
+      if (clip.bottom) {
+        final borderWidth = border?.bottom.width ?? 0;
+        bottom = getTopOffsetDrawSize(holder) +
+            chartUsableSize.height -
+            (borderWidth / 2);
+      }
+
+      canvasWrapper.clipRect(Rect.fromLTRB(left, top, right, bottom));
+    }
+
     for (final scatterSpot in data.scatterSpots) {
       if (!scatterSpot.show) {
         continue;
@@ -242,6 +285,10 @@ class ScatterChartPainter extends AxisChartPainter<ScatterChartData> {
         _spotsPaint,
       );
     }
+
+    if (data.clipData.any) {
+      canvasWrapper.restore();
+    }
   }
 
   @visibleForTesting

diff --git a/test/chart/scatter_chart/scatter_chart_painter_test.dart b/test/chart/scatter_chart/scatter_chart_painter_test.dart
@@ -1,14 +1,15 @@
 import 'dart:math' as math;
 
 import 'package:fl_chart/fl_chart.dart';
+import 'package:fl_chart/src/chart/base/base_chart/base_chart_painter.dart';
 import 'package:fl_chart/src/chart/scatter_chart/scatter_chart_painter.dart';
 import 'package:fl_chart/src/utils/canvas_wrapper.dart';
 import 'package:fl_chart/src/utils/utils.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_test/flutter_test.dart';
-import 'package:fl_chart/src/chart/base/base_chart/base_chart_painter.dart';
 import 'package:mockito/annotations.dart';
 import 'package:mockito/mockito.dart';
+
 import '../data_pool.dart';
 import 'scatter_chart_painter_test.mocks.dart';
 
@@ -423,6 +424,7 @@ void main() {
           ScatterSpot(7, 5, radius: 6),
         ],
         titlesData: FlTitlesData(show: false),
+        clipData: FlClipData.all(),
       );
 
       final ScatterChartPainter scatterChartPainter = ScatterChartPainter();
@@ -441,6 +443,8 @@ void main() {
           .called(1);
       verify(_mockCanvasWrapper.drawCircle(const Offset(70, 50), 6, any))
           .called(1);
+
+      verify(_mockCanvasWrapper.clipRect(any)).called(1);
     });
 
     test('test 2', () {
@@ -458,6 +462,7 @@ void main() {
           ScatterSpot(7, 5, show: false),
         ],
         titlesData: FlTitlesData(show: false),
+        clipData: FlClipData.none(),
       );
 
       final ScatterChartPainter scatterChartPainter = ScatterChartPainter();
@@ -471,6 +476,7 @@ void main() {
       );
 
       verifyNever(_mockCanvasWrapper.drawCircle(any, any, any));
+      verifyNever(_mockCanvasWrapper.clipRect(any));
     });
   });