From c3cff29f4dd039ea4b255ad4b0848a3240052446 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 27 Sep 2024 16:42:46 +0200
Subject: [PATCH] graphs & feedback
---
src/components/Graph.tsx | 446 +++++++++++++++++++++-
src/contents/Human Practices/Feedback.tsx | 6 +
src/contents/Human Practices/IHP.tsx | 3 +-
src/contents/example.tsx | 11 +-
4 files changed, 457 insertions(+), 9 deletions(-)
create mode 100644 src/contents/Human Practices/Feedback.tsx
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 8a931c58..d4c4ce24 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
import { Pie } from 'react-chartjs-2';
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
-
+import React from 'react';
+import { Bar, Doughnut, PolarArea } from 'react-chartjs-2';
+import { Chart as ChartJS, Tooltip, Legend,ArcElement, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js';
-ChartJS.register(ArcElement, Tooltip, Legend);
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale,
+ RadialLinearScale,
+ LinearScale,
+ BarElement,
+ Title);
const PieChart: React.FC = () => {
const data = {
@@ -50,4 +55,437 @@ const PieChart: React.FC = () => {
);
};
+
+
+export const OpenToGeneTherapy: React.FC = () => {
+ const data = {
+ labels: ['Yes', 'Maybe', 'No'],
+ datasets: [
+ {
+ label: 'Percentage',
+ data: [
+ 78.72,
+ 19.86,
+ 1.42
+ ],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ ],
+ borderWidth: 1,
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ maintainAspectRatio: false
+ };
+
+ return (
+ <div className="pie-chart-container">
+ <Pie data={data} options={options} />
+ </div>
+ );
+};
+
+
+export const MostStressfulForRelative: 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: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(75, 192, 192, 0.2)',
+ 'rgba(153, 102, 255, 0.2)',
+ 'rgba(255, 159, 64, 0.2)',
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)',
+ 'rgba(153, 102, 255, 1)',
+ 'rgba(255, 159, 64, 1)',
+ ],
+ borderWidth: 1,
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ maintainAspectRatio: false
+ };
+
+ return (
+ <div className="pie-chart-container">
+ <Pie data={data} options={options} />
+ </div>
+ );
+};
+
+export const WhoAffected: React.FC = () => {
+ const data = {
+ labels: ['I am affected', 'A Relative is affected'],
+ datasets: [
+ {
+ label: 'Percentage',
+ data: [
+ 43.24,
+ 56.76
+ ],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)'
+ ],
+ borderWidth: 1,
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ maintainAspectRatio: false
+ };
+
+ return (
+ <div className="pie-chart-container">
+ <Pie data={data} options={options} />
+ </div>
+ );
+};
+
+export const DoYouWantMoreInfo: React.FC = () => {
+ const data = {
+ labels: ['Yes', 'No'],
+ datasets: [
+ {
+ label: 'Percentage',
+ data: [
+ 93.48,
+ 6.52
+ ],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)'
+ ],
+ borderWidth: 1,
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ maintainAspectRatio: false
+ };
+
+ return (
+ <div className="pie-chart-container">
+ <Pie data={data} options={options} />
+ </div>
+ );
+};
+
+export const HowOftenTreatment: React.FC = () => {
+ const labels = ['Rarely', 'Monthly', 'Weekly', 'Several times per week', 'Daily'];
+
+ const data = {
+ labels,
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: [
+ 6.49,
+ 6.49,
+ 15.59,
+ 9.73,
+ 62.7
+ ],
+ backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'BarChartOneSet',
+ },
+ },
+ };
+
+ return (
+ <div className="bar-chart-container">
+ <Bar options={options} data={data} />
+ </div>
+ );
+};
+
+export const WhatCocernsAboutGeneTherapy: React.FC = () => {
+ const labels = ['Mo concerns', 'Ethical questions', 'Long-term effects', 'Safety and side effects', 'Cost and accessibility'];
+
+ const data = {
+ labels,
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: [
+ 0.54,
+ 10.18,
+ 59.46,
+ 59.46,
+ 32.43
+ ],
+ backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'BarChartOneSet',
+ },
+ },
+ };
+
+ return (
+ <div className="bar-chart-container">
+ <Bar options={options} data={data} />
+ </div>
+ );
+};
+
+export const HowMuchDoesItAffectYou: React.FC = () => {
+ const labels = ['1', '2', '3', '4', '5'];
+
+ const data = {
+ labels,
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: [
+ 4.32,
+ 12.43,
+ 42.16,
+ 32.97,
+ 8.11
+ ],
+ backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'BarChartOneSet',
+ },
+ },
+ };
+
+ return (
+ <div className="bar-chart-container">
+ <Bar options={options} data={data} />
+ </div>
+ );
+};
+
+
+export const WhichTherapyDoYouUse: React.FC = () => {
+ const labels = ['Psychological therapy', 'Physical therapy', 'Nutritional therapy', 'Medication therapy', 'Inhalation therapy', 'Others'];
+
+ const data = {
+ labels,
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: [
+ 5.94,
+ 26.32,
+ 10.53,
+ 29.2,
+ 26.83,
+ 1.19
+ ],
+ backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'BarChartOneSet',
+ },
+ },
+ };
+
+ return (
+ <div className="bar-chart-container">
+ <Bar options={options} data={data} />
+ </div>
+ );
+};
+
+export const WhichSymptoms: React.FC = () => {
+ const labels = ['Other', 'Headache', "Delayed Growth", 'Underweight', 'Frequent lung infections', 'Muscle tremors/weakness', 'constipation', 'Abdominal pain', 'Chronic cough' ];
+
+ const data = {
+ labels,
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: [
+ 4.99,
+ 6.98,
+ 6.23,
+ 13.47,
+ 13.72,
+ 2.0,
+ 10.47,
+ 23.19,
+ 18.95
+ ],
+ backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'BarChartOneSet',
+ },
+ },
+ };
+
+ return (
+ <div className="bar-chart-container">
+ <Bar options={options} data={data} />
+ </div>
+ );
+};
+
+
+export const BasicPosition: React.FC = () => {
+ const labels = ['1', '2', '3', '4', '5'];
+ const data = {
+ labels,
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: [
+ 2.14,
+ 5.17,
+ 27.14,
+ 30.00,
+ 35.00
+ ],
+ backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'BarChartOneSet',
+ },
+ },
+ };
+
+ return (
+ <div className="bar-chart-container">
+ <Bar options={options} data={data} />
+ </div>
+ );
+};
+
+export const AgeDiagnosis: React.FC = () => {
+ const labels = ['>20', '10-20', '1-10', 'first months', 'first week', ''];
+ const data = {
+ labels,
+ datasets: [
+ {
+ label: 'Dataset 1',
+ data: [
+ 2.14,
+ 5.17,
+ 27.14,
+ 30.00,
+ 35.00
+ ],
+ backgroundColor: 'rgba(255, 99, 132, 0.5)',
+ },
+ ],
+ };
+ const options = {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ },
+ title: {
+ display: true,
+ text: 'BarChartOneSet',
+ },
+ },
+ };
+
+ return (
+ <div className="bar-chart-container">
+ <Bar options={options} data={data} />
+ </div>
+ );
+};
+
+
+
export default PieChart;
diff --git a/src/contents/Human Practices/Feedback.tsx b/src/contents/Human Practices/Feedback.tsx
new file mode 100644
index 00000000..f77d8e35
--- /dev/null
+++ b/src/contents/Human Practices/Feedback.tsx
@@ -0,0 +1,6 @@
+export function HPFeedback(){
+
+ return(
+ <></>
+ )
+}
\ No newline at end of file
diff --git a/src/contents/Human Practices/IHP.tsx b/src/contents/Human Practices/IHP.tsx
index b52c4325..fd0d0a1e 100644
--- a/src/contents/Human Practices/IHP.tsx
+++ b/src/contents/Human Practices/IHP.tsx
@@ -2,6 +2,7 @@ import { ButtonOne } from "../../components/Buttons";
import { HPTimeline } from "../../components/HP-timeline";
import { LoremMedium, LoremShort } from "../../components/Loremipsum";
import { Section, Subesction } from "../../components/sections";
+import { HPFeedback } from "./Feedback";
import { HP3new } from "./HP svgs/hp3";
import { HPUnderstanding } from "./HP svgs/understanding";
@@ -114,7 +115,7 @@ export function HPIntegrated(){
<LoremMedium/>
</Subesction>
<Subesction title="Feedback" id="Integrated Human Practices4">
- <LoremMedium/>
+ <HPFeedback/>
</Subesction>
<Subesction title="Conclusion" id="Integrated Human Practices5">
<LoremMedium/>
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index bb878011..a38732df 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -2,14 +2,14 @@
import { BlueInfoBox, BulbBox, InfoBox, NoteBox, QaBox, WarnBox } from "../components/Boxes";
import { BFHMoreButton, ButtonOne } from "../components/Buttons";
import Collapsible from "../components/Collapsible";
-import PieChart from "../components/Graph";
+import PieChart, { HowOftenTreatment, OpenToGeneTherapy } from "../components/Graph";
import H1, { H2, H3, Hhighlight, Hhopp, Hsmoke, Hspoiler, Hwave } from "../components/Headings";
import { LoremMedium, LoremShort } from "../components/Loremipsum";
import SimpleSlider from "../components/Slider";
import React from 'react';
import { Bar, Doughnut, PolarArea } from 'react-chartjs-2';
import { Chart as ChartJS, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js';
-import ProteinViewer from '../components/Fanzorviewer.tsx';
+/* import ProteinViewer from '../components/Fanzorviewer.tsx'; */
import { useTabNavigation } from "../utils/TabNavigation.tsx";
@@ -27,10 +27,13 @@ export function Example() {
useTabNavigation();
return (
<>
- <div className="container">
+
+ <HowOftenTreatment/>
+ <OpenToGeneTherapy/>
+{/* <div className="container">
<h1>Protein Structure Viewer</h1>
<ProteinViewer/>
- </div>
+ </div> */}
<h1> Here you can see what we can use</h1>
<h2>Collapisbles</h2>
--
GitLab