From ddb700d187e2626e07993adda1a0d153d4629217 Mon Sep 17 00:00:00 2001 From: maryia-binary Date: Tue, 18 Oct 2022 17:00:22 +0300 Subject: [PATCH] feat: finalized AccumulatorsProfitLossTooltip --- .../utils/helpers/dummy_accumulators_data.js | 38 +++++----- .../accumulators-profit-loss-tooltip.spec.js | 26 +++++++ .../accumulators-profit-loss-tooltip.jsx | 35 +++++++--- .../TradeParams/Multiplier/take-profit.jsx | 2 +- .../src/Modules/Trading/Containers/trade.jsx | 7 +- .../src/sass/app/modules/smart-chart.scss | 70 +++++++++++++------ 6 files changed, 127 insertions(+), 51 deletions(-) create mode 100644 packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-profit-loss-tooltip.spec.js diff --git a/packages/shared/src/utils/helpers/dummy_accumulators_data.js b/packages/shared/src/utils/helpers/dummy_accumulators_data.js index cdb8403e883e..74a52b2c031f 100644 --- 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 = 1666026990; // should be an epoch of some real tick! +const dummy_current_time = 1666100508; // 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 = 6477.9; -const low_barrier = 6477.5; +const high_barrier = 6487.9; +const low_barrier = 6487.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; @@ -62,26 +62,26 @@ 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; +// 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' +position_status = 'loss'; // 'profit' or 'loss' +result = 'lost'; // 'won' or 'lost' +profit = -10; +profit_percentage = -100; 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' -// position_status = 'loss'; // 'profit' or 'loss' -// result = 'lost'; // 'won' or 'lost' -// 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' diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-profit-loss-tooltip.spec.js b/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-profit-loss-tooltip.spec.js new file mode 100644 index 000000000000..e78823b876a3 --- /dev/null +++ b/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/accumulators-profit-loss-tooltip.spec.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { expect } from 'chai'; +import { configure, shallow } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import AccumulatorsProfitLossTooltip from '../accumulators-profit-loss-tooltip.jsx'; + +configure({ adapter: new Adapter() }); + +describe('AccumulatorsProfitLossTooltip', () => { + const props = { + contract_info: { + currency: 'USD', + exit_tick: 6468.95, + exit_tick_time: 1666091856, + profit: +0.15, + }, + className: 'profit-loss-tooltip', + }; + + it('should render with an arrow on the left', () => { + const wrapper = shallow(); + expect(wrapper.find('.profit-loss-tooltip').exists()).to.be.true; + expect(wrapper.find('.profit-loss-tooltip__spot-circle').exists()).to.be.true; + expect(wrapper.find('.profit-loss-tooltip__content').render()[0].attribs.class).to.include('arrow-left'); + }); +}); 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 index 1f12001c979e..66b6367d2cca 100644 --- 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 @@ -1,22 +1,35 @@ import PropTypes from 'prop-types'; import React from 'react'; +import classNames from 'classnames'; 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: - // - add top, bottom arrows & dependency to select one of 4 arrows +const AccumulatorsProfitLossTooltip = ({ + alignment = 'right', + className = 'sc-accumulators-profit-loss-tooltip', + currency, + exit_tick = 0, + exit_tick_time = 0, + profit, +}) => { const [is_tooltip_open, setIsTooltipOpen] = React.useState(true); - const className = 'sc-accumulators-profit-loss-tooltip'; const won = profit > 0; const sign = won ? '+' : ''; + + const getOppositeArrowPosition = React.useCallback(() => { + const horizontal = ['left', 'right']; + const vertical = ['top', 'bottom']; + return horizontal.includes(alignment) + ? horizontal.find(el => el !== alignment) + : vertical.find(el => el !== alignment); + }, [alignment]); + 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'; + // this call will hide the marker: + ref.setPosition({ epoch: null, price: null }); } ref.setPosition({ epoch: +exit_tick_time, @@ -26,13 +39,13 @@ const AccumulatorsProfitLossTooltip = ({ currency, exit_tick = 0, exit_tick_time }; return ( - + !is_tooltip_open && setIsTooltipOpen(true)} /> {is_tooltip_open && ( -
+
{localize('Total profit/loss:')} @@ -53,10 +66,12 @@ const AccumulatorsProfitLossTooltip = ({ currency, exit_tick = 0, exit_tick_time }; AccumulatorsProfitLossTooltip.propTypes = { + alignment: PropTypes.string, + className: PropTypes.string, currency: PropTypes.string, exit_tick: PropTypes.number, exit_tick_time: PropTypes.number, profit: PropTypes.number, }; -export default AccumulatorsProfitLossTooltip; +export default React.memo(AccumulatorsProfitLossTooltip); diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx index 6c22406c9a3c..0a1542c3a4eb 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx @@ -11,7 +11,7 @@ const TakeProfit = ({ removeToast, currency, current_focus, - has_info, + has_info = true, has_take_profit, is_single_currency, onChange, diff --git a/packages/trader/src/Modules/Trading/Containers/trade.jsx b/packages/trader/src/Modules/Trading/Containers/trade.jsx index d8c8c1aa7e88..fa377eb3423c 100644 --- a/packages/trader/src/Modules/Trading/Containers/trade.jsx +++ b/packages/trader/src/Modules/Trading/Containers/trade.jsx @@ -197,6 +197,7 @@ const Trade = ({ topWidgets={topWidgets} charts_ref={charts_ref} bottomWidgets={show_digits_stats ? bottomWidgets : undefined} + show_accumulators_stats={show_accumulators_stats} /> @@ -414,7 +415,11 @@ const Chart = props => { {show_accumulators_stats && accumulators_positions.map(({ contract_info }) => { - return contract_info.is_sold && ; + return ( + contract_info.is_sold && ( + + ) + ); })} ); diff --git a/packages/trader/src/sass/app/modules/smart-chart.scss b/packages/trader/src/sass/app/modules/smart-chart.scss index 96cf4383a638..9dda4cafc859 100644 --- a/packages/trader/src/sass/app/modules/smart-chart.scss +++ b/packages/trader/src/sass/app/modules/smart-chart.scss @@ -256,10 +256,16 @@ #{$self}__content { background-color: var(--text-loss-danger); - &:after { + &.arrow-top:after { + border-bottom: 4px solid var(--text-loss-danger); + } + &.arrow-bottom:before { + border-top: 4px solid var(--text-loss-danger); + } + &.arrow-left:after { border-right: 4px solid var(--text-loss-danger); } - &:before { + &.arrow-right:before { border-left: 4px solid var(--text-loss-danger); } } @@ -269,10 +275,16 @@ #{$self}__content { background-color: var(--text-profit-success); - &:after { + &.arrow-top:after { + border-bottom: 4px solid var(--text-profit-success); + } + &.arrow-bottom:before { + border-top: 4px solid var(--text-profit-success); + } + &.arrow-left:after { border-right: 4px solid var(--text-profit-success); } - &:before { + &.arrow-right:before { border-left: 4px solid var(--text-profit-success); } } @@ -295,39 +307,57 @@ flex-direction: column; gap: 0.4rem; padding: 0.8rem; - // background-color: var(--text-profit-success); - // TODO: implement different colors for profit/loss + opacity: 0.72; &:after, &:before { content: ''; position: absolute; - top: calc(50% - 4px); width: 0; height: 0; + display: none; + } + &.arrow-top:after, + &.arrow-bottom:before { + left: calc(50% - 4px); + border-left: 4px solid transparent; + border-right: 4px solid transparent; + display: block; + } + &.arrow-left:after, + &.arrow-right:before { + top: calc(50% - 4px); border-top: 4px solid transparent; border-bottom: 4px solid transparent; - display: none; + display: block; } - &:after { - left: -4px; - // border-right: 4px solid var(--text-profit-success); - // TODO: implement different colors for profit/loss + &.arrow-top { + transform: translateX(-50%) translateY(7.5px); + + &:after { + top: -4px; + } } - &:before { - left: 100%; - // border-left: 4px solid var(--text-profit-success); - // TODO: implement different colors for profit/loss + &.arrow-bottom { + transform: translateX(-50%) translateY(calc(-100% - 7.5px)); + + &:before { + top: 100%; + } } &.arrow-left { transform: translateX(7.5px) translateY(-50%); + + &:after { + left: -4px; + } } &.arrow-right { transform: translateX(calc(-100% - 7.5px)) translateY(-50%); - } - &.arrow-right:before, - &.arrow-left:after { - display: block; + + &:before { + left: 100%; + } } #{$self}__text {