Merge branch 'main' of https://github.com/carrawao/SWE_Finanzen into …

…feature/activities
fefifef · May 12, 2022 · e91bd5e · e91bd5e
2 parents b1aa94f + aedfd08
commit e91bd5e
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 54 deletions.
diff --git a/Frontend/src/components/screens/Dashboard/DashboardScreen.jsx b/Frontend/src/components/screens/Dashboard/DashboardScreen.jsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import ScreensTemplate from '../../ScreensTemplate';
-import {Grid} from '@mui/material';
+import {Grid, Box} from '@mui/material';
 import PropTypes from 'prop-types';
 import AllocationGraph from './AllocationGraph';
 import PortfolioOverview from './PortfolioOverview';
@@ -20,27 +20,27 @@ const DashboardScreen = props => {
     <React.Fragment>
       <Grid
         container
-        direction='row'
+        className=' col-12 d-flex flex-column flex-xl-row justify-content-center align-items-center'
       >
-        <Grid item xs={3}>
+        <Grid item className='col-11 col-sm-7 col-md-5 col-xl-4'>
           <AllocationGraph
             portfolioData={props.portfolioData[props.activePortfolio]}
             activePortfolio={props.activePortfolio}
             getAllAssets={props.getAllAssets}
           />
         </Grid>
-        <Grid item container direction='column' xs={9}>
-          <Grid item textAlign={"right"}>
+        <Box className='col-12 col-md-10 flex-xl-column col-xl-8'>
+          <Box className='d-flex justify-content-center mb-2'>
             <ChartButtons view={view} setView={setView}/>
-          </Grid>
-          <Grid item>
+          </Box>
+          <Box className='d-flex justify-content-center mb-4'>
             <PortfolioOverview
               portfolioData={props.portfolioData}
               activePortfolio={props.activePortfolio}
               setActivePortfolio={props.setActivePortfolio}
             />
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
       </Grid>
       <PortfolioCharts view={view} {...props}/>
     </React.Fragment>

diff --git a/Frontend/src/components/screens/Dashboard/PortfolioCharts.jsx b/Frontend/src/components/screens/Dashboard/PortfolioCharts.jsx
@@ -1,21 +1,20 @@
 import React from 'react';
-import {Grid, Card, CardHeader, CardContent} from '@mui/material';
+import {Card, Container, CardContent, Box} from '@mui/material';
 import PortfolioPerformance from './PortfolioPerformance';
 import PortfolioValueChart from './PortfolioValuechart';
 
 export const PortfolioCharts = props => {
   return (
-    <Card raised xs={12} sx={{border: 3, borderColor: 'rgb(0,0,100)', borderRadius: 3}}>
-      <CardHeader style={{textAlign: 'center'}}/>
-      <CardContent>
-        <Grid container spacing={5} direction='row' justifyContent='center'>
-          <Grid item xs={6}>
+    <Card raised className='col-12' sx={{border: 3, borderColor: 'rgb(0, 0, 100)', borderRadius: 3}}>
+      <CardContent className='d-flex col-12 py-4'>
+        <Container className='d-flex flex-column flex-xl-row justify-content-center align-items-center'>
+          <Box className='col-12 col-xl-6 mb-4 mb-xl-0 me-xl-4'>
             <PortfolioValueChart {...props} view={props.view}/>
-          </Grid>
-          <Grid item xs={6}>
+          </Box>
+          <Box className='col-12 col-xl-6 ms-xl-4'>
             <PortfolioPerformance {...props} view={props.view}/>
-          </Grid>
-        </Grid>
+          </Box>
+        </Container>
       </CardContent>
     </Card>
   )

diff --git a/Frontend/src/components/screens/Dashboard/PortfolioOverview.jsx b/Frontend/src/components/screens/Dashboard/PortfolioOverview.jsx
@@ -23,13 +23,9 @@ const PortfolioOverview = props => {
   return (
     <Grid
       container
-      direction='column'
-      justifyContent='space-evenly'
-      alignContent='center'
-      height='100%'
-      padding='1rem'
+      className='d-flex flex-column justify-content-evenly p-0 p-lg-4'
     >
-      <Box sx={{marin: '10px', borderBottom: '1px solid #493f35'}}>
+      <Box className='m-3' sx={{borderBottom: '1px solid #493f35'}}>
         <Grid
           container
           direction='row'
@@ -68,31 +64,29 @@ const PortfolioOverview = props => {
       </Box>
       <Grid
         container
-        direction='row'
-        justifyContent='space-around'
-        alignContent='center'
+        className='d-flex flex-row justify-content-around align-items-center ps-0'
       >
-        <Grid item>
-          <Typography variant='h5' gutterBottom component='div'>Gains</Typography>
-          <Typography variant='h5' gutterBottom component='div'>{
+        <Grid item className='d-flex flex-column col-3 align-items-center'>
+          <Typography variant='h6' gutterBottom display='block'>Gains</Typography>
+          <Typography variant='h6' gutterBottom >{
             new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR',}).format(portfolio['gains'])
           }</Typography>
         </Grid>
-        <Grid item>
-          <Typography variant='h5' gutterBottom component='div'>Realized Gains</Typography>
-          <Typography variant='h5' gutterBottom component='div'>{portfolio['realisedGains']}</Typography>
+        <Grid item className='d-flex flex-column col-5 align-items-center'>
+          <Typography variant='h6' gutterBottom display='block'>Realised Gains</Typography>
+          <Typography variant='h6' gutterBottom>{portfolio['realisedGains']}</Typography>
         </Grid>
-        <Grid item>
-          <Typography variant='h5' gutterBottom component='div'>Dividends</Typography>
-          <Typography variant='h5' gutterBottom component='div'>0,00€</Typography>
+        <Grid item className='d-flex flex-column col-3 align-items-center'>
+          <Typography variant='h6' gutterBottom>Dividends</Typography>
+          <Typography variant='h6' gutterBottom>0,00€</Typography>
         </Grid>
       </Grid>
     </Grid>
   );
 }
 
 PortfolioOverview.propTypes = {
-  activePortfolio: PropTypes.string,
+  activePortfolio: PropTypes.any,
   setActivePortfolio: PropTypes.func,
   portfolioData: PropTypes.object,
 };

diff --git a/Frontend/src/components/screens/Dashboard/PortfolioPerformance.jsx b/Frontend/src/components/screens/Dashboard/PortfolioPerformance.jsx
@@ -125,12 +125,17 @@ export const PortfolioPerformance = props => {
   }
   changeData(props.view, perfData, labels, options, setup)
   return (
-    <Card raised sx={{border: 3, borderColor: 'rgb(228 126 37)', borderRadius: 3}}>
-      <CardHeader title='Performance' action={
-        <FormGroup>
-          <FormControlLabel control={<Checkbox checked={realised} onChange={e => {
+    <Card className='col-xl-12' raised sx={{border: 3, borderColor: 'rgb(228 126 37)', borderRadius: 3}}>
+      <CardHeader
+        title='Performance'
+        action={
+        <FormGroup className='d-none d-sm-flex'>
+          <FormControlLabel
+            control={<Checkbox checked={realised} onChange={e => {
             setRealised(!realised)
-          }}/>} label='Realised Performance'/>
+          }}/>}
+            label='Realised Performance'
+          />
         </FormGroup>
       }/>
       <CardContent>

diff --git a/Frontend/src/components/screens/Dashboard/PortfolioValuechart.jsx b/Frontend/src/components/screens/Dashboard/PortfolioValuechart.jsx
@@ -137,7 +137,7 @@ export const PortfolioValueChart = props => {
   changeData(props.view, valueData, labels, options, setup, 0)
   changeData(props.view, investedData, labels, options, setup, 1)
   return (
-    <Card raised sx={{border: 3, borderColor: 'rgb(228 126 37)', borderRadius: 3}}>
+    <Card className='col-xl-12' raised sx={{border: 3, borderColor: 'rgb(228 126 37)', borderRadius: 3}}>
       <CardHeader title='Value'/>
       <CardContent>
         <Line data={setup} options={options}/>

diff --git a/Frontend/src/components/screens/Home.jsx b/Frontend/src/components/screens/Home.jsx
@@ -17,21 +17,35 @@ const Home = () => {
       '/',
       `${process.env.PUBLIC_URL}/assets/images/dashboard.jpeg`,
       'Dashboard',
-      'Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica'
+      'Your data from your activities are visualized here, so at a glance you get all the important info about your portfolio!'
     ],
     'watchlists': [
       'rgb(59 151 210)',
       '/watchlists',
       `${process.env.PUBLIC_URL}/assets/images/watchlist.png`,
       'Watchlists',
-      'Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica'
+      'Save your favorite shares and crypto to always have an overview of the course. This way you can decide in a flash if it is time to buy or sell!'
     ],
     'activities': [
-      'rgb(228 126 37)',
+      'rgb(241 155 31)',
       '/activities',
       `${process.env.PUBLIC_URL}/assets/images/activities.png`,
       'Activities',
-      'Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica'
+      'Add new purchases, sales, and dividend distributions to your activities to get an overview of previous activities!'
+    ],
+    'analysis': [
+      'rgb(228 126 37)',
+      '/analysis',
+      `${process.env.PUBLIC_URL}/assets/images/activities.png`,
+      'Analysis',
+      'If you want to get a deeper insight into your portfolio, you are at the right place. You can have your assets broken down by different criteria to get a feeling about the distribution of your portfolio!'
+    ],
+    'benchi': [
+      'rgb(239, 195, 25)',
+      '/benchi',
+      `${process.env.PUBLIC_URL}/assets/images/activities.png`,
+      'Benchi',
+      'Do you want to take a new direction or are you still unsure what the perfect investment strategy for you looks like? Let our analysis bot Benchi advice you free of charge and find out what suits you best!'
     ]
   }
 

diff --git a/Frontend/src/components/screens/Settings/SettingsScreen.jsx b/Frontend/src/components/screens/Settings/SettingsScreen.jsx
@@ -69,8 +69,7 @@ const SettingsScreen = props => {
               }}
 
             >
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+              Upload your previously saved data in the form of a Json file to get back to your current state. This way you have complete control over your data!
             </Typography>
           </Grid>
           <Grid item className='col-12 col-md-3 col-xl-3'
@@ -146,8 +145,7 @@ const SettingsScreen = props => {
                 }
               }}
             >
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+              Download your data here to back it up or use it on another device. Keep the file safe, we have no way to restore your data!
             </Typography>
           </Grid>
           <Grid item className='col-12 col-md-3 col-xl-3' sx={{
@@ -211,8 +209,7 @@ const SettingsScreen = props => {
                 }
               }}
             >
-              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
-              et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+              Delete your data to get an empty portfolio. Your watchlist will be reset as well. Be careful that we can't restore your data, so download it first if you still need it!
             </Typography>
           </Grid>
           <Grid item className='col-12 col-md-3 col-xl-3'