Skip to content

Commit

Permalink
feat: finalized AccumulatorsProfitLossTooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@maryia-deriv
maryia-deriv committed Oct 18, 2022
1 parent 3c68299 commit ddb700d
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 51 deletions.
38 changes: 19 additions & 19 deletions packages/shared/src/utils/helpers/dummy_accumulators_data.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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'
Expand Down
26 changes: 26 additions & 0 deletions .../Modules/SmartChart/Components/Markers/__tests__/accumulators-profit-loss-tooltip.spec.js
View file
Original file line number Diff line number Diff line change
@@ -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(<AccumulatorsProfitLossTooltip {...props} />);
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');
});
});
35 changes: 25 additions & 10 deletions ...ges/trader/src/Modules/SmartChart/Components/Markers/accumulators-profit-loss-tooltip.jsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -26,13 +39,13 @@ const AccumulatorsProfitLossTooltip = ({ currency, exit_tick = 0, exit_tick_time
};

return (
<FastMarker markerRef={onRef} className={`${className} ${won ? 'won' : 'lost'}`}>
<FastMarker markerRef={onRef} className={classNames(className, won ? 'won' : 'lost')}>
<span
className={`${className}__spot-circle`}
onMouseEnter={() => !is_tooltip_open && setIsTooltipOpen(true)}
/>
{is_tooltip_open && (
<div className={`${className}__content arrow-left`} data-tooltip-pos='right'>
<div className={classNames(`${className}__content`, `arrow-${getOppositeArrowPosition()}`)}>
<Text size='xxs' className={`${className}__text`}>
{localize('Total profit/loss:')}
</Text>
Expand All @@ -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);
2 changes: 1 addition & 1 deletion packages/trader/src/Modules/Trading/Components/Form/TradeParams/Multiplier/take-profit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const TakeProfit = ({
removeToast,
currency,
current_focus,
has_info,
has_info = true,
has_take_profit,
is_single_currency,
onChange,
Expand Down
7 changes: 6 additions & 1 deletion packages/trader/src/Modules/Trading/Containers/trade.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,7 @@ const Trade = ({
topWidgets={topWidgets}
charts_ref={charts_ref}
bottomWidgets={show_digits_stats ? bottomWidgets : undefined}
show_accumulators_stats={show_accumulators_stats}
/>
</SwipeableWrapper>
</MobileWrapper>
Expand Down Expand Up @@ -414,7 +415,11 @@ const Chart = props => {
<ChartMarkers />
{show_accumulators_stats &&
accumulators_positions.map(({ contract_info }) => {
return contract_info.is_sold && <AccumulatorsProfitLossTooltip {...contract_info} />;
return (
contract_info.is_sold && (
<AccumulatorsProfitLossTooltip key={contract_info.contract_id} {...contract_info} />
)
);
})}
</SmartChartWithRef>
);
Expand Down
70 changes: 50 additions & 20 deletions packages/trader/src/sass/app/modules/smart-chart.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand All @@ -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);
}
}
Expand All @@ -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 {
Expand Down

0 comments on commit ddb700d

Please sign in to comment.