import { Pie } from 'react-chartjs-2';
import React from 'react';
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(130, 149, 164, 0.2)',
'rgba(0, 101, 48, 0.2)',
'rbga(184, 91, 209, 0.2)',
'rbga(50, 35, 44, 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(130, 149, 164, 1)',
'rgba(0, 101, 48, 1)',
'rbga(184, 91, 209, 1)',
'rbga(50, 35, 44, 1'
]
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale,
RadialLinearScale,
LinearScale,
BarElement,
Title);
const PieChart: React.FC = () => {
const data = {
labels: ['indel', 'insertion', 'deletion', 'substitution', 'other'],
datasets: [
{
label: 'Percentage',
data: [
0.004858000000000001,
0.0008859999999999997,
0.7264179999999972,
0.2384159999999995,
0.003703
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true, // possible to blend out legend
position: 'bottom' as const, // Puts labels below the chart
labels: {
boxWidth: 20, // Controls the size of the color box next to the labels
padding: 15, // Adds some padding between labels and the chart
usePointStyle: true,
},
},
title: {
display: true,
text: 'Types of mutations',
},
},
};
return (
<div className="pie-chart-container-small">
<Pie data={data} options={options} />
</div>
);
};
export const OpenToGeneTherapyatients: React.FC = () => {
const data = {
labels: ['Yes', 'Maybe', 'No'],
datasets: [
{
label: 'Percentage',
data: [
78.72,
19.86,
1.42
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Would you be open to gene therapy if it could significantly improve your symptoms?',
},
},
};
return (
<div className="pie-chart-container-small">
<Pie data={data} options={options} />
</div>
);
};
export const MostStressfulForRelativeatients: React.FC = () => {
const data = {
labels: ['Emotional Stress', 'Physiacal Symptoms', 'Financial Burden', 'Social Restrictions', 'Other'],
datasets: [
{
label: 'Percentage',
data: [
36.79,
32.78,
11.37,
17.73,
1.34
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Which aspects of the disease are most stressful for you or your relative?',
},
}
};
return (
<div className="pie-chart-container-other">
<Pie data={data} options={options} />
</div>
);
};
export const WhoAffectedatients: React.FC = () => {
const data = {
labels: ['I am affected', 'A Relative is affected'],
datasets: [
{
label: 'Percentage',
data: [
43.24,
56.76
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: [
'Are you affected by Cystic Fibrosis yourself ', 'or are you related to someone with Cystic Fibrosis?'
],
},
}
};
return (
<div className="pie-chart-container-small">
<Pie data={data} options={options} />
</div>
);
};
export const DoYouWantMoreInfoatients: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
{
label: 'Percentage',
data: [
93.48,
6.52
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Would you like to see more information on the subject of gene therapy?',
},
};
return (
<div className="pie-chart-container">
<Pie data={data} options={options} />
</div>
);
};
export const HowOftenTreatmentatients: React.FC = () => {
const labels = ['Rarely', 'Monthly', 'Weekly', 'Several times per week', 'Daily'];
const data = {
labels,
datasets: [
{
label: "",
data: [
6.49,
6.49,
15.59,
9.73,
62.7
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'How often do you or your relative need medical treatment or therapy?',
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WhatCocernsAboutGeneTherapyatients: React.FC = () => {
const labels = ['Mo concerns', 'Ethical questions', 'Long-term effects', 'Safety and side effects', 'Cost and accessibility'];
const data = {
labels,
datasets: [
{
data: [
0.54,
10.18,
59.46,
59.46,
32.43
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'What concerns do you have about gene therapy?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const HowMuchDoesItAffectYouatients: React.FC = () => {
const labels = ['1', '2', '3', '4', '5'];
const data = {
labels,
datasets: [
{
data: [
4.32,
12.43,
42.16,
32.97,
8.11
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: ["How much does Cystic Fibrosis affect your or your relative's ", "daily life? (1 = Not at all, 5 = Very much)"]
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WhichTherapyDoYouUseatients: React.FC = () => {
const labels = ['Psychological therapy', 'Physical therapy', 'Nutritional therapy', 'Medication therapy', 'Inhalation therapy', 'Others'];
const data = {
labels,
datasets: [
{
data: [
5.94,
26.32,
10.53,
29.2,
26.83,
1.19
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'Which form(s) of therapy do you or your relative use?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
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 = {
labels,
datasets: [
{
data: [
4.99,
6.98,
6.23,
13.47,
13.72,
2.0,
10.47,
23.19,
18.95
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'Which symptoms do you or your relative have most frequently?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const BasicPositionatients: React.FC = () => {
const labels = ['1', '2', '3', '4', '5'];
const data = {
labels,
datasets: [
{
data: [
2.14,
5.17,
27.14,
30.00,
35.00
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: ['What is your basic position on gene therapy?',' (1=Very negative, 5=Very positive)']
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const AgeDiagnosisatients: React.FC = () => {
const labels = ['>20', '10-20', '1-10', 'first months', 'first week', 'Newborn Screening', 'Before birth'];
const data = {
labels,
datasets: [
{
data: [
3.83,
2.73,
26.23,
21.86,
18.03,
26.23,
1.09
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'At what age were you or your relative diagnosed with Cystic Fibrosis?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const HeadrofGeneTherapyPatients: React.FC = () => {
const data = {
labels: ['Yes', 'No'],
datasets: [
{
label: 'Percentage',
data: [
76.76,
23.24
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Have you ever heard of gene therapy?',
},
}
};
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: 'rgba(133, 15, 120, 0.2)',
borderColor: 'rgba(133, 15, 120, 1',
},
{
label: 'Unaffected',
data: [
92.00,
8.00
],
backgroundColor: 'rgba(160, 167, 243, 0.2)',
borderColor: 'rgba(160, 167, 243, 1)',
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: 'top' as const,
},
title: {
display: true,
text: 'Would you like to see more information on the subject of gene therapy?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
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,
plugins: {
title: {
display: true,
text: 'Have you heard of Cystic Fibrosis?',
},
}
};
return (
<div className="pie-chart-container-small">
<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,
plugins: {
title: {
display: true,
text: 'Have you ever heard of gene therapy?',
},
}
};
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: [
{
data: [
1.23,
25.15,
20.86,
44.17,
3.68,
4.91
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'How did you mainly learn about Cystic Fibrosis? ',
},
},
scales: {
x: {
beginAtZero: true,
barPercentage: 0.5, // Schmaler machen, 0.5 = 50% der Kategorie-Breite
categoryPercentage: 0.5, // Platz pro Kategorie schmaler machen
},
y: {
beginAtZero: true,
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
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,
plugins: {
title: {
display: true,
text: 'How well do you understand what gene therapy is?',
},
}
};
return (
<div className="pie-chart-container-small">
<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
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: { title: {
display: true,
text: 'How well informed are you about Cystic Fibrosis?',
},
}
};
return (
<div className="pie-chart-container-other">
<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: [
{
data: [
49.59,
47.97,
1.63,
0.81
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {title: {
display: true,
text: 'What do you think gene therapy could mean for medicine?',
},}
};
return (
<div className="pie-chart-container-other">
<Pie data={data} options={options} />
</div>
);
};
export const WhatMeasuresPublic: React.FC = () => {
const labels = ['Media', 'Schools and Communities', "Doctors", 'Charities and Findraisers', 'Online Platforms and Forums', 'Cooperations with Companies', 'School Lessons', 'Documentaries and Short Films'];
const data = {
labels,
datasets: [
{
label: 'General Survey',
data: [
22.87,
13.20,
13.69,
7.09,
12.72,
6.60,
9.82,
14.01
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'What measures do you think could be taken to raise awareness of Cystic Fibrosis?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WouldYouDoGeneTherapyPublic: React.FC = () => {
const data = {
labels: ['Yes', 'No', 'Maybe'],
datasets: [
{
label: 'General Survey',
data: [
85.22,
13.04,
1.74
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
borderWidth: 1,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'Would you opt for gene therapy yourself?',
},
}
};
return (
<div className="pie-chart-container-other">
<Pie data={data} options={options} />
</div>
);
};
export const WhatCocernsAboutGeneTherapyPublic: React.FC = () => {
const labels = ['No concerns', 'Ethical questions', 'Long-term effects', 'Safety and side effects', 'Cost and accessibility'];
const data = {
labels,
datasets: [
{
label: 'General Survey',
data: [
4.57,
14.61,
27.85,
28.77,
24.20
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'What concerns do you have about gene therapy?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export const WhatFormMoreInfoPublic: React.FC = () => {
const labels = ['Informations brochures', 'Websites and online resources', 'TV documentaries and programs', 'Lectures and seminars', 'School and university courses ', 'Consultations with doctors and specialists', 'Social media and online communities', 'Other'];
const data = {
labels,
datasets: [
{
label: 'General Survey',
data: [
15.74,
16.63,
22.62,
1.77,
13.30,
13.97,
15.96,
0
],
backgroundColor: backgroundcolorscale,
borderColor: bordercolorscale,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'In what form would you like to see more information?',
},
},
scales: {
y: {
title: {
display: true,
text: '%', // This is the label for the y-axis
},
},
},
};
return (
<div className="bar-chart-container">
<Bar options={options} data={data} />
</div>
);
};
export default PieChart;