Merge pull request #221 from imaNNeoFighT/dev

Dev

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.8.3
+* prevent to set BorderRadius with numbers larger than (width / 2), fixed #200.
+* added `fitInsideTheChart` property inside `BarTouchTooltipData` and `LineTouchTooltipData` to force tooltip draw inside the chart (shift it to the chart), fixed #159.
+
 ## 0.8.2
 * added `fullHeightTouchLine` in [LineTouchData](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#linetouchdata-read-about-touch-handling) to show a full height touch line, see sample in merge request #208.
 * added `label` ([HorizontalLineLabel](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#horizontallinelabel)) inside [HorizontalLine](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#horizontalline) and [VerticalLine](https://github.com/imaNNeoFighT/fl_chart/blob/master/repo_files/documentations/line_chart.md#verticalline) to show a lable text on the lines.

README.md

@@ -41,7 +41,7 @@ Thank you all!
 
 ```kotlin
 dependencies:
-  fl_chart: ^0.8.2
+  fl_chart: ^0.8.3
 ```
 
 

example/lib/bar_chart/samples/bar_chart_sample5.dart

@@ -40,7 +40,7 @@ class BarChartSample5State extends State<BarChartSample5> {
                 show: true,
                 bottomTitles: SideTitles(
                   showTitles: true,
-                  textStyle: TextStyle(color: Colors.white, fontSize: 10),
+                  textStyle: const TextStyle(color: Colors.white, fontSize: 10),
                   margin: 10,
                   rotateAngle: 0,
                   getTitles: (double value) {
@@ -66,7 +66,7 @@ class BarChartSample5State extends State<BarChartSample5> {
                 ),
                 leftTitles: SideTitles(
                   showTitles: true,
-                  textStyle: TextStyle(color: Colors.white, fontSize: 10),
+                  textStyle: const TextStyle(color: Colors.white, fontSize: 10),
                   rotateAngle: 45,
                   getTitles: (double value) {
                     if (value == 0) {
@@ -80,7 +80,7 @@ class BarChartSample5State extends State<BarChartSample5> {
                 ),
                 rightTitles: SideTitles(
                   showTitles: true,
-                  textStyle: TextStyle(color: Colors.white, fontSize: 10),
+                  textStyle: const TextStyle(color: Colors.white, fontSize: 10),
                   rotateAngle: 90,
                   getTitles: (double value) {
                     if (value == 0) {
@@ -110,16 +110,16 @@ class BarChartSample5State extends State<BarChartSample5> {
                 show: false,
               ),
               barGroups: [
-                const BarChartGroupData(
+                BarChartGroupData(
                   x: 0,
                   barRods: [
                     BarChartRodData(
                       y: 15.1,
                       width: barWidth,
-                      borderRadius: BorderRadius.only(
+                      borderRadius: const BorderRadius.only(
                           topLeft: Radius.circular(6),
                           topRight: Radius.circular(6)),
-                      rodStackItem: [
+                      rodStackItem: const [
                         BarChartRodStackItem(0, 2, Color(0xff2bdb90)),
                         BarChartRodStackItem(2, 5, Color(0xffffdd80)),
                         BarChartRodStackItem(5, 7.5, Color(0xffff4d94)),
@@ -128,16 +128,16 @@ class BarChartSample5State extends State<BarChartSample5> {
                     ),
                   ],
                 ),
-                const BarChartGroupData(
+                BarChartGroupData(
                   x: 1,
                   barRods: [
                     BarChartRodData(
                       y: 14,
                       width: barWidth,
-                      borderRadius: BorderRadius.only(
+                      borderRadius: const BorderRadius.only(
                           topLeft: Radius.circular(6),
                           topRight: Radius.circular(6)),
-                      rodStackItem: [
+                      rodStackItem: const [
                         BarChartRodStackItem(0, 1.8, Color(0xff2bdb90)),
                         BarChartRodStackItem(1.8, 4.5, Color(0xffffdd80)),
                         BarChartRodStackItem(4.5, 7.5, Color(0xffff4d94)),
@@ -146,16 +146,16 @@ class BarChartSample5State extends State<BarChartSample5> {
                     ),
                   ],
                 ),
-                const BarChartGroupData(
+                BarChartGroupData(
                   x: 2,
                   barRods: [
                     BarChartRodData(
                       y: 13,
                       width: barWidth,
-                      borderRadius: BorderRadius.only(
+                      borderRadius: const BorderRadius.only(
                           topLeft: Radius.circular(6),
                           topRight: Radius.circular(6)),
-                      rodStackItem: [
+                      rodStackItem: const [
                         BarChartRodStackItem(0, 1.5, Color(0xff2bdb90)),
                         BarChartRodStackItem(1.5, 3.5, Color(0xffffdd80)),
                         BarChartRodStackItem(3.5, 7, Color(0xffff4d94)),
@@ -164,16 +164,16 @@ class BarChartSample5State extends State<BarChartSample5> {
                     ),
                   ],
                 ),
-                const BarChartGroupData(
+                BarChartGroupData(
                   x: 3,
                   barRods: [
                     BarChartRodData(
                       y: 13.5,
                       width: barWidth,
-                      borderRadius: BorderRadius.only(
+                      borderRadius: const BorderRadius.only(
                           topLeft: Radius.circular(6),
                           topRight: Radius.circular(6)),
-                      rodStackItem: [
+                      rodStackItem: const [
                         BarChartRodStackItem(0, 1.5, Color(0xff2bdb90)),
                         BarChartRodStackItem(1.5, 3, Color(0xffffdd80)),
                         BarChartRodStackItem(3, 7, Color(0xffff4d94)),
@@ -182,16 +182,16 @@ class BarChartSample5State extends State<BarChartSample5> {
                     ),
                   ],
                 ),
-                const BarChartGroupData(
+                BarChartGroupData(
                   x: 4,
                   barRods: [
                     BarChartRodData(
                       y: 18,
                       width: barWidth,
-                      borderRadius: BorderRadius.only(
+                      borderRadius: const BorderRadius.only(
                           topLeft: Radius.circular(6),
                           topRight: Radius.circular(6)),
-                      rodStackItem: [
+                      rodStackItem: const [
                         BarChartRodStackItem(0, 2, Color(0xff2bdb90)),
                         BarChartRodStackItem(2, 4, Color(0xffffdd80)),
                         BarChartRodStackItem(4, 9, Color(0xffff4d94)),
@@ -200,16 +200,16 @@ class BarChartSample5State extends State<BarChartSample5> {
                     ),
                   ],
                 ),
-                const BarChartGroupData(
+                BarChartGroupData(
                   x: 5,
                   barRods: [
                     BarChartRodData(
                       y: 17,
                       width: barWidth,
-                      borderRadius: BorderRadius.only(
+                      borderRadius: const BorderRadius.only(
                           topLeft: Radius.circular(6),
                           topRight: Radius.circular(6)),
-                      rodStackItem: [
+                      rodStackItem: const [
                         BarChartRodStackItem(0, 1.2, Color(0xff2bdb90)),
                         BarChartRodStackItem(1.2, 2.7, Color(0xffffdd80)),
                         BarChartRodStackItem(2.7, 7, Color(0xffff4d94)),
@@ -218,16 +218,16 @@ class BarChartSample5State extends State<BarChartSample5> {
                     ),
                   ],
                 ),
-                const BarChartGroupData(
+                BarChartGroupData(
                   x: 6,
                   barRods: [
                     BarChartRodData(
                       y: 16,
                       width: barWidth,
-                      borderRadius: BorderRadius.only(
+                      borderRadius: const BorderRadius.only(
                           topLeft: Radius.circular(6),
                           topRight: Radius.circular(6)),
-                      rodStackItem: [
+                      rodStackItem: const [
                         BarChartRodStackItem(0, 1.2, Color(0xff2bdb90)),
                         BarChartRodStackItem(1.2, 6, Color(0xffffdd80)),
                         BarChartRodStackItem(6, 11, Color(0xffff4d94)),

lib/src/chart/bar_chart/bar_chart_data.dart

@@ -6,6 +6,7 @@ import 'package:fl_chart/src/chart/base/axis_chart/axis_chart_data.dart';
 import 'package:fl_chart/src/chart/base/base_chart/base_chart_data.dart';
 import 'package:fl_chart/src/chart/base/base_chart/touch_input.dart';
 import 'package:fl_chart/src/utils/lerp.dart';
+import 'package:fl_chart/src/utils/utils.dart';
 import 'package:flutter/material.dart';
 
 /// This class is responsible to holds data to draw Bar Chart
@@ -227,14 +228,14 @@ class BarChartRodData {
   final BackgroundBarChartRodData backDrawRodData;
   final List<BarChartRodStackItem> rodStackItem;
 
-  const BarChartRodData({
+  BarChartRodData({
     this.y,
     this.color = Colors.blueAccent,
     this.width = 8,
-    this.borderRadius,
+    BorderRadius borderRadius,
     this.backDrawRodData = const BackgroundBarChartRodData(),
     this.rodStackItem = const [],
-  });
+  }) :borderRadius = normalizeBorderRadius(borderRadius, width);
 
   BarChartRodData copyWith({
     double y,
@@ -377,6 +378,7 @@ class BarTouchTooltipData {
   final double tooltipBottomMargin;
   final double maxContentWidth;
   final GetBarTooltipItem getTooltipItem;
+  final bool fitInsideTheChart;
 
   const BarTouchTooltipData({
     this.tooltipBgColor = Colors.white,
@@ -385,6 +387,7 @@ class BarTouchTooltipData {
     this.tooltipBottomMargin = 16,
     this.maxContentWidth = 120,
     this.getTooltipItem = defaultBarTooltipItem,
+    this.fitInsideTheChart = false,
   }) : super();
 }
 

lib/src/chart/bar_chart/bar_chart_painter.dart

@@ -395,11 +395,34 @@ class BarChartPainter extends AxisChartPainter<BarChartData> with TouchHandler<B
     final double tooltipHeight = textHeight + tooltipData.tooltipPadding.vertical;
 
     /// draw the background rect with rounded radius
-    final Rect rect = Rect.fromLTWH(
+    Rect rect = Rect.fromLTWH(
         mostTopOffset.dx - (tooltipWidth / 2),
         mostTopOffset.dy - tooltipHeight - tooltipData.tooltipBottomMargin,
         tooltipWidth,
         tooltipHeight);
+
+    if (tooltipData.fitInsideTheChart) {
+      if (rect.left < 0) {
+        final shiftAmount = 0 - rect.left;
+        rect = Rect.fromLTRB(
+          rect.left + shiftAmount,
+          rect.top,
+          rect.right + shiftAmount,
+          rect.bottom,
+        );
+      }
+
+      if (rect.right > viewSize.width) {
+        final shiftAmount = rect.right - viewSize.width;
+        rect = Rect.fromLTRB(
+          rect.left - shiftAmount,
+          rect.top,
+          rect.right - shiftAmount,
+          rect.bottom,
+        );
+      }
+    }
+
     final Radius radius = Radius.circular(tooltipData.tooltipRoundedRadius);
     final RRect roundedRect = RRect.fromRectAndCorners(rect,
         topLeft: radius, topRight: radius, bottomLeft: radius, bottomRight: radius);

lib/src/chart/line_chart/line_chart_data.dart

@@ -702,6 +702,7 @@ class LineTouchTooltipData {
   final double tooltipBottomMargin;
   final double maxContentWidth;
   final GetLineTooltipItems getTooltipItems;
+  final bool fitInsideTheChart;
 
   const LineTouchTooltipData({
     this.tooltipBgColor = Colors.white,
@@ -710,6 +711,7 @@ class LineTouchTooltipData {
     this.tooltipBottomMargin = 16,
     this.maxContentWidth = 120,
     this.getTooltipItems = defaultLineTooltipItem,
+    this.fitInsideTheChart = false,
   }) : super();
 }
 

lib/src/chart/line_chart/line_chart_painter.dart

@@ -947,11 +947,32 @@ class LineChartPainter extends AxisChartPainter<LineChartData>
     final double tooltipHeight = sumTextsHeight + tooltipData.tooltipPadding.vertical;
 
     /// draw the background rect with rounded radius
-    final Rect rect = Rect.fromLTWH(
+    Rect rect = Rect.fromLTWH(
         mostTopOffset.dx - (tooltipWidth / 2),
         mostTopOffset.dy - tooltipHeight - tooltipData.tooltipBottomMargin,
         tooltipWidth,
         tooltipHeight);
+
+    if (tooltipData.fitInsideTheChart) {
+      if (rect.left < 0) {
+        final shiftAmount = 0 - rect.left;
+        rect = Rect.fromLTRB(rect.left + shiftAmount,
+            rect.top,
+            rect.right + shiftAmount,
+            rect.bottom,
+          );
+      }
+
+      if (rect.right > viewSize.width) {
+        final shiftAmount = rect.right - viewSize.width;
+        rect = Rect.fromLTRB(rect.left - shiftAmount,
+            rect.top,
+            rect.right - shiftAmount,
+            rect.bottom,
+          );
+      }
+    }
+
     final Radius radius = Radius.circular(tooltipData.tooltipRoundedRadius);
     final RRect roundedRect = RRect.fromRectAndCorners(rect,
         topLeft: radius, topRight: radius, bottomLeft: radius, bottomRight: radius);

lib/src/utils/utils.dart

@@ -26,3 +26,48 @@ Size getDefaultSize(Size screenSize) {
 double translateRotatedPosition(double size, double degree) {
   return (size / 4) * math.sin(radians(degree.abs()));
 }
+
+BorderRadius normalizeBorderRadius(BorderRadius borderRadius, double width) {
+  if (borderRadius == null) {
+    return null;
+  }
+
+  Radius topLeft;
+  if (borderRadius.topLeft != null
+    && (borderRadius.topLeft.x > width / 2 || borderRadius.topLeft.y > width / 2)) {
+    topLeft = Radius.circular(width / 2);
+  } else {
+    topLeft = borderRadius.topLeft;
+  }
+
+  Radius topRight;
+  if ((borderRadius.topRight != null)
+    && (borderRadius.topRight.x > width / 2 || borderRadius.topRight.y > width / 2)) {
+    topRight = Radius.circular(width / 2);
+  } else {
+    topRight = borderRadius.topRight;
+  }
+
+  Radius bottomLeft;
+  if ((borderRadius.bottomLeft != null)
+    && (borderRadius.bottomLeft.x > width / 2 || borderRadius.bottomLeft.y > width / 2)) {
+    bottomLeft = Radius.circular(width / 2);
+  } else {
+    bottomLeft = borderRadius.bottomLeft;
+  }
+
+  Radius bottomRight;
+  if ((borderRadius.bottomRight != null)
+    && (borderRadius.bottomRight.x > width / 2 || borderRadius.bottomRight.y > width / 2)) {
+    bottomRight = Radius.circular(width / 2);
+  } else {
+    bottomRight = borderRadius.bottomRight;
+  }
+
+  return BorderRadius.only(
+    topLeft: topLeft,
+    topRight: topRight,
+    bottomLeft: bottomLeft,
+    bottomRight: bottomRight,
+  );
+}

pubspec.yaml

@@ -1,6 +1,6 @@
 name: fl_chart
 description: A powerful Flutter chart library, currently supporting Line Chart, Bar Chart and Pie Chart.
-version: 0.8.2
+version: 0.8.3
 homepage: https://github.com/imaNNeoFighT/fl_chart
 
 environment:

repo_files/documentations/bar_chart.md

@@ -85,6 +85,7 @@ enum values {`start`, `end`, `center`, `spaceEvenly`, `spaceAround`, `spaceBetwe
  |tooltipBottomMargin|bottom margin of the tooltip (to the top of most top spot)|16|
  |maxContentWidth|maximum width of the tooltip (if a text row is wider than this, then the text breaks to a new line|120|
  |getTooltipItems|a callback that retrieve [BarTooltipItem](#BarTooltipItem) by the given [BarChartGroupData](#BarChartGroupData), groupIndex, [BarChartRodData](#BarChartRodData) and rodIndex |defaultBarTooltipItem|
+ |fitInsideTheChart| forces tooltip to shift inside the chart's bounding box| false|
 
 ### BarTooltipItem
 |PropName|Description|default value|

repo_files/documentations/line_chart.md

@@ -158,6 +158,7 @@ LineChart(
  |tooltipBottomMargin|bottom margin of the tooltip (to the top of most top spot)|16|
  |maxContentWidth|maximum width of the tooltip (if a text row is wider than this, then the text breaks to a new line|120|
  |getTooltipItems|a callback that retrieve list of [LineTooltipItem](#LineTooltipItem) by the given list of [LineBarSpot](#LineBarSpot) |defaultLineTooltipItem|
+ |fitInsideTheChart| forces tooltip to shift inside the chart's bounding box| false|
 
 ### LineTooltipItem
 |PropName|Description|default value|