async componentDidMount() {
await this.getClubsSales();
}
async getClubsSales() {
let totalSales = 1;
let totalProducts = 0;
let clubDataOption = [];
const response = await axios({
method: ‘GET’,
url: configData.server_URI + ‘/getProductsSales’,
});
if (response.data) {
response.data.forEach((sale) => {
totalSales += Number(sale.sales);
});
totalProducts = response.data.length;
}
const clubs = await axios({
method: ‘GET’,
url: configData.server_URI + ‘/getClubs’,
});
if (clubs.data) {
clubs.data.forEach(async (club) => {
let clubSales = 1;
const clubProduct = await axios({
method: ‘GET’,
url: configData.server_URI + ‘/getProductsByclubName’,
params: {
clubName: club.clubName,
},
});
if (clubProduct.data) {
clubProduct.data.forEach(async (product) => {
clubSales += Number(product.sales);
});
}
clubDataOption.push({ y: parseFloat(clubSales / totalSales).toFixed(2), label: club.clubName.toUpperCase() });
});
}
console.log(clubDataOption);
const options = {
animationEnabled: true,
exportEnabled: true,
theme: ‘light1’, // “light1”, “dark1”, “dark2”
title: {
text: ‘Clubs Sales’,
},
data: [
{
type: ‘pie’,
indexLabel: ‘{label}: {y}%’,
startAngle: -90,
dataPoints: clubDataOption,
},
],
};
console.log(options.data[0].dataPoints);
this.setState({
clubsGraph: options,
totalProducts: totalProducts,
});
}
render{
return(
<div className=”graphDetails”>
<CanvasJSChart options={this.state.clubsGraph} />
</div>
);
}
******************
log
clubDataOption array :
[
{
“y”: “0.33”,
“label”: “ARSENAL”
},
{
“y”: “0.67”,
“label”: “BARCELONA”
},
{
“y”: “0.33”,
“label”: “REALMADRID”
},
{
“y”: “0.33”,
“label”: “MANCHESTERCITY”
},
{
“y”: “0.67”,
“label”: “LIVERPOOL”
}
]
[
{
“y”: “0.33”,
“label”: “ARSENAL”
},
{
“y”: “0.67”,
“label”: “BARCELONA”
},
{
“y”: “0.33”,
“label”: “REALMADRID”
},
{
“y”: “0.33”,
“label”: “MANCHESTERCITY”
},
{
“y”: “0.67”,
“label”: “LIVERPOOL”
}
]
Note we can to see in the logs that the data is fetched right .
.
