Using ReactJS, want to rerender sparkline control each time dataSource is changed. Following is CodePen example using button clicks to change the data. The sparkline draws any of the data sets correctly on initial load, but I cannot figure out how to change the dataSource and force the control to render the new data set.
What is correct way to refresh a SyncFusion javascript control when using ReactJS?
Thank you.
var dataSourceStart= [10,20,30,40,50,40,30,20,10];
var dataSourceOne= [50,40,30,20,10,20,30,40,50];
var dataSourceTwo= [10,50,20,60,30,70,40,80,50,90];
class SparklineDemo extends React.Component{
constructor(props)
{
super(props);
this.handleClickOne = this.handleClickOne.bind(this);
this.handleClickTwo = this.handleClickTwo.bind(this);
this.state = {data : this.props.data};
}
handleClickOne(){
console.log('handleClickOne');
this.setState((prevState, props)=>
{
return {data : dataSourceOne};
});
$('#sparkline1').ejSparkline("redraw");
}
handleClickTwo(){
console.log('handleClickTwo');
this.setState((prevState, props)=>
{
return {data : dataSourceTwo};
});
$('#sparkline1').ejSparkline("redraw");
}
componentWillMount(){
console.log('componentWillMount');
}
componentWillUnmount(){
console.log('componentWillUnmount');
}
componentDidMount(){
console.log('componentDidMount');
}
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps ' + nextProps.data)
}
shouldComponentUpdate(nextProps,nextState){
console.log('shouldComponentUpdate ' + nextProps.data + ' ' + nextState.data);
return true;
}
componentWillUpdate(nextProps,nextState){
console.log('componentWillUpdate ' + nextProps.data + ' ' + nextState.data)
}
componentDidUpdate(prevProps,prevState){
console.log('componentDidUpdate ' + prevProps.data + ' ' + prevState.data);
}
render()
{
var sizeSettings = {
height: "92px",
width: "92px"
};
console.log('render');
return (
<div className="default">
<EJ.Sparkline id="sparkline1" dataSource={this.state.data} type="column" fill="#ff0000" size={sizeSettings}></EJ.Sparkline>
<EJ.Button id="button1" text="Button One" click={this.handleClickOne}></EJ.Button>
<EJ.Button id="button2" text="Button Two" click={this.handleClickTwo}></EJ.Button>
</div>
);
}
}
ReactDOM.render(
<SparklineDemo data={dataSourceStart}/>,
document.getElementById('root')
);
