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

package/src/spending/components/SpendingDonut.tsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Stack from '@mui/material/Stack'
+
+import { CategoryIcon, CategoryIconVariants, Text } from '@kyper/mui'
+
+import {
+  CategoryGuids,
+  Donut,
+  formatCurrency,
+  useGlobalCopyStore,
+  useScreenSize,
+} from '../../common'
+
+import type { SpendingData } from '../utils/SpendingData'
+import Button from '@mui/material/Button'
+import { useTheme } from '@mui/material'
+
+interface SpendingDonutProps {
+  data: SpendingData
+  isIncome?: boolean
+  onSelected: (id: string) => void
+  onViewTransactions?: (id: string) => void
+  selectedId: string
+  size?: number
+  totalLabel: string
+  variant?: 'mini' | 'full'
+}
+
+const SpendingDonut: React.FC<SpendingDonutProps> = ({
+  data,
+  isIncome = false,
+  onSelected,
+  onViewTransactions,
+  selectedId,
+  size = 150,
+  totalLabel,
+  variant = 'mini',
+}) => {
+  const { spending: spendingCopy } = useGlobalCopyStore()
+  const theme = useTheme()
+  const { isTablet } = useScreenSize()
+
+  const selectedCategory = React.useMemo(
+    () => (selectedId ? data.categoryData.find((cd) => cd.guid === selectedId) : undefined),
+    [selectedId],
+  )
+
+  const donutData = React.useMemo(() => {
+    if (data.donutData.length > 0) return data.donutData
+
+    // Empty Donut zero state
+    return [{ id: '0', color: theme.palette.border.light, value: 100 }]
+  }, [data, theme])
+
+  const handleViewTransactions = () => {
+    onViewTransactions?.(selectedId)
+  }
+
+  const iconSize = isTablet ? 32 : 48
+
+  return (
+    <Donut data={donutData} onClick={onSelected} selectedId={selectedId} size={size}>
+      <Stack alignItems="center" height="100%" justifyContent="center" width="100%">
+        <Stack alignItems="center" justifyContent="center" minHeight={size} minWidth={size}>
+          {selectedCategory && (
+            <Stack
+              alignItems="center"
+              gap={variant === 'mini' ? 0 : 8}
+              mb={variant === 'mini' ? 0 : 8}
+              mt={variant === 'mini' ? 0 : -16}
+              sx={
+                variant === 'mini'
+                  ? { gap: 0, mb: 0 }
+                  : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }
+              }
+            >
+              <CategoryIcon
+                categoryGuid={isIncome ? CategoryGuids.INCOME : selectedCategory.guid}
+                size={variant === 'mini' ? 24 : iconSize}
+                variant={CategoryIconVariants.Transparent}
+              />
+              <Text color="secondary" noWrap={true} variant={variant === 'mini' ? 'Tiny' : 'Body'}>
+                {selectedCategory ? selectedCategory.name : totalLabel}
+              </Text>
+            </Stack>
+          )}
+
+          {!selectedCategory && variant === 'full' && (
+            <Text bold={true} color="secondary" sx={{ mb: { xs: 4, xl: 8 } }}>
+              {totalLabel}
+            </Text>
+          )}
+
+          <Text variant={variant === 'mini' ? 'H2' : 'H1'}>
+            {selectedCategory
+              ? formatCurrency(selectedCategory.amount, '0,0')
+              : formatCurrency(data.totalAmount, '0,0')}
+          </Text>
+
+          {!selectedCategory && variant === 'mini' && (
+            <Text color="secondary" noWrap={true} variant="Tiny">
+              {totalLabel}
+            </Text>
+          )}
+
+          {variant === 'full' && (
+            <Button
+              aria-label={`View ${selectedCategory?.name || ''} Transactions`}
+              disabled={data.categoryData.length === 0}
+              onClick={handleViewTransactions}
+              sx={{ mt: { xl: 4, xs: 0 }, zIndex: 1 }}
+              variant="text"
+            >
+              {spendingCopy.view_transactions}
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </Donut>
+  )
+}
+
+export default observer(SpendingDonut)

package/src/spending/components/SpendingLegend.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import type { SpendingData } from '../utils/SpendingData'
+
+interface SpendingLegendProps {
+  data: SpendingData
+  onSelected: (id: string) => void
+  selectedId: string
+}
+
+const SpendingLegend: React.FC<SpendingLegendProps> = ({ data, onSelected, selectedId }) => {
+  return (
+    <Stack gap={8} height="100%" justifyContent="center" my="auto">
+      {data.categoryData.map((item) => (
+        <Stack
+          alignItems="center"
+          aria-label={item.name}
+          aria-selected={item.guid === selectedId}
+          direction="row"
+          gap={8}
+          key={item.guid}
+          onClick={() => onSelected(item.guid)}
+          role="button"
+          sx={{ cursor: 'pointer' }}
+        >
+          <Box borderRadius={4} height={8} sx={{ backgroundColor: item.color }} width={8} />
+          <Text bold={item.guid === selectedId} variant="XSmall">
+            {item.name}
+          </Text>
+        </Stack>
+      ))}
+    </Stack>
+  )
+}
+
+export default SpendingLegend

package/src/spending/components/SpendingList.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Collapse from '@mui/material/Collapse'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import { formatCurrency, useGlobalCopyStore } from '../../common'
+import { SpendingData } from '../utils/SpendingData'
+import ListItemButton from '@mui/material/ListItemButton'
+
+interface SpendingListProps {
+  data: SpendingData
+  onSelected: (id: string) => void
+  selectedId?: string
+  title: string
+}
+
+const SpendingList: React.FC<SpendingListProps> = ({
+  data,
+  onSelected,
+  selectedId = '',
+  title,
+}) => {
+  const { spending: spendingCopy } = useGlobalCopyStore()
+  const selectedCategory = data.categoryData.find((parent) => parent.guid === selectedId)
+
+  return (
+    <Stack direction="column" justifyContent="center" maxWidth={400} minWidth={275} width="100%">
+      <Text bold={true} sx={{ py: 12 }}>
+        {`${title} ${spendingCopy.by_category}`}
+      </Text>
+
+      <Divider aria-hidden="true" />
+
+      <List>
+        {data.categoryData.map((item) => (
+          <React.Fragment key={item.guid}>
+            <ListItem
+              disableGutters={true}
+              disablePadding={true}
+              sx={{
+                minHeight: 44,
+              }}
+            >
+              <ListItemButton
+                aria-expanded={Boolean(selectedCategory?.guid === item.guid)}
+                onClick={() => onSelected(item.guid)}
+                sx={{ minHeight: 44, px: 8, py: 0 }}
+              >
+                <Box
+                  borderRadius={4}
+                  flexShrink={0}
+                  height={8}
+                  sx={{ backgroundColor: item.color, mr: 8 }}
+                  width={8}
+                />
+                <Stack
+                  alignItems="center"
+                  direction="row"
+                  justifyContent="space-between"
+                  width="100%"
+                >
+                  <Text bold={selectedId === item.guid}>{item.name}</Text>
+                  <Text bold={selectedId === item.guid} variant="Body">
+                    {formatCurrency(item.amount, '0,0')}
+                  </Text>
+                </Stack>
+              </ListItemButton>
+            </ListItem>
+
+            <Divider />
+
+            {item.categoryTotals && item.categoryTotals.length > 0 && (
+              <Collapse in={Boolean(selectedCategory?.guid === item.guid)} unmountOnExit={true}>
+                <List>
+                  {selectedCategory?.categoryTotals?.map((subItem) => (
+                    <ListItem
+                      key={subItem.guid}
+                      sx={{
+                        pl: 24,
+                        pr: 8,
+                        py: 0,
+                      }}
+                    >
+                      <Stack direction="row" justifyContent="space-between" width="100%">
+                        <Text>{subItem.name} </Text>
+                        <Text>{formatCurrency(subItem.amount, '0,0')}</Text>
+                      </Stack>
+                    </ListItem>
+                  ))}
+                  <Divider />
+                </List>
+              </Collapse>
+            )}
+          </React.Fragment>
+        ))}
+      </List>
+
+      <Text bold={true} sx={{ mt: 12, pr: 8, textAlign: 'right' }}>
+        {`${spendingCopy.total}: ${formatCurrency(data.totalAmount, '0,0')}`}
+      </Text>
+    </Stack>
+  )
+}
+
+export default observer(SpendingList)

package/src/spending/components/SpendingTabLabel.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import { formatCurrency } from '../../common'
+
+interface SpendingTabLabelProps {
+  amount: number
+  label: string
+}
+
+const SpendingTabLabel: React.FC<SpendingTabLabelProps> = ({ amount, label }) => {
+  return (
+    <Stack direction="column">
+      <Text bold={true} sx={{ textTransform: 'none' }} variant="Body">
+        {label}
+      </Text>
+      <Text variant="XSmall">{formatCurrency(amount, '0,0')}</Text>
+    </Stack>
+  )
+}
+
+export default SpendingTabLabel

package/src/spending/index.ts

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

package/src/spending/utils/SpendingData.ts

@@ -0,0 +1,196 @@
+import { Category, CategoryColors, CategoryGuids, DateRangeCategoryTotals } from '../../common'
+import { DonutData } from '../../common/components/charts/Donut'
+
+const TOP_CATEGORY_LENGTH = 5
+
+export interface CategoryTotal {
+  guid: string
+  name: string
+  color: string
+  categoryTotals?: CategoryTotal[]
+  amount: number
+}
+
+export interface SpendingData {
+  categoryData: CategoryTotal[]
+  donutData: DonutData[]
+  totalAmount: number
+}
+
+/**
+ * Rolls all categories up into parent categories and return an array of CategoryTotal items.
+ * @param categories - Array of all categories
+ * @param totals - And array of type DateRangeCategoryTotals
+ */
+const getTotalsByParentCategory = (
+  categories: Category[],
+  totals: DateRangeCategoryTotals[],
+): CategoryTotal[] => {
+  // Iterate over the category data from BE and roll up all categories into parent categories
+  // acc is the accumulated category totals of type CategoryTotal that is initialized as an empty []
+  // curr is the current DateRangeCategoryTotal
+  return totals.reduce((acc, curr) => {
+    if (curr.total > 0) {
+      // Find category and if it doesn't exist, return acc
+      const category = categories.find((c) => c.guid === curr.category_guid)
+      if (!category) return acc
+
+      // Find parent category and if it doesn't exist, return acc
+      const parentGuid = category.parent_guid ?? category.guid
+      const parentCategory = categories.find((c) => c.guid === parentGuid)
+      if (!parentCategory) return acc
+
+      const categoryTotal = {
+        guid: category.guid,
+        name: category.guid === parentGuid ? `General ${category.name}` : category.name,
+        color: CategoryColors[parentCategory.guid],
+        amount: curr.total,
+      }
+
+      // If parent category has already been added to acc then find it and add the current total,
+      // otherwise add the parent category to acc.
+      const parentCategoryTotal = acc.find((ct) => ct.guid === parentGuid)
+      if (parentCategoryTotal) {
+        parentCategoryTotal.amount += curr.total
+        parentCategoryTotal.categoryTotals?.push(categoryTotal)
+      } else {
+        acc.push({
+          guid: parentGuid,
+          name: parentCategory.name,
+          color: CategoryColors[parentCategory.guid],
+          categoryTotals: [categoryTotal],
+          amount: curr.total,
+        })
+      }
+    }
+
+    return acc
+  }, [] as CategoryTotal[])
+}
+
+/**
+ * Returns an object of type SpendingData containing a subset of category totals related to spending
+ * Excludes Income and Transfers
+ *
+ * @param categories - Array of all categories
+ * @param totals - And array of type DateRangeCategoryTotals
+ */
+export const getSpendingData = (
+  categories: Category[],
+  totals: DateRangeCategoryTotals[],
+): SpendingData => {
+  const parentCategoryTotals = getTotalsByParentCategory(categories, totals)
+
+  // Filter out Income and Transfers from spending totals
+  // Sort in decending order by amount
+  const spendingTotals = parentCategoryTotals
+    .filter((ct) => ct.guid !== CategoryGuids.INCOME && ct.guid !== CategoryGuids.TRANSFER)
+    .sort((cat1, cat2) => cat2.amount - cat1.amount)
+
+  // Calculate the total spend
+  const totalAmount = spendingTotals.reduce(
+    (acc: number, total: CategoryTotal) => acc + total.amount,
+    0,
+  )
+
+  // Find the number of top categories to include
+  const length =
+    spendingTotals.length > TOP_CATEGORY_LENGTH ? TOP_CATEGORY_LENGTH : spendingTotals.length
+
+  // Only include the top categories
+  const categoryData = spendingTotals.slice(0, length)
+
+  // Map the category data to donut data
+  const donutData = categoryData.map((categoryTotal) => ({
+    id: categoryTotal.guid,
+    color: categoryTotal.color,
+    label: categoryTotal.name,
+    value: (categoryTotal.amount / totalAmount) * 100,
+  }))
+
+  // If there additional categories outside of the top categories, combine them into an Other category
+  if (spendingTotals.length > 5) {
+    const otherCategories = spendingTotals.slice(TOP_CATEGORY_LENGTH, parentCategoryTotals.length)
+    const otherTotal = otherCategories.reduce(
+      (acc: number, total: CategoryTotal) => acc + total.amount,
+      0,
+    )
+    categoryData.push({
+      guid: 'other',
+      color: '#ACB0B3', // TODO: Get from theme
+      name: 'Other', // TODO: Needs localization
+      categoryTotals: otherCategories,
+      amount: otherTotal,
+    })
+
+    donutData.push({
+      id: 'other',
+      color: '#ACB0B3', // TODO: Get from theme,
+      label: 'Other', // TODO: Needs localization
+      value: (otherTotal / totalAmount) * 100,
+    })
+  }
+
+  // Return an object of type SpendingData
+  return {
+    categoryData,
+    donutData,
+    totalAmount,
+  }
+}
+
+/**
+ * Returns an object of type SpendingData containing a subset of category totals related to income
+ * Only includes Income subcategories
+ *
+ * @param categories - Array of all categories
+ * @param monthlyTotals - And array of type DateRangeCategoryTotals
+ * @param colors - An array of color strings to use for income colors
+ */
+export const getIncomeData = (
+  categories: Category[],
+  monthlyTotals: DateRangeCategoryTotals[],
+  colors: string[],
+): SpendingData => {
+  // Get all income subcategories
+  const incomeCategories = categories.filter(
+    (category) => category.parent_guid === CategoryGuids.INCOME,
+  )
+
+  // Filter, sort & map DateRangeCategoryTotals to CategoryTotal objects
+  // The filter return only subcategories with a parent category of Income
+  // The sort is in acending order due to amounts being negative
+  const incomeTotals: CategoryTotal[] = monthlyTotals
+    .filter((total) => incomeCategories.some((category) => category.guid === total.category_guid))
+    .sort((total1, total2) => total1.total - total2.total)
+    .map((total, index) => {
+      return {
+        guid: total.category_guid,
+        name: categories.find((cat) => cat.guid === total.category_guid)?.name,
+        color: colors[index],
+        categoryTotals: [],
+        amount: Math.abs(total.total),
+      }
+    }) as CategoryTotal[]
+
+  // Calculates the total income amount
+  const totalAmount = incomeTotals.reduce(
+    (acc: number, total: CategoryTotal) => acc + total.amount,
+    0,
+  )
+
+  // Maps the income totals to donut data
+  const donutData = incomeTotals.map((incomeTotal) => ({
+    id: incomeTotal.guid,
+    color: incomeTotal.color,
+    label: incomeTotal.name,
+    value: (incomeTotal.amount / totalAmount) * 100,
+  }))
+
+  // Return an object of type SpendingData
+  return {
+    categoryData: incomeTotals,
+    donutData,
+    totalAmount,
+  }
+}