Here is the Radar chart that I want to update.
Currently, I'm working on an application where once we search for a doctor, the radar chart that's being shown in the picture above should get updated based on the new data received through props. However, what's happening currently is that the chart isn't getting updated immediately even though the text data on the side is getting updated. The chart gets updated only when I refresh the page.
Here is the code for the entire Name component that you see in the picture. As you can see in the code, I'm directly passing the data from the props to the UniversalChart component.
class Name extends Component {
state = {
page_id_name: 1,
hcp_id: 101,
nameData: []
};
render() {
console.log('data inside hcp_overview is: ', this.props)
return (
<div>
<hr style={{ backgroundColor: "light-grey" }} />
<div class="row m-b-lg m-t-lg" >
<div class="col-md-3">
<div >
<div>
<h2 class="no-margins">
{this.props.data[101].overview.name}
</h2>
<h4>{this.props.data[101].overview.designation}</h4>
<h5>{this.props.data[101].overview.specialty}</h5>
<h5>{this.props.data[101].top_three_affiliations[0]}</h5>
</div>
</div>
</div>
<div class="col-md-3" >
<h5 style={{ marginLeft: 10 }}>
<u>Key Details</u>
</h5>
<table class="table small m-b-xs" style={{ fontSize: 12 }}>
<tbody>
<tr>
<td>
<strong>NPI: </strong>{this.props.data[101].overview.npi}
</td>
</tr>
<tr>
<td>
<strong>Gender: </strong>{this.props.data[101].overview.gender}
</td>
</tr>
<tr>
<td>
<strong>Age: </strong>{this.props.data[101].overview.age}
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3" >
<h5 style={{ marginLeft: 10 }}><u>Top Affiliations</u></h5>
<table class="table small m-b-xs" style={{ fontSize: 12 }} >
<tbody>
<tr>
<td>
{this.props.data[101].top_three_affiliations[0]}
</td>
</tr>
<tr>
<td>
{this.props.data[101].top_three_affiliations[1]}
</td>
</tr>
<tr>
<td>
{this.props.data[101].top_three_affiliations[2]}
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3" >
<UniversalChart
type={this.props.data[101].chart_data_config.chartType}
data={this.props.data[101].datasets}
options={this.props.data[101].chart_data_config}
labels={this.props.data[101].labels}
key={this.props.data[101].datasets}
/>
</div>
</div>
</div>
)
}
And here is my UniversalChart component which uses ChartJS to display the chart.
class UniversalChart extends Component {
state = {
}
chartRef = React.createRef();
componentDidMount() {
const myChartRef = this.chartRef.current.getContext("2d");
new Chart(myChartRef, {
type: this.props.type,
data: { labels: this.props.labels, datasets: this.props.data },
options: JSON.parse(this.props.options.chartOptions)
})
}
render() {
return <canvas ref={this.chartRef} height={this.props.height} />
}
}
Am I missing something with regards to the React Component Lifecycle method? Just to reiterate, all the data on the right side gets updated but the chart itself doesn't get updated. Please let me know if any additional information needs to be added.
Here is the edited Universal Chart component where I tried the suggestion of @Giovanni Esposito.
class UniversalChart extends Component {
state = {
}
chartRef = React.createRef();
componentDidUpdate(prevProps, prevState) {
if(prevProps.data !== this.props.data){
const myChartRef = this.chartRef.current.getContext("2d");
new Chart(myChartRef, {
type: this.props.type,
data: { labels: this.props.labels, datasets: this.props.data },
options: JSON.parse(this.props.options.chartOptions)
})
}
}
componentDidMount() {
const myChartRef = this.chartRef.current.getContext("2d");
new Chart(myChartRef, {
type: this.props.type,
data: { labels: this.props.labels, datasets: this.props.data },
options: JSON.parse(this.props.options.chartOptions)
})
}
render() {
console.log('props inside render of universal chart is: ', this.props);
console.log('state inside render of univ chart is: ', this.state);
return <canvas ref={this.chartRef} height={this.props.height} />
}
}
