Skip to content
Snippets Groups Projects
Commit 5faf77cf authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

Graphs

parent 1cfb571e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/Graph.tsx
+ 338
− 84
View file @ 5faf77cf
import { Pie } from 'react-chartjs-2'; import { Pie } from 'react-chartjs-2';
import React from 'react'; import React from 'react';
import { Bar, Doughnut, PolarArea } from 'react-chartjs-2'; import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, Tooltip, Legend,ArcElement, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js'; import { Chart as ChartJS, Tooltip, Legend,ArcElement, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js';
const backgroundcolorscale = [
'rgba(133, 15, 120, 0.2)',
'rgba(160, 167, 243, 0.2)',
'rgba(245, 125, 34, 0.2)',
'rgba(244, 204, 30, 0.2)',
'rgba(226, 218, 215, 0.2)',
'rgba(0, 101, 48, 0.2)',
]
const bordercolorscale = [
'rgba(133, 15, 120, 1)',
'rgba(160, 167, 243, 1)',
'rgba(245, 125, 34, 1)',
'rgba(244, 204, 30, 1)',
'rgba(226, 218, 215, 1)',
'rgba(0, 101, 48, 1)',
]
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale,
RadialLinearScale, RadialLinearScale,
...@@ -23,22 +40,8 @@ const PieChart: React.FC = () => { ...@@ -23,22 +40,8 @@ const PieChart: React.FC = () => {
0.2384159999999995, 0.2384159999999995,
0.003703 0.003703
], ],
backgroundColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 0.2)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1, borderWidth: 1,
}, },
], ],
...@@ -57,7 +60,7 @@ const PieChart: React.FC = () => { ...@@ -57,7 +60,7 @@ const PieChart: React.FC = () => {
export const OpenToGeneTherapy: React.FC = () => { export const OpenToGeneTherapyatients: React.FC = () => {
const data = { const data = {
labels: ['Yes', 'Maybe', 'No'], labels: ['Yes', 'Maybe', 'No'],
datasets: [ datasets: [
...@@ -68,16 +71,8 @@ export const OpenToGeneTherapy: React.FC = () => { ...@@ -68,16 +71,8 @@ export const OpenToGeneTherapy: React.FC = () => {
19.86, 19.86,
1.42 1.42
], ],
backgroundColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 0.2)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1, borderWidth: 1,
}, },
], ],
...@@ -95,7 +90,7 @@ export const OpenToGeneTherapy: React.FC = () => { ...@@ -95,7 +90,7 @@ export const OpenToGeneTherapy: React.FC = () => {
}; };
export const MostStressfulForRelative: React.FC = () => { export const MostStressfulForRelativeatients: React.FC = () => {
const data = { const data = {
labels: ['Emotional Stress', 'Physiacal Symptoms', 'Financial Burden', 'Social Restrictions', 'Other'], labels: ['Emotional Stress', 'Physiacal Symptoms', 'Financial Burden', 'Social Restrictions', 'Other'],
datasets: [ datasets: [
...@@ -108,22 +103,8 @@ export const MostStressfulForRelative: React.FC = () => { ...@@ -108,22 +103,8 @@ export const MostStressfulForRelative: React.FC = () => {
17.73, 17.73,
1.34 1.34
], ],
backgroundColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 0.2)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 1, borderWidth: 1,
}, },
], ],
...@@ -140,7 +121,7 @@ export const MostStressfulForRelative: React.FC = () => { ...@@ -140,7 +121,7 @@ export const MostStressfulForRelative: React.FC = () => {
); );
}; };
export const WhoAffected: React.FC = () => { export const WhoAffectedatients: React.FC = () => {
const data = { const data = {
labels: ['I am affected', 'A Relative is affected'], labels: ['I am affected', 'A Relative is affected'],
datasets: [ datasets: [
...@@ -150,14 +131,8 @@ export const WhoAffected: React.FC = () => { ...@@ -150,14 +131,8 @@ export const WhoAffected: React.FC = () => {
43.24, 43.24,
56.76 56.76
], ],
backgroundColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 0.2)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1, borderWidth: 1,
}, },
], ],
...@@ -174,7 +149,7 @@ export const WhoAffected: React.FC = () => { ...@@ -174,7 +149,7 @@ export const WhoAffected: React.FC = () => {
); );
}; };
export const DoYouWantMoreInfo: React.FC = () => { export const DoYouWantMoreInfoatients: React.FC = () => {
const data = { const data = {
labels: ['Yes', 'No'], labels: ['Yes', 'No'],
datasets: [ datasets: [
...@@ -184,14 +159,8 @@ export const DoYouWantMoreInfo: React.FC = () => { ...@@ -184,14 +159,8 @@ export const DoYouWantMoreInfo: React.FC = () => {
93.48, 93.48,
6.52 6.52
], ],
backgroundColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 0.2)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1, borderWidth: 1,
}, },
], ],
...@@ -208,7 +177,7 @@ export const DoYouWantMoreInfo: React.FC = () => { ...@@ -208,7 +177,7 @@ export const DoYouWantMoreInfo: React.FC = () => {
); );
}; };
export const HowOftenTreatment: React.FC = () => { export const HowOftenTreatmentatients: React.FC = () => {
const labels = ['Rarely', 'Monthly', 'Weekly', 'Several times per week', 'Daily']; const labels = ['Rarely', 'Monthly', 'Weekly', 'Several times per week', 'Daily'];
const data = { const data = {
...@@ -223,7 +192,8 @@ export const HowOftenTreatment: React.FC = () => { ...@@ -223,7 +192,8 @@ export const HowOftenTreatment: React.FC = () => {
9.73, 9.73,
62.7 62.7
], ],
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
}, },
], ],
}; };
...@@ -247,7 +217,7 @@ export const HowOftenTreatment: React.FC = () => { ...@@ -247,7 +217,7 @@ export const HowOftenTreatment: React.FC = () => {
); );
}; };
export const WhatCocernsAboutGeneTherapy: React.FC = () => { export const WhatCocernsAboutGeneTherapyatients: React.FC = () => {
const labels = ['Mo concerns', 'Ethical questions', 'Long-term effects', 'Safety and side effects', 'Cost and accessibility']; const labels = ['Mo concerns', 'Ethical questions', 'Long-term effects', 'Safety and side effects', 'Cost and accessibility'];
const data = { const data = {
...@@ -262,7 +232,8 @@ export const WhatCocernsAboutGeneTherapy: React.FC = () => { ...@@ -262,7 +232,8 @@ export const WhatCocernsAboutGeneTherapy: React.FC = () => {
59.46, 59.46,
32.43 32.43
], ],
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
}, },
], ],
}; };
...@@ -286,7 +257,7 @@ export const WhatCocernsAboutGeneTherapy: React.FC = () => { ...@@ -286,7 +257,7 @@ export const WhatCocernsAboutGeneTherapy: React.FC = () => {
); );
}; };
export const HowMuchDoesItAffectYou: React.FC = () => { export const HowMuchDoesItAffectYouatients: React.FC = () => {
const labels = ['1', '2', '3', '4', '5']; const labels = ['1', '2', '3', '4', '5'];
const data = { const data = {
...@@ -301,7 +272,8 @@ export const HowMuchDoesItAffectYou: React.FC = () => { ...@@ -301,7 +272,8 @@ export const HowMuchDoesItAffectYou: React.FC = () => {
32.97, 32.97,
8.11 8.11
], ],
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
}, },
], ],
}; };
...@@ -326,7 +298,7 @@ export const HowMuchDoesItAffectYou: React.FC = () => { ...@@ -326,7 +298,7 @@ export const HowMuchDoesItAffectYou: React.FC = () => {
}; };
export const WhichTherapyDoYouUse: React.FC = () => { export const WhichTherapyDoYouUseatients: React.FC = () => {
const labels = ['Psychological therapy', 'Physical therapy', 'Nutritional therapy', 'Medication therapy', 'Inhalation therapy', 'Others']; const labels = ['Psychological therapy', 'Physical therapy', 'Nutritional therapy', 'Medication therapy', 'Inhalation therapy', 'Others'];
const data = { const data = {
...@@ -342,7 +314,8 @@ export const WhichTherapyDoYouUse: React.FC = () => { ...@@ -342,7 +314,8 @@ export const WhichTherapyDoYouUse: React.FC = () => {
26.83, 26.83,
1.19 1.19
], ],
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
}, },
], ],
}; };
...@@ -366,7 +339,7 @@ export const WhichTherapyDoYouUse: React.FC = () => { ...@@ -366,7 +339,7 @@ export const WhichTherapyDoYouUse: React.FC = () => {
); );
}; };
export const WhichSymptoms: React.FC = () => { export const WhichSymptomsatients: React.FC = () => {
const labels = ['Other', 'Headache', "Delayed Growth", 'Underweight', 'Frequent lung infections', 'Muscle tremors/weakness', 'constipation', 'Abdominal pain', 'Chronic cough' ]; const labels = ['Other', 'Headache', "Delayed Growth", 'Underweight', 'Frequent lung infections', 'Muscle tremors/weakness', 'constipation', 'Abdominal pain', 'Chronic cough' ];
const data = { const data = {
...@@ -385,7 +358,8 @@ export const WhichSymptoms: React.FC = () => { ...@@ -385,7 +358,8 @@ export const WhichSymptoms: React.FC = () => {
23.19, 23.19,
18.95 18.95
], ],
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
}, },
], ],
}; };
...@@ -410,7 +384,7 @@ export const WhichSymptoms: React.FC = () => { ...@@ -410,7 +384,7 @@ export const WhichSymptoms: React.FC = () => {
}; };
export const BasicPosition: React.FC = () => { export const BasicPositionatients: React.FC = () => {
const labels = ['1', '2', '3', '4', '5']; const labels = ['1', '2', '3', '4', '5'];
const data = { const data = {
labels, labels,
...@@ -424,7 +398,8 @@ export const BasicPosition: React.FC = () => { ...@@ -424,7 +398,8 @@ export const BasicPosition: React.FC = () => {
30.00, 30.00,
35.00 35.00
], ],
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
}, },
], ],
}; };
...@@ -448,7 +423,7 @@ export const BasicPosition: React.FC = () => { ...@@ -448,7 +423,7 @@ export const BasicPosition: React.FC = () => {
); );
}; };
export const AgeDiagnosis: React.FC = () => { export const AgeDiagnosisatients: React.FC = () => {
const labels = ['>20', '10-20', '1-10', 'first months', 'first week', 'Newborn Screening', 'Before birth']; const labels = ['>20', '10-20', '1-10', 'first months', 'first week', 'Newborn Screening', 'Before birth'];
const data = { const data = {
labels, labels,
...@@ -464,7 +439,8 @@ export const AgeDiagnosis: React.FC = () => { ...@@ -464,7 +439,8 @@ export const AgeDiagnosis: React.FC = () => {
26.23, 26.23,
1.09 1.09
], ],
backgroundColor: 'rgba(255, 99, 132, 0.5)', backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
}, },
], ],
}; };
...@@ -488,7 +464,7 @@ export const AgeDiagnosis: React.FC = () => { ...@@ -488,7 +464,7 @@ export const AgeDiagnosis: React.FC = () => {
); );
}; };
export const HeadrofGeneTherapy: React.FC = () => { export const HeadrofGeneTherapyPatients: React.FC = () => {
const data = { const data = {
labels: ['Yes', 'No'], labels: ['Yes', 'No'],
datasets: [ datasets: [
...@@ -498,14 +474,245 @@ export const HeadrofGeneTherapy: React.FC = () => { ...@@ -498,14 +474,245 @@ export const HeadrofGeneTherapy: React.FC = () => {
76.76, 76.76,
23.24 23.24
], ],
backgroundColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 0.2)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 0.2)', borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const MoreInfoOnTherapyBoth: React.FC = () => {
const labels = ['Yes', 'No'];
const data = {
labels,
datasets: [
{
label: 'Affected',
data: [
93.48,
6.52
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
{
label: 'Unaffected',
data: [
92.00,
8.00
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: '',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const HeardOfCFPublic: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
{
label: 'Percentage',
data: [
82.89,
17.11
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const HeadOfGeneTherapyPublic: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
{
label: 'Percentage',
data: [
67.58,
32.42
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const HowDidYouLearnPublic: React.FC = () => {
const labels = ['I am affected', 'Family/Friends', 'School/University', 'Media', 'Healthcare provider', 'Other'];
const data = {
labels,
datasets: [
{
label: 'Dataset 1',
data: [
1.23,
25.15,
20.86,
44.17,
3.68,
4.91
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'BarChartOneSet',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const HowWellDoYouUnderstandGFPublic: React.FC = () => {
const data = {
labels: ['Extremely well', 'Somewhat well', 'Not so well', 'Not at all'],
datasets: [
{
label: 'Percentage',
data: [
19.38,
24.81,
44.96,
10.85
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const HowWellInformedAboutCFPublic: React.FC = () => {
const data = {
labels: ['Extremely well', 'Somewhat well', 'Not so well', 'Not at all'],
datasets: [
{
label: 'Percentage',
data: [
6.37,
21.66,
58.60,
13.38
], ],
borderColor: [ backgroundColor: backgroundcolorscale,
'rgba(255, 99, 132, 1)', borderColor: bordercolorscale,
'rgba(54, 162, 235, 1)', borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const WhatCouldGeneTherapyMeanForMedicinePublic: React.FC = () => {
const data = {
labels: ['Major advances in the treatment of diseases', 'Some progress, but also risks', 'More risks than benefits', 'No opinion'],
datasets: [
{
label: 'Percentage',
data: [
49.59,
47.97,
1.63,
0.81
], ],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1, borderWidth: 1,
}, },
], ],
...@@ -522,4 +729,51 @@ export const HeadrofGeneTherapy: React.FC = () => { ...@@ -522,4 +729,51 @@ export const HeadrofGeneTherapy: React.FC = () => {
); );
}; };
export const WhatMeasuresPublic: React.FC = () => {
const labels = ['Yes', 'No'];
const data = {
labels,
datasets: [
{
label: 'Affected',
data: [
93.48,
6.52
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
{
label: 'Unaffected',
data: [
92.00,
8.00
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: '',
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export default PieChart; export default PieChart;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment