feat: [GRWT-8814] Add checkpoint based trade type markers

example/lib/main.dart

@@ -120,10 +120,10 @@ class _FullscreenChartState extends State<FullscreenChart> {
 
   late PrefServiceCache _prefService;
 
-  TradeType _currentTradeType = TradeType.multipliers;
+  TradeType _currentTradeType = TradeType.riseFall;
 
   // Dynamic marker duration in milliseconds
-  int _markerDurationMs = 1000 * 60 * 1 * 1;
+  int _markerDurationMs = 1000 * 5 * 1 * 1;
   // PnL label lifetime after marker end in milliseconds
   static const int _pnlLabelLifetimeMs = 4000;
 
@@ -146,7 +146,7 @@ class _FullscreenChartState extends State<FullscreenChart> {
     await _prefService.setDefaultValues(<String, dynamic>{
       'appID': defaultAppID,
       'endpoint': defaultEndpoint,
-      'tradeType': TradeType.multipliers.value,
+      'tradeType': TradeType.riseFall.value,
     });
 
     // Load current trade type from preferences
@@ -885,6 +885,19 @@ class _FullscreenChartState extends State<FullscreenChart> {
             direction: marker.direction,
             markerType: MarkerType.entrySpot,
           ),
+          ChartMarker(
+            epoch: (endEpoch - marker.epoch) ~/ 2 + marker.epoch,
+            quote: marker.quote,
+            direction: marker.direction,
+            text: '1',
+            markerType: MarkerType.checkpointLine,
+          ),
+          ChartMarker(
+            epoch: (endEpoch - marker.epoch) ~/ 2 + marker.epoch,
+            quote: marker.quote,
+            direction: marker.direction,
+            markerType: MarkerType.checkpointLineCollapsed,
+          ),
           ChartMarker(
             epoch: endEpoch,
             quote: marker.quote,
@@ -895,6 +908,7 @@ class _FullscreenChartState extends State<FullscreenChart> {
             epoch: endEpoch,
             quote: marker.quote,
             direction: marker.direction,
+            text: '2',
             markerType: MarkerType.exitTime,
           ),
           ChartMarker(

lib/deriv_chart.dart

@@ -148,6 +148,7 @@ export 'src/deriv_chart/chart/data_visualization/markers/marker_icon_painters/ac
 export 'src/deriv_chart/chart/data_visualization/markers/marker_icon_painters/digit_marker_icon_painter.dart';
 export 'src/deriv_chart/chart/data_visualization/markers/marker_icon_painters/tick_marker_icon_painter.dart';
 export 'src/deriv_chart/chart/helpers/chart.dart';
+export 'src/deriv_chart/chart/helpers/paint_functions/paint_checkpoint_line.dart';
 export 'src/deriv_chart/chart/helpers/paint_functions/paint_end_marker.dart';
 export 'src/deriv_chart/chart/helpers/paint_functions/paint_start_line.dart';
 export 'src/deriv_chart/chart/helpers/paint_functions/paint_start_marker.dart';

lib/src/deriv_chart/chart/data_visualization/markers/chart_marker.dart

@@ -120,6 +120,21 @@ enum MarkerType {
   /// It appears as a pill-shaped label with rounded corners containing an icon and the profit/loss
   /// amount.
   profitAndLossLabelFixed,
+
+  /// Represents a checkpoint line marker for multi-stage contracts.
+  ///
+  /// This marker renders as a vertical dashed line similar to start/end time markers.
+  /// It can display optional text (e.g., "1", "2") at the bottom of the line to indicate
+  /// checkpoint sequence. Used for intermediate evaluation points in contracts like
+  /// Double Rise/Fall where multiple checkpoints need to be visualized.
+  checkpointLine,
+
+  /// Represents a compact solid checkpoint vertical line.
+  ///
+  /// Draws a short, solid vertical line segment to indicate
+  /// a checkpoint time in a condensed layout. Similar to startTimeCollapsed and exitTimeCollapsed,
+  /// but used for intermediate checkpoints in multi-stage contracts.
+  checkpointLineCollapsed,
 }
 
 /// A specialized marker class for displaying various types of markers on a financial chart.
@@ -153,12 +168,14 @@ class ChartMarker extends Marker {
   /// The `color` parameter allows for customization of the marker's color, which can be
   /// used to visually distinguish different types of markers or to highlight specific markers.
   ///
-  /// @param epoch The timestamp of the marker in epoch format (milliseconds since Unix epoch).
-  /// @param quote The price value of the marker.
-  /// @param direction The direction in which the marker is pointing (up or down).
-  /// @param markerType The type of marker, which determines its role and rendering.
-  /// @param text The text to display on or near the marker.
-  /// @param color The color of the marker.
+  /// The [epoch] is the timestamp of the marker in epoch format (milliseconds since Unix epoch).
+  /// The [quote] is the price value of the marker.
+  /// The [direction] is the direction in which the marker is pointing (up or down).
+  /// The [onTap] is an optional callback function invoked when the marker is tapped.
+  /// The [markerType] determines the type of marker, which determines its role and rendering.
+  /// The [text] is the text to display on or near the marker.
+  /// The [color] is the color of the marker.
+  /// The [hasReducedOpacity] determines whether the marker should be rendered with reduced opacity by 50%.
   ChartMarker({
     required int epoch,
     required double quote,
@@ -167,6 +184,7 @@ class ChartMarker extends Marker {
     this.markerType,
     this.text,
     this.color,
+    this.hasReducedOpacity = false,
   }) : super(epoch: epoch, quote: quote, direction: direction, onTap: onTap);
 
   /// The type of marker, which determines its role and how it's rendered on the chart.
@@ -195,4 +213,12 @@ class ChartMarker extends Marker {
   /// If provided, this color overrides the default direction-based coloring.
   /// If null, uses [style.upColor] for [MarkerDirection.up] or [style.downColor] for [MarkerDirection.down].
   final Color? color;
+
+  /// Whether marker should be rendered with reduced opacity by 50%.
+  ///
+  /// When set to true, marker will be rendered at half opacity. This is useful for indicating markers that represent
+  /// future or unreached checkpoints in multi-stage contracts.
+  ///
+  /// Defaults to false (full opacity).
+  final bool hasReducedOpacity;
 }

lib/src/deriv_chart/chart/data_visualization/markers/marker_icon_painters/digit_marker_icon_painter.dart

@@ -42,8 +42,8 @@ class DigitMarkerIconPainter extends MarkerGroupIconPainter {
   /// when rendering price values. This affects how the last digit is extracted and
   /// displayed in tick markers.
   ///
-  /// @param pipSize The number of decimal places to display for price values.
-  ///                Default is 4, which means prices will be shown with 4 decimal places.
+  /// The [pipSize] parameter determines the number of decimal places to display for price values.
+  /// Default is 4, which means prices will be shown with 4 decimal places.
   DigitMarkerIconPainter({this.pipSize = 4});
 
   /// The number of decimal places to display for price values.
@@ -65,14 +65,14 @@ class DigitMarkerIconPainter extends MarkerGroupIconPainter {
   /// 2. Calculates the opacity based on marker positions
   /// 3. Delegates the rendering of individual markers to specialized methods
   ///
-  /// @param canvas The canvas on which to paint.
-  /// @param size The size of the drawing area.
-  /// @param theme The chart's theme, which provides colors and styles.
-  /// @param markerGroup The group of markers to render.
-  /// @param epochToX A function that converts epoch timestamps to X coordinates.
-  /// @param quoteToY A function that converts price quotes to Y coordinates.
-  /// @param painterProps Properties that affect how markers are rendered.
-  /// @param animationInfo Information about any ongoing animations.
+  /// The [canvas] is the canvas on which to paint.
+  /// The [size] is the size of the drawing area.
+  /// The [theme] is the chart's theme, which provides colors and styles.
+  /// The [markerGroup] is the group of markers to render.
+  /// The [epochToX] is a function that converts epoch timestamps to X coordinates.
+  /// The [quoteToY] is a function that converts price quotes to Y coordinates.
+  /// The [painterProps] contains properties that affect how markers are rendered.
+  /// The [animationInfo] contains information about any ongoing animations.
   @override
   void paintMarkerGroup(
     Canvas canvas,
@@ -122,14 +122,15 @@ class DigitMarkerIconPainter extends MarkerGroupIconPainter {
   /// (start, exit, tick) with their specific visual representations. It delegates
   /// to specialized methods for each marker type.
   ///
-  /// @param canvas The canvas on which to paint.
-  /// @param size The size of the drawing area.
-  /// @param theme The chart's theme, which provides colors and styles.
-  /// @param marker The marker to render.
-  /// @param anchor The position on the canvas where the marker should be rendered.
-  /// @param style The style to apply to the marker.
-  /// @param zoom The current zoom level of the chart.
-  /// @param opacity The opacity to apply to the marker.
+  /// The [canvas] is the canvas on which to paint.
+  /// The [size] is the size of the drawing area.
+  /// The [theme] is the chart's theme, which provides colors and styles.
+  /// The [marker] is the marker to render.
+  /// The [anchor] is the position on the canvas where the marker should be rendered.
+  /// The [style] is the style to apply to the marker.
+  /// The [zoom] is the current zoom level of the chart.
+  /// The [opacity] is the opacity to apply to the marker.
+  /// The [props] contains additional marker properties that can affect rendering.
   void _drawMarker(
       Canvas canvas,
       Size size,
@@ -142,7 +143,8 @@ class DigitMarkerIconPainter extends MarkerGroupIconPainter {
       MarkerProps props) {
     switch (marker.markerType) {
       case MarkerType.startTime:
-        paintStartLine(canvas, size, marker, anchor, style, theme, zoom, props);
+        paintStartLine(
+            canvas, size, marker, anchor, style, theme, zoom, opacity, props);
         break;
 
       case MarkerType.start:
@@ -178,13 +180,13 @@ class DigitMarkerIconPainter extends MarkerGroupIconPainter {
   /// This private method draws a circular marker with the last digit of the price
   /// displayed inside it. It's used for both regular tick markers and exit markers.
   ///
-  /// @param canvas The canvas on which to paint.
-  /// @param marker The marker to render.
-  /// @param anchor The position on the canvas where the marker should be rendered.
-  /// @param style The style to apply to the marker.
-  /// @param paint The paint object to use for drawing.
-  /// @param fontColor The color to use for the digit text.
-  /// @param zoom The current zoom level of the chart.
+  /// The [canvas] is the canvas on which to paint.
+  /// The [marker] is the marker to render.
+  /// The [anchor] is the position on the canvas where the marker should be rendered.
+  /// The [style] is the style to apply to the marker.
+  /// The [paint] is the paint object to use for drawing.
+  /// The [fontColor] is the color to use for the digit text.
+  /// The [zoom] is the current zoom level of the chart.
   void _drawTick(Canvas canvas, Marker marker, Offset anchor, MarkerStyle style,
       Paint paint, Color fontColor, double zoom) {
     canvas
@@ -226,14 +228,14 @@ class DigitMarkerIconPainter extends MarkerGroupIconPainter {
   /// the contract, with an optional text label. The marker's opacity is adjusted
   /// based on its position relative to other markers.
   ///
-  /// @param canvas The canvas on which to paint.
-  /// @param size The size of the drawing area.
-  /// @param theme The chart's theme, which provides colors and styles.
-  /// @param marker The marker to render.
-  /// @param anchor The position on the canvas where the marker should be rendered.
-  /// @param style The style to apply to the marker.
-  /// @param zoom The current zoom level of the chart.
-  /// @param opacity The opacity to apply to the marker.
+  /// The [canvas] is the canvas on which to paint.
+  /// The [size] is the size of the drawing area.
+  /// The [theme] is the chart's theme, which provides colors and styles.
+  /// The [marker] is the marker to render.
+  /// The [anchor] is the position on the canvas where the marker should be rendered.
+  /// The [style] is the style to apply to the marker.
+  /// The [zoom] is the current zoom level of the chart.
+  /// The [opacity] is the opacity to apply to the marker.
   void _drawStartPoint(
       Canvas canvas,
       Size size,