Update dashboard (#273)

* Update dashboard

* Added tests

* update styles

* Updated modules

package.json

@@ -49,19 +49,19 @@
         "jsdom": "^15.1.1",
         "localforage": "^1.7.3",
         "lodash": "^4.17.15",
-        "papaparse": "^5.0.2",
+        "papaparse": "^5.1.0",
         "pluralize": "^8.0.0",
         "prop-types": "^15.7.2",
         "query-string": "^6.8.3",
         "react": "^16.9.0",
         "react-confirm": "^0.1.18",
         "react-dom": "^16.9.0",
-        "react-dropzone": "^10.1.8",
+        "react-dropzone": "^10.1.9",
         "react-motion": "^0.5.2",
         "react-number-format": "^4.2.0",
         "react-redux": "^7.1.1",
         "react-router-dom": "^5.0.1",
-        "react-scripts": "^3.1.1",
+        "react-scripts": "^3.1.2",
         "react-select": "^3.0.4",
         "react-virtualized": "^9.21.1",
         "react-window": "^1.8.5",
@@ -137,4 +137,4 @@
             }
         }
     }
-}
+}

src/__tests__/routes.test.jsx

@@ -16,11 +16,13 @@ import {
   persistor,
   loginAs
 } from '../store'
+
 import Routes from '../routes'
 import { blockstackUserSession, blockstackPerson } from '../../mocks/BlockstackMock'
 import ThemeProvider from '../core/ThemeProvider'
 
 jest.mock('blockstack')
+
 UserSession.mockImplementation(() => blockstackUserSession)
 Person.mockImplementation(() => blockstackPerson)
 
@@ -64,6 +66,9 @@ function renderWithRouter(
   }
 }
 
+const historyReloadSpy = jest.spyOn(window.location, 'reload')
+historyReloadSpy.mockImplementation(jest.fn())
+
 describe('Routes', () => {
   describe('Logged out routes', () => {
     it('renders home page if not logged in', () => {

src/core/Accounts/LeftDrawer.jsx

@@ -28,39 +28,56 @@ const styles = (theme) => ({
   },
   drawerPaper: {
     width: 200,
-    marginTop: 70
+    marginTop: 70,
+    height: 'calc(100% - 70px)'
   },
   noAccounts: {
     background: grey[100],
     margin: '0 20px',
     padding: theme.spacing(1)
   },
+  listSubheader: {
+    background: '#f1f1f1',
+    marginBottom: theme.spacing(1)
+  },
   institutionListRoot: {
     padding: 0
   },
   institutionListItem: {
+    paddingLeft: theme.spacing(1),
     paddingRight: 0
   },
   institutionListItemIcon: {
-    marginLeft: 10,
     minWidth: 30
   },
   institution: {
     padding: 0,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
-    maxWidth: 100,
-    fontWeight: 500
+    maxWidth: 120,
+    fontWeight: 500,
+    display: 'inline-block',
+    verticalAlign: 'bottom'
   },
   account: {
-    padding: '0 0 0 40px'
+    padding: `0 0 0 ${theme.spacing(4)}px`
+  },
+  accountName: {
+    fontSize: '95%',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    maxWidth: 110,
+    display: 'inline-block',
+    verticalAlign: 'middle'
   },
   ListItemText: {
     margin: '3px 0 3px 0'
   },
   smallFont: {
-    fontSize: '95%'
+    fontSize: '95%',
+    textOverflow: 'ellipsis'
   },
   smallButton: {
     padding: 4,
@@ -105,7 +122,7 @@ export const LeftDrawerComponent = ({
           component="nav"
           dense={true}
           subheader={(
-            <ListSubheader component="div">
+            <ListSubheader component="div" className={classes.listSubheader}>
               Accounts
               <ListItemSecondaryAction>
                 <Tooltip id="tooltip-icon" title="New account">
@@ -170,14 +187,15 @@ export const LeftDrawerComponent = ({
                             <ListItemText
                               classes={{
                                 root: classes.ListItemText,
-                                primary: classes.smallFont,
+                                primary: classes.accountName,
                                 secondary: classes.smallFont
                               }}
                               primary={account.name}
                               secondary={
                                 // eslint-disable-next-line max-len
                                 currencyFormatter(settings.locale, account.currency)(account.currentBalance.accountCurrency)
                               }
+                              title={account.name}
                             />
                             {accountGroup.type === 'default' && (
                               <ListItemSecondaryAction>

src/core/Accounts/__tests__/edit.test.jsx

@@ -32,7 +32,7 @@ describe('New Account', () => {
   describe('Component methods', () => {
     const account = {
       id: '1',
-      description: 'Checking',
+      name: 'Checking',
       institution: 'TD',
       currency: 'CAD'
     }

src/core/Budget/BudgetChart.jsx

@@ -52,7 +52,7 @@ const BudgetChart = () => {
       if (byMonth[dateKey][category.name] === undefined) {
         byMonth[dateKey][category.name] = 0
       }
-      byMonth[dateKey][category.name] += transaction.amount
+      byMonth[dateKey][category.name] += -transaction.amount
     }
   })
   const data = Object.keys(byMonth).sort((a, b) => a - b).map((date) => ({

src/core/Budget/SankeyDiagram/SankeyTooltip.jsx

@@ -16,7 +16,8 @@ const HEIGHT = 50
 
 const SankeyTooltip = ({
   node,
-  containerWidth
+  containerWidth,
+  containerHeight
 }) => {
   const classes = useStyles()
   const formatCurrency = useSelector(
@@ -41,11 +42,15 @@ const SankeyTooltip = ({
       if (newPosition.x + newPosition.width > containerWidth) {
         newPosition.x -= newPosition.width + 25
       }
+      if (newPosition.y + newPosition.height > containerHeight) {
+        newPosition.y = containerHeight - newPosition.height - 25
+      }
+
       setPosition(newPosition)
     } else {
       setPosition((prevState) => ({ ...prevState, width: 0, height: 0 }))
     }
-  }, [node, containerWidth])
+  }, [node, containerWidth, containerHeight])
 
   return (
     <Motion
@@ -101,7 +106,8 @@ const SankeyTooltip = ({
 
 SankeyTooltip.propTypes = {
   node: PropTypes.object,
-  containerWidth: PropTypes.number.isRequired
+  containerWidth: PropTypes.number.isRequired,
+  containerHeight: PropTypes.number.isRequired
 }
 
 SankeyTooltip.defaultProps = {

src/core/Budget/SankeyDiagram/index.jsx

@@ -95,6 +95,7 @@ const SankeyDiagram = ({ data }) => {
         <SankeyTooltip
           node={selectedNode}
           containerWidth={rectWidth}
+          containerHeight={rectHeight}
         />
       </g>
     </svg>

src/core/BudgetCategories/index.jsx

@@ -28,7 +28,7 @@ import Tooltip from '@material-ui/core/Tooltip'
 import pluralize from 'pluralize'
 import CategoryForm from './form'
 import { currencyFormatter } from '../../util/stringFormatter'
-import { deleteCategory } from '../../store/budget/actions'
+import { deleteCategory, resetColours } from '../../store/budget/actions'
 import GroupDialog from './GroupDialog'
 import confirm from '../../util/confirm'
 
@@ -368,6 +368,10 @@ const BudgetCategories = () => {
           >
             {renderNewCategory(group.id)}
           </Grid>
+          <Button size="small" color="secondary" onClick={() => dispatch(resetColours())}>
+            &nbsp;
+          </Button>
+
         </Grid>
       ))}
       <Menu anchorEl={anchorEl} open={popupIsOpen} onClose={handleClosePopup}>

src/core/Dashboard/AccountsChart.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import {
+  PieChart, Pie, ResponsiveContainer, Cell, Tooltip
+} from 'recharts'
+import { currencyFormatter } from '../../util/stringFormatter'
+
+const AccountsChart = ({ data }) => {
+  const formatCurrency = useSelector((state) => currencyFormatter(state.settings.locale, state.settings.currency))
+
+  return (
+    <ResponsiveContainer height={200}>
+      <PieChart>
+        <Pie
+          data={data}
+          nameKey="name"
+          dataKey="value"
+          isAnimationActive={false}
+          innerRadius="40%"
+          paddingAngle={1}
+        >
+          {data.map((entry) => <Cell key={`cell-${data.name}`} fill={entry.colour} />)}
+        </Pie>
+        <Tooltip
+          formatter={(value, name) => [formatCurrency(value), name]}
+        />
+
+      </PieChart>
+    </ResponsiveContainer>
+  )
+}
+
+AccountsChart.propTypes = {
+  data: PropTypes.array.isRequired
+}
+
+export default AccountsChart