diff --git a/src/App/HP.css b/src/App/HP.css
index a099599705852ff6dd9c52c094e254975ce01c84..b13949f1a9bd3c3e7a1bd29df2a36f7fcfa315ef 100644
--- a/src/App/HP.css
+++ b/src/App/HP.css
@@ -65,4 +65,13 @@
.mitte-parent{
display: grid;
+ }
+
+ .graphs{
+ max-height: 50% !important;
+ }
+
+ .pie-chart-container-small{
+ height: auto;
+
}
\ No newline at end of file
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 8b7345a730dee60148b218d9bff4c541e03a4a8f..e9899eb91de31efb5d2fe4ff510106fecfcbe384 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -1,7 +1,7 @@
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';
+import { Chart as ChartJS, Tooltip, Legend,ArcElement, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale, plugins } from 'chart.js';
const backgroundcolorscale = [
'rgba(133, 15, 120, 0.2)',
@@ -55,10 +55,12 @@ const PieChart: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: '',
- },
+ plugins: {
+ title: {
+ display: true,
+ text: '',
+ },
+ }
};
return (
@@ -90,14 +92,16 @@ export const OpenToGeneTherapyatients: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'Would you be open to gene therapy if it could significantly improve your symptoms?',
+ 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">
+ <div className="pie-chart-container-small">
<Pie data={data} options={options} />
</div>
);
@@ -126,10 +130,12 @@ export const MostStressfulForRelativeatients: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'Which aspects of the disease are most stressful for you or your relative?',
- },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Which aspects of the disease are most stressful for you or your relative?',
+ },
+ }
};
return (
@@ -158,10 +164,12 @@ export const WhoAffectedatients: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'Are you affected by cystic fibrosis yourself or are you related to someone with cystic fibrosis?',
- },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Are you affected by cystic fibrosis yourself or are you related to someone with cystic fibrosis?',
+ },
+ }
};
return (
@@ -227,7 +235,7 @@ export const HowOftenTreatmentatients: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -266,7 +274,7 @@ export const WhatCocernsAboutGeneTherapyatients: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -305,7 +313,7 @@ export const HowMuchDoesItAffectYouatients: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -346,7 +354,7 @@ export const WhichTherapyDoYouUseatients: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -389,7 +397,7 @@ export const WhichSymptomsatients: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -428,7 +436,7 @@ export const BasicPositionatients: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -468,7 +476,7 @@ export const AgeDiagnosisatients: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -503,10 +511,12 @@ export const HeadrofGeneTherapyPatients: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'Have you ever heard of gene therapy?',
- },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Have you ever heard of gene therapy?',
+ },
+ }
};
return (
@@ -583,10 +593,12 @@ export const HeardOfCFPublic: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'Have you heard of cystic fibrosis?',
- },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Have you heard of cystic fibrosis?',
+ },
+ }
};
return (
@@ -616,10 +628,12 @@ export const HeadOfGeneTherapyPublic: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'Have you ever heard of gene therapy?',
- },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Have you ever heard of gene therapy?',
+ },
+ }
};
return (
@@ -654,7 +668,7 @@ export const HowDidYouLearnPublic: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -691,10 +705,12 @@ export const HowWellDoYouUnderstandGFPublic: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'How well do you understand what gene therapy is?',
- },
+ plugins: {
+ title: {
+ display: true,
+ text: 'How well do you understand what gene therapy is?',
+ },
+ }
};
return (
@@ -725,10 +741,11 @@ export const HowWellInformedAboutCFPublic: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'How well informed are you about cystic fibrosis?',
- },
+ plugins: { title: {
+ display: true,
+ text: 'How well informed are you about cystic fibrosis?',
+ },
+ }
};
return (
@@ -758,10 +775,10 @@ export const WhatCouldGeneTherapyMeanForMedicinePublic: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
+ plugins: {title: {
display: true,
text: 'What do you think gene therapy could mean for medicine?',
- },
+ },}
};
return (
@@ -799,7 +816,7 @@ export const WhatMeasuresPublic: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -836,10 +853,12 @@ export const WouldYouDoGeneTherapyPublic: React.FC = () => {
const options = {
responsive: true,
maintainAspectRatio: false,
- title: {
- display: true,
- text: 'Would you opt for gene therapy yourself?',
- },
+ plugins: {
+ title: {
+ display: true,
+ text: 'Would you opt for gene therapy yourself?',
+ },
+ }
};
return (
@@ -874,7 +893,7 @@ export const WhatCocernsAboutGeneTherapyPublic: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
@@ -917,7 +936,7 @@ export const WhatFormMoreInfoPublic: React.FC = () => {
responsive: true,
plugins: {
legend: {
- position: 'top' as const,
+ display: false
},
title: {
display: true,
diff --git a/src/contents/Human Practices/Feedback.tsx b/src/contents/Human Practices/Feedback.tsx
index 2a1b36d3ea335bf0eaec8537dc1528402269b084..1bd8d77df4eae5e7639dbb2506b7a3305fd60b8a 100644
--- a/src/contents/Human Practices/Feedback.tsx
+++ b/src/contents/Human Practices/Feedback.tsx
@@ -10,6 +10,7 @@ export function HPFeedback(){
<H4 text="Our surveys on cystic fibrosis and gene therapy"></H4>
<p> We are proud of our surveys on gene therapy and cystic fibrosis (CF), which explore knowledge about the disease and willingness to embrace gene therapy as a potential treatment. Since we wanted to differentiate between the general public and affected CF patients, we created two different surveys.</p>
<div className="row align-items-center">
+ <div className='row graphs' >
<div className="col">
<Graph.HowOftenTreatmentatients/>
</div>
@@ -19,8 +20,8 @@ export function HPFeedback(){
<div className="col">
<Graph.MoreInfoOnTherapyBoth/>
</div>
- </div>
- <div className="row ">
+ </div>
+ <div className="row ">
<div className="col">
<p>The majority of respondents (62.70%) indicated that they or their relative require medical treatment or therapy daily. Weekly treatment was necessary for 14.59%, while 9.73% needed therapy several times per week. Only 6.49% reported needing treatment either monthly or rarely. The high frequency of daily treatments highlights the heavy burden of managing cystic fibrosis and reinforces the potential appeal of gene therapy, which could reduce the need for constant medical intervention. </p>
@@ -33,6 +34,8 @@ export function HPFeedback(){
<p>A vast majority, 93.48%, expressed interest in more information about gene therapy. This mirrors the general public’s desire for further education and suggests that while there is strong support for gene therapy, people still feel they lack sufficient knowledge to make fully informed decisions. Patients especially emphasized the importance of safety and long-term efficacy, areas that should be focal points in future communications. </p>
</div>
</div>
+ </div>
+
<div>
<H4 text="Concluding thoughts "></H4>
<p>The surveys with both the general public and CF patients show promising openness towards gene therapy, though concerns about safety and long-term effects remain. Emotional stress was highlighted as a greater burden than physical symptoms, reinforcing the appeal of gene therapy to reduce both physical and emotional challenges. Most patients require daily or frequent therapies like medication, physiotherapy, and inhalation, making a less frequent or even one-time gene therapy, as proposed in our research, highly attractive. Participants added comments such as <strong>“The dream of healing still exists!â€</strong>, encouraging us in our research.</p>