- App goes here
+
+ {this.state.currentPage === 'Summary' ? : null}
+ {this.state.currentPage === 'Blood' ? : null}
- )
+ );
}
}
diff --git a/src/components/Buttons.js b/src/components/Buttons.js
new file mode 100644
index 0000000..0f92743
--- /dev/null
+++ b/src/components/Buttons.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import cx from 'classnames';
+import "../styles/components/Buttons.scss";
+
+
+class Buttons extends React.Component{
+ constructor(){
+ super();
+ this.state={
+
+ home:true,
+ family:false,
+ chat:false,
+
+ }
+
+
+ this.handleClickHome = this.handleClickHome.bind(this)
+ this.handleClickFamily = this.handleClickFamily.bind(this)
+ this.handleClickChat = this.handleClickChat.bind(this)
+ }
+
+
+
+ handleClickHome(event){
+ event.preventDefault();
+ this.setState({
+ home:true,
+ family:false,
+ chat:false,
+ });
+ this.props.receiver('Summary')
+ }
+ handleClickFamily(event){
+ event.preventDefault();
+ this.setState({
+ home:false,
+ family:true,
+ chat:false,
+ })
+ }
+ handleClickChat(event){
+ event.preventDefault();
+ this.setState({
+ home:false,
+ family:false,
+ chat:true,
+ })
+ }
+
+
+ render(){
+ const classes__home=cx('fas fa-home', {home: this.state.home});
+ const classes__family=cx('fas fa-users', {family: this.state.family});
+ const classes__chat=cx('fas fa-comments', {chat: this.state.chat});
+
+ return(
+
+
+ )
+
+}}
+
+export default Buttons;
diff --git a/src/components/History.js b/src/components/History.js
new file mode 100644
index 0000000..e854bae
--- /dev/null
+++ b/src/components/History.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+
+class History extends React.Component{
+ constructor(){
+ super();
+ }
+
+ render(){
+ return(
+
+ )
+ }
+}
+
+export default History;
diff --git a/src/components/Modal.js b/src/components/Modal.js
new file mode 100644
index 0000000..54824af
--- /dev/null
+++ b/src/components/Modal.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom'
+
+import '../styles/components/Modal.scss';
+
+class Modal extends React.Component {
+ render() {
+ // Render nothing if the "show" prop is false
+ if(!this.props.show) {
+ return null;
+ }
+
+ // The gray background
+ const backdropStyle = {
+ position: 'fixed',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ backgroundColor: 'rgba(0,0,0,1)',
+ padding: 50
+ };
+
+ // The modal "window"
+ const modalStyle = {
+
+ borderRadius: 5,
+ maxWidth: 500,
+ minHeight: 300,
+ margin: '0 auto',
+ padding: 30
+ };
+
+ return ReactDOM.createPortal(
+ (
+
+ {this.props.children}
+
+
+
+ Hide
+
+
+
+
),
+ document.querySelector('#modal')
+ );
+ }
+}
+
+
+export default Modal;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
new file mode 100644
index 0000000..90c22d0
--- /dev/null
+++ b/src/components/Navigation.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import History from './History';
+import "../styles/components/Navigation.scss";
+
+class Navigation extends React.Component{
+ constructor(){
+ super();
+
+ this.state={
+ showHistory:false,
+ }
+
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick(event){
+ event.preventDefault()
+ this.setState({
+ showHistory:!this.state.showHistory,
+ })
+ }
+
+ render(){
+ return(
+
+
{this.props.title}
+
+
Records
+
Your {this.props.type} results are heathier than {this.props.ranking}% of your peers!
+ {this.state.showHistory?
+
: ""}
+
+
+ )
+ }
+}
+
+export default Navigation;
diff --git a/src/components/Notification.js b/src/components/Notification.js
new file mode 100644
index 0000000..c0082e2
--- /dev/null
+++ b/src/components/Notification.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+class Notification extends React.Component{
+ constructor(){
+ super();
+ }
+
+ render(){
+ return(
+
+ )
+ }
+}
+
+export default Notification;
diff --git a/src/components/Section.js b/src/components/Section.js
new file mode 100644
index 0000000..dbcecbe
--- /dev/null
+++ b/src/components/Section.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import '../styles/components/Section.scss';
+
+class Section extends React.Component{
+ constructor(){
+ super();
+ this.handleClick = this.handleClick.bind(this);
+
+ }
+
+ handleClick(event){
+
+ this.props.receiver(this.props.subject);
+
+ }
+
+ render(){
+ return(
+
+
+
+
+ {this.props.subject}
+
+
+ Normal
+
+
+
+
+
+ Learn More
+
+
+
+ )
+ }
+
+
+}
+
+export default Section;
diff --git a/src/components/Sections.js b/src/components/Sections.js
new file mode 100644
index 0000000..e73b7fa
--- /dev/null
+++ b/src/components/Sections.js
@@ -0,0 +1,28 @@
+import React from "react";
+import Section from "./Section";
+import '../styles/components/Sections.scss';
+
+class Sections extends React.Component {
+ constructor() {
+ super();
+ }
+
+
+
+ render() {
+ const dataArr = this.props.myData;
+ return (
+
+ {dataArr.map(section => {
+ return ;
+ })}
+
+ );
+ }
+}
+
+export default Sections;
diff --git a/src/components/Summary.js b/src/components/Summary.js
new file mode 100644
index 0000000..550f946
--- /dev/null
+++ b/src/components/Summary.js
@@ -0,0 +1,46 @@
+import React from "react";
+import AggregateData from "./AggregateData";
+import Navigation from "./Navigation";
+import Notification from "./Notification";
+import Sections from "./Sections";
+import Buttons from "./Buttons";
+import cx from 'classnames';
+
+
+
+class Summary extends React.Component {
+ constructor() {
+ super();
+ this.state = {
+ myData: [
+ { subject: "Blood", current: 100, previous: 140, fullMark: 150, image:"./src/images/blood.jpg"},
+ { subject: "Heart", current: 98, previous: 130, fullMark: 150 ,image:"./src/images/heart.jpg"},
+ { subject: "Liver", current: 86, previous: 130, fullMark: 150 ,image:"./src/images/liver.jpg"},
+ { subject: "Renal", current: 130, previous: 100, fullMark: 150 ,image:"./src/images/kidney.jpg"},
+ { subject: "Thyroid", current: 100, previous: 90, fullMark: 150 ,image:"./src/images/thyroid.jpg"},
+ { subject: "Bone", current: 65, previous: 85, fullMark: 150 ,image:"./src/images/bone.jpg"},
+ { subject: "Diabetic", current: 100, previous: 85, fullMark: 150 ,image:"./src/images/diabetic.jpg"},
+ { subject: "Urine", current: 65, previous: 85, fullMark: 150 ,image:"./src/images/urine.jpg"}
+ ],
+ overallRankingPercentile:80,
+
+ };
+ };
+
+
+
+ render() {
+
+ return (
+
+ );
+ }
+}
+
+export default Summary;
diff --git a/src/components/blood/Blood.js b/src/components/blood/Blood.js
new file mode 100644
index 0000000..40dcef9
--- /dev/null
+++ b/src/components/blood/Blood.js
@@ -0,0 +1,87 @@
+import React from "react";
+import Navigation from "../Navigation";
+import Notification from "../Notification";
+import Buttons from "../Buttons";
+import BloodChart_WBC from "./BloodChart_WBC";
+import Commentary_WBC from "./Commentary_WBC";
+import BloodBarChart_RBC from "./BloodBarChart_RBC";
+import Commentary_RBC from "./Commentary_RBC";
+import BloodBarChart_TLC from "./BloodBarChart_TLC";
+import Commentary_TLC from "./Commentary_TLC";
+import cx from "classnames";
+import "../../styles/components/blood/Blood.scss";
+
+class Blood extends React.Component {
+ constructor() {
+ super();
+ this.state = {
+ whiteBloodCell: [
+ {
+ year: "2016",
+ your_results: 9000,
+ standard_top: 11000,
+ standard_buttom: 4000
+ },
+ {
+ year: "2017",
+ your_results: 8680,
+ standard_top: 11000,
+ standard_buttom: 4000
+ },
+ {
+ year: "2018",
+ your_results: 11900,
+ standard_top: 11000,
+ standard_buttom: 4000
+ }
+ ],
+ redBloodCell: [
+ {name: 'RBC', standard_buttom: 3, yourRBC: 0.1, standard_top: 2}
+ ],
+ tLC: [
+ {name: 'TLC', standard_buttom: 1, yourRBC: 0.1, standard_top: 4}
+ ],
+ currentYear: 2018,
+ bloodRankingPercentile: 95
+ };
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default Blood;
diff --git a/src/components/blood/BloodBarChart_RBC.js b/src/components/blood/BloodBarChart_RBC.js
new file mode 100644
index 0000000..38e552e
--- /dev/null
+++ b/src/components/blood/BloodBarChart_RBC.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+ BarChart,
+ Area,
+ Line,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend
+} from 'recharts';
+import '../../styles/components/blood/BloodBarChart_RBC.scss';
+
+
+// import '../../styles/components/blood/BloodChart_WBC.scss';
+
+class BloodBarChart_RBC extends React.Component{
+ constructor(){
+ super();
+ }
+
+ render(){
+ return(
+
+
+ )
+ }
+};
+
+export default BloodBarChart_RBC;
diff --git a/src/components/blood/BloodBarChart_TLC.js b/src/components/blood/BloodBarChart_TLC.js
new file mode 100644
index 0000000..3e45876
--- /dev/null
+++ b/src/components/blood/BloodBarChart_TLC.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+ BarChart,
+ Area,
+ Line,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend
+} from 'recharts';
+import '../../styles/components/blood/BloodBarChart_TLC.scss';
+
+
+// import '../../styles/components/blood/BloodChart_WBC.scss';
+
+class BloodBarChart_TLC extends React.Component{
+ constructor(){
+ super();
+ }
+
+ render(){
+ return(
+
+
+ )
+ }
+};
+
+export default BloodBarChart_TLC;
diff --git a/src/components/blood/BloodChart_WBC.js b/src/components/blood/BloodChart_WBC.js
new file mode 100644
index 0000000..53748a3
--- /dev/null
+++ b/src/components/blood/BloodChart_WBC.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+ ComposedChart,
+ Area,
+ Line,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend
+} from 'recharts';
+
+import '../../styles/components/blood/BloodChart_WBC.scss';
+
+class BloodChart_WBC extends React.Component{
+ constructor(){
+ super();
+ }
+
+ render(){
+ return(
+
+
+ )
+ }
+};
+
+export default BloodChart_WBC;
diff --git a/src/components/blood/Commentary_RBC.js b/src/components/blood/Commentary_RBC.js
new file mode 100644
index 0000000..c34834c
--- /dev/null
+++ b/src/components/blood/Commentary_RBC.js
@@ -0,0 +1,44 @@
+import React from "react";
+import Commentary_base from "./Commentary_base";
+
+class Commentary_RBC extends React.Component {
+ constructor() {
+ super();
+ }
+
+ render() {
+ return (
+
+
+
+ Your red blood cells count is within the normal range
+
+
+
+ White blood cells are the cells of the immune system that are
+ involved in protecting the body against both infectious disease and
+ foreign invaders.
+
+
+ Implications of high white blood cells
+
+
+ An increased production of white blood cells to fight an infection
+
+
+ A reaction to a drug that increases white blood cell production
+
+
+ A disease of bone marrow, causing abnormally high production of
+ white blood cells
+
+
+ An immune system disorder that increases white blood cell production
+
+
+
+ );
+ }
+}
+
+export default Commentary_RBC;
diff --git a/src/components/blood/Commentary_TLC.js b/src/components/blood/Commentary_TLC.js
new file mode 100644
index 0000000..077818b
--- /dev/null
+++ b/src/components/blood/Commentary_TLC.js
@@ -0,0 +1,44 @@
+import React from "react";
+import Commentary_base from "./Commentary_base";
+
+class Commentary_TLC extends React.Component {
+ constructor() {
+ super();
+ }
+
+ render() {
+ return (
+
+
+
+ Your TLC count is within the normal range
+
+
+
+ White blood cells are the cells of the immune system that are
+ involved in protecting the body against both infectious disease and
+ foreign invaders.
+
+
+ Implications of high white blood cells
+
+
+ An increased production of white blood cells to fight an infection
+
+
+ A reaction to a drug that increases white blood cell production
+
+
+ A disease of bone marrow, causing abnormally high production of
+ white blood cells
+
+
+ An immune system disorder that increases white blood cell production
+
+
+
+ );
+ }
+}
+
+export default Commentary_TLC;
diff --git a/src/components/blood/Commentary_WBC.js b/src/components/blood/Commentary_WBC.js
new file mode 100644
index 0000000..fbf4b79
--- /dev/null
+++ b/src/components/blood/Commentary_WBC.js
@@ -0,0 +1,70 @@
+import React from "react";
+import '../../styles/components/blood/Commentary_WBC.scss';
+import cx from 'classnames';
+import Modal from '../Modal';
+
+class Commentary_WBC extends React.Component {
+ constructor() {
+ super();
+ this.state={
+
+ isOpen:false,
+
+ }
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick(event){
+ this.setState({
+ isOpen: !this.state.isOpen,
+
+ })
+ }
+
+ render() {
+ const currentYearResults=this.props.whiteBloodCell.find(result => {
+ return result.year==this.props.currentYear
+ })
+ const yourWBC=currentYearResults? currentYearResults.your_results:'not available';
+
+
+
+ return (
+
+ White blood cells
+ Too high
+ Read more
+
+
+ Your white blood cell count is {yourWBC}, exceeding the standard range
+
+
+ White blood cells are the cells of the immune system that are involved in
+ protecting the body against both infectious disease and foreign
+ invaders.
+
+
+ Implications of high white blood cells
+
+
+ An increased production of white blood cells to fight an infection
+
+
+ A reaction to a drug that increases white blood cell production
+
+
+ A disease of bone marrow, causing abnormally high production of white
+ blood cells
+
+
+ An immune system disorder that increases white blood cell production
+
+
+
+
+
+ );
+ }
+}
+
+export default Commentary_WBC;
diff --git a/src/components/blood/Commentary_base.js b/src/components/blood/Commentary_base.js
new file mode 100644
index 0000000..8a2a65c
--- /dev/null
+++ b/src/components/blood/Commentary_base.js
@@ -0,0 +1,43 @@
+import React from "react";
+import '../../styles/components/blood/Commentary_WBC.scss';
+import cx from 'classnames';
+import Modal from '../Modal';
+
+class Commentary_WBC extends React.Component {
+ constructor() {
+ super();
+ this.state={
+
+ isOpen:false,
+
+ }
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick(event){
+ this.setState({
+ isOpen: !this.state.isOpen,
+
+ })
+ }
+
+ render() {
+
+
+
+
+ return (
+
+ {this.props.title}
+ {this.props.alert}
+ Read more
+
+
+ {this.props.children}
+
+
+ );
+ }
+}
+
+export default Commentary_WBC;
diff --git a/src/images/blood.jpg b/src/images/blood.jpg
new file mode 100644
index 0000000..1e1ecfe
Binary files /dev/null and b/src/images/blood.jpg differ
diff --git a/src/images/bone.jpg b/src/images/bone.jpg
new file mode 100644
index 0000000..d36f582
Binary files /dev/null and b/src/images/bone.jpg differ
diff --git a/src/images/diabetic.jpg b/src/images/diabetic.jpg
new file mode 100644
index 0000000..a6a2b7d
Binary files /dev/null and b/src/images/diabetic.jpg differ
diff --git a/src/images/heart.jpg b/src/images/heart.jpg
new file mode 100644
index 0000000..33474ea
Binary files /dev/null and b/src/images/heart.jpg differ
diff --git a/src/images/kidney.jpg b/src/images/kidney.jpg
new file mode 100644
index 0000000..0c95129
Binary files /dev/null and b/src/images/kidney.jpg differ
diff --git a/src/images/liver.jpg b/src/images/liver.jpg
new file mode 100644
index 0000000..24861dd
Binary files /dev/null and b/src/images/liver.jpg differ
diff --git a/src/images/thyroid.jpg b/src/images/thyroid.jpg
new file mode 100644
index 0000000..cfc62a6
Binary files /dev/null and b/src/images/thyroid.jpg differ
diff --git a/src/images/urine.jpg b/src/images/urine.jpg
new file mode 100644
index 0000000..d51cf1c
Binary files /dev/null and b/src/images/urine.jpg differ
diff --git a/src/styles/components/AggregateData.scss b/src/styles/components/AggregateData.scss
new file mode 100644
index 0000000..a3b7f50
--- /dev/null
+++ b/src/styles/components/AggregateData.scss
@@ -0,0 +1,14 @@
+.radarDiagram{
+ display: flex;
+ justify-content: center;
+ margin: 0 auto;
+
+ .recharts-polar-radius-axis-tick{
+
+ tspan{
+ display: none;
+ }
+ }
+
+
+}
diff --git a/src/styles/components/Buttons.scss b/src/styles/components/Buttons.scss
new file mode 100644
index 0000000..9f971e2
--- /dev/null
+++ b/src/styles/components/Buttons.scss
@@ -0,0 +1,22 @@
+@import 'parameters';
+
+.buttons{
+
+ display:flex;
+ justify-content: space-around;
+ padding: 1em 0;
+ position:fixed;
+ bottom:0px;
+ background-color: $background-color;
+ z-index: 100;
+ width: 100%;
+ .home{
+ color:$button-color;
+ }
+ .family{
+ color:$button-color;
+ }
+ .chat{
+ color:$button-color;
+ }
+}
diff --git a/src/styles/components/Modal.scss b/src/styles/components/Modal.scss
new file mode 100644
index 0000000..40571e6
--- /dev/null
+++ b/src/styles/components/Modal.scss
@@ -0,0 +1,41 @@
+@import 'parameters';
+
+ul{
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.modal{
+ display: flex;
+ flex-flow: column wrap;
+ background-color: $background-color;
+ justify-content: center;
+ padding: $content-padding;
+ height: 80%;
+
+
+ h3{
+ font-size: $normal-font-size;
+ margin: 0;
+ }
+ .alert{
+ color:$alert-color;
+ padding:0;
+ border:0;
+ margin:8px 0;
+ }
+ li{
+ font-size: $medium-font-size;
+ }
+ .explaination{
+ padding-left: 1em;
+ list-style: circle;
+ }
+ .nav{
+ margin-top:2em;
+ color: $button-color;
+ font-size: $medium-font-size;
+
+ }
+}
diff --git a/src/styles/components/Navigation.scss b/src/styles/components/Navigation.scss
new file mode 100644
index 0000000..b5db7b7
--- /dev/null
+++ b/src/styles/components/Navigation.scss
@@ -0,0 +1,28 @@
+@import 'parameters';
+
+.navigation {
+ display: flex;
+ flex-direction: column;
+
+ h2 {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ padding: 0.5em 0;
+ margin: 0;
+ text-align: center;
+ position:fixed;
+ z-index: 100;
+ top:0px;
+
+ background-color: $background-color;
+ }
+
+ .below{
+ padding-top:70px;
+ }
+
+ p{
+ padding:$content-padding;
+ }
+}
diff --git a/src/styles/components/Section.scss b/src/styles/components/Section.scss
new file mode 100644
index 0000000..79e9460
--- /dev/null
+++ b/src/styles/components/Section.scss
@@ -0,0 +1,8 @@
+
+.sectionCard {
+ width:45vw;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ margin: 7px;
+}
diff --git a/src/styles/components/Sections.scss b/src/styles/components/Sections.scss
new file mode 100644
index 0000000..1087d7f
--- /dev/null
+++ b/src/styles/components/Sections.scss
@@ -0,0 +1,5 @@
+.sections{
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-around;
+}
diff --git a/src/styles/components/_parameters.scss b/src/styles/components/_parameters.scss
new file mode 100644
index 0000000..f8af666
--- /dev/null
+++ b/src/styles/components/_parameters.scss
@@ -0,0 +1,16 @@
+$font-color:rgba(0, 0, 0, 0.87);
+$alert-color:#E04D46;
+
+$font-family:"Roboto", "Helvetica", "Arial", sans-serif;
+
+$chart-font-size:10px;
+
+$normal-font-size:16px;
+$medium-font-size:13px;
+$small-font-size:10px;
+
+$button-color:#3f51b5;
+
+$background-color:#FBFBFB;
+
+$content-padding: 1px 7px 2px 7px;
diff --git a/src/styles/components/app.scss b/src/styles/components/app.scss
index 0bdf5c0..dfd74c8 100644
--- a/src/styles/components/app.scss
+++ b/src/styles/components/app.scss
@@ -1,3 +1,15 @@
+@import 'parameters';
+
body {
- background-color: Cornsilk;
+ font-family: $font-family;
+ color:$font-color;
+ background-color: $background-color;
+ display: flex;
+ flex-flow: column;
+
+ p{
+ font-size: 16px;
+ }
+
+
}
diff --git a/src/styles/components/blood/Blood.scss b/src/styles/components/blood/Blood.scss
new file mode 100644
index 0000000..0e1bb54
--- /dev/null
+++ b/src/styles/components/blood/Blood.scss
@@ -0,0 +1,19 @@
+
+.card{
+ display: flex;
+ flex-flow: row wrap;
+ margin: 3px 7px;
+}
+
+.smallCardSections{
+ display: flex;
+ flex-flow: row wrap;
+}
+.smallCard{
+ display: flex;
+ flex-flow: column wrap;
+ margin: 3px 7px;
+ background: white;
+ border:1px solid rgba(0, 0, 0, 0.125);
+ width: 46%;
+}
diff --git a/src/styles/components/blood/BloodBarChart_RBC.scss b/src/styles/components/blood/BloodBarChart_RBC.scss
new file mode 100644
index 0000000..efb33ab
--- /dev/null
+++ b/src/styles/components/blood/BloodBarChart_RBC.scss
@@ -0,0 +1,18 @@
+@import '../parameters';
+
+.bloodChart{
+ font-size: $chart-font-size;
+
+ .recharts-default-legend{
+ display: none;
+ }
+ tspan{
+ display: none;
+ }
+ .recharts-cartesian-grid{
+ display: none;
+ }
+ .recharts-cartesian-axis-ticks{
+ display: none;
+ }
+}
diff --git a/src/styles/components/blood/BloodBarChart_TLC.scss b/src/styles/components/blood/BloodBarChart_TLC.scss
new file mode 100644
index 0000000..efb33ab
--- /dev/null
+++ b/src/styles/components/blood/BloodBarChart_TLC.scss
@@ -0,0 +1,18 @@
+@import '../parameters';
+
+.bloodChart{
+ font-size: $chart-font-size;
+
+ .recharts-default-legend{
+ display: none;
+ }
+ tspan{
+ display: none;
+ }
+ .recharts-cartesian-grid{
+ display: none;
+ }
+ .recharts-cartesian-axis-ticks{
+ display: none;
+ }
+}
diff --git a/src/styles/components/blood/BloodChart_WBC.scss b/src/styles/components/blood/BloodChart_WBC.scss
new file mode 100644
index 0000000..c41989a
--- /dev/null
+++ b/src/styles/components/blood/BloodChart_WBC.scss
@@ -0,0 +1,12 @@
+@import '../parameters';
+
+.bloodChart{
+ font-size: $chart-font-size;
+}
+
+.y__position{
+ text{
+ y:'50';
+ transform: rotate(-90,10,50);
+ }
+}
diff --git a/src/styles/components/blood/Commentary_WBC.scss b/src/styles/components/blood/Commentary_WBC.scss
new file mode 100644
index 0000000..a933f94
--- /dev/null
+++ b/src/styles/components/blood/Commentary_WBC.scss
@@ -0,0 +1,34 @@
+@import '../parameters';
+
+ul{
+ list-style: none;
+}
+
+.whiteBloodCellCommentary{
+ display: flex;
+ flex-flow: column wrap;
+ background-color: white;
+ padding: 16px;
+ width: 150px;
+
+ .nav{
+ color: $button-color;
+ }
+
+ h3{
+ font-size: $normal-font-size;
+ margin: 0;
+ }
+ .alert{
+ color:$alert-color;
+ padding:0;
+ border:0;
+ margin:8px 0;
+ }
+ li{
+ font-size: $medium-font-size;
+ }
+ .explaination{
+ list-style: circle;
+ }
+}