maryia/OPT-323/feat: Accumulators barriers improvements (deriv-com#9554)

* feat: make barriers persistent on dtrader chart * fix: profit font for responsive * Revert "feat: make barriers persistent on dtrader chart" This reverts commit c13147f. * chore: reduce profit text font size * feat: passing whitespace to charts for accu * feat: test draft persistent barriers on the chart * Revert "feat: test draft persistent barriers on the chart" This reverts commit 5dde3d5. * chore: increase width * chore: added barriers for each sold contract * chore: remove barrier-spot difference value for sold contract barriers * feat: redesign mobile infobox * feat: re-design profit tooltip * feat: add yaxis margin for default rescaling to keep barrier range in sight * feat: using yAxisMargin to re-scale the chart * feat: use yAxisMargin prop to adjust scaling * chore: use settings to set scaling * test: add tests for getAccuChartScaleParams * chore: finish incapsulating logic in smartcharts * refactor: drawShadedBarriers * test: refactor and improve tests for getAccuBarriersDTraderTimeout * test: refactor and improve tests for getAccuBarriersDTraderTimeout * refactor: drawAccuBarrierRange * fix: initial rendering of barrier range in c.details * test: getAccuBarriersDTraderTimeout * build: update charts version to 1.3.3 * build: update charts to the latest version * refactor: rename var * revert: max tix for mobile + update whitespace value for accumulators * fix: longcode tooltip & barrier range width in dtrader mobile * fix: max_longcode_length as per latest design change * fix: accu barrier range width * revert: unnecessary files * revert: package-lock * revert: package-lock
shaheer-deriv · Sep 20, 2023 · 4687847 · 4687847
1 parent f58572e
commit 4687847
Show file tree

Hide file tree

Showing 16 changed files with 218 additions and 132 deletions.
diff --git a/packages/core/src/Stores/contract-store.js b/packages/core/src/Stores/contract-store.js
@@ -196,32 +196,30 @@ export default class ContractStore extends BaseStore {
             ) {
                 return;
             }
+            if (!this.barriers_array.length) {
+                // Accumulators barrier range in C.Details consists of labels (this.barriers_array) and horizontal lines with shade (this.marker)
+                this.barriers_array = this.createBarriersArray(
+                    {
+                        ...contract_info,
+                        high_barrier: this.accu_high_barrier,
+                        low_barrier: this.accu_low_barrier,
+                    },
+                    is_dark_mode
+                );
+                this.marker = calculate_marker(this.contract_info, {
+                    accu_high_barrier: this.accu_high_barrier,
+                    accu_low_barrier: this.accu_low_barrier,
+                }); // this.marker is rendered as DelayedAccuBarriersMarker component
+                return;
+            }
             setTimeout(
                 () =>
                     runInAction(() => {
-                        if (!this.barriers_array.length) {
-                            this.barriers_array = this.createBarriersArray(
-                                {
-                                    ...contract_info,
-                                    high_barrier: this.accu_high_barrier,
-                                    low_barrier: this.accu_low_barrier,
-                                },
-                                is_dark_mode
-                            );
-                            return;
-                        }
                         if (contract_info) {
                             if (isBarrierSupported(contract_type) && this.accu_high_barrier && this.accu_low_barrier) {
                                 // updating barrier labels in C.Details page
                                 main_barrier?.updateBarriers(this.accu_high_barrier, this.accu_low_barrier);
                             }
-                            // this.marker contains horizontal barrier lines & shade between rendered as DelayedAccuBarriersMarker in C.Details page
-                            if (!this.marker) {
-                                this.marker = calculate_marker(this.contract_info, {
-                                    accu_high_barrier: this.accu_high_barrier,
-                                    accu_low_barrier: this.accu_low_barrier,
-                                });
-                            }
                             // this.markers_array contains tick markers & start/end vertical lines in C.Details page
                             this.markers_array = createChartMarkers(contract_info, true);
                             // this observable controls the update of DelayedAccuBarriersMarker in C.Details page

diff --git a/packages/core/src/Stores/contract-trade-store.js b/packages/core/src/Stores/contract-trade-store.js
@@ -178,7 +178,6 @@ export default class ContractTradeStore extends BaseStore {
             getAccuBarriersDTraderTimeout({
                 barriers_update_timestamp: Date.now(),
                 has_default_timeout: this.accumulator_barriers_data.current_spot_time !== current_spot_time,
-                should_update_contract_barriers,
                 tick_update_timestamp,
                 underlying,
             })

diff --git a/packages/reports/src/sass/app/_common/layout/trader-layouts.scss b/packages/reports/src/sass/app/_common/layout/trader-layouts.scss
@@ -318,11 +318,17 @@ $FLOATING_HEADER_HEIGHT: 41px;
                     .ciq-asset-information {
                         top: 75px;
                     }
-                    .stx_jump_today.home > svg {
-                        top: 10px;
-                        left: 8px;
-                        padding: 0;
-                        position: absolute;
+                    .stx_jump_today {
+                        @include mobile {
+                            z-index: 15; // must be greater than z-index of mobile .stx-holder.stx-panel-chart
+                        }
+
+                        &.home > svg {
+                            top: 10px;
+                            left: 8px;
+                            padding: 0;
+                            position: absolute;
+                        }
                     }
                     .cq-bottom-ui-widgets {
                         bottom: 30px !important;

diff --git a/packages/reports/src/sass/app/modules/contract.scss b/packages/reports/src/sass/app/modules/contract.scss
@@ -39,11 +39,7 @@ $CONTRACT_INFO_BOX_PADDING: 1.6em;
                 max-width: 35rem;
 
                 @include mobile {
-                    max-width: 23.3rem;
-
-                    a {
-                        font-size: 1rem;
-                    }
+                    max-width: 11rem;
                 }
 
                 a {
@@ -63,11 +59,13 @@ $CONTRACT_INFO_BOX_PADDING: 1.6em;
                     font-size: 1rem;
                     letter-spacing: normal;
                     line-height: 1.4;
-                    max-width: 23.3rem;
-                    /* iPhone SE screen height fixes due to UI space restrictions */
-                    @media only screen and (max-height: 480px) {
-                        font-size: 0.8rem;
-                    }
+                    max-width: 11rem;
+                    line-clamp: 2;
+                    -webkit-line-clamp: 2;
+                }
+                /* iPhone SE screen height fixes due to UI space restrictions */
+                @media only screen and (max-height: 480px) {
+                    font-size: 0.8rem !important;
                 }
             }
         }

diff --git a/packages/reports/src/sass/app/modules/smart-chart.scss b/packages/reports/src/sass/app/modules/smart-chart.scss
@@ -342,6 +342,10 @@
         display: flex;
         align-items: center;
 
+        @include mobile {
+            padding-left: 2.3rem;
+        }
+
         &.won div {
             color: var(--text-profit-success);
         }
@@ -385,8 +389,11 @@
             animation: 0.1s cubic-bezier(0.49, -0.4, 0.11, 0.65) 3 both slide-decimal;
         }
         &__currency {
-            padding-left: 0.3rem;
-            transform: translateY(-92%);
+            padding-left: 0.2rem;
+            transform: translateY(-83%);
+            @include mobile {
+                transform: translateY(-78%);
+            }
         }
         &:before {
             content: '';
@@ -396,6 +403,10 @@
             top: -4%;
             z-index: -2;
             background-color: var(--general-main-1);
+
+            @include mobile {
+                width: calc(100% - 2.3rem);
+            }
         }
         &:after {
             content: '';
@@ -407,6 +418,10 @@
             background-color: rgba(0, 167, 158, 0.1);
             box-shadow: 0 -8px 11px 0 rgba(0, 167, 158, 0.08), 0 8px 11px 0 rgba(0, 167, 158, 0.08),
                 0 0 11px -5px rgba(0, 167, 158, 0.08), 0 0 11px -5px rgba(0, 167, 158, 0.08);
+
+            @include mobile {
+                width: calc(100% - 2.3rem);
+            }
         }
     }
     &-tooltip {
@@ -463,7 +478,7 @@
         }
         &__content {
             position: absolute;
-            width: 16.4rem;
+            min-width: 10.5rem;
             height: 5.8rem;
             border-radius: $BORDER_RADIUS;
             display: flex;
@@ -473,6 +488,10 @@
             opacity: 0.72;
             transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.1, 0.25);
 
+            @include mobile {
+                min-width: 7.5rem;
+                height: 4.6rem;
+            }
             &-enter,
             &-exit {
                 opacity: 0;

diff --git a/packages/shared/src/utils/contract/__tests__/contract.spec.ts b/packages/shared/src/utils/contract/__tests__/contract.spec.ts
@@ -400,82 +400,93 @@ describe('getAccuBarriersDefaultTimeout', () => {
 });
 
 describe('getAccuBarriersDTraderTimeout', () => {
-    const barriers_update_timestamp = 1688134166649;
+    const interval = 250; // interval between receivals of tick data and barriers data
+    const shorter_interval = 50;
     const has_default_timeout = false;
-    const should_update_contract_barriers = false;
-    const tick_update_timestamp = 1688134166574;
-    const underlying = 'R_100';
+    const tick_update_timestamp = 1234567890800;
+    const barriers_update_timestamp = tick_update_timestamp + interval;
+    const symbol_1_sec = '1HZ10V';
+    const symbol_2_sec = 'R_100';
 
-    it(`should return a timeout equal to a difference between target time + 100ms (or -100ms for contract barriers)
-        and current barriers update time for 2-second symbol`, () => {
+    const getTargetTime = (underlying: string) => {
+        return (
+            tick_update_timestamp +
+            ContractUtils.getAccuBarriersDefaultTimeout(underlying) +
+            ContractUtils.ANIMATION_CORRECTION_TIME
+        );
+    };
+
+    it('should return a timeout equal to difference between target time and current barriers receival time for 2-second symbol', () => {
+        const sooner_barriers_receival_timestamp = tick_update_timestamp + shorter_interval;
         expect(
             ContractUtils.getAccuBarriersDTraderTimeout({
                 barriers_update_timestamp,
                 has_default_timeout,
-                should_update_contract_barriers,
                 tick_update_timestamp,
-                underlying,
+                underlying: symbol_2_sec,
             })
-        ).toEqual(1175);
+        ).toEqual(getTargetTime(symbol_2_sec) - barriers_update_timestamp);
         expect(
             ContractUtils.getAccuBarriersDTraderTimeout({
-                barriers_update_timestamp,
+                barriers_update_timestamp: sooner_barriers_receival_timestamp,
                 has_default_timeout,
-                should_update_contract_barriers: true,
                 tick_update_timestamp,
-                underlying,
+                underlying: symbol_2_sec,
             })
-        ).toEqual(675);
+        ).toEqual(getTargetTime(symbol_2_sec) - sooner_barriers_receival_timestamp);
     });
-    it(`should return a timeout equal to a difference between target time + 100ms (or -100ms for contract barriers)
-        and current barriers update time for 1-second symbol`, () => {
+    it('should return a timeout equal to difference between target time and current barriers receival time for 1-second symbol', () => {
+        const sooner_barriers_receival_timestamp = tick_update_timestamp + shorter_interval;
         expect(
             ContractUtils.getAccuBarriersDTraderTimeout({
-                barriers_update_timestamp: 1688134341324,
+                barriers_update_timestamp,
                 has_default_timeout,
-                should_update_contract_barriers,
-                tick_update_timestamp: 1688134341301,
-                underlying: '1HZ10V',
+                tick_update_timestamp,
+                underlying: symbol_1_sec,
             })
-        ).toEqual(602);
+        ).toEqual(getTargetTime(symbol_1_sec) - barriers_update_timestamp);
         expect(
             ContractUtils.getAccuBarriersDTraderTimeout({
-                barriers_update_timestamp: 1688134341324,
+                barriers_update_timestamp: sooner_barriers_receival_timestamp,
                 has_default_timeout,
-                should_update_contract_barriers: true,
-                tick_update_timestamp: 1688134341301,
-                underlying: '1HZ10V',
+                tick_update_timestamp,
+                underlying: symbol_1_sec,
             })
-        ).toEqual(352);
+        ).toEqual(getTargetTime(symbol_1_sec) - sooner_barriers_receival_timestamp);
     });
     it('should return a default timeout when has_default_timeout is true, or when tick_update_timestamp is null', () => {
         expect(
             ContractUtils.getAccuBarriersDTraderTimeout({
                 barriers_update_timestamp,
                 has_default_timeout: true,
-                should_update_contract_barriers,
                 tick_update_timestamp,
-                underlying,
+                underlying: symbol_2_sec,
             })
-        ).toEqual(ContractUtils.getAccuBarriersDefaultTimeout(underlying));
+        ).toEqual(ContractUtils.getAccuBarriersDefaultTimeout(symbol_2_sec));
         expect(
             ContractUtils.getAccuBarriersDTraderTimeout({
                 barriers_update_timestamp,
                 has_default_timeout,
-                should_update_contract_barriers,
                 tick_update_timestamp: null,
-                underlying,
+                underlying: symbol_2_sec,
             })
-        ).toEqual(ContractUtils.getAccuBarriersDefaultTimeout(underlying));
+        ).toEqual(ContractUtils.getAccuBarriersDefaultTimeout(symbol_2_sec));
     });
-    it('should return 0 timeout when current barriers update happens too late and timeout is no longer applicable', () => {
+    it('should return 0 timeout when current barriers receival happens too late (after/at target time) and timeout is no longer applicable', () => {
+        expect(
+            ContractUtils.getAccuBarriersDTraderTimeout({
+                barriers_update_timestamp: getTargetTime(symbol_1_sec) + 100,
+                has_default_timeout,
+                tick_update_timestamp,
+                underlying: symbol_1_sec,
+            })
+        ).toEqual(0);
         expect(
             ContractUtils.getAccuBarriersDTraderTimeout({
-                barriers_update_timestamp: 1688134167999,
+                barriers_update_timestamp: getTargetTime(symbol_1_sec),
                 has_default_timeout,
-                should_update_contract_barriers,
                 tick_update_timestamp,
-                underlying,
+                underlying: symbol_1_sec,
             })
         ).toEqual(0);
     });

diff --git a/packages/shared/src/utils/contract/contract.ts b/packages/shared/src/utils/contract/contract.ts
@@ -6,11 +6,12 @@ import { TContractInfo, TDigitsInfo, TLimitOrder, TTickItem } from './contract-t
 type TGetAccuBarriersDTraderTimeout = (params: {
     barriers_update_timestamp: number;
     has_default_timeout: boolean;
-    should_update_contract_barriers?: boolean;
     tick_update_timestamp: number | null;
     underlying: string;
 }) => number;
 
+// animation correction time is an interval in ms between ticks receival from API and their actual visual update on the chart
+export const ANIMATION_CORRECTION_TIME = 200;
 export const DELAY_TIME_1S_SYMBOL = 500;
 // generation_interval will be provided via API later to help us distinguish between 1-second and 2-second symbols
 export const symbols_2s = ['R_10', 'R_25', 'R_50', 'R_75', 'R_100'];
@@ -81,17 +82,12 @@ export const getAccuBarriersDefaultTimeout = (symbol: string) => {
 export const getAccuBarriersDTraderTimeout: TGetAccuBarriersDTraderTimeout = ({
     barriers_update_timestamp,
     has_default_timeout,
-    should_update_contract_barriers,
     tick_update_timestamp,
     underlying,
 }) => {
     if (has_default_timeout || !tick_update_timestamp) return getAccuBarriersDefaultTimeout(underlying);
-    const animation_correction_time =
-        (should_update_contract_barriers
-            ? getAccuBarriersDefaultTimeout(underlying) / -4
-            : getAccuBarriersDefaultTimeout(underlying) / 4) || 0;
     const target_update_time =
-        tick_update_timestamp + getAccuBarriersDefaultTimeout(underlying) + animation_correction_time;
+        tick_update_timestamp + getAccuBarriersDefaultTimeout(underlying) + ANIMATION_CORRECTION_TIME;
     const difference = target_update_time - barriers_update_timestamp;
     return difference < 0 ? 0 : difference;
 };

diff --git a/packages/trader/src/Modules/Contract/Components/InfoBox/info-box-longcode.jsx b/packages/trader/src/Modules/Contract/Components/InfoBox/info-box-longcode.jsx
@@ -4,9 +4,10 @@ import classNames from 'classnames';
 import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
+import { isMobile } from '@deriv/shared';
 
 const InfoBoxLongcode = ({ contract_info }) => {
-    const max_longcode_length = 150;
+    const max_longcode_length = isMobile() ? 47 : 150;
     const [is_collapsed, setIsCollapsed] = React.useState(true);
 
     const handleToggle = () => {
@@ -27,7 +28,7 @@ const InfoBoxLongcode = ({ contract_info }) => {
                 </Text>
                 {` `}
                 {contract_info.longcode.length > max_longcode_length && (
-                    <Text as='a' href='#' size='xs' onClick={handleToggle} c>
+                    <Text as='a' href='#' size='xs' onClick={handleToggle} className='info-box-longcode-text'>
                         {is_collapsed ? localize('View more') : localize('View less')}
                     </Text>
                 )}

diff --git a/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx b/packages/trader/src/Modules/Contract/Containers/contract-replay.jsx
@@ -281,6 +281,7 @@ const ReplayChart = observer(({ is_accumulator_contract }) => {
                 is_accumulator_contract && end_epoch && start_epoch < prev_start_epoch
             }
             shouldFetchTradingTimes={false}
+            should_zoom_out_on_yaxis={is_accumulator_contract}
             yAxisMargin={getChartYAxisMargin()}
             anchorChartToLeft={isMobile()}
             shouldFetchTickHistory={

diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-text.jsx b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-text.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Text } from '@deriv/components';
-import { formatMoney, getCurrencyDisplayCode } from '@deriv/shared';
+import { formatMoney, getCurrencyDisplayCode, isMobile } from '@deriv/shared';
 import { FastMarker } from 'Modules/SmartChart';
 import classNames from 'classnames';
 
@@ -103,7 +103,7 @@ const AccumulatorsProfitLossText = ({
         <FastMarker markerRef={onRef} className={classNames(className, won ? 'won' : 'lost')}>
             <Text
                 weight='bold'
-                size='m'
+                size={isMobile() ? 's' : 'sm'}
                 color={won ? 'profit-success' : 'loss-danger'}
                 className={classNames(`${className}__profit`, {
                     [`${className}__profit--fading-in`]: is_fading_in,
@@ -114,7 +114,7 @@ const AccumulatorsProfitLossText = ({
                 <div className={is_sliding ? `${className}__sliding-tenth` : ''}>{current_profit_tenth}</div>
                 {`${profit_hundredths}`}
             </Text>
-            <Text size='xxs' as='div' className={`${className}__currency`}>
+            <Text size={isMobile() ? 'xxxs' : 'xxs'} as='div' className={`${className}__currency`}>
                 {getCurrencyDisplayCode(currency)}
             </Text>
         </FastMarker>