Feature/reorder scenario color

.gitignore

@@ -2,3 +2,4 @@
 
 # ignore user/workspace settings etc. of VSCode
 .vscode
+node_modules

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": "^18.2.22",
+    "@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",

frontend/public/assets/heatmap_legend_presets.json

@@ -369,28 +369,7 @@
       {"color": "rgb(126,0,47)", "value": 15}
     ]
   },
-  {
-    "name": "Purples",
-    "isNormalized": true,
-    "steps": [
-      {"color": "rgb(251,250,253)", "value": 0},
-      {"color": "rgb(245,243,248)", "value": 1},
-      {"color": "rgb(238,236,244)", "value": 2},
-      {"color": "rgb(228,227,239)", "value": 3},
-      {"color": "rgb(217,217,234)", "value": 4},
-      {"color": "rgb(202,203,227)", "value": 5},
-      {"color": "rgb(187,188,219)", "value": 6},
-      {"color": "rgb(172,171,209)", "value": 7},
-      {"color": "rgb(157,153,199)", "value": 8},
-      {"color": "rgb(142,139,192)", "value": 9},
-      {"color": "rgb(127,124,185)", "value": 10},
-      {"color": "rgb(116,102,174)", "value": 11},
-      {"color": "rgb(105,80,162)", "value": 12},
-      {"color": "rgb(94,58,152)", "value": 13},
-      {"color": "rgb(83,37,142)", "value": 14},
-      {"color": "rgb(72,18,133)", "value": 15}
-    ]
-  },
+
   {
     "name": "RdBu",
     "isNormalized": true,
@@ -1512,5 +1491,27 @@
       {"color": "rgb(0,223,143)", "value": 14},
       {"color": "rgb(0,240,134)", "value": 15}
     ]
+  },
+  {
+    "name": "Purples",
+    "isNormalized": true,
+    "steps": [
+      {"color": "rgb(251,250,253)", "value": 0},
+      {"color": "rgb(245,243,248)", "value": 1},
+      {"color": "rgb(238,236,244)", "value": 2},
+      {"color": "rgb(228,227,239)", "value": 3},
+      {"color": "rgb(217,217,234)", "value": 4},
+      {"color": "rgb(202,203,227)", "value": 5},
+      {"color": "rgb(187,188,219)", "value": 6},
+      {"color": "rgb(172,171,209)", "value": 7},
+      {"color": "rgb(157,153,199)", "value": 8},
+      {"color": "rgb(142,139,192)", "value": 9},
+      {"color": "rgb(127,124,185)", "value": 10},
+      {"color": "rgb(116,102,174)", "value": 11},
+      {"color": "rgb(105,80,162)", "value": 12},
+      {"color": "rgb(94,58,152)", "value": 13},
+      {"color": "rgb(83,37,142)", "value": 14},
+      {"color": "rgb(72,18,133)", "value": 15}
+    ]
   }
 ]

frontend/public/index.html

@@ -8,9 +8,11 @@
     <title>ESID</title>
     <link rel="icon" href="icon.svg" />
     <link rel="manifest" href="manifest.json" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
     <div id="root"></div>
   </body>
-</html>
+</html>

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;
+}

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.
@@ -40,12 +41,17 @@ export default function App(): JSX.Element {
               >
                 <Sidebar />
                 <MainContent />
+
               </Box>
+              <Footer/>
             </Box>
+
           </PersistGate>
         </ThemeProvider>
+
       </Provider>
     </Suspense>
+
   );
 }
 

frontend/src/components/Footer/footer.tsx

@@ -0,0 +1,18 @@
+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;
+
+
+
+

frontend/src/components/Sidebar/BarChart.tsx

@@ -0,0 +1,199 @@
+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>
+
+
+  );
+}