update(app): complete tradingview integration

Author: vmc08

src/components/pages/charts/FinancialTimesStockExchange.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Row, Col, Card, Typography, Divider } from 'antd';
+
+import TradingView from '../../TradingView';
+import { useMarketsContextValue } from '../../../contexts/MarketsContext';
+import { CHART_LABELS } from '../../../utils/data/chartDataUtils';
+
+const { Title } = Typography;
+
+const FinancialTimesStockExchange = () => {
+  const { market: { marketCode } } = useMarketsContextValue();
+  const { symbol, label } = CHART_LABELS[marketCode];
+  return (
+    <Row type="flex" gutter={16}>
+      <Col className="pb-2 pb-sm-3" xs={24}>
+        <Card className="p-3" style={{ height: '100%' }} bodyStyle={{ padding: 0 }}>
+          <Title level={4}>{label}</Title>
+          <Divider className="my-3" />
+          <TradingView
+            id="ftse-price-index"
+            symbol={`${symbol}.${marketCode}`}
+          />
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+
+export default FinancialTimesStockExchange;

src/components/pages/dashboard/HeatMap.tsx

@@ -10,7 +10,7 @@ import { useMarketsContextValue } from '../../../contexts/MarketsContext';
 import { useUserContextValue } from '../../../contexts/UserContext';
 import { useIntervalContext } from '../../../contexts/IntervalContext';
 import { HEAT_MAP } from '../../../apollo/queries/dashboard';
-import { HEAT_COLORS } from '../../../utils/data/chartDataUtils';
+import { HEATMAP_COLORS } from '../../../utils/data/chartDataUtils';
 import { truncateDecimals } from '../../../utils/numberUtils';
 
 const { Title, Text } = Typography;
@@ -52,7 +52,7 @@ const HeatMapBar = ({ title, data }: IHeatMapBar) => {
   data.forEach(({ level, value }) => {
     progressPercent = progressPercent + value * 100;
     const numberKey = `${truncateDecimals(progressPercent).toString()}`;
-    progressStrokeColors[`${numberKey}%`] = HEAT_COLORS[level + 2];
+    progressStrokeColors[`${numberKey}%`] = HEATMAP_COLORS[level + 2];
   });
 
   const derivedStrokeColor = Object.keys(progressStrokeColors).length > 1 ?

src/components/pages/dashboard/dashboard-heatmap/index.tsx

@@ -8,7 +8,7 @@ import { useMarketsContextValue } from '../../../../contexts/MarketsContext';
 import { useUserContextValue } from '../../../../contexts/UserContext';
 import { useIntervalContext } from '../../../../contexts/IntervalContext';
 import { truncateDecimals } from '../../../../utils/numberUtils';
-import { HEAT_COLORS } from '../../../../utils/data/chartDataUtils';
+import { HEATMAP_COLORS } from '../../../../utils/data/chartDataUtils';
 
 import DashboardSpinner from '../../../spinners/DashboardSpinner';
 
@@ -40,7 +40,7 @@ const StyledDiv = styled.div`
 const HeatMapCard = ({ reit, level, priceChange }: IHeatmapDetail, innerIdx: number) => (
   <Col xs={24} md={4} className="my-1" key={reit.reitId}>
     <Card
-      style={{ backgroundColor: HEAT_COLORS[level + 2] }}
+      style={{ backgroundColor: HEATMAP_COLORS[level + 2] }}
       key={innerIdx}
       className="text-center"
     >

src/index.tsx

@@ -4,7 +4,7 @@ import ApolloClient from 'apollo-boost';
 import { ApolloProvider } from 'react-apollo';
 import { BrowserRouter } from 'react-router-dom';
 import * as serviceWorker from './serviceWorker';
-import ClearCache from 'react-clear-cache';
+// import ClearCache from 'react-clear-cache';
 
 import App from './App';
 import 'antd/dist/antd.css';
@@ -18,15 +18,20 @@ const client = new ApolloClient({
 });
 
 ReactDOM.render(
-  <ClearCache auto>
-    {() => (
-      <ApolloProvider client={client}>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </ApolloProvider>
-    )}
-  </ClearCache>,
+  // <ClearCache auto>
+  //   {() => (
+  //     <ApolloProvider client={client}>
+  //       <BrowserRouter>
+  //         <App />
+  //       </BrowserRouter>
+  //     </ApolloProvider>
+  //   )}
+  // </ClearCache>,
+  <ApolloProvider client={client}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </ApolloProvider>,
   document.getElementById('root'),
 );
 

src/pages/Chart.tsx

@@ -3,6 +3,7 @@ import { UserConsumer } from '../contexts/UserContext';
 import AppLayout from '../components/layout/AppLayout';
 
 import PriceIndex from '../components/pages/charts/PriceIndex';
+import FinancialTimesStockExchange from '../components/pages/charts/FinancialTimesStockExchange';
 
 class Chart extends React.Component<{ requireAuth: boolean }> {
   render() {
@@ -12,7 +13,10 @@ class Chart extends React.Component<{ requireAuth: boolean }> {
         <UserConsumer>
           {(value) => {
             return (
-              <PriceIndex />
+              <>
+                <PriceIndex />
+                <FinancialTimesStockExchange />
+              </>
             );
           }}
         </UserConsumer>

src/utils/data/chartDataUtils.ts

@@ -1,3 +1,10 @@
+interface IChartLabels {
+  [key: string]: {
+    label: string,
+    symbol: string,
+  },
+}
+
 export const CHART_COLORS = {
   GREEN: '#52C41A',
   BLUE: '#1890FF',
@@ -7,7 +14,7 @@ export const CHART_COLORS = {
   CYAN: '#13C2C2',
 };
 
-export const HEAT_COLORS = [
+export const HEATMAP_COLORS = [
   '#962328', // DARK_RED
   '#ED3F33', // LIGHT_RED
   '#868A8D', // GRAY
@@ -35,3 +42,18 @@ export const TRADING_VIEW_DEFAULT_CONFIG = {
     }],
   },
 };
+
+export const CHART_LABELS: IChartLabels = {
+  SGX: {
+    label: 'FTSE ST Real Estate Investment',
+    symbol: 'FTSE',
+  },
+  HKEX: {
+    label: 'Hang Seng REIT Index',
+    symbol: 'HANGSENG',
+  },
+  MYX: {
+    label: 'MALAYSIA REIT Index',
+    symbol: 'FTSE',
+  },
+};