update(app): complete trading view

Author: vmc08

package-lock.json

@@ -34,6 +34,7 @@
     "p-min-delay": "^3.1.0",
     "react": "^16.8.6",
     "react-apollo": "^3.0.0",
+    "react-async-script": "^1.1.1",
     "react-clear-cache": "^1.0.26",
     "react-dom": "^16.8.6",
     "react-flag-icon-css": "^1.0.25",

package.json

@@ -0,0 +1 @@
+Subproject commit 5a839dcaeaf0a6c1de47990b27bc180708f98bf7

public/assets/tradingview

@@ -5,14 +5,17 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no"
     />
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script src="%PUBLIC_URL%/assets/tradingview/datafeeds/udf/dist/polyfills.js"></script>
+    <script src="%PUBLIC_URL%/assets/tradingview/datafeeds/udf/dist/bundle.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/index.html

@@ -0,0 +1,15 @@
+declare module 'react-async-script' {
+  // https://github.com/dozoisch/react-async-script/issues
+  import { ReactNode } from "react";
+
+  interface IOptions {
+    callbackName?: string,
+    globalName?: string,
+    removeOnUnmount?: boolean,
+    scriptId?: string,
+  }
+
+  export interface IAsyncScriptComponentProps { asyncScriptOnLoad: () => void }
+  
+  export default function(getScriptUrl: string, options?: IOptions): ReactNode<IAsyncScriptComponentProps>
+}

src/@types/untyped-npm-module/index.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import styled from 'styled-components';
+import AsyncScriptLoader from 'react-async-script';
+
+import { TRADING_VIEW_DEFAULT_CONFIG } from '../utils/data/chartDataUtils';
+
+const DEFAULT_INTERVAL = 'D';
+
+interface ITradingView {
+  id: string,
+  symbol: string,
+}
+
+interface ITradingViewState {
+  widgetInstance: any,
+  container_id: string,
+  symbol: string,
+}
+
+const StyledTradingView = styled.div`
+  width: 100%;
+  height: 570px;
+`;
+
+const AsyncScriptLoaderTradingView = AsyncScriptLoader(
+  '/assets/tradingview/charting_library/charting_library.min.js',
+)(StyledTradingView);
+
+class TradingView extends React.PureComponent<ITradingView, ITradingViewState> {
+  constructor(props: ITradingView) {
+    super(props);
+    this.state = {
+      symbol: props.symbol,
+      widgetInstance: null,
+      container_id: `${props.id}-tv-identifier`,
+    };
+    this.initializedTradingView = this.initializedTradingView.bind(this);
+  }
+
+  componentDidUpdate({ symbol }: ITradingView) {
+    if (symbol !== this.props.symbol) {
+      this.setState({ symbol: this.props.symbol }, () => {
+        const { widgetInstance, symbol: symbolState } = this.state;
+        if (widgetInstance) {
+          widgetInstance.setSymbol(symbolState, DEFAULT_INTERVAL);
+        }
+      });
+    }
+  }
+
+  initializedTradingView() {
+    if (!window) {
+      return;
+    }
+    const { symbol, container_id } = this.state;
+    const tvConfig = {
+      symbol,
+      container_id,
+      interval: DEFAULT_INTERVAL,
+      datafeed: new (window as any).Datafeeds.UDFCompatibleDatafeed(
+        process.env.REACT_APP_DATA_FEED_URL,
+      ),
+      ...TRADING_VIEW_DEFAULT_CONFIG,
+    };
+    this.setState({
+      widgetInstance: new (window as any).TradingView.widget(tvConfig),
+    });
+  }
+
+  render() {
+    const { container_id } = this.state;
+    return (
+      <AsyncScriptLoaderTradingView
+        asyncScriptOnLoad={this.initializedTradingView}
+        id={container_id}
+      />
+    );
+  }
+}
+
+export default TradingView;

src/components/TradingView.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Row, Col, Card, Typography, Divider } from 'antd';
+
+import TradingView from '../../TradingView';
+import { useMarketsContextValue } from '../../../contexts/MarketsContext';
+
+const { Title } = Typography;
+
+const PriceIndex = () => {
+  const { market: { marketCode } } = useMarketsContextValue();
+
+  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}>Market Cap Weighted Price Index of REITs</Title>
+          <Divider className="my-3" />
+          <TradingView
+            id="market-cap-price-index"
+            symbol={`RSI.${marketCode}`}
+          />
+        </Card>
+      </Col>
+    </Row>
+  );
+};
+
+export default PriceIndex;

src/components/pages/charts/PriceIndex.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { UserConsumer } from '../contexts/UserContext';
 import AppLayout from '../components/layout/AppLayout';
 
+import PriceIndex from '../components/pages/charts/PriceIndex';
+
 class Chart extends React.Component<{ requireAuth: boolean }> {
   render() {
     const { requireAuth } = this.props;
@@ -10,7 +12,7 @@ class Chart extends React.Component<{ requireAuth: boolean }> {
         <UserConsumer>
           {(value) => {
             return (
-              <div>Chart Page</div>
+              <PriceIndex />
             );
           }}
         </UserConsumer>

src/pages/Chart.tsx

@@ -18,3 +18,20 @@ export const HEAT_COLORS = [
 export const SANS_SERIF_FONT = `
   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
 `;
+
+export const TRADING_VIEW_DEFAULT_CONFIG = {
+  autosize: true,
+  timezone: 'Asia/Singapore',
+  library_path: '/assets/tradingview/charting_library/',
+  client_id: 'tradingview.com',
+  user_id: 'public_user_id',
+  locale: 'en',
+  disabled_features: ['use_localstorage_for_settings'],
+  enabled_features: ['study_templates'],
+  drawings_access: {
+    type: 'black',
+    tools: [{
+      name: 'Regression Trend',
+    }],
+  },
+};

src/utils/data/chartDataUtils.ts

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "typeRoots" : ["src/@types", "./node_modules/@types"],
     "target": "es5",
     "lib": [
       "dom",