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

package/src/spending/components/SpendingDonut.tsx

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

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

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

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

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

package/src/spending/utils/SpendingData.ts

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