@mx-cartographer/experiences 4.0.13 → 4.0.14-alpha.JB1

package/src/networth/components/GainsLossesDetail.tsx

@@ -0,0 +1,110 @@
+import { observer } from 'mobx-react-lite'
+import React from 'react'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import ListSubheader from '@mui/material/ListSubheader'
+import Stack from '@mui/material/Stack'
+
+import useTheme from '@mui/material/styles/useTheme'
+
+import { Text } from '@kyper/mui'
+
+import { CurrencyText, fromTimestampToMonthYear, useGlobalCopyStore } from '../../common/'
+
+import { GainsLosses } from '../types/NetWorth'
+import NetWorthChange from './NetWorthChange'
+
+const GainsLossesDetail: React.FC<GainsLosses> = ({
+  netWorth,
+  gains,
+  losses,
+  totalGains,
+  totalLosses,
+}) => {
+  const { net_worth: copy } = useGlobalCopyStore()
+
+  const theme = useTheme()
+
+  return (
+    <>
+      <Stack alignItems="center" justifyContent="space-between" mb={8} pt={24}>
+        <Text variant="Small">{fromTimestampToMonthYear(netWorth?.x)}</Text>
+        <Text variant="Body">{copy.total_change}</Text>
+        {netWorth && (
+          <NetWorthChange currencyVariant={'H1'} iconSize={32} netWorth={netWorth} theme={theme} />
+        )}
+      </Stack>
+      <List>
+        <ListSubheader sx={{ mb: 8, mt: 12, mx: 8 }}>
+          <ListItemText
+            primary={
+              <Stack direction="row" justifyContent="space-between">
+                <Text sx={{ fontWeight: 700 }} variant="XSmall">
+                  {copy.gains}
+                </Text>
+                <CurrencyText amount={totalGains} sx={{ fontWeight: 400 }} variant="XSmall" />
+              </Stack>
+            }
+          />
+        </ListSubheader>
+        {gains?.map((gain) => (
+          <React.Fragment key={gain.accountName}>
+            <ListItem sx={{ backgroundColor: theme.palette.background.paper, py: 14 }}>
+              <ListItemText
+                primary={
+                  <Stack direction="row" justifyContent="space-between" sx={{ fontWeight: 400 }}>
+                    <Text variant="Body">{gain.accountName}</Text>
+                    <CurrencyText
+                      amount={gain.gain}
+                      sx={{ color: theme.palette.success.main, fontWeight: 700 }}
+                      variant="Body"
+                    />
+                  </Stack>
+                }
+                sx={{ px: 16 }}
+              />
+            </ListItem>
+            <Divider />
+          </React.Fragment>
+        ))}
+
+        <ListSubheader sx={{ mb: 8, mt: 12, mx: 8 }}>
+          <ListItemText
+            primary={
+              <Stack direction="row" justifyContent="space-between">
+                <Text sx={{ fontWeight: 700 }} variant="XSmall">
+                  {copy.losses}
+                </Text>
+                <CurrencyText amount={totalLosses} sx={{ fontWeight: 400 }} variant="XSmall" />
+              </Stack>
+            }
+          />
+        </ListSubheader>
+        {losses?.map((loss) => (
+          <>
+            <ListItem
+              key={loss.accountName}
+              sx={{ backgroundColor: theme.palette.background.paper, py: 14 }}
+            >
+              <ListItemText
+                primary={
+                  <Stack direction="row" justifyContent="space-between" sx={{ fontWeight: 400 }}>
+                    <Text variant="Body">{loss.accountName}</Text>
+                    <CurrencyText amount={loss.loss} sx={{ fontWeight: 700 }} variant="Body" />
+                  </Stack>
+                }
+                sx={{ px: 16 }}
+              />
+            </ListItem>
+            <Divider />
+          </>
+        ))}
+      </List>
+    </>
+  )
+}
+
+export default observer(GainsLossesDetail)

package/src/networth/components/NetWorthChange.tsx

@@ -0,0 +1,51 @@
+import { observer } from 'mobx-react-lite'
+
+import { Stack, Theme } from '@mui/material'
+import { TypographyProps } from '@mui/material/Typography'
+import { Icon, Text } from '@kyper/mui'
+import { CurrencyText } from '../../common/components/CurrencyText'
+import { NetWorth } from '../types/NetWorth'
+
+interface NetWorthChangeProps {
+  netWorth: NetWorth
+  currencyVariant?: TypographyProps['variant']
+  currencyLabel?: string
+  iconSize?: number
+  theme: Theme
+}
+
+const NetWorthChange: React.FC<NetWorthChangeProps> = ({
+  currencyLabel,
+  currencyVariant = 'Small',
+  iconSize,
+  netWorth,
+  theme,
+}) => {
+  let iconColor = theme.palette.secondary.main
+  let currencyTextColor = theme.palette.secondary.main
+  let iconName = 'trending_flat'
+
+  if (netWorth.change < 0) {
+    iconName = 'trending_down'
+  } else if (netWorth.change > 0) {
+    iconColor = theme.palette.success.main
+    currencyTextColor = theme.palette.success.main
+    iconName = 'trending_up'
+  }
+
+  return (
+    <Stack alignItems="center" direction="row" spacing={4}>
+      <Icon
+        name={iconName}
+        size={iconSize}
+        sx={{
+          color: iconColor,
+        }}
+      />
+      <CurrencyText amount={netWorth.change} color={currencyTextColor} variant={currencyVariant} />
+      <Text variant="Small">{currencyLabel}</Text>
+    </Stack>
+  )
+}
+
+export default observer(NetWorthChange)

package/src/networth/components/NetWorthChart.tsx

@@ -0,0 +1,71 @@
+import { format } from 'date-fns/format'
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+import { observer } from 'mobx-react-lite'
+
+import { useTheme } from '@mui/material/styles'
+
+import { LineChart, useScreenSize, useWidgetContainerProvider } from '../../common'
+
+import { NetWorthProps } from '../types/NetWorth'
+
+const NetWorthChart: React.FC<NetWorthProps> = ({
+  chartData,
+  hoveredData,
+  onDataClick: onMarkClick,
+  onMouseEnter,
+  onMouseLeave,
+  selectedData,
+}) => {
+  const { isMobile } = useScreenSize()
+  const { availableWidth } = useWidgetContainerProvider()
+  const theme = useTheme()
+
+  // on mobile, chart is same width as list; on desktop, chart takes up what the list does not
+  const chartWidthNotMobile = availableWidth - 320
+
+  const datasets = chartData.map((point) => {
+    return {
+      x: format(fromUnixTime(point.x), 'MMM'),
+      y: point.y,
+    }
+  })
+
+  const selectedMark = selectedData
+    ? { index: chartData.findIndex((point) => point.x === selectedData.x) }
+    : undefined
+
+  const hoveredMark = hoveredData
+    ? { index: chartData.findIndex((point) => point.x === hoveredData.x) }
+    : undefined
+
+  const getMarkStyles = (markIndex: number) => {
+    const markStyles = {
+      fill: markIndex === selectedMark?.index ? theme.palette.success.main : '',
+      filter:
+        markIndex === hoveredMark?.index
+          ? `drop-shadow(0px 0px 10px ${theme.palette.success.main})`
+          : 'none',
+      stroke: theme.palette.success.main,
+    }
+    return markStyles
+  }
+
+  return (
+    <LineChart
+      baseline="min" // causes the area below the line to be shaded
+      colors={[theme.palette.success.main]}
+      datasets={[datasets]}
+      height={350}
+      labels={[]}
+      margin={{ right: 20 }}
+      markHandlers={{ onMarkClick, onMouseEnter, onMouseLeave }}
+      markStyles={getMarkStyles}
+      showArea={true}
+      useCustomMark={true}
+      valueFormatterString="0,0a" // formats to '109k' instead of '109,000'
+      width={isMobile ? 320 : chartWidthNotMobile}
+    />
+  )
+}
+
+export default observer(NetWorthChart)

package/src/networth/components/NetWorthList.tsx

@@ -0,0 +1,91 @@
+import { observer } from 'mobx-react-lite'
+import React from 'react'
+
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListSubheader from '@mui/material/ListSubheader'
+import Stack from '@mui/material/Stack'
+
+import { useTheme } from '@mui/material/styles'
+
+import { Text } from '@kyper/mui'
+
+import { useGlobalCopyStore } from '../../common'
+
+import NetWorthListItem from './NetWorthListItem'
+import { NetWorth, NetWorthProps } from '../types/NetWorth'
+import { Button } from '@mui/material'
+
+const NetWorthList: React.FC<NetWorthProps> = ({
+  chartData,
+  hoveredData,
+  onDataClick: onListItemClick,
+  onButtonClick,
+  onMouseEnter,
+  onMouseLeave,
+  selectedData,
+}) => {
+  const { net_worth: copy } = useGlobalCopyStore()
+  const theme = useTheme()
+
+  const buildStyles = (lineItem: NetWorth) => {
+    const isHovered = lineItem.x === hoveredData?.x
+    const isSelected = lineItem.x === selectedData?.x
+
+    const listItemStyles = {
+      backgroundColor: 'inherit',
+      borderBottom: 'inherit',
+      color: 'inherit',
+      padding: '12px',
+    }
+
+    if (isHovered) {
+      listItemStyles.color = isSelected ? 'inherit' : listItemStyles.color
+      listItemStyles.backgroundColor = theme.palette.action.hover
+    }
+
+    if (isSelected) {
+      listItemStyles.backgroundColor = theme.palette.primary.main
+      listItemStyles.borderBottom = theme.palette.border.light
+      listItemStyles.color = theme.palette.common.white
+    }
+
+    return listItemStyles
+  }
+
+  return (
+    <Stack direction="column" width={320}>
+      <List>
+        <ListSubheader sx={{ backgroundColor: 'transparent', mb: 8, mt: 12, mx: 8 }}>
+          <Text bold={true} component="h2" variant="Body">
+            {copy.monthly_totals}
+          </Text>
+        </ListSubheader>
+        <Divider />
+        {chartData.map((dataPoint: NetWorth, index: number) => {
+          return (
+            <NetWorthListItem
+              getStyles={buildStyles}
+              isHovered={dataPoint.x === hoveredData?.x}
+              isSelected={dataPoint.x === selectedData?.x}
+              item={dataPoint}
+              key={dataPoint.x}
+              onItemClick={(event) => onListItemClick(event, index)}
+              onMouseEnter={() => onMouseEnter(index)}
+              onMouseLeave={() => onMouseLeave()}
+            />
+          )
+        })}
+      </List>
+      <Button
+        onClick={() => onButtonClick()}
+        sx={{ alignSelf: 'center', marginTop: 16, width: 'fit-content' }}
+        variant="outlined"
+      >
+        {copy.view_assets_and_liabilities}
+      </Button>
+    </Stack>
+  )
+}
+
+export default observer(NetWorthList)

package/src/networth/components/NetWorthListItem.tsx

@@ -0,0 +1,72 @@
+import { observer } from 'mobx-react-lite'
+import React from 'react'
+
+import Divider from '@mui/material/Divider'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import { CurrencyText, fromTimestampToMonthYear } from '../../common/'
+import { NetWorth } from '../types/NetWorth'
+
+interface NetWorthListItemProps {
+  item: NetWorth
+  getStyles: (item: NetWorth) => { backgroundColor: string; borderBottom: string; color: string }
+  isHovered: boolean
+  isSelected: boolean
+  onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, dataIndex: number) => void
+  onMouseEnter: (dataIndex: number) => void
+  onMouseLeave: () => void
+}
+
+const NetWorthListItem: React.FC<NetWorthListItemProps> = ({
+  item: dataPoint,
+  getStyles,
+  isHovered = false,
+  isSelected = false,
+  onItemClick,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  const [listItemStyles, setListItemStyles] = React.useState({
+    color: '',
+  })
+
+  React.useEffect(() => {
+    setListItemStyles(getStyles(dataPoint))
+  }, [isHovered, isSelected])
+
+  return (
+    <React.Fragment key={dataPoint.x}>
+      <ListItem
+        sx={{
+          ...listItemStyles,
+          minHeight: 44,
+          '&:hover': { color: isSelected ? 'inherit' : listItemStyles.color },
+        }}
+      >
+        <ListItemButton
+          onClick={(event) => onItemClick?.(event, dataPoint.x)}
+          onMouseEnter={() => onMouseEnter(dataPoint.x)}
+          onMouseLeave={() => onMouseLeave()}
+          sx={{ minHeight: 44 }}
+        >
+          <ListItemText
+            primary={
+              <Stack direction="row" justifyContent="space-between" sx={{ fontWeight: 400 }}>
+                <Text variant="Body">{fromTimestampToMonthYear(dataPoint.x)}</Text>
+                <CurrencyText amount={dataPoint.y} sx={{ color: 'inherit' }} variant="Body" />
+              </Stack>
+            }
+          />
+        </ListItemButton>
+      </ListItem>
+      <Divider />
+    </React.Fragment>
+  )
+}
+
+export default observer(NetWorthListItem)

package/src/networth/components/NetWorthSummary.tsx

@@ -0,0 +1,36 @@
+import { observer } from 'mobx-react-lite'
+import { fromUnixTime, format } from 'date-fns'
+
+import { useTheme } from '@mui/material/styles'
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import { CurrencyText, useGlobalCopyStore } from '../../common/'
+import NetWorthChange from './NetWorthChange'
+import { NetWorth } from '../types/NetWorth'
+
+interface NetWorthSummaryProps {
+  hoveredData?: NetWorth
+  selectedData: NetWorth
+}
+
+const NetWorthSummary: React.FC<NetWorthSummaryProps> = ({ hoveredData, selectedData }) => {
+  const { net_worth: copy } = useGlobalCopyStore()
+  const theme = useTheme()
+  const summary = hoveredData ? hoveredData : selectedData
+
+  const formattedMonth = format(fromUnixTime(summary.x), 'MMMM')
+
+  return (
+    <Stack alignItems="center" direction="column" m={24}>
+      <Text color={theme.palette.secondary.main} variant="Small">
+        {`${formattedMonth} ${copy.net_worth}`}
+      </Text>
+      <CurrencyText amount={summary.y} variant="H2" />
+      <NetWorthChange currencyLabel={copy.this_month} netWorth={summary} theme={theme} />
+    </Stack>
+  )
+}
+
+export default observer(NetWorthSummary)

package/src/networth/index.ts

@@ -0,0 +1,5 @@
+export { NetWorthStore } from './stores/NetWorthStore'
+export { default as NetWorthChart } from './components/NetWorthChart'
+export { default as NetWorthList } from './components/NetWorthList'
+export { default as NetWorthSummary } from './components/NetWorthSummary'
+export { NetWorthWidget } from './NetWorthWidget'

package/src/networth/stores/NetWorthStore.ts

@@ -0,0 +1,99 @@
+import { makeAutoObservable, runInAction } from 'mobx'
+
+import type { Account, GlobalStore } from '../../common'
+
+import { AssetsLiabilities, GainsLosses, NetWorth, NetWorthData } from '../types/NetWorth'
+import {
+  filterAccounts,
+  flattenBalances,
+  buildAssetsLiabilities,
+  buildChartData,
+  buildGainsLosses,
+  getLatestNetWorthData,
+  sortByYearMonthAscending,
+} from '../utils/NetWorthUtils'
+
+export class NetWorthStore {
+  globalStore: GlobalStore
+
+  netWorthData: NetWorthData = { accounts: [], monthlyAccountBalances: [] }
+  netWorthChartData: NetWorth[] = []
+  hoveredData?: NetWorth
+  selectedData?: NetWorth
+
+  constructor(globalStore: GlobalStore) {
+    this.globalStore = globalStore
+    makeAutoObservable(this)
+  }
+
+  loadNetWorthData = async (accounts: Account[]) => {
+    try {
+      const members = this.globalStore.accountStore.members
+
+      const netWorthAccounts = filterAccounts(accounts, members)
+
+      const accountBalances = await Promise.all(
+        netWorthAccounts.map((account: Account) => {
+          return this.globalStore.accountStore.api.getMonthlyAccountBalances(account.guid)
+        }),
+      )
+
+      const monthlyAccountBalances = await accountBalances
+        .reduce(flattenBalances, [])
+        .sort(sortByYearMonthAscending)
+
+      runInAction(() => {
+        this.netWorthData = {
+          accounts: netWorthAccounts,
+          monthlyAccountBalances,
+        }
+      })
+    } catch (error) {
+      console.error(`Error occured while loading net worth data: ${error}`)
+    }
+  }
+
+  loadChartData = async (numberOfMonths: number) => {
+    try {
+      const { accounts, monthlyAccountBalances } = this.netWorthData
+      const chartData = await buildChartData(accounts, monthlyAccountBalances, numberOfMonths)
+      const selectedData = getLatestNetWorthData(chartData)
+
+      runInAction(() => {
+        this.netWorthChartData = chartData
+        this.selectedData = selectedData
+      })
+    } catch (error) {
+      console.error(`Error occured while loading chart data: ${error}`)
+    }
+  }
+
+  get gainsLosses(): GainsLosses {
+    return buildGainsLosses(this.selectedData)
+  }
+
+  get assetsLiabilities(): AssetsLiabilities {
+    const { assets, liabilities, totalAssets, totalLiabilities } = buildAssetsLiabilities(
+      this.netWorthData.accounts,
+    )
+    return {
+      netWorth: getLatestNetWorthData(this.netWorthChartData),
+      assets,
+      liabilities,
+      totalAssets,
+      totalLiabilities,
+    }
+  }
+
+  setSelectedData = (dataIndex: number) => {
+    runInAction(() => {
+      this.selectedData = this.netWorthChartData[dataIndex]
+    })
+  }
+
+  setHoveredData = (dataIndex: number | null) => {
+    runInAction(() => {
+      this.hoveredData = dataIndex !== null ? this.netWorthChartData[dataIndex] : undefined
+    })
+  }
+}

package/src/networth/stores/__tests__/NetWorthStore.test.ts

@@ -0,0 +1,32 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { GlobalStore } from '../../../common/stores/GlobalStore'
+
+vi.mock('../../accounts/api/AccountApi')
+
+describe('Testing the NetWorthStore', () => {
+  let globalStore
+
+  let getMonthlyAccountBalancesApiSpy
+
+  beforeEach(() => {
+    globalStore = new GlobalStore()
+  })
+
+  describe('loadNetWorthData()', () => {
+    it('should load monthly account balances', async () => {
+      await globalStore.accountStore.initialize('/', '')
+
+      getMonthlyAccountBalancesApiSpy = vi.spyOn(
+        globalStore.accountStore.api,
+        'getMonthlyAccountBalances',
+      )
+
+      await globalStore.netWorthStore.loadNetWorthData(globalStore.accountStore.accounts)
+
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+      expect(globalStore.accountStore.members).toHaveLength(10)
+      expect(getMonthlyAccountBalancesApiSpy).toHaveBeenCalled()
+    })
+  })
+})

package/src/networth/types/NetWorth.ts

@@ -0,0 +1,59 @@
+import { Account, AccountType, MonthlyAccountBalance } from '../../common'
+
+export type MonthlyAccountSummary = {
+  balance: number
+  change: number
+  guid: string
+  name: string
+  type: number
+  value: number
+}
+
+export type NetWorth = {
+  accounts: MonthlyAccountSummary[]
+  x: number // timestamp
+  y: number // total balance for the timestamp
+  change: number // change in networth for the timestamp
+}
+
+export type NetWorthData = {
+  accounts: Account[]
+  monthlyAccountBalances: MonthlyAccountBalance[]
+}
+
+export type NetWorthProps = {
+  chartData: NetWorth[]
+  hoveredData?: NetWorth
+  onButtonClick?: any
+  onDataClick: any
+  onMouseEnter: any
+  onMouseLeave: any
+  selectedData?: NetWorth
+}
+export interface FinancialAccount {
+  accountName?: string
+  accountType: AccountType
+  balance: number
+}
+
+export interface AccountGroup {
+  icon: string
+  name: string
+  accounts: FinancialAccount[]
+}
+
+export interface AssetsLiabilities {
+  netWorth?: NetWorth
+  assets: FinancialAccount[]
+  liabilities: FinancialAccount[]
+  totalAssets: number
+  totalLiabilities: number
+}
+
+export interface GainsLosses {
+  netWorth?: NetWorth
+  gains: { accountName: string; gain: number }[]
+  losses: { accountName: string; loss: number }[]
+  totalGains: number
+  totalLosses: number
+}