diff --git a/pages/human-practices.vue b/pages/human-practices.vue
index 58fcb6b3f3c8eecefdf37f22ed329dd0b0b23ce9..8c732813c819e6bf4b77dfe67946c01132be9b96 100644
--- a/pages/human-practices.vue
+++ b/pages/human-practices.vue
@@ -180,7 +180,45 @@
remaining 19.6% fell within the 35 to 74 age range.
</p>
- <Chart number="0" id="chart-1" height="50vh" :option="{}"></Chart>
+ <Chart
+ number="0"
+ id="chart-1"
+ height="50vh"
+ :option="{
+ title: {
+ text: 'Age',
+ left: 'center',
+ },
+ tooltip: {
+ trigger: 'item',
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ },
+ series: [
+ {
+ name: 'Receive from',
+ type: 'pie',
+ radius: '50%',
+ data: [
+ { value: 1.6, name: 'Under 18' },
+ { value: 80.4, name: '18-34' },
+ { value: 13.8, name: '35-54' },
+ { value: 1.1, name: '55-74' },
+ { value: 0, name: '75 or older' },
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ },
+ },
+ },
+ ],
+ }"
+ ></Chart>
<p>
The survey results revealed an alarming
@@ -193,8 +231,105 @@
educational initiatives to bridge the information gap.
</p>
- <Chart number="0" id="chart-2" height="50vh" :option="{}"></Chart>
- <Chart number="0" id="chart-3" height="50vh" :option="{}"></Chart>
+ <Chart
+ number="0"
+ id="chart-2"
+ height="20vh"
+ :option="{
+ title: {
+ text: 'People who have heard about NSCLC?',
+ left: 'center',
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: {
+ top: '16%',
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'value',
+ },
+ yAxis: {
+ type: 'category',
+ data: ['People who have heard about NSCLC'],
+ },
+ series: [
+ {
+ name: 'Yes',
+ type: 'bar',
+ stack: 'total',
+ barWidth: '100%',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [61.4],
+ },
+ {
+ name: 'No',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [38.6],
+ },
+ ],
+ }"
+ ></Chart>
+
+ <Chart
+ number="0"
+ id="chart-3"
+ height="50vh"
+ :option="{
+ title: {
+ text: 'Confidence level of people regarding the knowledge of NSCLC',
+ left: 'center',
+ },
+ dataset: [
+ {
+ dimensions: ['name', 'age'],
+ source: [
+ ['Not at all confident ', 44.4],
+ ['Not very confiden', 33.1],
+ ['Somewhat confiden ', 15.3],
+ ['Very Confident', 8.7],
+ ],
+ },
+ {
+ transform: {
+ type: 'sort',
+ config: { dimension: 'age', order: 'desc' },
+ },
+ },
+ ],
+ xAxis: {
+ type: 'category',
+ axisLabel: { interval: 0, rotate: 30 },
+ },
+ yAxis: {},
+ series: {
+ type: 'bar',
+ encode: { x: 'name', y: 'age' },
+ datasetIndex: 1,
+ },
+ }"
+ ></Chart>
<p>
Regarding <b>treatment options</b>, the survey revealed that
@@ -208,7 +343,73 @@
the disease and its management.
</p>
- <Chart number="0" id="chart-4" height="50vh" :option="{}"></Chart>
+ <Chart
+ number="0"
+ id="chart-4"
+ height="50vh"
+ :option="{
+ title: {
+ text: 'Which of the following is the most common treatment strategy\nfor different stages of NSCLC',
+ left: 'center',
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: {
+ top: '11%',
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'value',
+ },
+ yAxis: {
+ type: 'category',
+ data: [
+ 'Surgery',
+ 'Radiation therapy',
+ 'Chemotherapy',
+ 'Immunotherapy',
+ 'Targetted Therapy',
+ 'I do not Know',
+ ],
+ },
+ series: [
+ {
+ name: 'Early-Stage',
+ type: 'bar',
+ stack: 'total',
+
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [28.6, 9, 18, 3.7, 0, 40.7],
+ },
+ {
+ name: 'Advanced-Stage',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [9, 7.9, 16.4, 5.3, 20.6, 40.8],
+ },
+ ],
+ }"
+ ></Chart>
<p>
In terms of <b>side effects</b>, 2.1% of those surveyed
@@ -217,7 +418,167 @@
side effects of <b>chemotherapy</b>, including hair loss.
</p>
- <Chart number="0" id="chart-5" height="50vh" :option="{}"></Chart>
+ <Chart
+ number="0"
+ id="chart-5"
+ height="50vh"
+ :option="{
+ title: {
+ text: 'A potential side effect of four kinds therapies',
+ left: 'center',
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: {
+ top: '7%',
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ top: '25%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'value',
+ },
+ yAxis: {
+ type: 'category',
+ data: [
+ 'Chemotherapy',
+ 'Radiation Therapy',
+ 'Immunotherapy',
+ 'Target Therapy',
+ ],
+ },
+ series: [
+ {
+ name: 'Nausea and vomiting ',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [2.1, null, null, 7.1],
+ },
+ {
+ name: 'Hair loss ',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [6.8, 9, null, null],
+ },
+ {
+ name: 'Fatigue',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [1, null, 5.8, null],
+ },
+ {
+ name: 'Skin irritation',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [null, 8.5, null, null],
+ },
+ {
+ name: 'Shortness of breath',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [null, 2.6, null, null],
+ },
+ {
+ name: 'Skin rash ',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [null, null, 10, 4.2],
+ },
+ {
+ name: 'Diarrhea',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [null, null, 3.8, 3.4],
+ },
+ {
+ name: 'All of the above',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [58.2, 45, 39.1, 29.1],
+ },
+ {
+ name: 'Non of the above',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [0.5, 4.8, 3.7, 9.6],
+ },
+ {
+ name: 'I don’t know',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [31.4, 30.1, 37.6, 46.6],
+ },
+ ],
+ }"
+ ></Chart>
<p>
The survey's results were insightful. They revealed that while
@@ -234,6 +595,49 @@
NSCLC.
</p>
+ <Chart
+ number="0"
+ id="chart-6"
+ height="50vh"
+ :option="{
+ title: {
+ text: 'Which of the following sources do you typically rely on\nfor health information?',
+ left: 'center',
+ },
+ legend: {
+ top: 'bottom',
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ mark: { show: true },
+ dataView: { show: true, readOnly: false },
+ restore: { show: true },
+ saveAsImage: { show: true },
+ },
+ },
+ series: [
+ {
+ name: 'Nightingale Chart',
+ type: 'pie',
+ radius: [50, 100],
+ center: ['50%', '50%'],
+ roseType: 'area',
+ itemStyle: {
+ borderRadius: 8,
+ },
+ data: [
+ { value: 54.5, name: 'Healthcare providers' },
+ { value: 75.7, name: 'Internet' },
+ { value: 35.9, name: 'Friends and family' },
+ { value: 20.7, name: 'Television' },
+ { value: 3.5, name: 'Others' },
+ ],
+ },
+ ],
+ }"
+ ></Chart>
+
<p>
Understanding that a substantial number of individuals turn to
the internet for basic health information, we saw the
@@ -1801,8 +2205,9 @@
<i
>Centre for Health Protection, Department of Health - Lung
Cancer</i
- >. (n.d.). WCRF International. https://www.chp.gov.hk/en/healthtopics/content/25/49.html
- (accessed 2023).
+ >. (n.d.). WCRF International.
+ https://www.chp.gov.hk/en/healthtopics/content/25/49.html (accessed
+ 2023).
</Reference>
 Â
<Reference number="2">
diff --git a/pages/index.vue b/pages/index.vue
index b4365ae9c5b95d04414c4db8dd0099babdd995ab..bb0f02df56664ec546f2a1dccd2b4c24a7d2698b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -103,7 +103,7 @@
</p>
<img
class="text-box-img img-lung"
- src="https://static.igem.wiki/teams/4774/wiki/static/svg/home/Osimertinib.svg"
+ src="https://static.igem.wiki/teams/4774/wiki/static/svg/home/osimertinib.svg"
data-scrollent="fade-left"
data-scrollent-delay="200"
data-scrollent-distance="100%"
@@ -333,19 +333,18 @@ export default {
},
data() {
const deviceTipsActive = false;
- let isChrome = false;
- let userAgent = navigator.userAgent.toLowerCase();
- if (/chrome/i.test(userAgent)) {
- isChrome = true;
- }
return {
deviceTipsActive,
- isChrome,
};
},
mounted() {
utils.lockScroll();
- if (!this.isChrome) {
+ let isChrome = false;
+ let userAgent = navigator.userAgent.toLowerCase();
+ if (/chrome/i.test(userAgent)) {
+ isChrome = true;
+ }
+ if (!isChrome) {
this.deviceTipsActive = true;
setTimeout(() => {
this.deviceTipsActive = false;
diff --git a/pages/team.vue b/pages/team.vue
index b0b8862b4a87ff0615ec5e744e3f9fb8c7b2e9c0..b9281e08a0c9e540def92d68db1e85f81d566ba5 100644
--- a/pages/team.vue
+++ b/pages/team.vue
@@ -87,7 +87,7 @@
name="Wong Chak Sum, Sam"
nickname="Sam WONG"
:tags="['IHP Team', 'Wet Lab']"
- >As a Wet Lab and integrated human practices coordinator, I’m dedicated to driving innovation in the field. I thrive on working collaboratively with cross-functional teams to achieve breakthrough discoveries. Let’s explore the frontiers of science together!</TeamMember>
+ >As a Wet Lab and integrated human practice coordinator, I drive innovation and collaboration to achieve breakthrough discoveries. Let's explore science's frontiers together!</TeamMember>
</ContentBlock>
<ContentBlock :id="2" class="content-flex">
<template #subtitle> Supervisors </template>