maryia/78337/initialize profit loss tooltip for won/lost contracts

packages/shared/src/utils/helpers/dummy_accumulators_data.js

@@ -1,17 +1,18 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable prefer-const */
-const dummy_current_time = 1665585812; // should be an epoch of some real tick!
+const dummy_current_time = 1665675860; // 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 = 6528;
-const low_barrier = 6527;
+const high_barrier = 6509;
+const low_barrier = 6508;
 const tick_1_price = low_barrier + 0.1;
 const tick_2_price = low_barrier + 0.15;
 const tick_3_price = low_barrier + 0.5;
 const tick_4_price = low_barrier + 0.25;
 const tick_5_price = low_barrier + 0.5;
 const entry_spot = low_barrier + 0.33;
+let exit_tick, exit_tick_display_value, exit_tick_time;
 const tick_8_price = low_barrier + 0.75;
 const previous_tick_price = low_barrier + 0.19;
 const current_spot = low_barrier + 0.45;
@@ -61,12 +62,15 @@ let is_sold = 0; // 0 || 1
 // const winLoseAndOpenContractInSec = (ms1, ms2, ms3) => {
 //     setInterval(() => {
 //         setTimeout(() => {
-// contract_status = 'won'; // 'lost', 'won' or 'open'
-// position_status = 'profit'; // 'profit' or 'loss'
-// result = 'won'; // 'won' or 'lost'
-// profit = +0.15;
-// profit_percentage = +1.5;
-// is_sold = 1; // 0 || 1
+contract_status = 'won'; // 'lost', 'won' or 'open'
+position_status = 'profit'; // 'profit' or 'loss'
+result = 'won'; // 'won' or 'lost'
+profit = +0.15;
+profit_percentage = +1.5;
+is_sold = 1; // 0 || 1
+exit_tick = current_spot;
+exit_tick_display_value = `${current_spot}`;
+exit_tick_time = dummy_current_time;
 //         }, ms1);
 //         setTimeout(() => {
 // contract_status = 'lost'; // 'lost', 'won' or 'open'
@@ -75,6 +79,9 @@ let is_sold = 0; // 0 || 1
 // profit = -100;
 // profit_percentage = -100;
 // is_sold = 1; // 0 || 1
+// exit_tick = low_barrier + 0.49;
+// exit_tick_display_value = `${exit_tick}`;
+// exit_tick_time = dummy_end_time;
 //         }, ms2);
 //         setTimeout(() => {
 //             contract_status = 'open'; // 'lost', 'won' or 'open'
@@ -122,6 +129,9 @@ export const getDummyPOCResponseForACCU = time_now => {
             entry_tick: entry_spot,
             entry_tick_display_value: `${entry_spot}`,
             entry_tick_time: dummy_start_time + 1,
+            exit_tick,
+            exit_tick_display_value,
+            exit_tick_time,
             expiry_time: dummy_end_time,
             id: '2b88e20f-f976-a380-904d-04db08e10eeb',
             is_expired: 0,
@@ -284,6 +294,9 @@ export const getDummyAllPositionsForACCU = time_now => {
                 entry_tick: entry_spot,
                 entry_tick_display_value: `${entry_spot}`,
                 entry_tick_time: dummy_start_time + 1,
+                exit_tick,
+                exit_tick_display_value,
+                exit_tick_time,
                 expiry_time: dummy_end_time,
                 id: '2b88e20f-f976-a380-904d-04db08e10eeb',
                 is_expired: 0,

packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { FastMarker } from 'Modules/SmartChart';
+
+const AccumulatorsProfitLossTooltip = ({ currency, exit_tick = 0, exit_tick_time = 0, profit }) => {
+    // TODO:
+    // - implement different coloring of elements for won/lost contract
+    // - add top, bottom arrows & dependency to select one of 4 arrows
+    // - show AccumulatorsProfitLossTooltip for all closed contracts on the chart, not only the last one
+    const [is_tooltip_open, setIsTooltipOpen] = React.useState(true);
+    const className = 'sc-accumulators-profit-loss-tooltip';
+    const won = profit > 0;
+    const sign = won ? '+' : '';
+    const onRef = ref => {
+        if (ref) {
+            // NOTE: null price (exit_tick) means vertical line.
+            if (!exit_tick) {
+                ref.div.style.height = `calc(100% - 24px)`;
+                ref.div.style.zIndex = '-1';
+            }
+            ref.setPosition({
+                epoch: +exit_tick_time,
+                price: +exit_tick,
+            });
+        }
+    };
+
+    return (
+        <FastMarker markerRef={onRef} className={className}>
+            <span
+                className={`${className}__spot-circle ${won ? 'won' : 'lost'}`}
+                onMouseEnter={() => !is_tooltip_open && setIsTooltipOpen(true)}
+            />
+            {is_tooltip_open && (
+                <div className={`${className}__content arrow-left`} data-tooltip-pos='right'>
+                    <Text size='xxs' className={`${className}__text`}>
+                        {localize('Total profit/loss:')}
+                    </Text>
+                    <Text
+                        size='xs'
+                        className={`${className}__text`}
+                        weight='bold'
+                    >{`${sign}${profit} ${currency}`}</Text>
+                    <Icon
+                        className={`${className}__close-icon`}
+                        icon='IcCloseLight'
+                        onClick={() => setIsTooltipOpen(false)}
+                    />
+                </div>
+            )}
+        </FastMarker>
+    );
+};
+
+AccumulatorsProfitLossTooltip.propTypes = {
+    currency: PropTypes.string,
+    exit_tick: PropTypes.number,
+    exit_tick_time: PropTypes.number,
+    profit: PropTypes.number,
+};
+
+export default AccumulatorsProfitLossTooltip;

packages/trader/src/Modules/Trading/Containers/trade.jsx

@@ -11,6 +11,7 @@ import Test from './test.jsx';
 import { ChartBottomWidgets, ChartTopWidgets, DigitsWidget } from './chart-widgets.jsx';
 import FormLayout from '../Components/Form/form-layout.jsx';
 import AllMarkers from '../../SmartChart/Components/all-markers.jsx';
+import AccumulatorsProfitLossTooltip from '../../SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx';
 import ToolbarWidgets from '../../SmartChart/Components/toolbar-widgets.jsx';
 
 const BottomWidgetsMobile = ({ tick, digits, setTick, setDigits }) => {
@@ -276,7 +277,7 @@ const Markers = ({ markers_array, is_dark_theme, granularity, currency, config }
         );
     });
 
-const ChartMarkers = connect(({ ui, client, contract_trade, modules }) => ({
+const ChartMarkers = connect(({ ui, client, contract_trade }) => ({
     markers_array: contract_trade.markers_array,
     is_digit_contract: contract_trade.is_digit_contract,
     granularity: contract_trade.granularity,
@@ -402,6 +403,9 @@ const Chart = props => {
             }}
         >
             <ChartMarkers />
+            {show_accumulators_stats && props.last_contract.is_ended && (
+                <AccumulatorsProfitLossTooltip {...props.last_contract} />
+            )}
         </SmartChartWithRef>
     );
 };
@@ -447,8 +451,12 @@ const ChartTrade = connect(({ modules, ui, common, contract_trade }) => ({
         theme: ui.is_dark_mode_on ? 'dark' : 'light',
     },
     last_contract: {
+        currency: contract_trade.last_contract.contract_info?.currency,
         is_digit_contract: contract_trade.last_contract.is_digit_contract,
         is_ended: contract_trade.last_contract.is_ended,
+        exit_tick: contract_trade.last_contract.contract_info?.exit_tick,
+        exit_tick_time: contract_trade.last_contract.contract_info?.exit_tick_time,
+        profit: contract_trade.last_contract.contract_info?.profit,
     },
     is_trade_enabled: modules.trade.is_trade_enabled,
     main_barrier: modules.trade.main_barrier_flattened,

packages/trader/src/Stores/Modules/Trading/trade-store.js

@@ -991,6 +991,11 @@ export default class TradeStore extends BaseStore {
                 new_ticks_stayed_in: contract_type === 'ACCU' ? stay_in_history : break_out_history,
                 last_tick_epoch: contract_type === 'ACCU' ? last_tick_epoch_accu : last_tick_epoch_deccu,
             });
+            // TODO: maryia - remove, temporary value:
+            this.ticks_history_stats = {
+                ...this.ticks_history_stats,
+                DECCU: { ticks_stayed_in: break_out_history, last_tick_epoch: last_tick_epoch_deccu },
+            };
             this.tick_size_barrier = tick_size_barrier;
             this.maximum_ticks = maximum_ticks;
             this.maximum_payout = maximum_payout;

packages/trader/src/sass/app/modules/smart-chart.scss

@@ -245,3 +245,80 @@
         display: inline;
     }
 }
+
+.sc-accumulators-profit-loss-tooltip {
+    $self: &;
+    width: 17.2rem;
+    height: 6.55rem;
+
+    &__spot-circle {
+        position: absolute;
+        border-radius: 100%;
+        width: 0.5rem;
+        height: 0.5rem;
+        top: -2.5px;
+        left: -2.5px;
+        cursor: pointer;
+
+        &.lost {
+            background-color: var(--text-loss-danger);
+        }
+        &.won {
+            background-color: var(--text-profit-success);
+        }
+    }
+    &__content {
+        position: absolute;
+        width: 16.4rem;
+        height: 5.8rem;
+        border-radius: $BORDER_RADIUS;
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        padding: 0.8rem;
+        background-color: var(--text-profit-success);
+        // TODO: implement different colors for profit/loss
+
+        &:after,
+        &:before {
+            content: '';
+            position: absolute;
+            top: calc(50% - 4px);
+            width: 0;
+            height: 0;
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            display: none;
+        }
+        &:after {
+            left: -4px;
+            border-right: 4px solid var(--text-profit-success);
+            // TODO: implement different colors for profit/loss
+        }
+        &:before {
+            left: 100%;
+            border-left: 4px solid var(--text-profit-success);
+            // TODO: implement different colors for profit/loss
+        }
+        &.arrow-left {
+            transform: translateX(7.5px) translateY(-50%);
+        }
+        &.arrow-right {
+            transform: translateX(calc(-100% - 7.5px)) translateY(-50%);
+        }
+        &.arrow-right:before,
+        &.arrow-left:after {
+            display: block;
+        }
+
+        #{$self}__text {
+            color: var(--text-colored-background);
+        }
+        #{$self}__close-icon {
+            position: absolute;
+            right: 0.8rem;
+            top: 0.8rem;
+            cursor: pointer;
+        }
+    }
+}