Graph.tsx

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: {