refactor: Jim/grwt 5290/update crosshair UI based on design refactor

lib/deriv_chart.dart

@@ -154,3 +154,7 @@ export 'src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart';
 export 'src/deriv_chart/chart/data_visualization/markers/marker_props.dart';
 export 'src/theme/colors.dart';
 export 'src/add_ons/drawing_tools_ui/drawing_tools_dialog.dart';
+export 'src/deriv_chart/interactive_layer/crosshair/core/crosshair_variant.dart';
+export 'src/deriv_chart/interactive_layer/crosshair/behaviour/crosshair_behaviour.dart';
+export 'src/deriv_chart/interactive_layer/crosshair/behaviour/line_series_crosshair_behaviour.dart';
+export 'src/deriv_chart/interactive_layer/crosshair/behaviour/ohlc_series_crosshair_behaviour.dart';

lib/src/deriv_chart/chart/bottom_chart.dart

@@ -1,8 +1,6 @@
 import 'package:deriv_chart/src/widgets/bottom_indicator_title.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:deriv_chart/deriv_chart.dart';
-import 'package:deriv_chart/src/deriv_chart/chart/crosshair/crosshair_area_web.dart';
 import 'package:provider/provider.dart';
 
 import 'basic_chart.dart';
@@ -173,18 +171,18 @@ class _BottomChartState extends BasicChartState<BottomChart> {
       ),
     );
   }
-
-  Widget _buildCrosshairAreaWeb() => CrosshairAreaWeb(
-        mainSeries: widget.mainSeries,
-        epochFromCanvasX: xAxis.epochFromX,
-        quoteFromCanvasY: chartQuoteFromCanvasY,
-        epochToCanvasX: xAxis.xFromEpoch,
-        quoteToCanvasY: chartQuoteToCanvasY,
-        quoteLabelsTouchAreaWidth: quoteLabelsTouchAreaWidth,
-        showCrosshairCursor: widget.showCrosshair,
-        onCrosshairDisappeared: widget.onCrosshairDisappeared,
-        onCrosshairHover: widget.onCrosshairHover,
-      );
+// TODO(Jim): Remember to address the crosshair area for web indicators.
+  // Widget _buildCrosshairAreaWeb() => CrosshairAreaWeb(
+  //       mainSeries: widget.mainSeries,
+  //       epochFromCanvasX: xAxis.epochFromX,
+  //       quoteFromCanvasY: chartQuoteFromCanvasY,
+  //       epochToCanvasX: xAxis.xFromEpoch,
+  //       quoteToCanvasY: chartQuoteToCanvasY,
+  //       quoteLabelsTouchAreaWidth: quoteLabelsTouchAreaWidth,
+  //       showCrosshairCursor: widget.showCrosshair,
+  //       onCrosshairDisappeared: widget.onCrosshairDisappeared,
+  //       onCrosshairHover: widget.onCrosshairHover,
+  //     );
 
   @override
   Widget build(BuildContext context) {
@@ -208,7 +206,7 @@ class _BottomChartState extends BasicChartState<BottomChart> {
                 Expanded(child: super.build(context)),
               ],
             ),
-            if (kIsWeb) _buildCrosshairAreaWeb(),
+            // if (kIsWeb) _buildCrosshairAreaWeb(), // TODO(Jim): Address the crosshair area for web indicators.
             _buildBottomChartOptions(context)
           ],
         ),

lib/src/deriv_chart/chart/bottom_chart_mobile.dart

@@ -194,8 +194,8 @@ class IndicatorLabelMobile extends StatelessWidget {
       borderRadius: BorderRadius.circular(Dimens.margin04),
       child: BackdropFilter(
         filter: ImageFilter.blur(
-            sigmaX: Dimens.crosshairInformationBoxContainerGlassBackgroundBlur,
-            sigmaY: Dimens.crosshairInformationBoxContainerGlassBackgroundBlur),
+            sigmaX: theme.crosshairInformationBoxContainerGlassBackgroundBlur,
+            sigmaY: theme.crosshairInformationBoxContainerGlassBackgroundBlur),
         child: Container(
           padding: const EdgeInsets.all(Dimens.margin04),
           decoration: BoxDecoration(

lib/src/deriv_chart/chart/chart.dart

@@ -2,6 +2,8 @@ import 'package:collection/collection.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/data_visualization/models/chart_scale_model.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/mobile_chart_frame_dividers.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/x_axis/x_axis_model.dart';
+import 'package:deriv_chart/src/deriv_chart/interactive_layer/crosshair/behaviour/crosshair_behaviour.dart';
+import 'package:deriv_chart/src/deriv_chart/interactive_layer/crosshair/core/crosshair_variant.dart';
 import 'package:deriv_chart/src/theme/dimens.dart';
 import 'package:flutter/foundation.dart';
 import 'package:deriv_chart/src/deriv_chart/chart/gestures/gesture_manager.dart';
@@ -43,6 +45,7 @@ class Chart extends StatefulWidget {
   const Chart({
     required this.mainSeries,
     required this.granularity,
+    required this.crosshairVariant,
     this.drawingTools,
     this.pipSize = 4,
     this.controller,
@@ -74,6 +77,7 @@ class Chart extends StatefulWidget {
     this.showDataFitButton,
     this.showScrollToLastTickButton,
     this.loadingAnimationColor,
+    this.crosshairBehaviour,
     Key? key,
   }) : super(key: key);
 
@@ -185,6 +189,19 @@ class Chart extends StatefulWidget {
   /// Chart's indicators
   final Repository<IndicatorConfig>? indicatorsRepo;
 
+  /// The variant of the crosshair to be used.
+  /// This is used to determine the type of crosshair to display.
+  /// The default is [CrosshairVariant.smallScreen].
+  /// [CrosshairVariant.largeScreen] is mostly for web.
+  final CrosshairVariant crosshairVariant;
+
+  /// The behavior implementation that defines how the crosshair should be displayed.
+  ///
+  /// If provided, this behavior will be used instead of the default behavior created
+  /// based on the chart's main series and the specified crosshair variant. This allows
+  /// for customization of the crosshair appearance and behavior.
+  final CrosshairBehaviour? crosshairBehaviour;
+
   @override
   State<StatefulWidget> createState() =>
       // TODO(Ramin): Make this customizable from outside.

lib/src/deriv_chart/chart/chart_state_mobile.dart

@@ -141,6 +141,7 @@ class _ChartStateMobile extends _ChartState {
                   quoteBoundsAnimationDuration: quoteBoundsAnimationDuration,
                   showCurrentTickBlinkAnimation:
                       widget.showCurrentTickBlinkAnimation ?? true,
+                  crosshairVariant: widget.crosshairVariant,
                 ),
                 Align(
                   alignment: Alignment.topLeft,

lib/src/deriv_chart/chart/chart_state_web.dart

@@ -46,6 +46,7 @@ class _ChartStateWeb extends _ChartState {
             quoteBoundsAnimationDuration: quoteBoundsAnimationDuration,
             showCurrentTickBlinkAnimation:
                 widget.showCurrentTickBlinkAnimation ?? true,
+            crosshairVariant: widget.crosshairVariant,
           ),
         ),
         if (bottomSeries?.isNotEmpty ?? false)