From fc5d41d42a73c5b12f9940ceb09567fbc7c893ea Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 27 Sep 2024 17:28:22 +0200
Subject: [PATCH] Graphsa
---
src/components/Graph.tsx | 129 ++++++++++++++++++++++++++++++++++++---
1 file changed, 120 insertions(+), 9 deletions(-)
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 59ee8c0a..bf25514b 100644
--- a/src/components/Graph.tsx
+++ b/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;
--
GitLab