DLR-SC · shami-sneha · Jul 10, 2023 · Jul 21, 2023 · Aug 15, 2023 · Sep 5, 2023
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 
 # ignore user/workspace settings etc. of VSCode
 .vscode
+node_modules
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -72,6 +72,8 @@
     "@amcharts/amcharts5": "^5.3.8",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@material-ui/core": "^4.12.4",
+    "@material/tooltip": "^14.0.0",
     "@mui/icons-material": "^5.10.9",
     "@mui/lab": "*",
     "@mui/material": "^5.10.11",
@@ -86,11 +88,15 @@
     "json5": "^2.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hooks": "^1.0.1",
     "react-i18next": "^11.8.15",
     "react-lazyload": "^3.2.0",
     "react-markdown": "^6.0.3",
+    "react-material-ui-carousel": "^3.4.2",
     "react-redux": "^7.2.3",
     "react-scroll-sync": "^0.11.0",
+    "react-tooltip": "^5.21.5",
+    "recharts": "^2.8.0",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "rooks": "^5.7.3"
@@ -105,8 +111,8 @@
     "@types/country-flag-icons": "^1.2.0",
     "@types/jest": "^27.0.0",
     "@types/node-fetch": "^2.5.10",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^17.0.70",
+    "@types/react-dom": "^18.2.7",
     "@types/react-lazyload": "^3.1.1",
     "@types/react-redux": "^7.1.18",
     "@types/react-scroll-sync": "^0.8.4",
@@ -121,6 +127,7 @@
     "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-webpack-plugin": "^2.5.3",
+    "file-loader": "6.2.0",
     "html-webpack-plugin": "^5.3.1",
     "husky": "^6.0.0",
     "identity-obj-proxy": "^3.0.0",

diff --git a/frontend/public/assets/logo/DLRLogo.png b/frontend/public/assets/logo/DLRLogo.png
diff --git a/frontend/public/assets/logo/DLRSignet.png b/frontend/public/assets/logo/DLRSignet.png
diff --git a/frontend/public/assets/logo/graphic-chart.png b/frontend/public/assets/logo/graphic-chart.png
diff --git a/frontend/public/assets/logo/line-graph.png b/frontend/public/assets/logo/line-graph.png
diff --git a/frontend/public/assets/logo/pie-charts.png b/frontend/public/assets/logo/pie-charts.png
diff --git a/frontend/public/assets/logo/pie2.jpg b/frontend/public/assets/logo/pie2.jpg
diff --git a/frontend/public/assets/logo/sam.png b/frontend/public/assets/logo/sam.png
diff --git a/frontend/public/assets/logo/sample_charts.png b/frontend/public/assets/logo/sample_charts.png
diff --git a/frontend/public/assets/third-party-attributions.json b/frontend/public/assets/third-party-attributions.json
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -3,11 +3,22 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
     <title>ESID</title>
     <link rel="icon" href="icon.svg" />
     <link rel="manifest" href="manifest.json" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -43,3 +43,7 @@ body {
   border-radius: 13px;
   border: 3px solid transparent;
 }
+
+.MuiDialog-root.MuiModal-root.css-1rk74ty-MuiModal-root-MuiDialog-root {
+  backdrop-filter: none;
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -14,6 +14,7 @@ import {PersistGate} from 'redux-persist/integration/react';
 import {useAppDispatch, useAppSelector} from './store/hooks';
 import {selectDistrict} from './store/DataSelectionSlice';
 import {useTranslation} from 'react-i18next';
+import Footer from 'components/Footer/footer';
 
 /**
  * This is the root element of the React application. It divides the main screen area into the three main components.
@@ -41,6 +42,7 @@ export default function App(): JSX.Element {
                 <Sidebar />
                 <MainContent />
               </Box>
+              <Footer />
             </Box>
           </PersistGate>
         </ThemeProvider>

diff --git a/frontend/src/components/Footer/footer.tsx b/frontend/src/components/Footer/footer.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer style={{textAlign: 'center', fontWeight: 'bold', color: '#6892d5'}}>
+      <p>&copy; {new Date().getFullYear()} LOKI & DLR </p>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/frontend/src/components/Sidebar/BarChart.tsx b/frontend/src/components/Sidebar/BarChart.tsx
@@ -0,0 +1,195 @@
+import React from 'react';
+import {LineChart, Line, XAxis, YAxis, CartesianGrid} from 'recharts';
+import Select, {SelectChangeEvent} from '@mui/material/Select';
+import Stack from '@mui/material/Stack';
+// import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import TextField from '@mui/material/TextField';
+
+const data = [
+  {
+    name: 'Page A',
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: 'Page B',
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: 'Page C',
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: 'Page D',
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: 'Page E',
+    uv: 2900,
+    pv: 9900,
+    amt: 2290,
+  },
+  {
+    name: 'Page F',
+    uv: 2990,
+    pv: 5908,
+    amt: 2600,
+  },
+];
+
+export default function BarChart(): JSX.Element {
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setAge(event.target.value);
+  };
+
+  return (
+    <Stack sx={{overflow: 'scroll', height: '400px'}}>
+      <Stack spacing={2} direction='row' sx={{paddingTop: '20px', mx: 'auto'}}></Stack>
+      <div>
+        <Box sx={{display: 'flex', paddingTop: '20px', paddingRight: '20px'}}>
+          <Box width={140}>
+            {' '}
+            <h5>vaccinated</h5>
+          </Box>
+          <Box
+            sx={{
+              width: 400,
+              maxWidth: '100%',
+              height: 7,
+            }}
+          >
+            <TextField fullWidth label='fullWidth' id='fullWidth' />
+          </Box>
+        </Box>
+      </div>
+      <br></br>
+      <br></br>
+      <div>
+        <LineChart
+          width={300}
+          height={220}
+          data={data}
+          margin={{
+            top: 8,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <CartesianGrid strokeDasharray='3 3' />
+          <XAxis dataKey='name' style={{fontSize: '10px'}} />
+          <YAxis style={{fontSize: '10px'}} />
+
+          <Line type='monotone' dataKey='pv' stroke='#8884d8' activeDot={{r: 8}} />
+          <Line type='monotone' dataKey='uv' stroke='#82ca9d' />
+        </LineChart>
+      </div>
+
+      <Box sx={{display: 'flex', paddingRight: '10px', paddingTop: '10px'}}>
+        <Box width={140}>
+          {' '}
+          <h5>Detail 1</h5>
+        </Box>
+
+        <FormControl fullWidth>
+          <InputLabel id='demo-simple-select-label'>Age</InputLabel>
+          <Select
+            labelId='demo-simple-select-label'
+            id='demo-simple-select'
+            value={age}
+            label='Age'
+            onChange={handleChange}
+          >
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
+
+      <Box sx={{display: 'flex', paddingTop: '20px', paddingRight: '20px'}}>
+        <Box width={140}>
+          {' '}
+          <h5>Detail 1</h5>
+        </Box>
+
+        <FormControl fullWidth>
+          <InputLabel id='demo-simple-select-label'>Age</InputLabel>
+          <Select
+            labelId='demo-simple-select-label'
+            id='demo-simple-select'
+            value={age}
+            label='Age'
+            onChange={handleChange}
+          >
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
+
+      <Box sx={{display: 'flex', paddingTop: '20px', paddingRight: '20px'}}>
+        <Box width={140}>
+          {' '}
+          <h5>Detail 1</h5>
+        </Box>
+
+        <FormControl fullWidth>
+          <InputLabel id='demo-simple-select-label'>Age</InputLabel>
+          <Select
+            labelId='demo-simple-select-label'
+            id='demo-simple-select'
+            value={age}
+            label='Age'
+            onChange={handleChange}
+          >
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
+      <Box sx={{display: 'flex', paddingTop: '20px', paddingRight: '20px'}}>
+        <Box width={140}>
+          {' '}
+          <h5>Detail 1</h5>
+        </Box>
+
+        <FormControl fullWidth>
+          <InputLabel id='demo-simple-select-label'>Age</InputLabel>
+          <Select
+            labelId='demo-simple-select-label'
+            id='demo-simple-select'
+            value={age}
+            label='Age'
+            onChange={handleChange}
+          >
+            <MenuItem value={10}>Ten</MenuItem>
+            <MenuItem value={20}>Twenty</MenuItem>
+            <MenuItem value={30}>Thirty</MenuItem>
+          </Select>
+        </FormControl>
+      </Box>
+
+      {/* <Stack spacing={4} direction="row" sx={{paddingTop:'20px',mx: 'auto'}}>
+
+      <Button variant="outlined"></Button>
+      <Button variant="outlined"></Button> 
+    </Stack> */}
+    </Stack>
+  );
+}