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

package/src/networth/components/GainsLossesDetail.tsx

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

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

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

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

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

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

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

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

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

@@ -1,59 +0,0 @@
-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
-}