refactor: Update tooltip configuration and interaction settings in charts

Author: ndonkoHenri

sdk/python/examples/controls/charts/candlestick_chart/example_1.py

@@ -99,7 +99,6 @@ def handle_event(e: ftc.CandlestickChartEvent):
             horizontal_alignment=ftc.HorizontalAlignment.CENTER,
             fit_inside_horizontally=True,
         ),
-        handle_built_in_touches=False,
         on_event=handle_event,
     )
 

sdk/python/examples/controls/charts/scatter_chart/example_1.py

@@ -19,6 +19,7 @@ def __init__(
             radius=radius,
             color=color,
             show_tooltip=show_tooltip,
+            selected=y == 43,
         )
 
 
@@ -145,7 +146,7 @@ def handle_event(e: ftc.ScatterChartEvent):
             right_axis=ftc.ChartAxis(show_labels=False),
             top_axis=ftc.ChartAxis(show_labels=False),
             bottom_axis=ftc.ChartAxis(show_labels=False),
-            show_tooltips_for_selected_spots_only=True,
+            show_tooltips_for_selected_spots_only=False,
             on_event=handle_event,
             animation=ft.Animation(
                 duration=ft.Duration(milliseconds=600),

sdk/python/packages/flet-charts/src/flet_charts/candlestick_chart.py

@@ -17,12 +17,14 @@
 class CandlestickChartTooltip:
     """Configuration of the tooltip for [`CandlestickChart`][(p).]s."""
 
-    bgcolor: ft.ColorValue = "#FF607D8B"
+    bgcolor: ft.ColorValue = "#FFFFECEF"
     """
     Background color applied to the tooltip bubble.
     """
 
-    border_radius: Optional[ft.BorderRadiusValue] = None
+    border_radius: ft.BorderRadiusValue = field(
+        default_factory=lambda: ft.BorderRadius.all(4)
+    )
     """
     Corner radius of the tooltip bubble.
     """
@@ -159,17 +161,18 @@ class CandlestickChart(ft.LayoutControl):
     Enables automatic tooltips and highlighting when hovering the chart.
     """
 
-    handle_built_in_touches: bool = True
+    show_tooltips_for_selected_spots_only: bool = False
     """
-    Allows the chart to manage tooltip visibility automatically.
+    Whether to permanently and only show the tooltips of spots with their
+    [`selected`][(p).CandlestickChartSpot.selected] property set to `True`.
     """
 
     long_press_duration: Optional[ft.DurationValue] = None
     """
     The duration of a long press on the chart.
     """
 
-    touch_spot_threshold: Optional[ft.Number] = None
+    touch_spot_threshold: ft.Number = 4
     """
     The distance threshold to consider a touch near a candlestick.
     """

sdk/python/packages/flet-charts/src/flutter/flet_charts/lib/src/candlestick_chart.dart

@@ -37,9 +37,6 @@ class _CandlestickChartControlState extends State<CandlestickChartControl> {
     final bottomTitles = parseAxisTitles(widget.control.child("bottom_axis"));
 
     final interactive = widget.control.getBool("interactive", true)!;
-    final handleBuiltInTouches =
-        widget.control.getBool("handle_built_in_touches", true)!;
-    final touchSpotThreshold = widget.control.getDouble("touch_spot_threshold");
 
     final spotControls = widget.control.children("spots");
     final candlestickSpots = spotControls.map((spot) {
@@ -54,22 +51,12 @@ class _CandlestickChartControlState extends State<CandlestickChartControl> {
       );
     }).toList();
 
-    final selectedIndicators = spotControls
-        .asMap()
-        .entries
-        .where((e) => e.value.getBool("selected", false)!)
-        .map((e) => e.key)
-        .toList();
-
-    final showingIndicators =
-        (!interactive || !handleBuiltInTouches) ? selectedIndicators : <int>[];
-
     final candlestickTouchData = CandlestickTouchData(
       enabled: interactive && !widget.control.disabled,
       handleBuiltInTouches: !widget.control
           .getBool("show_tooltips_for_selected_spots_only", false)!,
       longPressDuration: widget.control.getDuration("long_press_duration"),
-      touchSpotThreshold: touchSpotThreshold,
+      touchSpotThreshold: widget.control.getDouble("touch_spot_threshold", 4)!,
       touchTooltipData: parseCandlestickTouchTooltipData(
         context,
         widget.control,
@@ -113,7 +100,12 @@ class _CandlestickChartControlState extends State<CandlestickChartControl> {
             widget.control.get("vertical_grid_lines"),
             theme),
         candlestickTouchData: candlestickTouchData,
-        showingTooltipIndicators: showingIndicators,
+        showingTooltipIndicators: spotControls
+            .asMap()
+            .entries
+            .where((e) => e.value.getBool("selected", false)!)
+            .map((e) => e.key)
+            .toList(),
         rotationQuarterTurns:
             widget.control.getInt("rotation_quarter_turns", 0)!,
       ),

sdk/python/packages/flet-charts/src/flutter/flet_charts/lib/src/utils/candlestick_chart.dart

@@ -39,24 +39,24 @@ CandlestickTouchTooltipData parseCandlestickTouchTooltipData(
   final theme = Theme.of(context);
 
   return CandlestickTouchTooltipData(
-    tooltipBorder:
-        parseBorderSide(tooltip["border_side"], theme, defaultValue: BorderSide.none)!,
+    tooltipBorder: parseBorderSide(tooltip["border_side"], theme,
+        defaultValue: BorderSide.none)!,
     rotateAngle: parseDouble(tooltip["rotation"], 0.0)!,
-    tooltipBorderRadius: parseBorderRadius(tooltip["border_radius"]),
-    tooltipPadding: parsePadding(
-        tooltip["padding"], const EdgeInsets.symmetric(horizontal: 16, vertical: 8))!,
+    tooltipBorderRadius:
+        parseBorderRadius(tooltip["border_radius"], BorderRadius.circular(4))!,
+    tooltipPadding: parsePadding(tooltip["padding"],
+        const EdgeInsets.symmetric(horizontal: 16, vertical: 8))!,
     tooltipHorizontalAlignment: parseFLHorizontalAlignment(
         tooltip["horizontal_alignment"], FLHorizontalAlignment.center)!,
     tooltipHorizontalOffset: parseDouble(tooltip["horizontal_offset"], 0)!,
     maxContentWidth: parseDouble(tooltip["max_width"], 120)!,
     fitInsideHorizontally:
         parseBool(tooltip["fit_inside_horizontally"], false)!,
-    fitInsideVertically:
-        parseBool(tooltip["fit_inside_vertically"], false)!,
+    fitInsideVertically: parseBool(tooltip["fit_inside_vertically"], false)!,
     showOnTopOfTheChartBoxArea:
         parseBool(tooltip["show_on_top_of_chart_box_area"], false)!,
-    getTooltipColor: (spot) => parseColor(
-        tooltip["bgcolor"], theme, const Color.fromRGBO(96, 125, 139, 1))!,
+    getTooltipColor: (spot) =>
+        parseColor(tooltip["bgcolor"], theme, const Color(0xFFFFECEF))!,
     getTooltipItems: (painter, touchedSpot, spotIndex) {
       if (spotIndex < 0 || spotIndex >= spotControls.length) {
         return null;
@@ -105,8 +105,9 @@ CandlestickTooltipItem? parseCandlestickTooltipItem(
     textStyle: textStyle,
     bottomMargin: parseDouble(tooltip["bottom_margin"], 8)!,
     textAlign: parseTextAlign(tooltip["text_align"], TextAlign.center)!,
-    textDirection:
-        parseBool(tooltip["rtl"], false)! ? TextDirection.rtl : TextDirection.ltr,
+    textDirection: parseBool(tooltip["rtl"], false)!
+        ? TextDirection.rtl
+        : TextDirection.ltr,
     children: tooltip["text_spans"] != null
         ? parseTextSpans(tooltip["text_spans"], theme, (s, eventName,
             [eventData]) {