Merge pull request #349 from tomwyr/optional-clip

Optional clip

lib/src/chart/base/axis_chart/axis_chart_data.dart

@@ -22,7 +22,7 @@ abstract class AxisChartData extends BaseChartData with EquatableMixin {
   double minY, maxY;
 
   /// clip the chart to the border (prevent draw outside the border)
-  bool clipToBorder;
+  FlClipData clipData;
 
   /// A background color which is drawn behind th chart.
   Color backgroundColor;
@@ -35,7 +35,7 @@ abstract class AxisChartData extends BaseChartData with EquatableMixin {
     double maxX,
     double minY,
     double maxY,
-    bool clipToBorder,
+    FlClipData clipData,
     Color backgroundColor,
     FlBorderData borderData,
     FlTouchData touchData,
@@ -46,7 +46,7 @@ abstract class AxisChartData extends BaseChartData with EquatableMixin {
         maxX = maxX,
         minY = minY,
         maxY = maxY,
-        clipToBorder = clipToBorder ?? false,
+        clipData = clipData ?? FlClipData.none(),
         backgroundColor = backgroundColor,
         super(borderData: borderData, touchData: touchData);
 
@@ -60,7 +60,7 @@ abstract class AxisChartData extends BaseChartData with EquatableMixin {
         maxX,
         minY,
         maxY,
-        clipToBorder,
+        clipData,
         backgroundColor,
         borderData,
         touchData,

lib/src/chart/base/base_chart/base_chart_data.dart

@@ -87,6 +87,41 @@ class FlTouchData with EquatableMixin {
       ];
 }
 
+/// Holds data to clipping chart around its borders.
+class FlClipData with EquatableMixin {
+  final bool top;
+  final bool bottom;
+  final bool left;
+  final bool right;
+
+  /// Creates data that clips specified sides
+  FlClipData({
+    @required this.top,
+    @required this.bottom,
+    @required this.left,
+    @required this.right,
+  });
+
+  /// Creates data that clips all sides
+  FlClipData.all() : this(top: true, bottom: true, left: true, right: true);
+
+  /// Creates data that clips only top and bottom side
+  FlClipData.vertical() : this(top: true, bottom: true, left: false, right: false);
+
+  /// Creates data that clips only left and right side
+  FlClipData.horizontal() : this(top: false, bottom: false, left: true, right: true);
+
+  /// Creates data that doesn't clip any side
+  FlClipData.none() : this(top: false, bottom: false, left: false, right: false);
+
+  /// Checks whether any of the sides should be clipped
+  bool get any => top || bottom || left || right;
+
+  /// Used for equality check, see [EquatableMixin].
+  @override
+  List<Object> get props => [top, bottom, left, right];
+}
+
 /// It gives you the axis value and gets a String value based on it.
 typedef GetTitleFunction = String Function(double value);
 

lib/src/chart/line_chart/line_chart_data.dart

@@ -61,7 +61,7 @@ class LineChartData extends AxisChartData with EquatableMixin {
   /// they are useful in some scenarios, for example you can show average line, you can fill
   /// [extraLinesData] property to have your extra lines.
   ///
-  /// [clipToBorder] forces the [LineChart] to draw lines inside the chart bounding box.
+  /// [clipData] forces the [LineChart] to draw lines inside the chart bounding box.
   LineChartData({
     List<LineChartBarData> lineBarsData,
     List<BetweenBarsData> betweenBarsData,
@@ -77,7 +77,7 @@ class LineChartData extends AxisChartData with EquatableMixin {
     double maxX,
     double minY,
     double maxY,
-    bool clipToBorder,
+    FlClipData clipData,
     Color backgroundColor,
   })  : lineBarsData = lineBarsData ?? const [],
         betweenBarsData = betweenBarsData ?? const [],
@@ -91,7 +91,7 @@ class LineChartData extends AxisChartData with EquatableMixin {
           borderData: borderData,
           axisTitleData: axisTitleData ?? FlAxisTitleData(),
           rangeAnnotations: rangeAnnotations ?? RangeAnnotations(),
-          clipToBorder: clipToBorder ?? false,
+          clipData: clipData ?? FlClipData.none(),
           backgroundColor: backgroundColor,
         ) {
     initSuperMinMaxValues(minX, maxX, minY, maxY);
@@ -174,7 +174,7 @@ class LineChartData extends AxisChartData with EquatableMixin {
         maxY: lerpDouble(a.maxY, b.maxY, t),
         backgroundColor: Color.lerp(a.backgroundColor, b.backgroundColor, t),
         borderData: FlBorderData.lerp(a.borderData, b.borderData, t),
-        clipToBorder: b.clipToBorder,
+        clipData: b.clipData,
         extraLinesData: ExtraLinesData.lerp(a.extraLinesData, b.extraLinesData, t),
         gridData: FlGridData.lerp(a.gridData, b.gridData, t),
         titlesData: FlTitlesData.lerp(a.titlesData, b.titlesData, t),
@@ -207,7 +207,7 @@ class LineChartData extends AxisChartData with EquatableMixin {
     double maxX,
     double minY,
     double maxY,
-    bool clipToBorder,
+    FlClipData clipData,
     Color backgroundColor,
   }) {
     return LineChartData(
@@ -225,7 +225,7 @@ class LineChartData extends AxisChartData with EquatableMixin {
       maxX: maxX ?? this.maxX,
       minY: minY ?? this.minY,
       maxY: maxY ?? this.maxY,
-      clipToBorder: clipToBorder ?? this.clipToBorder,
+      clipData: clipData ?? this.clipData,
       backgroundColor: backgroundColor ?? this.backgroundColor,
     );
   }
@@ -247,7 +247,7 @@ class LineChartData extends AxisChartData with EquatableMixin {
         maxX,
         minY,
         maxY,
-        clipToBorder,
+        clipData,
         backgroundColor,
       ];
 }

lib/src/chart/line_chart/line_chart_painter.dart

@@ -77,7 +77,7 @@ class LineChartPainter extends AxisChartPainter<LineChartData>
       return;
     }
 
-    if (data.clipToBorder) {
+    if (data.clipData.any) {
       canvas.saveLayer(Rect.fromLTWH(0, -40, size.width + 40, size.height + 40), Paint());
 
       _clipToBorder(canvas, size);
@@ -111,7 +111,7 @@ class LineChartPainter extends AxisChartPainter<LineChartData>
       _drawTouchedSpotsIndicator(canvas, size, barData);
     }
 
-    if (data.clipToBorder) {
+    if (data.clipData.any) {
       canvas.restore();
     }
 
@@ -143,29 +143,33 @@ class LineChartPainter extends AxisChartPainter<LineChartData>
     ui.Canvas canvas,
     ui.Size size,
   ) {
+    final clip = data.clipData;
     final usableSize = getChartUsableDrawSize(size);
+    final border = data.borderData.show ? data.borderData.border : null;
 
-    double left = 0;
-    double top = 0;
-    double right = 0;
-    double bottom = 0;
-    if (data.borderData.show) {
-      final border = data.borderData.border;
-
-      left = border?.left?.width ?? 0;
-      top = border?.top?.width ?? 0;
-      right = border?.right?.width ?? 0;
-      bottom = border?.bottom?.width ?? 0;
-    }
+    double left = 0.0;
+    double top = 0.0;
+    double right = size.width;
+    double bottom = size.height;
 
-    final rect = Rect.fromLTRB(
-      getLeftOffsetDrawSize() - (left / 2),
-      getTopOffsetDrawSize() - (top / 2),
-      getLeftOffsetDrawSize() + usableSize.width + (right / 2),
-      getTopOffsetDrawSize() + usableSize.height + (bottom / 2),
-    );
+    if (clip.left) {
+      final borderWidth = border?.left?.width ?? 0;
+      left = getLeftOffsetDrawSize() - (borderWidth / 2);
+    }
+    if (clip.top) {
+      final borderWidth = border?.top?.width ?? 0;
+      top = getTopOffsetDrawSize() - (borderWidth / 2);
+    }
+    if (clip.right) {
+      final borderWidth = border?.right?.width ?? 0;
+      right = getLeftOffsetDrawSize() + usableSize.width + (borderWidth / 2);
+    }
+    if (clip.bottom) {
+      final borderWidth = border?.bottom?.width ?? 0;
+      bottom = getTopOffsetDrawSize() + usableSize.height + (borderWidth / 2);
+    }
 
-    canvas.clipRect(rect);
+    canvas.clipRect(Rect.fromLTRB(left, top, right, bottom));
   }
 
   void _drawBarLine(Canvas canvas, Size viewSize, LineChartBarData barData) {

lib/src/chart/scatter_chart/scatter_chart_data.dart

@@ -35,7 +35,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
   /// on top of each [ScatterChartData.scatterSpots] using [showingTooltipIndicators],
   /// just put spot indices you want to show it on top of them.
   ///
-  /// [clipToBorder] forces the [LineChart] to draw lines inside the chart bounding box.
+  /// [clipData] forces the [LineChart] to draw lines inside the chart bounding box.
   ScatterChartData({
     List<ScatterSpot> scatterSpots,
     FlTitlesData titlesData,
@@ -48,7 +48,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
     double maxX,
     double minY,
     double maxY,
-    bool clipToBorder,
+    FlClipData clipData,
     Color backgroundColor,
   })  : scatterSpots = scatterSpots ?? const [],
         titlesData = titlesData ?? FlTitlesData(),
@@ -59,7 +59,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
           touchData: scatterTouchData ?? ScatterTouchData(),
           borderData: borderData,
           axisTitleData: axisTitleData ?? FlAxisTitleData(),
-          clipToBorder: clipToBorder ?? false,
+          clipData: clipData ?? FlClipData.none(),
           backgroundColor: backgroundColor,
         ) {
     initSuperMinMaxValues(minX, maxX, minY, maxY);
@@ -137,7 +137,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
         maxX: lerpDouble(a.maxX, b.maxX, t),
         minY: lerpDouble(a.minY, b.minY, t),
         maxY: lerpDouble(a.maxY, b.maxY, t),
-        clipToBorder: b.clipToBorder,
+        clipData: b.clipData,
         backgroundColor: Color.lerp(a.backgroundColor, b.backgroundColor, t),
       );
     } else {
@@ -159,7 +159,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
     double maxX,
     double minY,
     double maxY,
-    bool clipToBorder,
+    FlClipData clipData,
     Color backgroundColor,
   }) {
     return ScatterChartData(
@@ -174,7 +174,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
       maxX: maxX ?? this.maxX,
       minY: minY ?? this.minY,
       maxY: maxY ?? this.maxY,
-      clipToBorder: clipToBorder ?? this.clipToBorder,
+      clipData: clipData ?? this.clipData,
       backgroundColor: backgroundColor ?? this.backgroundColor,
     );
   }
@@ -190,7 +190,7 @@ class ScatterChartData extends AxisChartData with EquatableMixin {
         touchData,
         borderData,
         axisTitleData,
-        clipToBorder,
+        clipData,
         backgroundColor,
         minX,
         maxX,

repo_files/documentations/line_chart.md

@@ -28,7 +28,7 @@ LineChart(
 |maxX| gets maximum x of x axis, if null, value will read from the input lineBars | null|
 |minY| gets minimum y of y axis, if null, value will read from the input lineBars | null|
 |maxY| gets maximum y of y axis, if null, value will read from the input lineBars | null|
-|clipToBorder| clip the chart to the border (prevent drawing outside the border) | false|
+|clipData| clip the chart to the border (prevent drawing outside the border) | FlClipData.none()|
 |backgroundColor| a background color which is drawn behind th chart| null |