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

package/src/transactions/utils/sortAndFilterTransactions.ts

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

@@ -1,286 +0,0 @@
-/* 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

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

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

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

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

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