Skip to content

Commit 59364b5

Browse files
vmc08vmc08
committed
update(app): Dashboard top reits performance completed
1 parent d4aaf89 commit 59364b5

File tree

13 files changed

+168
-45
lines changed

13 files changed

+168
-45
lines changed

‎src/components/layout/MarketsDropdown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import MarketsContext from '../../contexts/MarketsContext';
99
const MarketsMenu = ({ market, setMarket }: any) => {
1010
return (
1111
<Menu
12-
defaultSelectedKeys={[market]}
13-
selectedKeys={[market]}
12+
defaultSelectedKeys={[market.marketCode]}
13+
selectedKeys={[market.marketCode]}
1414
>
1515
{markets.map(({ label, marketCode, countryCode }) => (
1616
<Menu.Item
@@ -42,7 +42,7 @@ class MarketsDropdown extends React.Component<{}, { visibility: boolean }> {
4242
render() {
4343
const { visibility } = this.state;
4444
const { market, setMarket } = this.context;
45-
const { label, countryCode }: any = markets.find((m) => m.marketCode === market);
45+
const { label, countryCode }: any = markets.find((m) => m.marketCode === market.marketCode);
4646
return (
4747
<Dropdown
4848
className="float-right mx-2"

‎src/components/pages/dashboard/HeatMap.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ const { Title } = Typography;
1414
const HeatMap = () => {
1515
const { token }: any = useUserContextValue();
1616
const { interval }: any = useIntervalContext();
17-
const { market: exchange }: any = useMarketsContextValue();
17+
const { market: { marketCode } }: any = useMarketsContextValue();
1818
return (
1919
<Query<any>
2020
query={HEAT_MAP}
21-
variables={{ token, exchange, interval }}
21+
variables={{ token, exchange: marketCode, interval }}
2222
>
2323
{({ data, loading, error }) => {
2424
return (
25-
<Card className="mb-2 mb-sm-3 p-3" bodyStyle={{ padding: 0 }}>
25+
<Card className="p-3" style={{ height: '100%' }} bodyStyle={{ padding: 0 }}>
2626
<Title level={4}>Heat Map</Title>
2727
<Divider className="my-3" />
2828
<DashboardSpinner isLoading={loading}>

‎src/components/pages/dashboard/MarketCap.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ const { Title } = Typography;
1414
const MarketCap = () => {
1515
const { token }: any = useUserContextValue();
1616
const { interval }: any = useIntervalContext();
17-
const { market: exchange }: any = useMarketsContextValue();
17+
const { market: { marketCode } }: any = useMarketsContextValue();
1818
return (
1919
<Query<any>
2020
query={MARKET_CAP}
21-
variables={{ token, exchange, interval }}
21+
variables={{ token, exchange: marketCode, interval }}
2222
>
2323
{({ data, loading, error }) => {
2424
return (
25-
<Card className="mb-2 mb-sm-3 p-3" bodyStyle={{ padding: 0 }}>
25+
<Card className="p-3" style={{ height: '100%' }} bodyStyle={{ padding: 0 }}>
2626
<Title level={4}>Market Cap</Title>
2727
<Divider className="my-3" />
2828
<DashboardSpinner isLoading={loading}>

‎src/components/pages/dashboard/Portfolio.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
44
class Portfolio extends React.Component {
55
render() {
66
return (
7-
<Card className="mb-2 mb-sm-3" loading/>
7+
<Card loading/>
88
);
99
}
1010
}

‎src/components/pages/dashboard/TopGainers.tsx‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,69 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23
import { Query } from 'react-apollo';
3-
import { Card, Typography, Divider } from 'antd';
4+
import { Card, Typography, Divider, Table, Icon } from 'antd';
45

56
import DashboardSpinner from '../../spinners/DashboardSpinner';
67

78
import { useMarketsContextValue } from '../../../contexts/MarketsContext';
89
import { useUserContextValue } from '../../../contexts/UserContext';
910
import { useIntervalContext } from '../../../contexts/IntervalContext';
1011
import { TOP_GAINERS } from '../../../apollo/queries/dashboard';
12+
import { truncateDecimals } from '../../../utils/numberUtils';
1113

12-
const { Title } = Typography;
14+
const { Title, Text } = Typography;
15+
const StyledTable = styled(Table)`
16+
.ant-table-placeholder {
17+
border-bottom: 0;
18+
}
19+
.ant-table-row {
20+
td {
21+
border-bottom: 0;
22+
}
23+
}
24+
`;
1325

1426
const TopGainers = () => {
1527
const { token }: any = useUserContextValue();
1628
const { interval }: any = useIntervalContext();
17-
const { market: exchange }: any = useMarketsContextValue();
29+
const { market: { marketCode } }: any = useMarketsContextValue();
1830
return (
1931
<Query<any>
2032
query={TOP_GAINERS}
21-
variables={{ token, exchange, interval, criteria: 'priceChangeRatio' }}
33+
variables={{ token, exchange: marketCode, interval, criteria: 'priceChangeRatio' }}
2234
>
2335
{({ data, loading, error }) => {
36+
const dataSource = loading ?
37+
[] : data.topGainers.map(({ reit, priceChangeRatio }: any) => ({
38+
name: reit.name,
39+
value: <span>
40+
<Icon type="arrow-up" className="mr-1" />
41+
{truncateDecimals(priceChangeRatio * 100)}%
42+
</span>,
43+
}));
44+
const columns = [
45+
{ title: 'Reit Name', dataIndex: 'name', key: 'name' },
46+
{
47+
title: 'Value',
48+
dataIndex: 'value',
49+
key: 'value',
50+
className: 'text-right',
51+
render: (text: string) => <Text style={{ color: '#52c41a' }}>{text}</Text>,
52+
},
53+
];
2454
return (
25-
<Card className="mb-2 mb-sm-3 p-3" bodyStyle={{ padding: 0 }}>
55+
<Card className="p-3" style={{ height: '100%' }} bodyStyle={{ padding: 0 }}>
2656
<Title level={4}>Top Gainers</Title>
2757
<Divider className="my-3" />
2858
<DashboardSpinner isLoading={loading}>
29-
Loading
59+
<StyledTable
60+
rowKey={(row: any) => row.name}
61+
size="middle"
62+
showHeader={false}
63+
pagination={false}
64+
dataSource={dataSource}
65+
columns={columns}
66+
/>
3067
</DashboardSpinner>
3168
</Card>
3269
);

‎src/components/pages/dashboard/TopLosers.tsx‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,69 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23
import { Query } from 'react-apollo';
3-
import { Card, Typography, Divider } from 'antd';
4+
import { Card, Typography, Divider, Table, Icon } from 'antd';
45

56
import DashboardSpinner from '../../spinners/DashboardSpinner';
67

78
import { useMarketsContextValue } from '../../../contexts/MarketsContext';
89
import { useUserContextValue } from '../../../contexts/UserContext';
910
import { useIntervalContext } from '../../../contexts/IntervalContext';
1011
import { TOP_LOSERS } from '../../../apollo/queries/dashboard';
12+
import { truncateDecimals } from '../../../utils/numberUtils';
1113

12-
const { Title } = Typography;
14+
const { Title, Text } = Typography;
15+
const StyledTable = styled(Table)`
16+
.ant-table-placeholder {
17+
border-bottom: 0;
18+
}
19+
.ant-table-row {
20+
td {
21+
border-bottom: 0;
22+
}
23+
}
24+
`;
1325

1426
const TopLosers = () => {
1527
const { token }: any = useUserContextValue();
1628
const { interval }: any = useIntervalContext();
17-
const { market: exchange }: any = useMarketsContextValue();
29+
const { market: { marketCode } }: any = useMarketsContextValue();
1830
return (
1931
<Query<any>
2032
query={TOP_LOSERS}
21-
variables={{ token, exchange, interval, criteria: 'priceChangeRatio' }}
33+
variables={{ token, exchange: marketCode, interval, criteria: 'priceChangeRatio' }}
2234
>
2335
{({ data, loading, error }) => {
36+
const dataSource = loading ?
37+
[] : data.topLosers.map(({ reit, priceChangeRatio }: any) => ({
38+
name: reit.name,
39+
value: <span>
40+
<Icon type="arrow-down" className="mr-1" />
41+
{truncateDecimals(priceChangeRatio * 100)}%
42+
</span>,
43+
}));
44+
const columns = [
45+
{ title: 'Reit Name', dataIndex: 'name', key: 'name' },
46+
{
47+
title: 'Value',
48+
dataIndex: 'value',
49+
key: 'value',
50+
className: 'text-right',
51+
render: (text: string) => <Text type="danger">{text}</Text>,
52+
},
53+
];
2454
return (
25-
<Card className="mb-2 mb-sm-3 p-3" bodyStyle={{ padding: 0 }}>
55+
<Card className="p-3" style={{ height: '100%' }} bodyStyle={{ padding: 0 }}>
2656
<Title level={4}>Top Losers</Title>
2757
<Divider className="my-3" />
2858
<DashboardSpinner isLoading={loading}>
29-
Loading
59+
<StyledTable
60+
rowKey={(row: any) => row.name}
61+
size="middle"
62+
showHeader={false}
63+
pagination={false}
64+
dataSource={dataSource}
65+
columns={columns}
66+
/>
3067
</DashboardSpinner>
3168
</Card>
3269
);

‎src/components/pages/dashboard/TopVolume.tsx‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,60 @@
11
import React from 'react';
2+
import styled from 'styled-components';
23
import { Query } from 'react-apollo';
3-
import { Card, Typography, Divider } from 'antd';
4+
import { Card, Typography, Divider, Table } from 'antd';
45

56
import DashboardSpinner from '../../spinners/DashboardSpinner';
67

78
import { useMarketsContextValue } from '../../../contexts/MarketsContext';
89
import { useUserContextValue } from '../../../contexts/UserContext';
910
import { useIntervalContext } from '../../../contexts/IntervalContext';
1011
import { TOP_VOLUME } from '../../../apollo/queries/dashboard';
12+
import { formatCurrency } from '../../../utils/numberUtils';
1113

1214
const { Title } = Typography;
15+
const StyledTable = styled(Table)`
16+
.ant-table-placeholder {
17+
border-bottom: 0;
18+
}
19+
.ant-table-row {
20+
td {
21+
border-bottom: 0;
22+
}
23+
}
24+
`;
1325

1426
const TopVolume = () => {
1527
const { token }: any = useUserContextValue();
1628
const { interval }: any = useIntervalContext();
17-
const { market: exchange }: any = useMarketsContextValue();
29+
const { market: { marketCode, currency } }: any = useMarketsContextValue();
1830
return (
1931
<Query<any>
2032
query={TOP_VOLUME}
21-
variables={{ token, exchange, interval }}
33+
variables={{ token, exchange: marketCode, interval }}
2234
>
2335
{({ data, loading, error }) => {
36+
const dataSource = loading ?
37+
[] : data.topVolume.map(({ reit, volume }: any) => ({
38+
name: reit.name,
39+
value: `${currency} ${formatCurrency(volume)}`,
40+
}));
41+
const columns = [
42+
{ title: 'Reit Name', dataIndex: 'name', key: 'name' },
43+
{ title: 'Value', dataIndex: 'value', key: 'value', className: 'text-right' },
44+
];
2445
return (
25-
<Card className="mb-2 mb-sm-3 p-3" bodyStyle={{ padding: 0 }}>
46+
<Card className="p-3" style={{ height: '100%' }} bodyStyle={{ padding: 0 }}>
2647
<Title level={4}>Top Volume</Title>
2748
<Divider className="my-3" />
2849
<DashboardSpinner isLoading={loading}>
29-
Loading
50+
<StyledTable
51+
rowKey={(row: any) => row.name}
52+
size="middle"
53+
showHeader={false}
54+
pagination={false}
55+
dataSource={dataSource}
56+
columns={columns}
57+
/>
3058
</DashboardSpinner>
3159
</Card>
3260
);

‎src/components/pages/dashboard/Watchlist.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Card, Typography } from 'antd';
44
class Watchlist extends React.Component {
55
render() {
66
return (
7-
<Card className="mb-2 mb-lg-0" loading/>
7+
<Card loading/>
88
);
99
}
1010
}

‎src/components/spinners/DashboardSpinner.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { Spin, Icon } from 'antd';
44

55
const LoadingIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
66
const StyledSpinnerWrapper = styled.div`
7-
.ant-spin-nested-loading {
8-
min-height: 150px;
9-
}
7+
// .ant-spin-nested-loading {
8+
// min-height: ${({ isLoading }: { isLoading: number }) => isLoading ? '150px' : 'auto'};
9+
// }
1010
`;
1111

1212
const DashboardSpinner = ({ isLoading, children }: { isLoading: boolean, children: any }) => (
13-
<StyledSpinnerWrapper>
13+
<StyledSpinnerWrapper isLoading={isLoading ? 1 : 0}>
1414
<Spin indicator={LoadingIcon} spinning={isLoading}>
1515
{children}
1616
</Spin>

‎src/contexts/MarketsContext.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { createContext, useContext } from 'react';
2+
import { markets } from '../utils/appDataUtils';
23

34
const MarketsContext = createContext({});
45

@@ -19,7 +20,10 @@ class MarketsProvider extends React.Component<{}, { market: string }> {
1920

2021
render() {
2122
const { setMarket, state } = this;
22-
const { market } = state;
23+
const { market: marketCode } = state;
24+
const market = markets.find((m: any) => {
25+
return m.marketCode === marketCode;
26+
});
2327
return (
2428
<MarketsContext.Provider value={{ market, setMarket }}>
2529
{this.props.children}

0 commit comments

Comments
 (0)