Mahdiyeh/ Refactor: Reports monorepo package

.circleci/config.yml

@@ -69,6 +69,7 @@ commands:
             - "packages/cfd/node_modules"
             - "packages/indicators/node_modules"
             - "packages/p2p/node_modules"
+            - "packages/reports/node_modules"
             - "packages/shared/node_modules"
             - "packages/trader/node_modules"
             - "packages/translations/node_modules"

.github/CODEOWNERS

@@ -119,7 +119,11 @@
 
 /packages/trader/**/*                                           @matin-binary @balakrishna-binary @akmal-binary 
 
+# ==============================================================
+#  deriv-app/reports
+# ==============================================================
 
+/packages/reports/**/*                                           @matin-binary @balakrishna-binary
 
 # ==============================================================
 #  deriv-app/publisher

package.json

@@ -62,10 +62,10 @@
         "build": "f () { lerna exec --scope=@deriv/${1:-'*'} -- npm run build $2 ;}; f",
         "build:publish": "f () { lerna exec --scope=@deriv/${1:-'*'} -- npm run build:publish $2 ;}; f",
         "build:local": "f () { lerna exec --scope @deriv/trader --scope @deriv/bot-web-ui --parallel -- npm run build $1 ;}; f",
-        "build:travis": "lerna exec --scope @deriv/shared --scope @deriv/components --scope @deriv/translations  --scope @deriv/cashier --scope @deriv/account --scope @deriv/p2p --scope @deriv/cfd -- npm run build:travis",
+        "build:travis": "lerna exec --scope @deriv/shared --scope @deriv/components --scope @deriv/translations  --scope @deriv/cashier --scope @deriv/account --scope @deriv/p2p --scope @deriv/cfd --scope @deriv/reports -- npm run build:travis",
         "build:prod": "export NODE_ENV=staging && npm run build && export NODE_ENV=",
         "build:storybook": "cd packages/components && build-storybook --output-dir .out",
-        "build:gh-pages": "f () { lerna exec --scope @deriv/components --scope @deriv/p2p -- npm run build && lerna exec --scope @deriv/cashier --scope @deriv/account --scope @deriv/cfd -- npm run build $1 && npm run build:local $1 ;}; f",
+        "build:gh-pages": "f () { lerna exec --scope @deriv/components --scope @deriv/p2p -- npm run build && lerna exec --scope @deriv/cashier --scope @deriv/account --scope @deriv/cfd --scope @deriv/reports -- npm run build $1 && npm run build:local $1 ;}; f",
         "clean": "echo \"Remove $(git rev-parse --show-toplevel)/node_modules\" && lerna clean && rm -rf \"$(git rev-parse --show-toplevel)/node_modules\"",
         "deploy": "f () { npm run build:travis && npm run build:local && lerna exec --scope @deriv/core -- npm run deploy $@ ;}; f",
         "deploy:clean": "f () { npm run build:travis && npm run build:local && lerna exec --scope @deriv/core -- npm run deploy:clean $@ ;}; f",

packages/cfd/src/Containers/cfd-password-manager-modal.tsx

@@ -52,7 +52,6 @@ const CountdownComponent = ({ count_from = 60, onTimeout }: TCountdownComponent)
         }
 
         onTimeout();
-
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [count]);
     return <span className='countdown'>{count}</span>;

packages/cfd/src/Containers/cfd-password-modal.tsx

@@ -275,8 +275,7 @@ const getCancelButtonLabel = ({
 
 const handlePasswordInputChange = (
     e: React.ChangeEvent<HTMLInputElement>,
-    // eslint-disable-next-line no-shadow
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void,
+    handleChange: (el: React.ChangeEvent<HTMLInputElement>) => void,
     validateForm: (values?: TCFDPasswordFormValues) => Promise<FormikErrors<TCFDPasswordFormValues>>,
     setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void
 ) => {

packages/core/build/config.js

@@ -49,6 +49,14 @@ const copyConfig = base => {
             from: path.resolve(__dirname, '../node_modules/@deriv/trader/dist/trader'),
             to: 'trader',
         },
+        {
+            from: path.resolve(__dirname, '../node_modules/@deriv/reports/dist/reports/js/'),
+            to: 'reports/js',
+        },
+        {
+            from: path.resolve(__dirname, '../node_modules/@deriv/reports/dist/reports/css/'),
+            to: 'reports/css',
+        },
         {
             from: path.resolve(__dirname, '../node_modules/@deriv/cfd/dist/cfd'),
             to: 'cfd',

packages/core/package.json

@@ -102,6 +102,7 @@
         "@deriv/deriv-api": "^1.0.8",
         "@deriv/deriv-charts": "^0.6.0",
         "@deriv/p2p": "^0.7.3",
+        "@deriv/reports": "^1.0.0",
         "@deriv/shared": "^1.0.0",
         "@deriv/trader": "^3.8.0",
         "@deriv/translations": "^1.0.0",
@@ -116,6 +117,7 @@
         "js-cookie": "^2.2.1",
         "loadjs": "^4.2.0",
         "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
         "mobx": "^5.15.7",
         "mobx-react": "6.3.1",
         "mobx-utils": "^5.5.5",

packages/core/src/App/Constants/routes-config.js

@@ -16,6 +16,11 @@ const Trader = React.lazy(() =>
     })
 );
 
+const Reports = React.lazy(() => {
+    // eslint-disable-next-line import/no-unresolved
+    return import(/* webpackChunkName: "reports" */ '@deriv/reports');
+});
+
 const CFD = React.lazy(() =>
     moduleLoader(() => {
         // eslint-disable-next-line import/no-unresolved
@@ -59,6 +64,34 @@ const getModules = ({ is_appstore }, is_social_signup) => {
             // Don't use `Localize` component since native html tag like `option` cannot render them
             getTitle: () => localize('Bot'),
         },
+        {
+            path: routes.reports,
+            component: Reports,
+            getTitle: () => localize('Reports'),
+            icon_component: 'IcReports',
+            is_authenticated: true,
+            routes: [
+                {
+                    path: routes.positions,
+                    component: Reports,
+                    getTitle: () => localize('Open positions'),
+                    icon_component: 'IcOpenPositions',
+                    default: true,
+                },
+                {
+                    path: routes.profit,
+                    component: Reports,
+                    getTitle: () => localize('Profit table'),
+                    icon_component: 'IcProfitTable',
+                },
+                {
+                    path: routes.statement,
+                    component: Reports,
+                    getTitle: () => localize('Statement'),
+                    icon_component: 'IcStatement',
+                },
+            ],
+        },
         {
             path: routes.dxtrade,
             component: props => <CFD {...props} platform='dxtrade' />,
@@ -235,34 +268,6 @@ const getModules = ({ is_appstore }, is_social_signup) => {
             component: Trader,
             getTitle: () => localize('Trader'),
             routes: [
-                {
-                    path: routes.reports,
-                    component: Trader,
-                    getTitle: () => localize('Reports'),
-                    icon_component: 'IcReports',
-                    is_authenticated: true,
-                    routes: [
-                        {
-                            path: routes.positions,
-                            component: Trader,
-                            getTitle: () => localize('Open positions'),
-                            icon_component: 'IcOpenPositions',
-                            default: true,
-                        },
-                        {
-                            path: routes.profit,
-                            component: Trader,
-                            getTitle: () => localize('Profit table'),
-                            icon_component: 'IcProfitTable',
-                        },
-                        {
-                            path: routes.statement,
-                            component: Trader,
-                            getTitle: () => localize('Statement'),
-                            icon_component: 'IcStatement',
-                        },
-                    ],
-                },
                 {
                     path: routes.contract,
                     component: Trader,

packages/core/src/Components/markers/__tests__/marker-spot-label.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkerSpotLabel from '../marker-spot-label.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('MarkerSpotLabel', () => {
+    it('should render one <MarkerSpotLabel /> component', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should have class .chart-spot-label__time-value-container--top if align_label top is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel align_label={'top'} />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__time-value-container--bottom if align_label bottom is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel align_label={'bottom'} />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__time-value-container--top if no align_label is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).to.be.true;
+        expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).to.be.false;
+    });
+    it('should toggle label on hover if has_hover_toggle is passed in props', async () => {
+        const wrapper = mount(<MarkerSpotLabel has_hover_toggle={true} />);
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.false;
+
+        wrapper.find('.marker-hover-container').simulate('mouseenter');
+        wrapper.update();
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.true;
+
+        wrapper.find('.marker-hover-container').simulate('mouseleave');
+        wrapper.update();
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.false;
+    });
+    it('should not toggle label on hover if has_label_toggle is not passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel />);
+        expect(wrapper.find('.chart-spot-label__info-container').exists()).to.be.true;
+        expect(wrapper.find('.marker-hover-container').exists()).to.equal(false);
+    });
+    it('should have class .chart-spot-label__value-container--won if status won is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel status={'won'} />);
+        expect(wrapper.find('.chart-spot-label__value-container--won').exists()).to.be.true;
+    });
+    it('should have class .chart-spot-label__value-container--lost if status lost is passed in props', () => {
+        const wrapper = shallow(<MarkerSpotLabel status={'lost'} />);
+        expect(wrapper.find('.chart-spot-label__value-container--lost').exists()).to.be.true;
+    });
+});

packages/core/src/Components/markers/__tests__/marker-spot.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { expect } from 'chai';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import MarkerSpot from '../marker-spot.jsx';
+
+configure({ adapter: new Adapter() });
+
+describe('MarkerSpot', () => {
+    it('should render one <MarkerSpot /> component', () => {
+        const wrapper = shallow(<MarkerSpot />);
+        expect(wrapper).to.have.length(1);
+    });
+    it('should not have class .chart-spot__spot--lost or .chart-spot__spot--won if no status is passed in props', () => {
+        const wrapper = shallow(<MarkerSpot />);
+        expect(wrapper.find('.chart-spot__spot--lost').exists()).to.be.false;
+        expect(wrapper.find('.chart-spot__spot--lost').exists()).to.be.false;
+        expect(wrapper.find('.chart-spot').exists()).to.be.true;
+    });
+});

packages/core/src/Components/markers/marker-line.jsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+const MarkerLine = ({ label, line_style, marker_config, status }) => {
+    // TODO: Find a more elegant solution
+    if (!marker_config) return <div />;
+    return (
+        <div className={classNames('chart-marker-line__wrapper', `chart-marker-line--${line_style}`)}>
+            {label === marker_config.LINE_END.content_config.label && (
+                <Icon
+                    icon='IcContractExitTimeCircle'
+                    className='chart-marker-line__icon'
+                    color={status === 'lost' ? 'red' : 'green'}
+                    size={24}
+                />
+            )}
+            {label === marker_config.LINE_START.content_config.label && (
+                <Icon
+                    icon='IcContractStartTimeCircle'
+                    className='chart-marker-line__icon chart-marker-line__icon--time'
+                    color='secondary'
+                    size={24}
+                />
+            )}
+        </div>
+    );
+};
+
+MarkerLine.propTypes = {
+    label: PropTypes.string,
+    line_style: PropTypes.string,
+    marker_config: PropTypes.object,
+    status: PropTypes.oneOf(['won', 'lost']),
+};
+export default observer(MarkerLine);

packages/core/src/Components/markers/marker-spot-label.jsx

@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Icon, Text } from '@deriv/components';
+import { addComma, toMoment } from '@deriv/shared';
+
+import MarkerSpot from './marker-spot.jsx';
+
+const MarkerSpotLabel = ({
+    align_label,
+    has_hover_toggle,
+    spot_className,
+    spot_count,
+    spot_epoch,
+    spot_value,
+    status,
+}) => {
+    const [show_label, setShowLabel] = React.useState(!has_hover_toggle);
+
+    const handleHoverToggle = () => {
+        setShowLabel(!show_label);
+    };
+
+    let marker_spot = <MarkerSpot className={spot_className} spot_count={spot_count} />;
+
+    if (has_hover_toggle) {
+        marker_spot = (
+            <div className='marker-hover-container' onMouseEnter={handleHoverToggle} onMouseLeave={handleHoverToggle}>
+                {marker_spot}
+            </div>
+        );
+    }
+
+    return (
+        <div className={'chart-spot-label'}>
+            {show_label && (
+                <div className='chart-spot-label__info-container'>
+                    <div
+                        className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
+                    >
+                        <div className='chart-spot-label__time-container'>
+                            <Icon
+                                icon='IcClockOutline'
+                                height={10}
+                                width={10}
+                                className='chart-spot-label__time-icon'
+                            />
+                            <Text as='p' color='prominent' size='xxxs'>
+                                {toMoment(+spot_epoch).format('HH:mm:ss')}
+                            </Text>
+                        </div>
+                        <div
+                            className={classNames('chart-spot-label__value-container', {
+                                'chart-spot-label__value-container--won': status === 'won',
+                                'chart-spot-label__value-container--lost': status === 'lost',
+                            })}
+                        >
+                            <p>{addComma(spot_value)}</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+            {marker_spot}
+        </div>
+    );
+};
+
+MarkerSpotLabel.defaultProps = {
+    align_label: 'top',
+};
+
+MarkerSpotLabel.propTypes = {
+    align_label: PropTypes.oneOf(['top', 'bottom']),
+    has_hover_toggle: PropTypes.bool,
+    spot_className: PropTypes.string,
+    spot_count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    spot_epoch: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    spot_value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    status: PropTypes.oneOf(['won', 'lost']),
+};
+export default observer(MarkerSpotLabel);

packages/core/src/Components/markers/marker-spot.jsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const MarkerSpot = ({ className, spot_count }) => (
+    <div className={classNames('chart-spot', className)}>{spot_count}</div>
+);
+
+MarkerSpot.propTypes = {
+    className: PropTypes.string,
+    spot_count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+export default observer(MarkerSpot);