From 5faf77cf1ab6532428cb3e51dd52023de47ab8a1 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 27 Sep 2024 17:19:59 +0200
Subject: [PATCH] Graphs
---
src/components/Graph.tsx | 422 +++++++++++++++++++++++++++++++--------
1 file changed, 338 insertions(+), 84 deletions(-)
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 9b94b34e..59ee8c0a 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -1,8 +1,25 @@
import { Pie } from 'react-chartjs-2';
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';
+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,
RadialLinearScale,
@@ -23,22 +40,8 @@ const PieChart: React.FC = () => {
0.2384159999999995,
0.003703
],
- backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- '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)',
- ],
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
borderWidth: 1,
},
],
@@ -57,7 +60,7 @@ const PieChart: React.FC = () => {
-export const OpenToGeneTherapy: React.FC = () => {
+export const OpenToGeneTherapyatients: React.FC = () => {
const data = {
labels: ['Yes', 'Maybe', 'No'],
datasets: [
@@ -68,16 +71,8 @@ export const OpenToGeneTherapy: React.FC = () => {
19.86,
1.42
],
- backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- '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)',
- ],
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
borderWidth: 1,
},
],
@@ -95,7 +90,7 @@ export const OpenToGeneTherapy: React.FC = () => {
};
-export const MostStressfulForRelative: React.FC = () => {
+export const MostStressfulForRelativeatients: React.FC = () => {
const data = {
labels: ['Emotional Stress', 'Physiacal Symptoms', 'Financial Burden', 'Social Restrictions', 'Other'],
datasets: [
@@ -108,22 +103,8 @@ export const MostStressfulForRelative: React.FC = () => {
17.73,
1.34
],
- backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- '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)',
- ],
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
borderWidth: 1,
},
],
@@ -140,7 +121,7 @@ export const MostStressfulForRelative: React.FC = () => {
);
};
-export const WhoAffected: React.FC = () => {
+export const WhoAffectedatients: React.FC = () => {
const data = {
labels: ['I am affected', 'A Relative is affected'],
datasets: [
@@ -150,14 +131,8 @@ export const WhoAffected: React.FC = () => {
43.24,
56.76
],
- backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- 'rgba(54, 162, 235, 0.2)'
- ],
- borderColor: [
- 'rgba(255, 99, 132, 1)',
- 'rgba(54, 162, 235, 1)'
- ],
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
borderWidth: 1,
},
],
@@ -174,7 +149,7 @@ export const WhoAffected: React.FC = () => {
);
};
-export const DoYouWantMoreInfo: React.FC = () => {
+export const DoYouWantMoreInfoatients: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
@@ -184,14 +159,8 @@ export const DoYouWantMoreInfo: React.FC = () => {
93.48,
6.52
],
- backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- 'rgba(54, 162, 235, 0.2)'
- ],
- borderColor: [
- 'rgba(255, 99, 132, 1)',
- 'rgba(54, 162, 235, 1)'
- ],
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
borderWidth: 1,
},
],
@@ -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 data = {
@@ -223,7 +192,8 @@ export const HowOftenTreatment: React.FC = () => {
9.73,
62.7
],
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
},
],
};
@@ -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 data = {
@@ -262,7 +232,8 @@ export const WhatCocernsAboutGeneTherapy: React.FC = () => {
59.46,
32.43
],
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
},
],
};
@@ -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 data = {
@@ -301,7 +272,8 @@ export const HowMuchDoesItAffectYou: React.FC = () => {
32.97,
8.11
],
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
},
],
};
@@ -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 data = {
@@ -342,7 +314,8 @@ export const WhichTherapyDoYouUse: React.FC = () => {
26.83,
1.19
],
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
},
],
};
@@ -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 data = {
@@ -385,7 +358,8 @@ export const WhichSymptoms: React.FC = () => {
23.19,
18.95
],
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
},
],
};
@@ -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 data = {
labels,
@@ -424,7 +398,8 @@ export const BasicPosition: React.FC = () => {
30.00,
35.00
],
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
},
],
};
@@ -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 data = {
labels,
@@ -464,7 +439,8 @@ export const AgeDiagnosis: React.FC = () => {
26.23,
1.09
],
- backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ backgroundColor: backgroundcolorscale,
+ borderColor: bordercolorscale,
},
],
};
@@ -488,7 +464,7 @@ export const AgeDiagnosis: React.FC = () => {
);
};
-export const HeadrofGeneTherapy: React.FC = () => {
+export const HeadrofGeneTherapyPatients: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
@@ -498,14 +474,245 @@ export const HeadrofGeneTherapy: React.FC = () => {
76.76,
23.24
],
- backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- 'rgba(54, 162, 235, 0.2)',
+ 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 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: [
- 'rgba(255, 99, 132, 1)',
- 'rgba(54, 162, 235, 1)',
+ 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 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,
},
],
@@ -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;
--
GitLab