Merge pull request #1588 from ahmadtaimoor-deriv/feat_seperate_y_axis

Ahmad/Seperate Y Axis
deriv-com · Jul 2, 2024 · 200b371 · 200b371
2 parents 968450a + be10ee0
commit 200b371
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 158 deletions.
diff --git a/chart_app/lib/src/markers/marker_icon_painters/accumulator_marker_icon_painter.dart b/chart_app/lib/src/markers/marker_icon_painters/accumulator_marker_icon_painter.dart
@@ -63,7 +63,7 @@ class AccumulatorMarkerIconPainter extends TickMarkerIconPainter {
 
       final double endLeft = endMarker != null
           ? _getOffset(endMarker, epochToX, quoteToY).dx
-          : size.width - painterProps.yAxisWidth - 15;
+          : size.width;
 
       _drawShadedBarriers(
         canvas: canvas,
@@ -137,93 +137,98 @@ class AccumulatorMarkerIconPainter extends TickMarkerIconPainter {
       fontSize: painterProps.isMobile ? 10 : 14,
     );
 
-    if (previousTickMarker != null && previousTickMarker.color != null) {
-      _drawPreviousTickBarrier(
-        canvas,
-        startLeft,
-        endLeft,
-        middleTop,
-        previousTickMarker.color!,
-        barrierColor,
-      );
-    }
+    YAxisConfig.instance.yAxisClipping(canvas, size, () {
+      if (previousTickMarker != null && previousTickMarker.color != null) {
+        _drawPreviousTickBarrier(
+          size,
+          canvas,
+          startLeft,
+          endLeft,
+          middleTop,
+          previousTickMarker.color!,
+          barrierColor,
+        );
+      }
 
-    if (isTopVisible || hasPersistentBorders) {
-      final Path path = Path()
-        ..moveTo(startLeft + 2.5, displayedTop)
-        ..lineTo(startLeft - 2.5, displayedTop)
-        ..lineTo(startLeft, displayedTop + 4.5)
-        ..lineTo(startLeft + 2.5, displayedTop)
-        ..close();
-
-      canvas.drawPath(path, paint);
-
-      paintHorizontalDashedLine(
-        canvas,
-        startLeft - 2.5,
-        endLeft,
-        displayedTop,
-        barrierColor,
-        1.5,
-        dashSpace: 0,
-      );
+      if (isTopVisible || hasPersistentBorders) {
+        final Path path = Path()
+          ..moveTo(startLeft + 2.5, displayedTop)
+          ..lineTo(startLeft - 2.5, displayedTop)
+          ..lineTo(startLeft, displayedTop + 4.5)
+          ..lineTo(startLeft + 2.5, displayedTop)
+          ..close();
 
-      // draw difference between high barrier and previous spot price
-      if (highMarker.text != null) {
-        final TextPainter textPainter =
-            makeTextPainter(highMarker.text!, textStyle);
+        canvas.drawPath(path, paint);
 
-        paintWithTextPainter(
+        paintHorizontalDashedLine(
           canvas,
-          painter: textPainter,
-          anchor: Offset(endLeft - 1, displayedTop - 10),
-          anchorAlignment: Alignment.centerRight,
+          startLeft - 2.5,
+          endLeft,
+          displayedTop,
+          barrierColor,
+          1.5,
+          dashSpace: 0,
         );
+
+        // draw difference between high barrier and previous spot price
+        if (highMarker.text != null) {
+          final TextPainter textPainter =
+              makeTextPainter(highMarker.text!, textStyle);
+          paintWithTextPainter(
+            canvas,
+            painter: textPainter,
+            anchor: Offset(endLeft - YAxisConfig.instance.cachedLabelWidth! - 1,
+                displayedTop - 10),
+            anchorAlignment: Alignment.centerRight,
+          );
+        }
       }
-    }
-    if (isBottomVisible || hasPersistentBorders) {
-      final Path path = Path()
-        ..moveTo(startLeft + 2.5, displayedBottom)
-        ..lineTo(startLeft - 2.5, displayedBottom)
-        ..lineTo(startLeft, displayedBottom - 4.5)
-        ..lineTo(startLeft + 2.5, displayedBottom)
-        ..close();
-
-      canvas.drawPath(path, paint);
-
-      paintHorizontalDashedLine(
-        canvas,
-        startLeft - 2.5,
-        endLeft,
-        displayedBottom,
-        barrierColor,
-        1.5,
-        dashSpace: 0,
-      );
+      if (isBottomVisible || hasPersistentBorders) {
+        final Path path = Path()
+          ..moveTo(startLeft + 2.5, displayedBottom)
+          ..lineTo(startLeft - 2.5, displayedBottom)
+          ..lineTo(startLeft, displayedBottom - 4.5)
+          ..lineTo(startLeft + 2.5, displayedBottom)
+          ..close();
 
-      // draw difference between low barrier and previous spot price
-      if (lowMarker.text != null) {
-        final TextPainter textPainter =
-            makeTextPainter(lowMarker.text!, textStyle);
+        canvas.drawPath(path, paint);
 
-        paintWithTextPainter(
+        paintHorizontalDashedLine(
           canvas,
-          painter: textPainter,
-          anchor: Offset(endLeft - 1, displayedBottom + 12),
-          anchorAlignment: Alignment.centerRight,
+          startLeft - 2.5,
+          endLeft,
+          displayedBottom,
+          barrierColor,
+          1.5,
+          dashSpace: 0,
         );
+
+        // draw difference between low barrier and previous spot price
+        if (lowMarker.text != null) {
+          final TextPainter textPainter =
+              makeTextPainter(lowMarker.text!, textStyle);
+
+          paintWithTextPainter(
+            canvas,
+            painter: textPainter,
+            anchor: Offset(endLeft - YAxisConfig.instance.cachedLabelWidth! - 1,
+                displayedBottom + 12),
+            anchorAlignment: Alignment.centerRight,
+          );
+        }
       }
-    }
 
-    final Paint rectPaint = Paint()..color = shadeColor;
+      final Paint rectPaint = Paint()..color = shadeColor;
 
-    canvas.drawRect(
-      Rect.fromLTRB(startLeft, displayedTop, endLeft, displayedBottom),
-      rectPaint,
-    );
+      canvas.drawRect(
+        Rect.fromLTRB(startLeft, displayedTop, endLeft, displayedBottom),
+        rectPaint,
+      );
+    });
   }
 
   void _drawPreviousTickBarrier(
+    Size size,
     Canvas canvas,
     double startX,
     double endX,

diff --git a/chart_app/lib/src/markers/marker_icon_painters/digit_marker_icon_painter.dart b/chart_app/lib/src/markers/marker_icon_painters/digit_marker_icon_painter.dart
@@ -52,8 +52,10 @@ class DigitMarkerIconPainter extends MarkerGroupIconPainter {
 
     for (final WebMarker marker in markerGroup.markers) {
       final Offset center = points[marker.markerType!]!;
-      _drawMarker(canvas, size, theme, marker, center, markerGroup.style,
-          painterProps.zoom, opacity);
+      YAxisConfig.instance.yAxisClipping(canvas, size, () {
+        _drawMarker(canvas, size, theme, marker, center, markerGroup.style,
+            painterProps.zoom, opacity);
+      });
     }
   }
 

diff --git a/chart_app/lib/src/markers/marker_icon_painters/tick_marker_icon_painter.dart b/chart_app/lib/src/markers/marker_icon_painters/tick_marker_icon_painter.dart
@@ -76,49 +76,52 @@ class TickMarkerIconPainter extends MarkerGroupIconPainter {
     final Offset? _endOffset = points[MarkerType.end];
     final Offset? _exitOffset = points[MarkerType.exit];
 
-    if (_entryOffset != null && _startOffset != null) {
-      paintHorizontalDashedLine(
-        canvas,
-        _startOffset.dx,
-        _entryOffset.dx,
-        _startOffset.dy,
-        color,
-        1,
-        dashWidth: 1,
-        dashSpace: 1,
-      );
-    }
+    YAxisConfig.instance.yAxisClipping(canvas, size, () {
+      if (_entryOffset != null && _startOffset != null) {
+        paintHorizontalDashedLine(
+          canvas,
+          _startOffset.dx,
+          _entryOffset.dx,
+          _startOffset.dy,
+          color,
+          1,
+          dashWidth: 1,
+          dashSpace: 1,
+        );
+      }
 
-    if (_entryOffset != null && (_latestOffset != null || _endOffset != null)) {
-      final double dx = (_latestOffset?.dx ?? _endOffset?.dx)!;
-      final double dy = (_latestOffset?.dy ?? _endOffset?.dy)!;
+      if (_entryOffset != null &&
+          (_latestOffset != null || _endOffset != null)) {
+        final double dx = (_latestOffset?.dx ?? _endOffset?.dx)!;
+        final double dy = (_latestOffset?.dy ?? _endOffset?.dy)!;
 
-      canvas.drawLine(_entryOffset, Offset(dx, dy), paint);
-    }
+        canvas.drawLine(_entryOffset, Offset(dx, dy), paint);
+      }
 
-    if (_entryOffset != null && _entryTickOffset != null) {
-      paintVerticalLine(
-        canvas,
-        _entryOffset,
-        _entryTickOffset,
-        color,
-        1,
-        dashWidth: 2,
-        dashSpace: 2,
-      );
-    }
+      if (_entryOffset != null && _entryTickOffset != null) {
+        paintVerticalLine(
+          canvas,
+          _entryOffset,
+          _entryTickOffset,
+          color,
+          1,
+          dashWidth: 2,
+          dashSpace: 2,
+        );
+      }
 
-    if (_exitOffset != null && _endOffset != null) {
-      paintVerticalLine(
-        canvas,
-        _exitOffset,
-        _endOffset,
-        color,
-        1,
-        dashWidth: 2,
-        dashSpace: 2,
-      );
-    }
+      if (_exitOffset != null && _endOffset != null) {
+        paintVerticalLine(
+          canvas,
+          _exitOffset,
+          _endOffset,
+          color,
+          1,
+          dashWidth: 2,
+          dashSpace: 2,
+        );
+      }
+    });
   }
 
   void _drawMarker(Canvas canvas, Size size, ChartTheme theme, WebMarker marker,
@@ -127,39 +130,41 @@ class TickMarkerIconPainter extends MarkerGroupIconPainter {
 
     final Paint paint = Paint()..color = color;
 
-    switch (marker.markerType) {
-      case MarkerType.activeStart:
-        paintStartLine(canvas, size, marker, anchor, style, zoom);
-        break;
-      case MarkerType.start:
-        _drawStartPoint(
-            canvas, size, theme, marker, anchor, style, zoom, opacity);
-        break;
-      case MarkerType.entry:
-      case MarkerType.entryTick:
-        _drawEntryPoint(canvas, theme, anchor, color, zoom, opacity);
-        break;
-      case MarkerType.end:
-        paintEndMarker(canvas, theme, anchor - Offset(1, 20 * zoom),
-            style.backgroundColor, zoom);
-        break;
-      case MarkerType.exit:
-        canvas.drawCircle(
-          anchor,
-          3 * zoom,
-          paint,
-        );
-        break;
-      case MarkerType.tick:
-        final Paint paint = Paint()..color = theme.base01Color;
-        _drawTickPoint(canvas, anchor, paint, zoom);
-        break;
-      case MarkerType.latestTick:
-        _drawTickPoint(canvas, anchor, paint, zoom);
-        break;
-      default:
-        break;
-    }
+    YAxisConfig.instance.yAxisClipping(canvas, size, () {
+      switch (marker.markerType) {
+        case MarkerType.activeStart:
+          paintStartLine(canvas, size, marker, anchor, style, zoom);
+          break;
+        case MarkerType.start:
+          _drawStartPoint(
+              canvas, size, theme, marker, anchor, style, zoom, opacity);
+          break;
+        case MarkerType.entry:
+        case MarkerType.entryTick:
+          _drawEntryPoint(canvas, theme, anchor, color, zoom, opacity);
+          break;
+        case MarkerType.end:
+          paintEndMarker(canvas, theme, anchor - Offset(1, 20 * zoom),
+              style.backgroundColor, zoom);
+          break;
+        case MarkerType.exit:
+          canvas.drawCircle(
+            anchor,
+            3 * zoom,
+            paint,
+          );
+          break;
+        case MarkerType.tick:
+          final Paint paint = Paint()..color = theme.base01Color;
+          _drawTickPoint(canvas, anchor, paint, zoom);
+          break;
+        case MarkerType.latestTick:
+          _drawTickPoint(canvas, anchor, paint, zoom);
+          break;
+        default:
+          break;
+      }
+    });
   }
 
   void _drawTickPoint(Canvas canvas, Offset anchor, Paint paint, double zoom) {

diff --git a/chart_app/lib/src/painters/blink_tick_painter.dart b/chart_app/lib/src/painters/blink_tick_painter.dart
@@ -54,18 +54,21 @@ class BlinkingTickPainter<T extends BlinkingTickIndicator>
 
       if (animationInfo.currentTickPercent > 0 &&
           animationInfo.currentTickPercent < 1) {
+        YAxisConfig.instance.yAxisClipping(canvas, size, () {
+          canvas.drawCircle(
+            Offset(dotX!, y),
+            3 + (animationInfo.currentTickPercent * 6),
+            Paint()..color = _paint.color.withOpacity(0.15),
+          );
+        });
+      }
+      YAxisConfig.instance.yAxisClipping(canvas, size, () {
         canvas.drawCircle(
-          Offset(dotX, y),
-          3 + (animationInfo.currentTickPercent * 6),
-          Paint()..color = _paint.color.withOpacity(0.15),
+          Offset(dotX!, y),
+          3,
+          _paint,
         );
-      }
-
-      canvas.drawCircle(
-        Offset(dotX, y),
-        3,
-        _paint,
-      );
+      });
     }
   }
 }