Maryia/79549/part 1: update tick markers for ACCU in contract details…

… + improvements (#27) * maryia/79549/add_tick_markers_contract_details * chore: improvements for styles in responsive trade types desc
yauheni-deriv · Oct 26, 2022 · 4d96abd · 4d96abd
1 parent d30a038
commit 4d96abd
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 42 deletions.
diff --git a/packages/core/src/Components/markers/marker-spot-label.jsx b/packages/core/src/Components/markers/marker-spot-label.jsx
@@ -39,17 +39,19 @@ const MarkerSpotLabel = ({
                     <div
                         className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
                     >
-                        <div className='chart-spot-label__time-container'>
-                            <Icon
-                                icon='IcClockOutline'
-                                height={10}
-                                width={10}
-                                className='chart-spot-label__time-icon'
-                            />
-                            <Text as='p' color='prominent' size='xxxs'>
-                                {toMoment(+spot_epoch).format('HH:mm:ss')}
-                            </Text>
-                        </div>
+                        {spot_epoch && (
+                            <div className='chart-spot-label__time-container'>
+                                <Icon
+                                    icon='IcClockOutline'
+                                    height={10}
+                                    width={10}
+                                    className='chart-spot-label__time-icon'
+                                />
+                                <Text as='p' color='prominent' size='xxxs'>
+                                    {toMoment(+spot_epoch).format('HH:mm:ss')}
+                                </Text>
+                            </div>
+                        )}
                         <div
                             className={classNames('chart-spot-label__value-container', {
                                 'chart-spot-label__value-container--won': status === 'won',

diff --git a/packages/core/src/Stores/Helpers/chart-marker-helpers.js b/packages/core/src/Stores/Helpers/chart-marker-helpers.js
@@ -1,5 +1,12 @@
 import extend from 'extend';
-import { isUserSold, isMultiplierContract, isDigitContract, getEndTime, isMobile } from '@deriv/shared';
+import {
+    isUserSold,
+    isAccumulatorContract,
+    isMultiplierContract,
+    isDigitContract,
+    getEndTime,
+    isMobile,
+} from '@deriv/shared';
 
 import { MARKER_TYPES_CONFIG } from '../Constants/markers';
 
@@ -12,8 +19,11 @@ const createMarkerConfig = (marker_type, x, y, content_config) =>
         content_config,
     });
 
-export const getSpotCount = (contract_info, spot_count) =>
-    isDigitContract(contract_info.contract_type) ? spot_count + 1 : spot_count;
+export const getSpotCount = (contract_info, spot_count) => {
+    if (isDigitContract(contract_info.contract_type)) return spot_count + 1;
+    else if (isAccumulatorContract(contract_info.contract_type)) return undefined;
+    return spot_count;
+};
 
 // -------------------- Lines --------------------
 export const createMarkerEndTime = contract_info => {
@@ -101,10 +111,11 @@ export const createMarkerSpotExit = (contract_info, tick, idx) => {
 export const createMarkerSpotMiddle = (contract_info, tick, idx) => {
     const spot_count = getSpotCount(contract_info, idx);
     const spot = tick.tick_display_value;
+    const spot_epoch = isAccumulatorContract(contract_info.contract_type) ? '' : `${tick.epoch}`;
 
     const marker_config = createMarkerConfig(MARKER_TYPES_CONFIG.SPOT_MIDDLE.type, +tick.epoch, +spot, {
         spot_value: `${spot}`,
-        spot_epoch: `${tick.epoch}`,
+        spot_epoch,
         align_label: tick.align_label,
         spot_count,
     });

diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
@@ -39,17 +39,19 @@ const MarkerSpotLabel = ({
                     <div
                         className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
                     >
-                        <div className='chart-spot-label__time-container'>
-                            <Icon
-                                icon='IcClockOutline'
-                                height={10}
-                                width={10}
-                                className='chart-spot-label__time-icon'
-                            />
-                            <Text as='p' color='prominent' size='xxxs'>
-                                {toMoment(+spot_epoch).format('HH:mm:ss')}
-                            </Text>
-                        </div>
+                        {spot_epoch && (
+                            <div className='chart-spot-label__time-container'>
+                                <Icon
+                                    icon='IcClockOutline'
+                                    height={10}
+                                    width={10}
+                                    className='chart-spot-label__time-icon'
+                                />
+                                <Text as='p' color='prominent' size='xxxs'>
+                                    {toMoment(+spot_epoch).format('HH:mm:ss')}
+                                </Text>
+                            </div>
+                        )}
                         <div
                             className={classNames('chart-spot-label__value-container', {
                                 'chart-spot-label__value-container--won': status === 'won',

diff --git a/packages/shared/src/utils/helpers/dummy_accumulators_data.js b/packages/shared/src/utils/helpers/dummy_accumulators_data.js
@@ -1,11 +1,11 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable prefer-const */
-const dummy_current_time = 1666338480; // should be an epoch of some real tick!
+const dummy_current_time = 1666720140; // should be an epoch of some real tick!
 const dummy_start_time = dummy_current_time - 7;
 const dummy_end_time = dummy_current_time + 6;
 
-const high_barrier = 6587.9;
-const low_barrier = 6586.5;
+const high_barrier = 6609.9;
+const low_barrier = 6609.5;
 const tick_1_price = low_barrier + 0.1;
 const tick_2_price = low_barrier + 0.15;
 const tick_3_price = low_barrier + 0.5;

diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx b/packages/trader/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
@@ -39,17 +39,19 @@ const MarkerSpotLabel = ({
                     <div
                         className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
                     >
-                        <div className='chart-spot-label__time-container'>
-                            <Icon
-                                icon='IcClockOutline'
-                                height={10}
-                                width={10}
-                                className='chart-spot-label__time-icon'
-                            />
-                            <Text as='p' color='prominent' size='xxxs'>
-                                {toMoment(+spot_epoch).format('HH:mm:ss')}
-                            </Text>
-                        </div>
+                        {spot_epoch && (
+                            <div className='chart-spot-label__time-container'>
+                                <Icon
+                                    icon='IcClockOutline'
+                                    height={10}
+                                    width={10}
+                                    className='chart-spot-label__time-icon'
+                                />
+                                <Text as='p' color='prominent' size='xxxs'>
+                                    {toMoment(+spot_epoch).format('HH:mm:ss')}
+                                </Text>
+                            </div>
+                        )}
                         <div
                             className={classNames('chart-spot-label__value-container', {
                                 'chart-spot-label__value-container--won': status === 'won',

diff --git a/packages/trader/src/Modules/Trading/Containers/trade.jsx b/packages/trader/src/Modules/Trading/Containers/trade.jsx
@@ -416,7 +416,7 @@ const Chart = props => {
             {show_accumulators_stats &&
                 accumulators_positions.map(({ contract_info }) => {
                     return (
-                        contract_info.is_sold && (
+                        !!contract_info.is_sold && (
                             <AccumulatorsProfitLossTooltip key={contract_info.contract_id} {...contract_info} />
                         )
                     );

diff --git a/packages/trader/src/sass/app/_common/components/contract-type-info.scss b/packages/trader/src/sass/app/_common/components/contract-type-info.scss
@@ -63,6 +63,7 @@
             }
         }
         @include mobile {
+            width: 32rem;
             /* postcss-bem-linter: ignore */
             h2 {
                 @include typeface(--small-left-bold-black, none);
@@ -73,6 +74,11 @@
             ul li {
                 @include typeface(--small-left-normal-black, none);
             }
+            h2,
+            p,
+            ul li {
+                line-height: 1.5;
+            }
         }
     }
     &__gif {
@@ -81,7 +87,13 @@
         border-radius: 4px;
 
         @include mobile {
-            height: auto;
+            width: 32.8rem;
+            height: 14.1rem;
+            background-color: var(--general-section-1);
+            svg {
+                width: 100%;
+                height: 100%;
+            }
         }
     }
     &__action-bar {