Graphsa

src/components/Graph.tsx

@@ -731,26 +731,93 @@ export const WhatCouldGeneTherapyMeanForMedicinePublic: React.FC = () => {
 
 
 export const WhatMeasuresPublic: React.FC = () => {
-  const labels = ['Yes', 'No'];
+  const labels = ['Publicity campaigns on TV, radio and social media', 'Information events in schools and communities', "Information materials in doctors' surgeries and hospitals", 'Organization of fundraising runs and charity events', 'Online platforms and forums for affected and interested parties', 'Cooperation with companies for awareness-raising initiatives', 'Integration of the topic into school lessons', 'Documentaries and short films about life with cystic fibrosis'];
 
   const data = {
       labels,
       datasets: [
         {
-          label: 'Affected',
+          label: '',
           data: [
-            93.48,
-            6.52
-             
+            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: {
+          position: 'top' as const,
+        },
+        title: {
+          display: true,
+          text: '',
+        },
+      },
+    };
+
+  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: 'Percentage',
+        data: [
+          85.22,
+          13.04,
+          1.74
+        ],
+        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 WhatCocernsAboutGeneTherapyPublic: React.FC = () => {
+  const labels = ['No concerns', 'Ethical questions', 'Long-term effects', 'Safety and side effects', 'Cost and accessibility'];
+
+  const data = {
+      labels,
+      datasets: [
         {
-          label: 'Unaffected',
+          label: 'Dataset 1',
           data: [
-            92.00,
-            8.00
+            4.57,
+            14.61,
+            27.85,
+            28.77,
+            24.20
             ],
             backgroundColor: backgroundcolorscale,
             borderColor: bordercolorscale,
@@ -765,7 +832,50 @@ export const WhatMeasuresPublic: React.FC = () => {
         },
         title: {
           display: true,
-          text: '',
+          text: 'BarChartOneSet',
+        },
+      },
+    };
+
+  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: 'Dataset 1',
+          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: {
+          position: 'top' as const,
+        },
+        title: {
+          display: true,
+          text: 'BarChartOneSet',
         },
       },
     };
@@ -776,4 +886,5 @@ export const WhatMeasuresPublic: React.FC = () => {
       </div>
   );
 };
+
 export default PieChart;