Integrating Barcharts in React application


Today I will integrate the BarCharts into my application. It’s will be really easy but have to see that bar charts will be updating. So let’s start by first adding the bar-charts and then checking what needs to be done to overcome any issue faced.

Following is the charts component that will add the charts to the application.

export default class MyChart extends Component {
constructor(props) {
super(props);
this.state = {
data : getDefaultData()
}
}
componentDidMount() {
let site = this.props.site;
let siteData = convertRdDataToAnnotations(site.rdData);
this.setState({
data : newChartData(siteData)
})
}
componentWillReceiveProps(nextProps) {
let site = nextProps.site;
let siteData = convertRdDataToAnnotations(site.rdData);
this.setState({
data : newChartData(siteData)
})
}
shouldComponentUpdate(nextProps,nextState) {
debugger;
let currentData = this.state.data.datasets[0].data;
let newData = nextState.data.datasets[0].data;
for(let i = 0; i < currentData.length; ++i) {
if(currentData[i] !== newData[i] ) {
return true;
}
}
return false;
}
render() {
let {data} = this.state
return (

);
}
}

The only new function I am adding is the componentWillReceiveProps. I will come to it for sure later on this post. First, let’s see the function that will create the data for the charts.

const convertRdDataToAnnotations = function(rdData, siteUrl){

let pdfDataAnnotations = [],
pdfgeneralAnnotations = [],
pdfImageAnnotations = [],
pdfTextAnnotations = []
console.log(rdData,”rdData that is being passed”);
if(typeof rdData == ‘undefined’){
console.log(“undefined”);
return {
data: pdfDataAnnotations.length,
image: pdfImageAnnotations.length,
general: pdfgeneralAnnotations.length,
text : pdfTextAnnotations.length
}
}
else if(typeof rdData !== ‘object’){
console.log(“not object”);
return {
data: pdfDataAnnotations.length,
image: pdfImageAnnotations.length,
general: pdfgeneralAnnotations.length,
text : pdfTextAnnotations.length
}
}
else if(rdData.commentBoxes || rdData.totalElements) {
console.log(“object”);
//console.log(‘rdData’,rdData)
// Pdf Data Anntotions Data
pdfDataAnnotations = rdData.highlighters.filter(function( obj ) {
return obj.type == “normal”;
});
// Pdf Image Anntotions Data
pdfImageAnnotations = rdData.highlighters.filter(function( obj ) {
return obj.type == “image”;
});
// pdfImageAnnotations.highlighters = highlighterArr;

//pdf general Annotation
pdfgeneralAnnotations = rdData.circles.filter(function( obj ) {
return obj.type == “normal”;
});

pdfTextAnnotations = rdData.textHighlighters;
}

return {
data: pdfDataAnnotations.length,
image: pdfImageAnnotations.length,
general: pdfgeneralAnnotations.length,
text : pdfTextAnnotations.length
}
//let status = generatePdf(pdfDataAnnotations, pdfImageAnnotations, pdfgeneralAnnotations, siteUrl);
// console.log(status,”pdf generated status”);
//return status;
}

This function will create a data for the charts and then we will be changing this data to the format in which chart.js will accept the data.

const newChartData = ({general,data,image,text}) => {
return {
labels: [“General”, “Data”, “Images”,”Text”],
datasets: [{
label: ‘# of Anotations’,
data: [general, data, image,text],
backgroundColor: [
‘rgba(22, 159, 12, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(106, 106, 86, 0.2)’
],
borderColor: [
‘rgba(22, 159, 12, 1)’,
‘rgba(54, 162, 235, 1)’,
‘rgba(255, 206, 86, 1)’,
‘rgba(106, 106, 86, 1)’
],
borderWidth: 1
}],
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
}
}

The above function will be creating the data in the format in which barcharts will be accepting it. Now everything is done, but how will the charts.js will update it based on the new data. So this life cycle method of React come to our rescue, what it will do is update the charts based on the component’s data.

componentWillReceiveProps(nextProps) {
let site = nextProps.site;
let siteData = convertRdDataToAnnotations(site.rdData);
this.setState({
data : newChartData(siteData)
})
}

This will update the state based on new Data.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s