Skip to content

2
22_23-J 12
Commit 48162384 authored by Methmini-abeysekara's avatar Methmini-abeysekara
Browse files
Options

mammogram

parent 9db4b880
Hide whitespace changes
Inline Side-by-side
Showing with 329 additions and 0 deletions
Frontend/src/pages/Mammography1.js 0 → 100644
View file @ 48162384
import { m } from "framer-motion";
// @mui
import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { Typography, Container, Box } from "@mui/material";
// components
import Page from "../components/Page";
// ----------------------------------------------------------------------
const ContentStyle = styled("div")(({ theme }) => ({
maxWidth: "100%",
margin: "auto",
display: "flex",
justifyContent: "center",
flexDirection: "column",
padding: theme.spacing(6, 0, 3, 0),
}));
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 14,
},
}));
const StyledTableRow = styled(TableRow)(({ theme }) => ({
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover,
},
"&:last-child td, &:last-child th": {
border: 1,
},
}));
function createData(name, Percentage_of_Mammograms, Percentage_of_US_Women) {
return { name, Percentage_of_Mammograms, Percentage_of_US_Women };
}
const rows = [
createData("White", 73.2, 67.0),
createData("Black", 10.8, 12.2),
createData("Asian or Pacific Island", 9.2, 5.2),
createData("American Indian or Alaska Native", 0.3, 0.7),
createData("Other or Mixed (2+ races)", 1.6, 1.3),
createData("Hispanic", 4.9, 13.7),
];
// ----------------------------------------------------------------------
export default function Mammography1() {
return (
<Page title="Home- Mammography 1">
<Container>
<ContentStyle sx={{ textAlign: "center", alignItems: "center" }}>
<m.div>
<Typography variant="h3" paragraph>
BCSC MAMOGRAPHY DATA
</Typography>
</m.div>
</ContentStyle>
<h4 style={{ padding: "20px" }}>
MAMMOGRAMS BY RACE/ETHNICITY, 1996-2019{" "}
</h4>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 400 }} aria-label="customized table">
<TableHead>
<TableRow>
<StyledTableCell>
<b>Race/ETHNICITY </b>
</StyledTableCell>
<StyledTableCell align="right">
<b>
{" "}
Percentage of <br /> Mammograms &nbsp; (%)
</b>
</StyledTableCell>
<StyledTableCell align="right">
<b>
{" "}
Percentage of <br /> US Women &nbsp; (%)
</b>
</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<StyledTableRow key={row.name}>
<StyledTableCell component="th" scope="row">
{row.name}
</StyledTableCell>
<StyledTableCell align="right">
{row.Percentage_of_Mammograms}
</StyledTableCell>
<StyledTableCell align="right">
{row.Percentage_of_US_Women}
</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
<Box style={{ padding: "40px" }}>
<p>
{" "}
This table shows the racial/ethnic distribution of 12,3616,149
mammograms recorded in 1996-2019 from the 6 active BCSC sites. The
BCSC's standardized questions for rance and ethinicity were asked in
a similar manner as on the Us census in 2000 and 2010
</p>{" "}
<br />
<p>
The racial/ethnic distribution among 120.7 million US women age 18+
years in 2010 is shown for comparison.
</p>
<br />
<p>
{" "}
<strong>Note:</strong>
<i>All categories are non-Hispanic except the Hispanic category</i>
</p>
</Box>
</Container>
</Page>
);
}
Frontend/src/pages/Mammography2.js 0 → 100644
View file @ 48162384
import { m } from "framer-motion";
import * as React from "react";
import { styled } from "@mui/material/styles";
// @mui
import { Button, Typography, Container } from "@mui/material";
import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";
// components
import Page from "../components/Page";
// ----------------------------------------------------------------------
const ContentStyle = styled("div")(({ theme }) => ({
maxWidth: "100%",
margin: "auto",
display: "flex",
justifyContent: "center",
flexDirection: "column",
padding: theme.spacing(6, 0, 2, 0),
}));
// ----------------------------------------------------------------------
export default function Mammography2() {
return (
<Page title="Home- Mammography 2">
<ContentStyle sx={{ textAlign: "center", alignItems: "center" }}>
<m.div>
<Typography variant="h3" paragraph>
BCSC MAMOGRAPHY DATA
</Typography>
</m.div>
</ContentStyle>
<Box sx={{ width: "100%" }}>
<div style={{ padding: "50px" }}>
<h3>
SENSITIVITY AND SPECIFICITY OF SCREENING DIGITAL MAMMOGRAPHY BY
BI-RADS DENSITY, WOMEN 40-74 YEARS,2005-2010
</h3>
<br />
<h5> N = 585,993 SCREENING EXAMS</h5>
</div>
</Box>
<React.Fragment>
<CssBaseline />
<Container fixed>
<img
src="https://chartio.com/assets/dfd59f/tutorials/charts/grouped-bar-charts/c1fde6017511bbef7ba9bb245a113c07f8ff32173a7c0d742a4e1eac1930a3c5/grouped-bar-example-1.png"
alt=" "
/>
</Container>
</React.Fragment>
<div style={{ padding: "100px" }}>
<h6>The following must be cited when reproducing his data:</h6>
<br />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
<div style={{ padding: "20px", textAlign: "right" }}>
<Button variant="contained" href="#" style={{ textAlign: "center" }}>
{" "}
Get Started to Test Your Mammography{" "}
</Button>
</div>
</div>
</Page>
);
}
Frontend/src/pages/Mammography3.js 0 → 100644
View file @ 48162384
import { m } from "framer-motion";
import * as React from "react";
// @mui
import { styled } from "@mui/material/styles";
import { Box, Button, Typography } from "@mui/material";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
// components
import Page from "../components/Page";
import Image from "src/components/Image";
// ----------------------------------------------------------------------
const ContentStyle = styled("div")(({ theme }) => ({
maxWidth: "100%",
margin: "auto",
display: "flex",
justifyContent: "center",
flexDirection: "column",
padding: theme.spacing(6, 0, 2, 0),
}));
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === "dark" ? "#1A2027F" : "#E1E4E6",
...theme.typography.body2,
padding: theme.spacing(2),
textAlign: "center",
}));
// ----------------------------------------------------------------------
export default function Mammography3() {
return (
<Page title="Home- Mammography 3">
<ContentStyle sx={{ textAlign: "center", alignItems: "center" }}>
<m.div>
<Typography variant="h3" paragraph>
BCSC MAMOGRAPHY DATA
</Typography>
</m.div>
</ContentStyle>
<Grid
container
direction="row"
justifyContent="space-around"
alignItems="center"
>
<Grid item sm={5}>
<Item>
<h1 style={{ color: "blue", paddingBottom: "20px" }}>
Do I need a <br />
mammogram?
</h1>
<Stack direction="row" spacing={2}>
<Item>
<Image
style={{ width: 200, height: 200, borderRadius: "50%" }}
src="/assets/illustrations/illustration_login.png"
/>
</Item>
<Item>
<p>
Clarifying the <br />
confusion about who <br />
should be screened and how often.
</p>
</Item>
</Stack>
</Item>
<Box style={{ textAlign: "center", padding: "20px" }}>
<Button variant="contained" href="#">
{" "}
Read More
</Button>
</Box>
</Grid>
<Grid item sm={5}>
<Item>
<h1 style={{ color: "blue", paddingBottom: "20px" }}>
Your first <br />
mammogram
</h1>
<Stack direction="row" spacing={2}>
<Item>
<Image
style={{ width: 200, height: 200, borderRadius: "50%" }}
src="/assets/illustrations/illustration_login.png"
/>
</Item>
<Item>
<p>
What to expect and how to prepare
<br /> for your first screening mammogram.
</p>
</Item>
</Stack>
</Item>
<Box style={{ textAlign: "center", padding: "20px" }}>
<Button variant="contained" href="#">
{" "}
Get Started to Test Your Mammography{" "}
</Button>
</Box>
</Grid>
</Grid>
</Page>
);
}
Markdown is supported
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