Skip to content
Snippets Groups Projects
Commit c3cff29f authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

graphs & feedback

parent 6cd4c756
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/Graph.tsx
+ 442
− 4
View file @ c3cff29f
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;
src/contents/Human Practices/Feedback.tsx 0 → 100644
+ 6
− 0
View file @ c3cff29f
export function HPFeedback(){
return(
<></>
)
}
\ No newline at end of file
src/contents/Human Practices/IHP.tsx
+ 2
− 1
View file @ c3cff29f
......@@ -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/>
......
src/contents/example.tsx
+ 7
− 4
View file @ c3cff29f
......@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment