diff --git a/nextjs-javascript/components/TVChartContainer/index.jsx b/nextjs-javascript/components/TVChartContainer/index.jsx index 7c9e5e3..a47e61d 100644 --- a/nextjs-javascript/components/TVChartContainer/index.jsx +++ b/nextjs-javascript/components/TVChartContainer/index.jsx @@ -1,15 +1,17 @@ -import * as React from 'react'; +import { useEffect, useRef } from "react"; import styles from './index.module.css'; import { widget, version } from '../../public/static/charting_library'; -function getLanguageFromURL() { +const getLanguageFromURL = () => { const regex = new RegExp('[\\?&]lang=([^&#]*)'); const results = regex.exec(window.location.search); return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' ')); } -export class TVChartContainer extends React.PureComponent { - static defaultProps = { +export const TVChartContainer = () => { + const chartContainerRef = useRef(); + + const defaultProps = { symbol: 'AAPL', interval: 'D', datafeedUrl: 'https://demo_feed.tradingview.com', @@ -20,40 +22,29 @@ export class TVChartContainer extends React.PureComponent { userId: 'public_user_id', fullscreen: false, autosize: true, - studiesOverrides: {}, }; - tvWidget = null; - - constructor(props) { - super(props); - - this.ref = React.createRef(); - } - - componentDidMount() { + useEffect(() => { const widgetOptions = { - symbol: this.props.symbol, + symbol: defaultProps.symbol, // BEWARE: no trailing slash is expected in feed URL - datafeed: new window.Datafeeds.UDFCompatibleDatafeed(this.props.datafeedUrl), - interval: this.props.interval, - container: this.ref.current, - library_path: this.props.libraryPath, + datafeed: new window.Datafeeds.UDFCompatibleDatafeed(defaultProps.datafeedUrl), + interval: defaultProps.interval, + container: chartContainerRef.current, + library_path: defaultProps.libraryPath, locale: getLanguageFromURL() || 'en', disabled_features: ['use_localstorage_for_settings'], enabled_features: ['study_templates'], - charts_storage_url: this.props.chartsStorageUrl, - charts_storage_api_version: this.props.chartsStorageApiVersion, - client_id: this.props.clientId, - user_id: this.props.userId, - fullscreen: this.props.fullscreen, - autosize: this.props.autosize, - studies_overrides: this.props.studiesOverrides, + charts_storage_url: defaultProps.chartsStorageUrl, + charts_storage_api_version: defaultProps.chartsStorageApiVersion, + client_id: defaultProps.clientId, + user_id: defaultProps.userId, + fullscreen: defaultProps.fullscreen, + autosize: defaultProps.autosize, }; const tvWidget = new widget(widgetOptions); - this.tvWidget = tvWidget; tvWidget.onChartReady(() => { tvWidget.headerReady().then(() => { @@ -71,23 +62,17 @@ export class TVChartContainer extends React.PureComponent { button.innerHTML = 'Check API'; }); }); - } - - componentWillUnmount() { - if (this.tvWidget !== null) { - this.tvWidget.remove(); - this.tvWidget = null; - } - } + return () => { + tvWidget.remove(); + }; + }); - render() { - return ( - <> -
-

TradingView Charting Library and Next.js Integration Example {version()}

-
-
- - ); - } + return ( + <> +
+

TradingView Charting Library and Next.js Integration Example {version()}

+
+
+ + ); } diff --git a/nextjs-javascript/components/TVChartContainer/index.module.css b/nextjs-javascript/components/TVChartContainer/index.module.css index fe18452..29f8d11 100644 --- a/nextjs-javascript/components/TVChartContainer/index.module.css +++ b/nextjs-javascript/components/TVChartContainer/index.module.css @@ -6,8 +6,12 @@ background-color: #222; color: #fff; font-family: Arial, Helvetica, sans-serif; + height: 75px; + max-height: 75px; + font-size: 11px; + overflow-wrap: break-word; } .TVChartContainer { - height: calc(100vh - 80px); + height: calc(100vh - 75px); }