I am encountering an issue with implementing auto-refresh for a TradingView chart in a React application. I have integrated the UDF adapter API for the data feed URL, and the chart is rendering correctly. However, I am facing challenges in implementing the auto-refresh functionality.
import React, { useEffect, useState } from "react";
import { widget } from "../../charting_library";
import { connect } from "react-redux";
import datafeed from "./datafeed";
function getLanguageFromURL() {
const regex = new RegExp("[\?&]lang=([^&#]*)");
const results = regex.exec(window.location.search);
return results === null
? null
: decodeURIComponent(results[1].replace(/+/g, " "));
}
function TVChartContainer(props) {
console.log("props", props);
const [state, setState] = useState({
symbols: props.symbols,
pre_symbols: props.pre_symbols,
});
const [tvWidget, setTvWidget] = useState(null);
const widgetOptionsFunc = (widgtProp) => {
let symbols = widgtProp.symbols;
if (widgtProp.pre_symbols && widgtProp.pre_symbols !== widgtProp.symbols) {
symbols = widgtProp.symbols;
}
const widgetOptions = {
debug: false,
symbol: symbols,
theme: props.theme === "dark" ? "Dark" : "Light",
// BEWARE: no trailing slash is expected in feed URL
datafeed: new window.Datafeeds.UDFCompatibleDatafeed(
widgtProp.datafeedUrl
),
interval: widgtProp.interval,
container_id: widgtProp.containerId,
library_path: widgtProp.libraryPath,
locale: getLanguageFromURL() || "en",
disabled_features: [
"header_compare",
"header_saveload",
"header_settings",
"header_undo_redo",
"header_screenshot",
"header_fullscreen_button",
"main_series_scale_menu",
"countdown",
"go_to_date",
"timeframes_toolbar",
],
enabled_features: ["hide_resolution_in_legend"],
charts_storage_url: widgtProp.chartsStorageUrl,
charts_storage_api_version: widgtProp.chartsStorageApiVersion,
client_id: widgtProp.clientId,
user_id: widgtProp.userId,
fullscreen: widgtProp.fullscreen,
autosize: widgtProp.autosize,
studies_overrides: widgtProp.studiesOverrides,
favorites: {
intervals: ["1H", "2H", "4H", "6H", "12H", "1D", "3D", "2D", "1W"],
chartTypes: ["ha"],
},
header_compare: false,
};
return new widget(widgetOptions);
};
useEffect(() => {
const tvWidget = widgetOptionsFunc(props, state.symbols);
// Assuming you have a way to persist tvWidget, e.g., using state or refs
// For simplicity, let's assume it's a state variable
setTvWidget(tvWidget);
// Cleanup function to remove the widget on component unmount
return () => {
if (tvWidget !== null) {
tvWidget.remove();
setTvWidget(null);
}
};
}, [props, state.symbols]);
// Function to periodically update the chart
const autoRefreshChart = () => {
if (tvWidget !== null) {
tvWidget.update();
}
};
useEffect(() => {
const intervalId = setInterval(autoRefreshChart, 30000); // Auto-refresh every 30 seconds
// Cleanup function to clear the interval on component unmount
return () => clearInterval(intervalId);
}, [tvWidget]);
return <div id={props.containerId} className={"TVChartContainer"} />;
}
TVChartContainer.defaultProps = {
interval: "1H",
containerId: "tv_chart_container",
datafeedUrl: "http://localhost:5000/api/chart",
libraryPath: "/charting_library/",
chartsStorageUrl: "https://saveload.tradingview.com",
chartsStorageApiVersion: "1.1",
header_widget_buttons_mode: "fullsize",
clientId: "localhost",
fullscreen: false,
autosize: true,
studiesOverrides: {},
supportSymbolSearch: false,
compare_symbols: false,
disabled_features: [
"save_chart_properties_to_local_storage",
"volume_force_overlay",
],
enabled_features: ["move_logo_to_main_pane", "study_templates"],
disableSave: true,
};
function mapStateToProps(state) {
return {
theme: state.AuthReducer.switch_theme,
};
}
export default connect(mapStateToProps)(TVChartContainer);
The auto-refresh function is intended to update the chart every 30 seconds. I have utilized setInterval within a useEffect hook to achieve this. However, it seems that the chart is not updating as expected.
