fix: improved markers

suisin-deriv · Jun 14, 2023 · 8484ef2 · 8484ef2
1 parent 12a1d51
commit 8484ef2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/packages/core/src/Stores/Helpers/chart-markers.js b/packages/core/src/Stores/Helpers/chart-markers.js
@@ -102,18 +102,18 @@ const createTickMarkers = contract_info => {
         let marker_config;
         if (is_entry_spot) {
             marker_config = createMarkerSpotEntry(contract_info);
-        } else if (is_middle_spot && !is_accu_preexit_spot) {
+        } else if (is_middle_spot && (!is_accu_preexit_spot || is_contract_closed)) {
             marker_config = createMarkerSpotMiddle(contract_info, tick, idx);
         } else if (is_exit_spot && !is_accu_current_last_spot) {
             tick.align_label = 'top'; // force exit spot label to be 'top' to avoid overlapping
             marker_config = createMarkerSpotExit(contract_info, tick, idx);
         }
         if (is_accumulator) {
-            if (is_accu_current_last_spot && !is_contract_closed) return;
+            if ((is_accu_current_last_spot || is_exit_spot) && !is_contract_closed) return;
             if (marker_config && (is_middle_spot || is_exit_spot)) {
                 const spot_className = marker_config.content_config.spot_className;
                 marker_config.content_config.spot_className = `${spot_className} ${spot_className}--accumulator${
-                    is_exit_spot ? '-exit' : '-middle'
+                    is_exit_spot ? '-exit' : `-middle${is_accu_preexit_spot ? '--preexit' : ''}`
                 }`;
             }
         }

diff --git a/packages/reports/src/sass/app/modules/smart-chart.scss b/packages/reports/src/sass/app/modules/smart-chart.scss
@@ -57,13 +57,18 @@
             height: 16px;
         }
         &--accumulator {
-            &-middle {
+            &-middle,
+            &-middle--preexit {
                 width: 6px;
                 height: 6px;
                 top: -3px;
                 margin-left: -4px;
                 background-color: var(--text-less-prominent);
 
+                &--preexit {
+                    background-color: var(--status-info);
+                    border: 2px solid var(--status-info);
+                }
                 @include mobile {
                     width: 4px;
                     height: 4px;
@@ -75,7 +80,6 @@
                 width: 2rem;
                 height: 2rem;
                 margin-left: -0.95rem;
-                border-width: 0.2rem;
                 background-color: var(--general-main-4);
                 &:after {
                     content: '';

diff --git a/packages/trader/src/Modules/SmartChart/Components/all-markers.jsx b/packages/trader/src/Modules/SmartChart/Components/all-markers.jsx
@@ -191,7 +191,6 @@ const draw_shaded_barriers = ({
         ctx.stroke();
     }
     if (middle_top < end_top) {
-        const global_composite_operation = ctx.globalCompositeOperation;
         ctx.globalCompositeOperation = 'destination-over';
         const { radius, preceding_tick, stroke_color: prev_tick_stroke_color } = previous_tick || {};
         if (preceding_tick) {
@@ -226,7 +225,7 @@ const draw_shaded_barriers = ({
         ctx.moveTo(start_left + (radius || 0), middle_top);
         ctx.lineTo(end_left, middle_top);
         ctx.stroke();
-        ctx.globalCompositeOperation = global_composite_operation;
+        ctx.globalCompositeOperation = 'source-over';
     }
     if (is_bottom_visible || has_persistent_borders) {
         ctx.fillStyle = stroke_color;

diff --git a/packages/trader/src/sass/app/modules/smart-chart.scss b/packages/trader/src/sass/app/modules/smart-chart.scss
@@ -57,13 +57,18 @@
             height: 16px;
         }
         &--accumulator {
-            &-middle {
+            &-middle,
+            &-middle--preexit {
                 width: 6px;
                 height: 6px;
                 top: -3px;
                 margin-left: -4px;
                 background-color: var(--text-less-prominent);
 
+                &--preexit {
+                    background-color: var(--status-info);
+                    border: 2px solid var(--status-info);
+                }
                 @include mobile {
                     width: 4px;
                     height: 4px;
@@ -75,7 +80,6 @@
                 width: 2rem;
                 height: 2rem;
                 margin-left: -0.95rem;
-                border-width: 0.2rem;
                 background-color: var(--general-main-4);
                 &:after {
                     content: '';