From ffd0541ba6d4b4ac91bbcf3c4c4dc8b7eb01cb10 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Thu, 13 Oct 2022 19:49:52 +0300 Subject: [PATCH] feat: initialized AccumulatorsProfitLossTooltip --- .../utils/helpers/dummy_accumulators_data.js | 31 +++++--- .../accumulators-profit-loss-tooltip.jsx | 64 +++++++++++++++ .../src/Modules/Trading/Containers/trade.jsx | 10 ++- .../src/Stores/Modules/Trading/trade-store.js | 5 ++ .../src/sass/app/modules/smart-chart.scss | 77 +++++++++++++++++++ 5 files changed, 177 insertions(+), 10 deletions(-) create mode 100644 packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx diff --git a/packages/shared/src/utils/helpers/dummy_accumulators_data.js b/packages/shared/src/utils/helpers/dummy_accumulators_data.js index 858f1fcd3dae..549326c72ad3 100644 --- a/packages/shared/src/utils/helpers/dummy_accumulators_data.js +++ b/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, diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx b/packages/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx new file mode 100644 index 000000000000..5e271e5533af --- /dev/null +++ b/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 ( + + !is_tooltip_open && setIsTooltipOpen(true)} + /> + {is_tooltip_open && ( +
+ + {localize('Total profit/loss:')} + + {`${sign}${profit} ${currency}`} + setIsTooltipOpen(false)} + /> +
+ )} + + ); +}; + +AccumulatorsProfitLossTooltip.propTypes = { + currency: PropTypes.string, + exit_tick: PropTypes.number, + exit_tick_time: PropTypes.number, + profit: PropTypes.number, +}; + +export default AccumulatorsProfitLossTooltip; diff --git a/packages/trader/src/Modules/Trading/Containers/trade.jsx b/packages/trader/src/Modules/Trading/Containers/trade.jsx index c10fba0cf4e0..dcb2d7f8079d 100644 --- a/packages/trader/src/Modules/Trading/Containers/trade.jsx +++ b/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 => { }} > + {show_accumulators_stats && props.last_contract.is_ended && ( + + )} ); }; @@ -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, diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js index 7ec68e138b71..86c2771514e0 100644 --- a/packages/trader/src/Stores/Modules/Trading/trade-store.js +++ b/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; diff --git a/packages/trader/src/sass/app/modules/smart-chart.scss b/packages/trader/src/sass/app/modules/smart-chart.scss index 3ae7a4689178..1b830df272a3 100644 --- a/packages/trader/src/sass/app/modules/smart-chart.scss +++ b/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; + } + } +}