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

package/src/transactions/utils/sortAndFilterTransactions.ts

@@ -0,0 +1,127 @@
+import { endOfToday } from 'date-fns/endOfToday'
+import { format } from 'date-fns/format'
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+import { getUnixTime } from 'date-fns/getUnixTime'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+
+import { TABLE_CONST } from '../../common/constants/Table'
+import { DATE_FORMATS_INTL, formatDate, ORDINAL_DATE_FORMAT, Tag, Transaction } from '../../common'
+
+import { COLUMN_NAMES } from '../constants/TransactionsTable'
+import { type TransactionFilter } from '../stores/TransactionStore'
+
+const UNCATEGORIZED_TERM = 'uncategorized'
+
+export const sortAndFilterTransactions = (
+  filter: TransactionFilter,
+  expandedSplits: string[],
+  sortColumn: string,
+  sortDirection: string,
+  tags: Tag[],
+  transactions: Transaction[],
+) => {
+  const filteredTransactions = filterTransactions(filter, tags, transactions)
+
+  const sortedTransactions = sortTransactions(filteredTransactions, sortColumn, sortDirection)
+
+  expandedSplits.forEach((guid) => {
+    const index = sortedTransactions.findIndex((t) => t.guid === guid)
+    const children = transactions.filter((t) => t.parent_guid === guid)
+    sortedTransactions.splice(index + 1, 0, ...children)
+  })
+  return sortedTransactions
+}
+
+const filterTransactions = (
+  filter: TransactionFilter,
+  tags: Tag[],
+  transactions: Transaction[],
+) => {
+  const {
+    accounts = [],
+    dateRange = { start: startOfMonth(startOfToday()), end: endOfToday() },
+    custom = () => true,
+    searchTerm: searchFilter = '',
+  } = filter
+
+  return (
+    transactions
+      // Filters out Split transaction children
+      .filter((t) => !t.parent_guid)
+      // Filter for selected accounts
+      .filter((t) => Boolean(accounts.find((guid) => guid === t.account_guid)))
+      // Filter for Date Range
+      .filter((t) => t.date > getUnixTime(dateRange.start) && t.date < getUnixTime(dateRange.end))
+      // Custom filter
+      .filter(custom)
+      // Search filter
+      .filter((transaction) => {
+        // Don't return uncategorized split transactions
+        if (searchFilter === UNCATEGORIZED_TERM && transaction.has_been_split) {
+          return false
+        }
+
+        // Split check - When searching for "Splits" and transaction is a split or is a parent of a split(s)
+        const splitPattern = /^spl/i
+        if (
+          splitPattern.test(searchFilter) &&
+          (transaction.has_been_split || Boolean(transaction.parent_guid))
+        ) {
+          return true
+        }
+
+        // Check transactions tags
+        const isTagIncludedInSearch = transaction.tags.some((guid) =>
+          isIncludedInSearch(searchFilter, tags.find((tag) => tag.guid === guid)?.name),
+        )
+
+        const date = fromUnixTime(transaction.date)
+        return (
+          isIncludedInSearch(searchFilter, transaction.payee) ||
+          isIncludedInSearch(searchFilter, transaction.feed_description) ||
+          isIncludedInSearch(searchFilter, transaction.category) ||
+          isIncludedInSearch(searchFilter, formatDate(date, DATE_FORMATS_INTL.MONTH)) ||
+          isIncludedInSearch(searchFilter, formatDate(date, DATE_FORMATS_INTL.DAY)) ||
+          isIncludedInSearch(searchFilter, formatDate(date, DATE_FORMATS_INTL.FULL_MONTH_DAY)) ||
+          isIncludedInSearch(searchFilter, formatDate(date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)) ||
+          isIncludedInSearch(searchFilter, format(date, ORDINAL_DATE_FORMAT)) ||
+          isIncludedInSearch(searchFilter, transaction.account) ||
+          isIncludedInSearch(searchFilter, `${transaction.amount}`) ||
+          isIncludedInSearch(searchFilter, transaction.memo) ||
+          isTagIncludedInSearch
+        )
+      })
+  )
+}
+
+const sortTransactions = (
+  transactions: Transaction[],
+  sortColumn: string,
+  sortDirection: string,
+) => {
+  return [...transactions].sort((a: Transaction, b: Transaction) => {
+    const column = sortColumn as keyof Transaction
+    const sortCompare = (a[column] || '') > (b[column] || '')
+
+    let sortASC = sortCompare ? -1 : 1
+    let sortDESC = sortCompare ? 1 : -1
+
+    if (sortColumn === COLUMN_NAMES.DATE || sortColumn === COLUMN_NAMES.AMOUNT) {
+      sortASC = sortCompare ? 1 : -1
+      sortDESC = sortCompare ? -1 : 1
+    }
+
+    return sortDirection === TABLE_CONST.ASC ? sortASC : sortDESC
+  })
+}
+
+/**
+ * Determines if a value is included within the terms set in the search bar
+ */
+const isIncludedInSearch = (searchFilter: string, value: string | null | undefined) => {
+  const lowerCasedTerms = searchFilter.toLowerCase().split(' ')
+  const lowerCasedValue = value?.toString().toLowerCase() ?? ''
+
+  return lowerCasedTerms.every((filter) => lowerCasedValue.indexOf(filter) > -1)
+}

package/src/trends/TrendsFullWidget.tsx

@@ -0,0 +1,286 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { useTheme } from '@mui/material/styles'
+
+import { DateRange } from '@mui/x-date-pickers-pro'
+import { Icon, Text } from '@kyper/mui'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import Button from '@mui/material/Button'
+import ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { subMonths } from 'date-fns/subMonths'
+import { addSeconds } from 'date-fns/addSeconds'
+import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'
+
+import {
+  ANALYTICS_EVENTS,
+  DATE_FORMATS_INTL,
+  Loader,
+  StackedLineChart,
+  WidgetContainer,
+  WidgetProps,
+  formatDate,
+  useAccountStore,
+  useEvent,
+  useCategoryStore,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useScreenSize,
+  useTransactionStore,
+} from '../common'
+
+import { getStackedLineChartData, StackedLineChartData } from './utils/TrendsData'
+import { getTopLevelCategoryTotals, isExpense, isIncome } from './utils/shared'
+
+import TrendsTable from './components/TrendsTable'
+import TrendsDrawer from './components/TrendsDrawer'
+
+const tempCopy = {
+  view_transactions: 'View Transactions',
+}
+
+const TrendsFullWidget: React.FC<WidgetProps> = ({ onBackClick, sx }) => {
+  const theme = useTheme()
+  const { onEvent } = useEvent()
+  const { isDesktop, isTablet, isMobile } = useScreenSize()
+  const { accounts } = useAccountStore()
+  const { loadMonthlyCategoryTotals, monthlyCategoryTotals, getCategoryName } = useCategoryStore()
+  const { sortedTransactions: transactions } = useTransactionStore()
+  const { isInitialized, selectedAccounts, setSelectedAccounts } = useGlobalUiStore()
+  const { trends: copy } = useGlobalCopyStore()
+
+  const isDark = theme.palette.mode === 'dark'
+
+  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)
+  const [showTransactions, setShowTransactions] = React.useState(false)
+  const [selectedTab, setSelectedTab] = React.useState('Chart')
+  const [selectedCategory, setSelectedCategory] = React.useState('')
+  // NOTE: does this date range need to be adjusted bidirectionally?
+  const [selectedDateRange, setSelectedDateRange] = React.useState({
+    start: addSeconds(endOfMonth(subMonths(new Date(), 6)), 1),
+    end: endOfMonth(new Date()),
+  })
+
+  // Reset selected accounts on load
+  React.useEffect(() => {
+    setSelectedAccounts(accounts)
+  }, [accounts])
+
+  // Initialize monthlyCategoryTotals, and reload on account or date range change
+  React.useEffect(() => {
+    if (isInitialized) {
+      loadMonthlyCategoryTotals(
+        selectedAccounts,
+        selectedDateRange.start,
+        selectedDateRange.end,
+      ).finally(() => {
+        setIsWidgetInitialized(true)
+      })
+    }
+  }, [isInitialized, selectedAccounts, selectedDateRange])
+
+  // Cache a full year of StackedLineChart data
+  const chartData = React.useMemo(() => {
+    if (!isWidgetInitialized) return { stackedDatasets: [], unstackedDatasets: [] }
+
+    const data = getStackedLineChartData(
+      monthlyCategoryTotals,
+      selectedDateRange.start,
+      selectedDateRange.end,
+    )
+
+    const filteredData = selectedCategory.length
+      ? data.filter(
+          (d) =>
+            d.top_level_category_guid === selectedCategory || d.category_guid === selectedCategory,
+        )
+      : getTopLevelCategoryTotals(data)
+
+    return {
+      stackedDatasets: filteredData.filter(isExpense) as StackedLineChartData[],
+      unstackedDatasets: filteredData.filter(isIncome) as StackedLineChartData[],
+    }
+  }, [monthlyCategoryTotals, selectedCategory, selectedDateRange])
+
+  // Build date range text for display
+  // e.g. October 2023 - March 2024, or Oct 2023 - Mar 2024
+  const dateRangeText = React.useMemo(() => {
+    const startDate = formatDate(
+      selectedDateRange.start,
+      isMobile ? DATE_FORMATS_INTL.MONTH_SHORT_YEAR : DATE_FORMATS_INTL.MONTH_YEAR,
+    )
+    const endDate = formatDate(
+      selectedDateRange.end,
+      isMobile ? DATE_FORMATS_INTL.MONTH_SHORT_YEAR : DATE_FORMATS_INTL.MONTH_YEAR,
+    )
+    return `${startDate} - ${endDate}`
+  }, [selectedDateRange, isMobile])
+
+  const onTabChange = (_event: React.SyntheticEvent, newValue: string) => {
+    setSelectedTab(newValue ?? selectedTab)
+    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TOGGLE)
+  }
+
+  const onRangeChanged = (dateRange: DateRange<Date>) => {
+    const startDate = addSeconds(dateRange?.[0] as Date, 1)
+    const endDate = dateRange?.[1] as Date
+    const months = differenceInCalendarMonths(endDate, startDate)
+
+    setSelectedDateRange({ start: startDate, end: endDate })
+    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_DATE, {
+      time_period: months + 'M',
+    })
+  }
+
+  const onAccountsFilterClick = () => {
+    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_FILTER)
+  }
+  const onClickRow = (guid: string) => {
+    setSelectedCategory(guid)
+  }
+  const onClickLegend = (guid: string) => {
+    setSelectedCategory(guid)
+    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LEGEND, { category: getCategoryName(guid) })
+  }
+  const onHoverLegend = (guid: string) => {
+    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_LEGEND, { category: getCategoryName(guid) })
+  }
+  const onHoverArea = (category: string) => {
+    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_AREA, { category })
+  }
+  const onHoverPoint = (category: string) => {
+    onEvent(ANALYTICS_EVENTS.TRENDS_HOVER_POINT, { category })
+  }
+
+  if (!isInitialized || !isWidgetInitialized) return <Loader />
+
+  return (
+    <WidgetContainer
+      accountOptions={accounts}
+      calendarActions={{ onRangeChanged }}
+      dateRange={selectedDateRange}
+      dateRangeVariant="timeframebuttons"
+      onAccountsFilterClick={onAccountsFilterClick}
+      onBackClick={onBackClick}
+      sx={sx}
+      title={copy.title}
+    >
+      <Stack
+        sx={{
+          // eslint-disable-next-line no-nested-ternary
+          px: isDesktop ? 48 : isTablet ? 24 : 12,
+        }}
+      >
+        <Stack
+          flexDirection="row"
+          justifyContent="space-between"
+          sx={{ pb: isMobile ? 12 : 24, pt: isMobile ? 24 : 48 }}
+        >
+          <Box sx={{ mr: 10, minWidth: '60%' }}>
+            <Text
+              display="block"
+              fontWeight={700}
+              sx={{
+                whiteSpace: 'normal',
+                overflow: 'visible',
+                textOverflow: 'unset',
+              }}
+              variant={isDesktop ? 'H3' : 'Body'}
+            >
+              {getCategoryName(selectedCategory) || copy.sub_title}
+            </Text>
+            <Text variant={isDesktop ? 'Body' : 'Small'}>{dateRangeText}</Text>
+          </Box>
+          <ToggleButtonGroup
+            exclusive={true}
+            onChange={onTabChange}
+            orientation="horizontal"
+            value={selectedTab}
+          >
+            {['Chart', 'Table'].map((tab) => (
+              <ToggleButton
+                key={tab}
+                sx={{
+                  fontSize: 15,
+                  fontWeight: 600,
+                  height: 44,
+                  width: 56,
+                  color: isDark ? theme.palette.grey[200] : theme.palette.grey[600],
+                  borderColor: isDark ? theme.palette.grey[600] : theme.palette.grey[400],
+                  '&:hover': {
+                    backgroundColor: isDark ? `${theme.palette.primary.darker}25` : 'inherit',
+                    borderColor: isDark ? theme.palette.grey[500] : theme.palette.primary.main,
+                    color: isDark ? theme.palette.primary.light : theme.palette.primary.dark,
+                  },
+                  '&.Mui-selected': {
+                    backgroundColor: isDark
+                      ? theme.palette.primary.darker
+                      : theme.palette.primary.lighter,
+                    borderColor: isDark ? theme.palette.primary.light : theme.palette.primary.main,
+                    color: isDark ? theme.palette.common.white : theme.palette.primary.dark,
+                  },
+                  '&.Mui-disabled': {
+                    borderColor: isDark ? theme.palette.grey[700] : theme.palette.grey[400],
+                    color: theme.palette.grey[500],
+                  },
+                }}
+                value={tab}
+              >
+                {tab === 'Chart' ? (
+                  <Icon name="table_chart_view" />
+                ) : (
+                  <Icon name="format_list_bulleted" />
+                )}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        </Stack>
+        <Stack alignItems="center" flexDirection="row" width="100%">
+          <Box flexGrow={1}>
+            {selectedCategory && (
+              <Button onClick={() => setSelectedCategory('')} sx={{ p: 0, pr: 5 }}>
+                <Icon name="arrow_back" />
+                {copy.all_categories}
+              </Button>
+            )}
+          </Box>
+          <Button onClick={() => setShowTransactions(true)} sx={{ px: 5 }}>
+            {`${tempCopy.view_transactions} (${transactions.length})`}
+          </Button>
+        </Stack>
+        <Box>
+          {selectedTab === 'Chart' && (
+            <StackedLineChart
+              onClickLegend={onClickLegend}
+              onHoverArea={onHoverArea}
+              onHoverLegend={onHoverLegend}
+              onHoverPoint={onHoverPoint}
+              stackedDatasets={chartData.stackedDatasets}
+              unstackedDatasets={chartData.unstackedDatasets}
+            />
+          )}
+          {selectedTab === 'Table' && (
+            <TrendsTable
+              monthlyCategoryTotals={monthlyCategoryTotals}
+              onClickRow={onClickRow}
+              selectedCategory={selectedCategory}
+              selectedDateRange={selectedDateRange}
+            />
+          )}
+        </Box>
+      </Stack>
+      <TrendsDrawer
+        categoryGuid={selectedCategory}
+        dateRange={selectedDateRange}
+        isOpen={showTransactions}
+        onClose={() => setShowTransactions(false)}
+      />
+    </WidgetContainer>
+  )
+}
+
+export default observer(TrendsFullWidget)

package/src/trends/TrendsMiniWidget.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import {
+  Loader,
+  MiniWidgetContainer,
+  MiniWidgetProps,
+  useCategoryStore,
+  useGlobalCopyStore,
+  useGlobalStore,
+  useGlobalUiStore,
+} from '../common'
+
+import SpendingChart from './components/SpendingChart'
+
+const TrendsMiniWidget: React.FC<MiniWidgetProps> = ({ onPrimaryCtaClick, sx }) => {
+  const { loadMonthlyCategoryTotals } = useCategoryStore()
+  const { isInitialized } = useGlobalStore()
+  const { trends: trendsCopy } = useGlobalCopyStore()
+  const { selectedAccounts } = useGlobalUiStore()
+
+  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)
+
+  React.useEffect(() => {
+    if (isInitialized) {
+      loadMonthlyCategoryTotals(selectedAccounts).finally(() => {
+        setIsWidgetInitialized(true)
+      })
+    }
+  }, [isInitialized, selectedAccounts])
+
+  if (!isInitialized || !isWidgetInitialized) {
+    return <Loader />
+  }
+
+  return (
+    <MiniWidgetContainer
+      onPrimaryCtaClick={onPrimaryCtaClick}
+      primaryCtaLabel={trendsCopy.primary_cta}
+      subTitle={trendsCopy.sub_title}
+      sx={sx}
+      title={trendsCopy.mini_title}
+    >
+      <SpendingChart />
+    </MiniWidgetContainer>
+  )
+}
+
+export default observer(TrendsMiniWidget)

package/src/trends/__tests__/TrendsFullWidget.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { ThemeProvider } from '@mui/material/styles'
+import { createMXTheme } from '@kyper/mui'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { subMonths } from 'date-fns/subMonths'
+
+import { DATE_FORMATS_INTL, formatDate, GlobalDataProvider, GlobalStore } from '../../common'
+
+import TrendsFullWidget from '../TrendsFullWidget'
+
+describe('TrendsFullWidget', () => {
+  let globalStore: GlobalStore
+
+  beforeEach(() => {
+    globalStore = new GlobalStore()
+    globalStore.initialize('/', '').finally()
+  })
+
+  it('renders successfully', async () => {
+    await React.act(async () => {
+      render(
+        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+          <ThemeProvider theme={createMXTheme('light')}>
+            <TrendsFullWidget onBackClick={() => {}} />
+          </ThemeProvider>
+        </GlobalDataProvider>,
+      )
+    })
+
+    const dateRangeStart = formatDate(
+      startOfMonth(subMonths(new Date(), 5)),
+      DATE_FORMATS_INTL.MONTH_YEAR,
+    )
+    const dateRangeEnd = formatDate(endOfMonth(new Date()), DATE_FORMATS_INTL.MONTH_YEAR)
+
+    expect(screen.getByText('Trends')).toBeInTheDocument()
+    expect(screen.getByText('Transaction Trends by Category')).toBeInTheDocument()
+    expect(screen.getByText(`${dateRangeStart} - ${dateRangeEnd}`)).toBeInTheDocument()
+  })
+})

package/src/trends/__tests__/TrendsMiniWidget.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { ThemeProvider } from '@mui/material/styles'
+import { createMXTheme } from '@kyper/mui'
+
+import { GlobalDataProvider, GlobalStore } from '../../common'
+
+import TrendsMiniWidget from '../TrendsMiniWidget'
+
+describe('TrendsMiniWidget', () => {
+  let globalStore: GlobalStore
+
+  beforeEach(() => {
+    globalStore = new GlobalStore()
+    globalStore.initialize('/', '').finally()
+  })
+
+  it('renders successfully', async () => {
+    await React.act(async () => {
+      render(
+        <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+          <ThemeProvider theme={createMXTheme('light')}>
+            <TrendsMiniWidget onPrimaryCtaClick={() => {}} />
+          </ThemeProvider>
+        </GlobalDataProvider>,
+      )
+    })
+
+    expect(screen.getByText('Spending Overview')).toBeInTheDocument()
+    expect(screen.getByText('Transaction Trends by Category')).toBeInTheDocument()
+  })
+})

package/src/trends/components/SpendingChart.tsx

@@ -0,0 +1,29 @@
+import { observer } from 'mobx-react-lite'
+import { useTheme } from '@mui/material/styles'
+
+import { LineChart, useCategoryStore, useGlobalCopyStore } from '../../common'
+import { getSpendingData } from '../utils/SpendingData'
+
+const SpendingChart = () => {
+  const theme = useTheme()
+  const { monthlyCategoryTotals } = useCategoryStore()
+  const { trends: trendsCopy } = useGlobalCopyStore()
+
+  const data = getSpendingData(monthlyCategoryTotals)
+
+  return (
+    <LineChart
+      baseline="min"
+      colors={[theme.palette.primary.main]}
+      datasets={[data]}
+      height={300}
+      labels={[trendsCopy.spending_label]}
+      showArea={true}
+      showAverage={true}
+      showMarkLabel={true}
+      useCustomMark={true}
+    />
+  )
+}
+
+export default observer(SpendingChart)

package/src/trends/components/TrendsChart.tsx

@@ -0,0 +1,75 @@
+import { observer } from 'mobx-react-lite'
+import { useTheme } from '@mui/material/styles'
+
+import {
+  AccountType,
+  formatCurrency,
+  LineChart,
+  useCategoryStore,
+  INCOME_ACCOUNT_TYPES,
+  PAYMENT_ACCOUNT_TYPES,
+  SPENDING_ACCOUNT_TYPES,
+  useGlobalCopyStore,
+} from '../../common'
+
+import type { MonthlyCategoryTotals, TrendsCopy } from '../../common'
+import { useAccountUiStore } from '../../accounts/hooks/useUiStore'
+import { getIncomeTotals, getPaymentTotals, getSpendingTotals } from '../utils/SpendingData'
+
+const getDatasets = (totals: MonthlyCategoryTotals[], accountType: AccountType) => {
+  const incomeData = INCOME_ACCOUNT_TYPES.includes(accountType) ? getIncomeTotals(totals) : []
+  const paymentData = PAYMENT_ACCOUNT_TYPES.includes(accountType) ? getPaymentTotals(totals) : []
+  const spendingData = SPENDING_ACCOUNT_TYPES.includes(accountType) ? getSpendingTotals(totals) : []
+
+  // There should always be 1-2 datasets returned. No account type will have all three categories.
+  return [incomeData, paymentData, spendingData].filter((data) => data.length > 0)
+}
+
+const getLabels = (datasets: any[], accountType: AccountType, copy: TrendsCopy) => {
+  const [dataA, dataB] = datasets
+  const credits = dataA
+  const debits = dataB ?? dataA
+  const labels: string[] = []
+
+  if (credits && debits && INCOME_ACCOUNT_TYPES.includes(accountType)) {
+    const lastIncome = formatCurrency(credits[credits.length - 1].y, '0,0')
+    labels.push(`${copy.income_label} ${lastIncome}`)
+  } else if (PAYMENT_ACCOUNT_TYPES.includes(accountType)) {
+    const lastPayment = formatCurrency(credits[credits.length - 1].y, '0,0')
+    labels.push(`${copy.payments_label} ${lastPayment}`)
+  }
+
+  if (debits && SPENDING_ACCOUNT_TYPES.includes(accountType)) {
+    const lastSpending = formatCurrency(debits[debits.length - 1].y, '0,0')
+    labels.push(`${copy.spending_label} ${lastSpending}`)
+  }
+
+  return labels
+}
+
+const TrendsChart = () => {
+  const theme = useTheme()
+  const { selectedAccount } = useAccountUiStore()
+  const { monthlyCategoryTotals } = useCategoryStore()
+  const { trends: trendsCopy } = useGlobalCopyStore()
+
+  const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]
+  const datasets = getDatasets(monthlyCategoryTotals, selectedAccount.account_type)
+  const labels = getLabels(datasets, selectedAccount.account_type, trendsCopy)
+  const isLoan = [AccountType.LOAN, AccountType.MORTGAGE].includes(selectedAccount.account_type)
+
+  return (
+    <div data-testid="TrendsChart">
+      <LineChart
+        colors={colors}
+        datasets={datasets}
+        height={185}
+        labels={labels}
+        showAverage={isLoan}
+        showBars={isLoan}
+      />
+    </div>
+  )
+}
+
+export default observer(TrendsChart)