From 85d31eabc6ff7677caba6298892557e42540d8a3 Mon Sep 17 00:00:00 2001 From: terryl1900 Date: Sun, 14 Mar 2021 23:37:14 -0700 Subject: [PATCH 1/2] Control bar chart tooltip direction. --- .../bar_chart/samples/bar_chart_sample3.dart | 2 +- lib/src/chart/bar_chart/bar_chart_data.dart | 27 +++++++++++++--- .../chart/bar_chart/bar_chart_painter.dart | 13 +++++--- lib/src/chart/line_chart/line_chart_data.dart | 10 +++--- .../chart/line_chart/line_chart_painter.dart | 4 +-- repo_files/documentations/bar_chart.md | 3 +- repo_files/documentations/line_chart.md | 2 +- test/chart/data_pool.dart | 32 +++++++++---------- 8 files changed, 57 insertions(+), 36 deletions(-) diff --git a/example/lib/bar_chart/samples/bar_chart_sample3.dart b/example/lib/bar_chart/samples/bar_chart_sample3.dart index 53d22a112..8cfba0be3 100644 --- a/example/lib/bar_chart/samples/bar_chart_sample3.dart +++ b/example/lib/bar_chart/samples/bar_chart_sample3.dart @@ -24,7 +24,7 @@ class BarChartSample3State extends State { touchTooltipData: BarTouchTooltipData( tooltipBgColor: Colors.transparent, tooltipPadding: const EdgeInsets.all(0), - tooltipBottomMargin: 8, + tooltipMargin: 8, getTooltipItem: ( BarChartGroupData group, int groupIndex, diff --git a/lib/src/chart/bar_chart/bar_chart_data.dart b/lib/src/chart/bar_chart/bar_chart_data.dart index 67d304c54..f9a2f1a50 100644 --- a/lib/src/chart/bar_chart/bar_chart_data.dart +++ b/lib/src/chart/bar_chart/bar_chart_data.dart @@ -602,6 +602,18 @@ class BarTouchData extends FlTouchData with EquatableMixin { ]; } +/// Controls showing tooltip on top or bottom. +enum TooltipDirection { + /// Tooltip shows on top if value is positive, on bottom if value is negative. + auto, + + /// Tooltip always shows on top. + top, + + /// Tooltip always shows on bottom. + bottom, +} + /// Holds representation data for showing tooltip popup on top of rods. class BarTouchTooltipData with EquatableMixin { /// The tooltip background color. @@ -614,7 +626,7 @@ class BarTouchTooltipData with EquatableMixin { final EdgeInsets tooltipPadding; /// Applies a bottom margin for showing tooltip on top of rods. - final double tooltipBottomMargin; + final double tooltipMargin; /// Restricts the tooltip's width. final double maxContentWidth; @@ -628,13 +640,16 @@ class BarTouchTooltipData with EquatableMixin { /// Forces the tooltip to shift vertically inside the chart, if overflow happens. final bool fitInsideVertically; + /// Controls showing tooltip on top or bottom, default is auto. + final TooltipDirection direction; + /// if [BarTouchData.handleBuiltInTouches] is true, /// [BarChart] shows a tooltip popup on top of rods automatically when touch happens, /// otherwise you can show it manually using [BarChartGroupData.showingTooltipIndicators]. /// Tooltip shows on top of rods, with [tooltipBgColor] as a background color, /// and you can set corner radius using [tooltipRoundedRadius]. /// If you want to have a padding inside the tooltip, fill [tooltipPadding], - /// or If you want to have a bottom margin, set [tooltipBottomMargin]. + /// or If you want to have a bottom margin, set [tooltipMargin]. /// Content of the tooltip will provide using [getTooltipItem] callback, you can override it /// and pass your custom data to show in the tooltip. /// You can restrict the tooltip's width using [maxContentWidth]. @@ -645,19 +660,21 @@ class BarTouchTooltipData with EquatableMixin { Color? tooltipBgColor, double? tooltipRoundedRadius, EdgeInsets? tooltipPadding, - double? tooltipBottomMargin, + double? tooltipMargin, double? maxContentWidth, GetBarTooltipItem? getTooltipItem, bool? fitInsideHorizontally, bool? fitInsideVertically, + TooltipDirection? direction, }) : tooltipBgColor = tooltipBgColor ?? Colors.white, tooltipRoundedRadius = tooltipRoundedRadius ?? 4, tooltipPadding = tooltipPadding ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - tooltipBottomMargin = tooltipBottomMargin ?? 16, + tooltipMargin = tooltipMargin ?? 16, maxContentWidth = maxContentWidth ?? 120, getTooltipItem = getTooltipItem ?? defaultBarTooltipItem, fitInsideHorizontally = fitInsideHorizontally ?? false, fitInsideVertically = fitInsideVertically ?? false, + direction = direction ?? TooltipDirection.auto, super(); /// Used for equality check, see [EquatableMixin]. @@ -666,7 +683,7 @@ class BarTouchTooltipData with EquatableMixin { tooltipBgColor, tooltipRoundedRadius, tooltipPadding, - tooltipBottomMargin, + tooltipMargin, maxContentWidth, getTooltipItem, fitInsideHorizontally, diff --git a/lib/src/chart/bar_chart/bar_chart_painter.dart b/lib/src/chart/bar_chart/bar_chart_painter.dart index 855b9cd7d..ac9e6b736 100644 --- a/lib/src/chart/bar_chart/bar_chart_painter.dart +++ b/lib/src/chart/bar_chart/bar_chart_painter.dart @@ -518,14 +518,17 @@ class BarChartPainter extends AxisChartPainter with TouchHandler 0; - final tooltipWidth = textWidth + tooltipData.tooltipPadding.horizontal; final tooltipHeight = textHeight + tooltipData.tooltipPadding.vertical; - final tooltipTop = isPositive - ? barOffset.dy - tooltipHeight - tooltipData.tooltipBottomMargin - : barOffset.dy + tooltipData.tooltipBottomMargin; + final zeroY = getPixelY(0, chartUsableSize); + final barTopY = min(zeroY, barOffset.dy); + final barBottomY = max(zeroY, barOffset.dy); + final onTop = tooltipData.direction == TooltipDirection.top || + (tooltipData.direction == TooltipDirection.auto && showOnRodData.y > 0); + final tooltipTop = onTop + ? barTopY - tooltipHeight - tooltipData.tooltipMargin + : barBottomY + tooltipData.tooltipMargin; /// draw the background rect with rounded radius // ignore: omit_local_variable_types diff --git a/lib/src/chart/line_chart/line_chart_data.dart b/lib/src/chart/line_chart/line_chart_data.dart index 0998820bb..e46a7820e 100644 --- a/lib/src/chart/line_chart/line_chart_data.dart +++ b/lib/src/chart/line_chart/line_chart_data.dart @@ -1422,7 +1422,7 @@ class LineTouchTooltipData with EquatableMixin { final EdgeInsets tooltipPadding; /// Applies a bottom margin for showing tooltip on top of rods. - final double tooltipBottomMargin; + final double tooltipMargin; /// Restricts the tooltip's width. final double maxContentWidth; @@ -1445,7 +1445,7 @@ class LineTouchTooltipData with EquatableMixin { /// Tooltip shows on top of spots, with [tooltipBgColor] as a background color, /// and you can set corner radius using [tooltipRoundedRadius]. /// If you want to have a padding inside the tooltip, fill [tooltipPadding], - /// or If you want to have a bottom margin, set [tooltipBottomMargin]. + /// or If you want to have a bottom margin, set [tooltipMargin]. /// Content of the tooltip will provide using [getTooltipItems] callback, you can override it /// and pass your custom data to show in the tooltip. /// You can restrict the tooltip's width using [maxContentWidth]. @@ -1456,7 +1456,7 @@ class LineTouchTooltipData with EquatableMixin { Color? tooltipBgColor, double? tooltipRoundedRadius, EdgeInsets? tooltipPadding, - double? tooltipBottomMargin, + double? tooltipMargin, double? maxContentWidth, GetLineTooltipItems? getTooltipItems, bool? fitInsideHorizontally, @@ -1465,7 +1465,7 @@ class LineTouchTooltipData with EquatableMixin { }) : tooltipBgColor = tooltipBgColor ?? Colors.white, tooltipRoundedRadius = tooltipRoundedRadius ?? 4, tooltipPadding = tooltipPadding ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - tooltipBottomMargin = tooltipBottomMargin ?? 16, + tooltipMargin = tooltipMargin ?? 16, maxContentWidth = maxContentWidth ?? 120, getTooltipItems = getTooltipItems ?? defaultLineTooltipItem, fitInsideHorizontally = fitInsideHorizontally ?? false, @@ -1479,7 +1479,7 @@ class LineTouchTooltipData with EquatableMixin { tooltipBgColor, tooltipRoundedRadius, tooltipPadding, - tooltipBottomMargin, + tooltipMargin, maxContentWidth, getTooltipItems, fitInsideHorizontally, diff --git a/lib/src/chart/line_chart/line_chart_painter.dart b/lib/src/chart/line_chart/line_chart_painter.dart index c5175fee0..c0a2471d3 100644 --- a/lib/src/chart/line_chart/line_chart_painter.dart +++ b/lib/src/chart/line_chart/line_chart_painter.dart @@ -1158,9 +1158,9 @@ class LineChartPainter extends AxisChartPainter double tooltipTopPosition; if (tooltipData.showOnTopOfTheChartBoxArea) { - tooltipTopPosition = 0 - tooltipHeight - tooltipData.tooltipBottomMargin; + tooltipTopPosition = 0 - tooltipHeight - tooltipData.tooltipMargin; } else { - tooltipTopPosition = mostTopOffset.dy - tooltipHeight - tooltipData.tooltipBottomMargin; + tooltipTopPosition = mostTopOffset.dy - tooltipHeight - tooltipData.tooltipMargin; } /// draw the background rect with rounded radius diff --git a/repo_files/documentations/bar_chart.md b/repo_files/documentations/bar_chart.md index 5b19ed04f..43ffde023 100644 --- a/repo_files/documentations/bar_chart.md +++ b/repo_files/documentations/bar_chart.md @@ -88,11 +88,12 @@ enum values {`start`, `end`, `center`, `spaceEvenly`, `spaceAround`, `spaceBetwe |tooltipBgColor|background color of the tooltip bubble|Colors.white| |tooltipRoundedRadius|background corner radius of the tooltip bubble|4| |tooltipPadding|padding of the tooltip|EdgeInsets.symmetric(horizontal: 16, vertical: 8)| - |tooltipBottomMargin|bottom margin of the tooltip (to the top of most top spot)|16| + |tooltipMargin|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| |fitInsideHorizontally| forces tooltip to horizontally shift inside the chart's bounding box| false| |fitInsideVertically| forces tooltip to vertically shift inside the chart's bounding box| false| + |direction| Controls showing tooltip on top or bottom, default is auto.| auto| ### BarTooltipItem |PropName|Description|default value| diff --git a/repo_files/documentations/line_chart.md b/repo_files/documentations/line_chart.md index 4145d7988..03b781325 100644 --- a/repo_files/documentations/line_chart.md +++ b/repo_files/documentations/line_chart.md @@ -174,7 +174,7 @@ LineChart( |tooltipBgColor|background color of the tooltip bubble|Colors.white| |tooltipRoundedRadius|background corner radius of the tooltip bubble|4| |tooltipPadding|padding of the tooltip|EdgeInsets.symmetric(horizontal: 16, vertical: 8)| - |tooltipBottomMargin|bottom margin of the tooltip (to the top of most top spot)|16| + |tooltipMargin|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| |fitInsideHorizontally| forces tooltip to horizontally shift inside the chart's bounding box| false| diff --git a/test/chart/data_pool.dart b/test/chart/data_pool.dart index defdf9a37..8a6255e56 100644 --- a/test/chart/data_pool.dart +++ b/test/chart/data_pool.dart @@ -921,7 +921,7 @@ final LineTouchTooltipData lineTouchTooltipData1 = LineTouchTooltipData( fitInsideHorizontally: true, fitInsideVertically: false, tooltipRoundedRadius: 12, - tooltipBottomMargin: 33, + tooltipMargin: 33, ); final LineTouchTooltipData lineTouchTooltipData1Clone = LineTouchTooltipData( tooltipPadding: const EdgeInsets.all(0.1), @@ -931,7 +931,7 @@ final LineTouchTooltipData lineTouchTooltipData1Clone = LineTouchTooltipData( fitInsideHorizontally: true, fitInsideVertically: false, tooltipRoundedRadius: 12, - tooltipBottomMargin: 33, + tooltipMargin: 33, ); final LineTouchTooltipData lineTouchTooltipData2 = LineTouchTooltipData( @@ -942,7 +942,7 @@ final LineTouchTooltipData lineTouchTooltipData2 = LineTouchTooltipData( fitInsideHorizontally: true, fitInsideVertically: false, tooltipRoundedRadius: 12, - tooltipBottomMargin: 33, + tooltipMargin: 33, ); final LineTouchTooltipData lineTouchTooltipData3 = LineTouchTooltipData( tooltipPadding: const EdgeInsets.all(0.2), @@ -952,7 +952,7 @@ final LineTouchTooltipData lineTouchTooltipData3 = LineTouchTooltipData( fitInsideHorizontally: true, fitInsideVertically: false, tooltipRoundedRadius: 12, - tooltipBottomMargin: 33, + tooltipMargin: 33, ); final LineTouchTooltipData lineTouchTooltipData4 = LineTouchTooltipData( tooltipPadding: const EdgeInsets.all(0.1), @@ -962,7 +962,7 @@ final LineTouchTooltipData lineTouchTooltipData4 = LineTouchTooltipData( fitInsideHorizontally: true, fitInsideVertically: false, tooltipRoundedRadius: 12, - tooltipBottomMargin: 33, + tooltipMargin: 33, ); final LineTouchTooltipData lineTouchTooltipData5 = LineTouchTooltipData( tooltipPadding: const EdgeInsets.all(0.1), @@ -972,7 +972,7 @@ final LineTouchTooltipData lineTouchTooltipData5 = LineTouchTooltipData( fitInsideHorizontally: true, fitInsideVertically: false, tooltipRoundedRadius: 12, - tooltipBottomMargin: 34, + tooltipMargin: 34, ); final Function(LineTouchResponse) lineTouchCallback = (response) {}; @@ -2580,7 +2580,7 @@ final BarTouchTooltipData barTouchTooltipData1 = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: getTooltipItem, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData1Clone = BarTouchTooltipData( tooltipRoundedRadius: 12, @@ -2590,7 +2590,7 @@ final BarTouchTooltipData barTouchTooltipData1Clone = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: getTooltipItem, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData2 = BarTouchTooltipData( tooltipRoundedRadius: 13, @@ -2600,7 +2600,7 @@ final BarTouchTooltipData barTouchTooltipData2 = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: getTooltipItem, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData3 = BarTouchTooltipData( tooltipRoundedRadius: 12, @@ -2610,7 +2610,7 @@ final BarTouchTooltipData barTouchTooltipData3 = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: getTooltipItem, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData4 = BarTouchTooltipData( tooltipRoundedRadius: 12, @@ -2620,7 +2620,7 @@ final BarTouchTooltipData barTouchTooltipData4 = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: getTooltipItem, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData5 = BarTouchTooltipData( tooltipRoundedRadius: 12, @@ -2630,7 +2630,7 @@ final BarTouchTooltipData barTouchTooltipData5 = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: getTooltipItem, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData6 = BarTouchTooltipData( tooltipRoundedRadius: 12, @@ -2640,7 +2640,7 @@ final BarTouchTooltipData barTouchTooltipData6 = BarTouchTooltipData( tooltipBgColor: Colors.blue, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: getTooltipItem, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData7 = BarTouchTooltipData( tooltipRoundedRadius: 12, @@ -2650,7 +2650,7 @@ final BarTouchTooltipData barTouchTooltipData7 = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: null, getTooltipItem: getTooltipItem, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData8 = BarTouchTooltipData( tooltipRoundedRadius: 12, @@ -2660,7 +2660,7 @@ final BarTouchTooltipData barTouchTooltipData8 = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: null, - tooltipBottomMargin: 12, + tooltipMargin: 12, ); final BarTouchTooltipData barTouchTooltipData9 = BarTouchTooltipData( tooltipRoundedRadius: 12, @@ -2670,7 +2670,7 @@ final BarTouchTooltipData barTouchTooltipData9 = BarTouchTooltipData( tooltipBgColor: Colors.green, tooltipPadding: const EdgeInsets.all(23), getTooltipItem: getTooltipItem, - tooltipBottomMargin: 333, + tooltipMargin: 333, ); final Function(BarTouchResponse) barTouchCallback = (response) {}; From c41042de3632ce8feb2797bd96ddd029d62dfaea Mon Sep 17 00:00:00 2001 From: terryl1900 Date: Mon, 15 Mar 2021 17:19:16 -0700 Subject: [PATCH 2/2] Address comments. --- lib/src/chart/bar_chart/bar_chart_painter.dart | 4 ++-- repo_files/documentations/bar_chart.md | 2 +- repo_files/documentations/line_chart.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/src/chart/bar_chart/bar_chart_painter.dart b/lib/src/chart/bar_chart/bar_chart_painter.dart index ac9e6b736..098b89ad0 100644 --- a/lib/src/chart/bar_chart/bar_chart_painter.dart +++ b/lib/src/chart/bar_chart/bar_chart_painter.dart @@ -524,9 +524,9 @@ class BarChartPainter extends AxisChartPainter with TouchHandler 0); - final tooltipTop = onTop + final tooltipTop = drawTooltipOnTop ? barTopY - tooltipHeight - tooltipData.tooltipMargin : barBottomY + tooltipData.tooltipMargin; diff --git a/repo_files/documentations/bar_chart.md b/repo_files/documentations/bar_chart.md index 43ffde023..3770e9046 100644 --- a/repo_files/documentations/bar_chart.md +++ b/repo_files/documentations/bar_chart.md @@ -88,7 +88,7 @@ enum values {`start`, `end`, `center`, `spaceEvenly`, `spaceAround`, `spaceBetwe |tooltipBgColor|background color of the tooltip bubble|Colors.white| |tooltipRoundedRadius|background corner radius of the tooltip bubble|4| |tooltipPadding|padding of the tooltip|EdgeInsets.symmetric(horizontal: 16, vertical: 8)| - |tooltipMargin|bottom margin of the tooltip (to the top of most top spot)|16| + |tooltipMargin|margin between the tooltip and the touched 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| |fitInsideHorizontally| forces tooltip to horizontally shift inside the chart's bounding box| false| diff --git a/repo_files/documentations/line_chart.md b/repo_files/documentations/line_chart.md index 03b781325..81ca48c25 100644 --- a/repo_files/documentations/line_chart.md +++ b/repo_files/documentations/line_chart.md @@ -174,7 +174,7 @@ LineChart( |tooltipBgColor|background color of the tooltip bubble|Colors.white| |tooltipRoundedRadius|background corner radius of the tooltip bubble|4| |tooltipPadding|padding of the tooltip|EdgeInsets.symmetric(horizontal: 16, vertical: 8)| - |tooltipMargin|bottom margin of the tooltip (to the top of most top spot)|16| + |tooltipMargin|margin between the tooltip and the touched 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| |fitInsideHorizontally| forces tooltip to horizontally shift inside the chart's bounding box| false|