3bdalah / chart-bar Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 1.03 MB

Home Page: chart-bar.vercel.app

HTML 16.48% CSS 5.12% JavaScript 78.39%

chart-bar's People

Contributors

Stargazers

Watchers

chart-bar's Issues

data structure

chart-bar/src/components/BarChart.js

Lines 10 to 12 in a382d7b

 const newDataChart = dataChart.goals.map(({difficulty_points,category,month}) => { 

 return {difficulty_points,category,month} 

 });

there is no month returned from the backend there is a timestamps

weird loop

chart-bar/src/components/BarChart.js

Lines 39 to 57 in a382d7b

 while (i<4){ 

 let newContainer = []; 

 let people =0, 

 craft=0, 

 community=0, 

 process=0, 

 counter=0; 

 // check type Quartar ? ok 

 let DataQuartar = []; 

 if(i=== 0){ 

 DataQuartar = Q1; 

 }else if(i===1){ 

 DataQuartar = Q2; 

 }else if(i===2){ 

 DataQuartar = Q3; 

 }else{ 

 DataQuartar = Q4; 

 }

there is a more concise and simple way to implement that from for loop to [Q1, Q2, Q3, Q4].forEach(QData => ...)

month formate

chart-bar/src/components/BarChart.js

Lines 16 to 20 in a382d7b

 newDataChart.forEach((item ) => { 

 if(item.month === "January" || item.month === "February"||item.month === "March"){ 

 Q1.push(item); 

 }else if(item.month === "April" || item.month === "May"||item.month === "June"){ 

 Q2.push(item);

just make sure you check the right strings it could be Jan for example

wrong category filter

chart-bar/src/components/BarChart.js

Lines 58 to 68 in a382d7b

 DataQuartar.forEach((item)=>{ 

 if(item.category === "people"){ 

 people += item.difficulty_points; 

 counter++; 

 }else if(item.category=== "craft"){ 

 craft += item.difficulty_points; 

 counter++; 

 }else if(item.category=== "community"){ 

 community += item.difficulty_points; 

 counter++; 

 }else{

do not use fixed category make it generic also do not forget to generate different color for each category

3bdalah / chart-bar Goto Github PK

chart-bar's People

Contributors

Stargazers

Watchers

chart-bar's Issues

data structure

weird loop

month formate

wrong category filter

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	const newDataChart = dataChart.goals.map(({difficulty_points,category,month}) => {
	return {difficulty_points,category,month}
	});

	while (i<4){
	let newContainer = [];
	let people =0,
	craft=0,
	community=0,
	process=0,
	counter=0;
	// check type Quartar ? ok
	let DataQuartar = [];
	if(i=== 0){
	DataQuartar = Q1;

	}else if(i===1){
	DataQuartar = Q2;
	}else if(i===2){
	DataQuartar = Q3;
	}else{
	DataQuartar = Q4;
	}

	newDataChart.forEach((item ) => {
	if(item.month === "January" \|\| item.month === "February"\|\|item.month === "March"){
	Q1.push(item);
	}else if(item.month === "April" \|\| item.month === "May"\|\|item.month === "June"){
	Q2.push(item);

	DataQuartar.forEach((item)=>{
	if(item.category === "people"){
	people += item.difficulty_points;
	counter++;
	}else if(item.category=== "craft"){
	craft += item.difficulty_points;
	counter++;
	}else if(item.category=== "community"){
	community += item.difficulty_points;
	counter++;
	}else{