diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index be3fbb206451bdcc0224b956ca8aa0571a927170..6db474faaa3d245573e92e641db687a0b560cbcf 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -4,20 +4,22 @@ 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(133, 15, 120, 0.2)',
'rgba(160, 167, 243, 0.2)',
'rgba(245, 125, 34, 0.2)',
'rgba(244, 204, 30, 0.2)',
- 'rgba(226, 218, 215, 0.2)',
+ 'rgba(130, 149, 164, 0.2)',
'rgba(0, 101, 48, 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(226, 218, 215, 1)',
+ 'rgba(130, 149, 164, 1)',
'rgba(0, 101, 48, 1)',
]
@@ -48,7 +50,11 @@ const PieChart: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: '',
+ },
};
return (
@@ -79,7 +85,11 @@ export const OpenToGeneTherapyatients: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'Would you be open to gene therapy if it could significantly improve your symptoms?',
+ },
};
return (
@@ -111,7 +121,11 @@ export const MostStressfulForRelativeatients: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'Which aspects of the disease are most stressful for you or your relative?',
+ },
};
return (
@@ -139,7 +153,11 @@ export const WhoAffectedatients: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'Are you affected by cystic fibrosis yourself or are you related to someone with cystic fibrosis?',
+ },
};
return (
@@ -167,7 +185,11 @@ export const DoYouWantMoreInfoatients: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'Would you like to see more information on the subject of gene therapy?',
+ },
};
return (
@@ -184,7 +206,6 @@ export const HowOftenTreatmentatients: React.FC = () => {
labels,
datasets: [
{
- label: 'Dataset 1',
data: [
6.49,
6.49,
@@ -205,7 +226,7 @@ export const HowOftenTreatmentatients: React.FC = () => {
},
title: {
display: true,
- text: 'BarChartOneSet',
+ text: 'How often do you or your relative need medical treatment or therapy?',
},
},
};
@@ -224,7 +245,6 @@ export const WhatCocernsAboutGeneTherapyatients: React.FC = () => {
labels,
datasets: [
{
- label: 'Dataset 1',
data: [
0.54,
10.18,
@@ -245,7 +265,7 @@ export const WhatCocernsAboutGeneTherapyatients: React.FC = () => {
},
title: {
display: true,
- text: 'BarChartOneSet',
+ text: 'What concerns do you have about gene therapy?',
},
},
};
@@ -264,7 +284,6 @@ export const HowMuchDoesItAffectYouatients: React.FC = () => {
labels,
datasets: [
{
- label: 'Dataset 1',
data: [
4.32,
12.43,
@@ -285,7 +304,7 @@ export const HowMuchDoesItAffectYouatients: React.FC = () => {
},
title: {
display: true,
- text: 'BarChartOneSet',
+ text: "How much does cystic fibrosis affect your or your relative's daily life? (1 = Not at all, 5 = Very much)"
},
},
};
@@ -305,7 +324,6 @@ export const WhichTherapyDoYouUseatients: React.FC = () => {
labels,
datasets: [
{
- label: 'Dataset 1',
data: [
5.94,
26.32,
@@ -327,7 +345,7 @@ export const WhichTherapyDoYouUseatients: React.FC = () => {
},
title: {
display: true,
- text: 'BarChartOneSet',
+ text: 'Which form(s) of therapy do you or your relative use?',
},
},
};
@@ -346,7 +364,6 @@ export const WhichSymptomsatients: React.FC = () => {
labels,
datasets: [
{
- label: 'Dataset 1',
data: [
4.99,
6.98,
@@ -371,7 +388,7 @@ export const WhichSymptomsatients: React.FC = () => {
},
title: {
display: true,
- text: 'BarChartOneSet',
+ text: 'Which symptoms do you or your relative have most frequently?',
},
},
};
@@ -390,7 +407,6 @@ export const BasicPositionatients: React.FC = () => {
labels,
datasets: [
{
- label: 'Dataset 1',
data: [
2.14,
5.17,
@@ -411,7 +427,7 @@ export const BasicPositionatients: React.FC = () => {
},
title: {
display: true,
- text: 'BarChartOneSet',
+ text: 'What is your basic position on gene therapy? (1=Very negative, 5=Very positive)',
},
},
};
@@ -429,7 +445,6 @@ export const AgeDiagnosisatients: React.FC = () => {
labels,
datasets: [
{
- label: 'Dataset 1',
data: [
3.83,
2.73,
@@ -452,7 +467,7 @@ export const AgeDiagnosisatients: React.FC = () => {
},
title: {
display: true,
- text: 'BarChartOneSet',
+ text: 'At what age were you or your relative diagnosed with cystic fibrosis?',
},
},
};
@@ -482,7 +497,11 @@ export const HeadrofGeneTherapyPatients: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'Have you ever heard of gene therapy?',
+ },
};
return (
@@ -505,8 +524,8 @@ export const MoreInfoOnTherapyBoth: React.FC = () => {
6.52
],
- backgroundColor: backgroundcolorscale,
- borderColor: bordercolorscale,
+ backgroundColor: 'rgba(133, 15, 120, 0.2)',
+ borderColor: 'rgba(133, 15, 120, 1',
},
{
label: 'Unaffected',
@@ -514,8 +533,8 @@ export const MoreInfoOnTherapyBoth: React.FC = () => {
92.00,
8.00
],
- backgroundColor: backgroundcolorscale,
- borderColor: bordercolorscale,
+ backgroundColor: 'rgba(160, 167, 243, 0.2)',
+ borderColor: 'rgba(160, 167, 243, 1)',
},
],
};
@@ -527,7 +546,7 @@ export const MoreInfoOnTherapyBoth: React.FC = () => {
},
title: {
display: true,
- text: '',
+ text: 'Would you like to see more information on the subject of gene therapy?',
},
},
};
@@ -558,7 +577,11 @@ export const HeardOfCFPublic: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'Have you heard of cystic fibrosis?',
+ },
};
return (
@@ -587,7 +610,11 @@ export const HeadOfGeneTherapyPublic: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'Have you ever heard of gene therapy?',
+ },
};
return (
@@ -605,7 +632,6 @@ export const HowDidYouLearnPublic: React.FC = () => {
labels,
datasets: [
{
- label: 'Dataset 1',
data: [
1.23,
25.15,
@@ -627,7 +653,7 @@ export const HowDidYouLearnPublic: React.FC = () => {
},
title: {
display: true,
- text: 'BarChartOneSet',
+ text: 'How did you mainly learn about cystic fibrosis? ',
},
},
};
@@ -659,7 +685,11 @@ export const HowWellDoYouUnderstandGFPublic: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'How well do you understand what gene therapy is?',
+ },
};
return (
@@ -689,7 +719,11 @@ export const HowWellInformedAboutCFPublic: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'How well informed are you about cystic fibrosis?',
+ },
};
return (
@@ -704,7 +738,6 @@ export const WhatCouldGeneTherapyMeanForMedicinePublic: React.FC = () => {
labels: ['Major advances in the treatment of diseases', 'Some progress, but also risks', 'More risks than benefits', 'No opinion'],
datasets: [
{
- label: 'General Survey',
data: [
49.59,
47.97,
@@ -719,7 +752,11 @@ export const WhatCouldGeneTherapyMeanForMedicinePublic: React.FC = () => {
};
const options = {
responsive: true,
- maintainAspectRatio: false
+ maintainAspectRatio: false,
+ title: {
+ display: true,
+ text: 'What do you think gene therapy could mean for medicine?',
+ },
};
return (
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index 1dcb0380720bec3d7e99b1ad0c98e4ee7a91c737..8397c77911c12cf98139bd8c6e9e1359d2006159 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -2,7 +2,7 @@
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, { HowOftenTreatmentatients, MoreInfoOnTherapyBoth, OpenToGeneTherapyatients } 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";
@@ -46,6 +46,9 @@ export function Example() {
<div className="col">
<Collapsible title="Title" id="collapsible"> <LoremMedium></LoremMedium></Collapsible>
</div>
+ <HowOftenTreatmentatients/>
+ <OpenToGeneTherapyatients/>
+ <MoreInfoOnTherapyBoth/>
</div>
<h2>Boxes</h2>
<div className="row">