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

package/src/trends/components/TrendsDrawer.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import {
+  ANALYTICS_EVENTS,
+  Drawer,
+  useGlobalCopyStore,
+  useEvent,
+  useTransactionStore,
+  useGlobalUiStore,
+  Transaction,
+} from '../../common'
+import { TransactionDetails, TransactionList } from '../../transactions'
+
+const copy = {
+  title: 'Transaction List',
+}
+
+interface TrendsDrawerProps {
+  categoryGuid: string
+  dateRange: {
+    start: Date
+    end: Date
+  }
+  isOpen: boolean
+  onClose: () => void
+}
+
+const TrendsDrawer: React.FC<TrendsDrawerProps> = ({
+  categoryGuid,
+  dateRange,
+  isOpen,
+  onClose,
+}) => {
+  const { onEvent } = useEvent()
+  const { selectedAccountGuids: accounts } = useGlobalUiStore()
+  const { common: commonCopy } = useGlobalCopyStore()
+  const { setFilter, sortedTransactions } = useTransactionStore()
+
+  const [guid, setGuid] = React.useState('')
+  const transaction = React.useMemo(() => sortedTransactions.find((t) => t.guid === guid), [guid])
+
+  React.useEffect(() => {
+    setFilter({
+      accounts,
+      dateRange,
+      custom: (t: Transaction) =>
+        categoryGuid === '' ||
+        categoryGuid === t.category_guid ||
+        categoryGuid === t.top_level_category_guid,
+    })
+  }, [accounts, categoryGuid, dateRange])
+
+  React.useEffect(() => onEvent(ANALYTICS_EVENTS.TRENDS_VIEW_TRANSACTIONS), [])
+
+  const handleClose = () => {
+    setGuid('')
+    onClose()
+  }
+
+  return (
+    <Drawer
+      ariaLabelClose={commonCopy.close_aria}
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={copy.title}
+    >
+      {transaction && <TransactionDetails transaction={transaction} />}
+      {!transaction && <TransactionList onClick={setGuid} />}
+    </Drawer>
+  )
+}
+
+export default observer(TrendsDrawer)

package/src/trends/components/TrendsTable.tsx

@@ -0,0 +1,161 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import { DataGridPro, GridColDef, GridSortModel } from '@mui/x-data-grid-pro'
+
+import {
+  ANALYTICS_EVENTS,
+  DATE_FORMATS_INTL,
+  formatDate,
+  MonthlyCategoryTotals,
+  useEvent,
+} from '../../common'
+
+import { AmountCell } from './trendstable/AmountCell'
+import { CategoryCell } from './trendstable/CategoryCell'
+import { HeaderCell } from './trendstable/HeaderCell'
+import { amountComparator } from '../utils/TrendsData'
+
+const generateMonthHeaders = (start: Date, end: Date): string[] => {
+  const result: string[] = []
+  const current = new Date(start)
+
+  while (current <= end) {
+    const formattedDate = formatDate(current, DATE_FORMATS_INTL.MONTH)
+    result.push(formattedDate)
+    current.setMonth(current.getMonth() + 1)
+  }
+
+  return result
+}
+
+interface CategoryRow {
+  id: string
+  category: string
+  [key: string]: string | number // For dynamic month keys with string or number values
+}
+
+interface TrendsTableProps {
+  sx?: any
+  height?: number | string
+  monthlyCategoryTotals: MonthlyCategoryTotals[]
+  selectedDateRange: { start: Date; end: Date }
+  selectedCategory?: string
+  onClickRow?: (category: string) => void
+}
+
+const TrendsTable: React.FC<TrendsTableProps> = ({
+  monthlyCategoryTotals,
+  selectedDateRange,
+  selectedCategory,
+  onClickRow,
+  height = '100dvh',
+  sx = {},
+}) => {
+  const { onEvent } = useEvent()
+  const monthName = formatDate(new Date(), DATE_FORMATS_INTL.MONTH_SHORT)
+  const [sortModel, setSortModel] = React.useState<GridSortModel>([
+    { field: monthName, sort: 'desc' },
+  ])
+
+  // Generate all headers for the selected date range
+  const headerNames = React.useMemo(() => {
+    return generateMonthHeaders(selectedDateRange.start, selectedDateRange.end)
+  }, [selectedDateRange])
+
+  const columns: GridColDef[] = [
+    {
+      field: 'category',
+      headerName: 'Category',
+      minWidth: 175,
+      renderHeader: HeaderCell,
+      renderCell: CategoryCell,
+      sortable: true,
+      type: 'string',
+    },
+    ...headerNames.map(
+      (headerName) =>
+        ({
+          field: headerName,
+          headerName: headerName,
+          minWidth: 75,
+          renderHeader: HeaderCell,
+          renderCell: AmountCell,
+          align: 'right',
+          headerAlign: 'right',
+          sortable: true,
+          hideSortIcons: false,
+          type: 'number',
+          sortComparator: amountComparator,
+        }) as GridColDef,
+    ),
+  ]
+
+  const rows = React.useMemo(() => {
+    const selectedCategoryTotals = selectedCategory
+      ? monthlyCategoryTotals.filter(
+          (total) =>
+            total.category_guid === selectedCategory ||
+            total.top_level_category_guid === selectedCategory,
+        )
+      : monthlyCategoryTotals
+
+    const groupedTotals = selectedCategoryTotals.reduce(
+      (groups: Record<string, CategoryRow>, item) => {
+        const { category_guid, top_level_category_guid, month, total, year } = item
+
+        // Determine the grouping key based on selectedCategory
+        const groupKey = selectedCategory ? category_guid : top_level_category_guid
+
+        if (!groups[groupKey]) {
+          groups[groupKey] = {
+            id: groupKey,
+            category: groupKey,
+            category_guid,
+            top_level_category_guid,
+          }
+        }
+
+        // Format the month name and assign the total
+        const monthName = formatDate(new Date(year, month - 1), DATE_FORMATS_INTL.MONTH_SHORT)
+
+        // Accumulate totals for the month
+        if (!groups[groupKey][monthName]) {
+          groups[groupKey][monthName] = 0
+        }
+        groups[groupKey][monthName] = (groups[groupKey][monthName] as number) + total
+
+        return groups
+      },
+      {},
+    )
+
+    // Convert grouped totals into an array of rows
+    return Object.values(groupedTotals)
+  }, [monthlyCategoryTotals, selectedCategory])
+
+  return (
+    <Box sx={{ height: height, width: '100%', overflowX: 'auto', boxShadow: 'none', ...sx }}>
+      <DataGridPro
+        columns={columns}
+        disableColumnFilter={true}
+        disableColumnMenu={true}
+        hideFooter={true}
+        initialState={{ sorting: { sortModel } }}
+        onRowClick={(r) => {
+          onClickRow?.(r.row.category)
+          onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TABLE_ROW)
+        }}
+        onSortModelChange={(newModel) => {
+          setSortModel(newModel)
+          onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TABLE_SORT)
+        }}
+        rows={rows}
+        slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}
+        sortModel={sortModel}
+        sortingOrder={['asc', 'desc']}
+      />
+    </Box>
+  )
+}
+
+export default TrendsTable

package/src/trends/components/__tests__/SpendingChart.test.tsx

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom'
+
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { subMonths } from 'date-fns/subMonths'
+
+import { DATE_FORMATS_INTL, formatDate, GlobalDataProvider, GlobalStore } from '../../../common/'
+import SpendingChart from '../SpendingChart'
+
+describe('SpendingChart', () => {
+  let globalStore: GlobalStore
+
+  beforeAll(() => {
+    globalStore = new GlobalStore()
+    globalStore.initialize('/', '').finally()
+  })
+
+  it('renders successfully', async () => {
+    render(
+      <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
+        <SpendingChart />
+      </GlobalDataProvider>,
+    )
+
+    const shortMonthNames = [0, 1, 2, 3, 4, 5].map((n) =>
+      formatDate(subMonths(new Date(), n), DATE_FORMATS_INTL.MONTH_SHORT),
+    )
+
+    expect(screen.getAllByText(shortMonthNames[0])[1]).toBeInTheDocument()
+    expect(screen.getByText(shortMonthNames[1])).toBeInTheDocument()
+    expect(screen.getByText(shortMonthNames[2])).toBeInTheDocument()
+    expect(screen.getByText(shortMonthNames[3])).toBeInTheDocument()
+    expect(screen.getByText(shortMonthNames[4])).toBeInTheDocument()
+    expect(screen.getByText(shortMonthNames[5])).toBeInTheDocument()
+  })
+})

package/src/trends/components/trendstable/AmountCell.tsx

@@ -0,0 +1,14 @@
+import { GridCellParams } from '@mui/x-data-grid'
+import Stack from '@mui/material/Stack'
+
+import { CurrencyText } from '../../../common/components/CurrencyText'
+
+export const AmountCell = (params: GridCellParams) => {
+  const amount = params.row[params.field]
+
+  return (
+    <Stack alignItems="flex-end" tabIndex={params.tabIndex}>
+      <CurrencyText amount={amount} variant="Small" />
+    </Stack>
+  )
+}

package/src/trends/components/trendstable/CategoryCell.tsx

@@ -0,0 +1,39 @@
+import { GridCellParams } from '@mui/x-data-grid'
+import { CategoryIcon, Text } from '@kyper/mui'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+
+import { buildDynamicCopy, CategoryGuidToName, useGlobalCopyStore } from '../../../common'
+
+const CategoryIconLabel: React.FC<{
+  categoryGuid: string
+  topLevelCategoryGuid: string
+}> = ({ categoryGuid, topLevelCategoryGuid }) => {
+  const { categories: copy } = useGlobalCopyStore()
+  const categoryName = CategoryGuidToName[categoryGuid]
+
+  return (
+    <Stack alignItems="center" direction="row" justifyContent="center">
+      <Box
+        aria-label={buildDynamicCopy(copy.category_icon_label_aria, categoryName) as string}
+        role="img"
+      >
+        <CategoryIcon categoryGuid={topLevelCategoryGuid} />
+      </Box>
+      <Text sx={{ ml: 12, pb: 6 }} variant="Small">
+        {categoryName}
+      </Text>
+    </Stack>
+  )
+}
+
+export const CategoryCell = (params: GridCellParams) => {
+  return (
+    <Stack alignItems="center" direction="row" height="100%" width="100%">
+      <CategoryIconLabel
+        categoryGuid={params.row.category}
+        topLevelCategoryGuid={params.row.top_level_category_guid}
+      />
+    </Stack>
+  )
+}

package/src/trends/components/trendstable/HeaderCell.tsx

@@ -0,0 +1,8 @@
+import { Text } from '@kyper/mui'
+import { GridColumnHeaderParams } from '@mui/x-data-grid'
+
+export const HeaderCell = (params: GridColumnHeaderParams) => (
+  <Text fontWeight={600} variant="Small">
+    {params.colDef.headerName}
+  </Text>
+)

package/src/trends/index.ts

@@ -0,0 +1,2 @@
+export { default as TrendsFullWidget } from './TrendsFullWidget'
+export { default as TrendsMiniWidget } from './TrendsMiniWidget'