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

package/src/budgets/store/BudgetsStore.ts

@@ -0,0 +1,183 @@
+import { makeAutoObservable, reaction, runInAction } from 'mobx'
+
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+
+import { Theme } from '@mui/system'
+
+import {
+  type Budget,
+  type Category,
+  type DateRange,
+  type DetailedBudget,
+  type DetailedCategory,
+  CategoryApi,
+  CategoryGuids,
+  GlobalStore,
+} from '../../common'
+
+import { BudgetsApi } from '../api/BudgetsApi'
+import { augmentBudgets, findBudget, findSubBudget } from '../utils/BudgetUtil'
+
+export class BudgetsStore {
+  api: BudgetsApi = new BudgetsApi('/', '')
+  categoryApi: CategoryApi = new CategoryApi('/', '')
+
+  globalStore: GlobalStore
+
+  alert: string = ''
+  dateRange: DateRange = { start: startOfMonth(startOfToday()), end: endOfMonth(startOfToday()) }
+  budgets: Budget[] = []
+  selectedBudget: DetailedBudget | undefined
+  selectedSubBudget: DetailedBudget | undefined
+
+  theme = {} as Theme
+
+  constructor(globalStore: GlobalStore) {
+    this.globalStore = globalStore
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string) => {
+    this.api = new BudgetsApi(endpoint, token)
+    this.categoryApi = new CategoryApi(endpoint, token)
+
+    /** Reaction to update the selected budget/sub-budget if detailedBudgets is updated **/
+    reaction(
+      () => this.detailedBudgets,
+      (detailedBudgets) => {
+        if (detailedBudgets) {
+          const budget = this.selectedBudget
+          if (budget) {
+            this.selectedBudget = findBudget(detailedBudgets, budget.guid)
+          }
+
+          const subBudget = this.selectedSubBudget
+          if (subBudget && subBudget.parent_guid) {
+            this.selectedSubBudget = findSubBudget(
+              detailedBudgets,
+              subBudget.guid,
+              subBudget.parent_guid,
+            )
+          }
+        }
+      },
+    )
+  }
+
+  get detailedBudgets(): DetailedBudget[] {
+    return augmentBudgets(
+      this.budgets.filter(
+        (budget: Budget) =>
+          budget.category_guid !== CategoryGuids.INCOME &&
+          budget.category_guid !== CategoryGuids.TRANSFER &&
+          budget.category_guid !== CategoryGuids.INVESTMENTS,
+      ),
+      this.globalStore.categoryStore.detailedCategories,
+      this.globalStore.copyStore.copy.budgets,
+      this.theme,
+    ).sort((a, b) => {
+      if (a.percentage > b.percentage) return -1
+      if (a.percentage < b.percentage) return 1
+      return 0
+    })
+  }
+
+  get unbudgetedCategories(): DetailedCategory[] {
+    return this.globalStore.categoryStore.spendCategories.filter(
+      (category) => !this.detailedBudgets.find((budget) => budget.category_guid === category.guid),
+    )
+  }
+
+  get totalBudgeted(): number {
+    return this.detailedBudgets.reduce((total, budget) => total + budget.amount, 0)
+  }
+
+  addBudget = async (category: Category, amount: number, parentGuid: string | null = null) => {
+    try {
+      const budget = await this.api.addBudget(category, amount, parentGuid)
+      runInAction(() => {
+        this.budgets.push(budget)
+      })
+    } catch (error) {
+      console.error(`Error adding budget: ${error}`)
+    }
+  }
+
+  deleteBudget = async (guid: string) => {
+    try {
+      await this.api.deleteBudget(guid)
+
+      runInAction(() => {
+        const index = this.budgets.findIndex((budget) => budget.guid === guid)
+        if (index >= 0) {
+          this.budgets.splice(index, 1)
+        }
+      })
+    } catch (error) {
+      console.error(`Error deleting budget: ${error}`)
+    }
+  }
+
+  loadBudgets = async () => {
+    try {
+      const budgets = (await this.api.getBudgets()) as Budget[]
+
+      runInAction(() => {
+        this.budgets = budgets
+      })
+    } catch (error) {
+      console.error(`Error occurred while loading budgets: ${error}`)
+    }
+  }
+
+  setAlert = (alert: string) => (this.alert = alert)
+
+  setDateRange = (dateRange: DateRange) => (this.dateRange = dateRange)
+
+  setSelectedBudget = (budget: DetailedBudget | undefined) => (this.selectedBudget = budget)
+
+  setSelectedSubBudget = (budget: DetailedBudget | undefined) => (this.selectedSubBudget = budget)
+
+  setTheme = (theme: Theme) => (this.theme = theme)
+
+  /**
+   * Recalculate budget by using the average amount from top-level categories
+   * @param categories Detailed categories
+   */
+  recalculateBudgets = async (categories: DetailedCategory[]) => {
+    for (const category of categories) {
+      const budget = this.budgets.find((budget) => budget.category_guid === category.guid)
+      if (budget) {
+        await this.api.updateBudget({ ...budget, amount: category.totalAverageAmount })
+      } else {
+        await this.api.addBudget(category, category.totalAverageAmount)
+      }
+    }
+
+    const budgetsToDelete = this.budgets.filter(
+      (budget) => !categories.find((c) => c.guid === budget.category_guid),
+    )
+
+    for (const budgetToDelete of budgetsToDelete) {
+      await this.api.deleteBudget(budgetToDelete.guid)
+    }
+    await this.loadBudgets()
+  }
+
+  updateBudget = async (budget: Budget) => {
+    try {
+      const updatedBudget = await this.api.updateBudget(budget)
+
+      runInAction(() => {
+        const index = this.budgets.findIndex((b) => b.guid === budget.guid)
+        if (index >= 0) {
+          this.budgets[index] = updatedBudget
+        }
+      })
+    } catch (error) {
+      console.error(`Error updating budget: ${error}`)
+    }
+  }
+}

package/src/budgets/utils/BubblesSVG.ts

@@ -0,0 +1,142 @@
+import * as d3 from 'd3'
+
+import type { Simulation } from 'd3'
+
+import { type BubbleData } from '../components/BubbleChart'
+import { DetailedBudget } from '../../common'
+
+// D3 SVG Types
+export type SimulationType = Simulation<BubbleData, undefined>
+
+const PROGRESS_INDICATOR_SIZE = 5
+const MAX_BUBBLE_RADIUS = 100
+const MIN_BUBBLE_RADIUS = 25
+
+/**
+ * Enables dragging of bubbles
+ * @param simulation D3 Simulation
+ */
+export const drag = (simulation: SimulationType) => {
+  const dragStarted = (event: any) => {
+    if (!event.active) simulation.alphaTarget(0.3).restart()
+    event.subject.fx = event.subject.x
+    event.subject.fy = event.subject.y
+  }
+
+  const dragged = (event: any) => {
+    event.subject.fx = event.x
+    event.subject.fy = event.y
+  }
+
+  const dragEnded = (event: any) => {
+    if (!event.active) simulation.alphaTarget(0)
+    event.subject.fx = null
+    event.subject.fy = null
+  }
+  return d3.drag().on('start', dragStarted).on('drag', dragged).on('end', dragEnded)
+}
+
+/**
+ * Provide d values for the arc between the start and end radius based on time
+ * @param bubble Bubble data
+ */
+export const arcTween = (bubble: BubbleData) => {
+  // Percentage of the budget
+  let p = bubble.transaction_total / bubble.amount
+  if (p < 0) p = 0
+  else if (p > 1) p = 1
+
+  // End angle for the progress status
+  const angle = p * 2 * Math.PI
+  // Interpolate values between 0 and the end angle
+  const interpolate = d3.interpolate(0, angle)
+  // Progress arc starting at 0
+  const arc = d3
+    .arc<BubbleData>()
+    .cornerRadius(5)
+    .innerRadius(bubble.radius - PROGRESS_INDICATOR_SIZE * 2)
+    .outerRadius(bubble.radius - PROGRESS_INDICATOR_SIZE)
+    .startAngle(0)
+    .endAngle(0)
+
+  return (t: number) => {
+    // assign end angle to interpolated value for t
+    arc.endAngle(interpolate(t))
+    // call arc and return intermediate `d` value
+    return arc(bubble) || ''
+  }
+}
+
+/**
+ * Enable drag
+ * @param simulation D3 Simulation
+ */
+export const enableDrag = (simulation: SimulationType) => {
+  d3.selectAll('.bubble').call(drag(simulation) as any)
+}
+
+/**
+ * Update location after a resize
+ * @param simulation D3 Simulation
+ * @param height New height
+ * @param width New width
+ */
+export const resize = (simulation: SimulationType, height: number, width: number) => {
+  simulation
+    .alpha(1)
+    .restart()
+    .force(
+      'x',
+      d3
+        .forceX()
+        .x(width / 2)
+        .strength(0.01),
+    )
+    .force(
+      'y',
+      d3
+        .forceY()
+        .y(height / 2)
+        .strength(0.01),
+    )
+}
+
+export const getScale = (min: number, max: number) =>
+  d3.scaleLinear().domain([min, max]).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS])
+
+/**
+ * Simulates the chart
+ * @param budgets Budget data
+ */
+export const simulate = (budgets: DetailedBudget[]) => {
+  const maxValue = budgets.reduce((acc, budget) => {
+    const max = Math.max(budget.transaction_total, budget.amount)
+    return max > acc ? max : acc
+  }, 0)
+
+  const minValue = budgets.reduce((acc, budget) => {
+    const max = Math.max(budget.transaction_total, budget.amount)
+    return max < acc ? max : acc
+  }, maxValue)
+
+  const scale = getScale(minValue, maxValue)
+
+  const bubbles = budgets.map((budget) => {
+    const radius = scale(Math.max(budget.transaction_total, budget.amount)) || 25
+
+    return {
+      ...budget,
+      radius,
+    } as BubbleData
+  })
+
+  return d3
+    .forceSimulation<BubbleData>(bubbles)
+    .velocityDecay(0.05)
+    .force('collide', d3.forceCollide<BubbleData>((d) => d.radius + 2).strength(0.5))
+    .on('tick', () => {
+      d3.selectAll('.bubble')
+        .data(bubbles)
+        .attr('transform', (d: BubbleData) => `translate(${d.x},${d.y})`)
+    })
+}

package/src/budgets/utils/BudgetUtil.ts

@@ -0,0 +1,140 @@
+import type { Theme } from '@mui/system'
+
+import {
+  type Budget,
+  type BudgetColors,
+  type BudgetsCopy,
+  type DetailedCategory,
+  type DetailedBudget,
+  buildDynamicCopy,
+  formatCurrency,
+  getDetailedCategory,
+  getDetailedSubCategory,
+  useBudgetsStore,
+} from '../../common'
+
+export const getBudgetPercentage = (budgetAmount: number, totalAmount: number) => {
+  // No budget amount and nothing spent results in zero percent and green bubble
+  if (!budgetAmount && !totalAmount) {
+    return 0
+  }
+
+  // No budget amount and money spent results in 101 percent and red bubble
+  if (!budgetAmount && totalAmount) {
+    return 101
+  }
+
+  // Budget amount and money spent results in calculating percentage for color
+  return (totalAmount / budgetAmount) * 100
+}
+
+export const getBudgetColors = (percentage: number, theme: Theme) => {
+  const budgetColors: BudgetColors = {
+    background: theme.palette.success.main,
+    description: percentage <= 100 ? theme.palette.text.secondary : theme.palette.error.main,
+    text: theme.palette.common.white,
+    mercury: theme.palette.success.lighter,
+  }
+
+  if (percentage > 100) {
+    budgetColors.background = theme.palette.error.main
+    budgetColors.mercury = theme.palette.error.lighter
+  } else if (percentage > 80) {
+    budgetColors.background = theme.palette.warning.main
+    budgetColors.text = theme.palette.grey['900']
+    budgetColors.mercury = theme.palette.warning.lighter
+  }
+
+  return budgetColors
+}
+
+export const useGetBudgetDifference = () => {
+  const { budgets } = useBudgetsStore()
+
+  const differences = budgets.map((budget) => {
+    const currentAmount = budget.transaction_total
+    const totalAmount = budget.amount
+    return totalAmount - currentAmount
+  })
+
+  return differences.reduce((total, difference) => total + difference, 0)
+}
+
+export const augmentBudgets = (
+  budgets: Budget[],
+  categories: DetailedCategory[],
+  copy: BudgetsCopy,
+  theme: Theme,
+): DetailedBudget[] => {
+  const detailedBudgets = [] as DetailedBudget[]
+
+  // Top-level Categories
+  for (const budget of budgets) {
+    const category = getDetailedCategory(categories, budget.category_guid)
+    if (!category) continue
+
+    const spent = category.totalAmount
+
+    const percentage = getBudgetPercentage(budget.amount, spent)
+    const difference = budget.amount - spent
+
+    detailedBudgets.push({
+      ...budget,
+      budgetColors: getBudgetColors(percentage, theme),
+      category,
+      description: buildDynamicCopy(
+        difference < 0 ? copy.budget_remaining_over : copy.budget_remaining_left,
+        formatCurrency(Math.abs(difference), '0,0'),
+      ) as string,
+      percentage,
+      subBudgets: [],
+      transaction_total: spent,
+    })
+  }
+
+  // Sub categories
+  for (const budget of budgets) {
+    const category = getDetailedSubCategory(categories, budget.category_guid)
+    if (!category) continue
+
+    const spent = category.currentAmount
+
+    const parentBudget = detailedBudgets.find((b) => b.category_guid === category.parent_guid)
+    if (!parentBudget) continue
+
+    const difference = budget.amount - spent
+    const percentage = getBudgetPercentage(budget.amount, spent)
+
+    if (parentBudget) {
+      parentBudget.subBudgets.push({
+        ...budget,
+        budgetColors: getBudgetColors(percentage, theme),
+        category,
+        description: buildDynamicCopy(
+          difference < 0 ? copy.budget_remaining_over : copy.budget_remaining_left,
+          formatCurrency(Math.abs(difference), '0,0'),
+        ) as string,
+        percentage,
+        subBudgets: [],
+        transaction_total: spent,
+      })
+    }
+  }
+
+  return detailedBudgets
+}
+
+export const findBudget = (budgets: DetailedBudget[], guid: string): DetailedBudget | undefined => {
+  return budgets.find((budget) => budget.guid === guid)
+}
+
+export const findSubBudget = (
+  budgets: DetailedBudget[],
+  guid: string,
+  parentGuid: string,
+): DetailedBudget | undefined => {
+  const parent = findBudget(budgets, parentGuid)
+  if (!parent) return undefined
+
+  return findBudget(parent.subBudgets, guid)
+}

package/src/cashflow/CashflowMiniWidget.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MiniWidgetContainer, MiniWidgetProps, useGlobalCopyStore } from '../common'
+
+import CashflowWidgetContent from './components/CashflowWidgetContent'
+
+const CashflowMiniWidget: React.FC<MiniWidgetProps> = ({ onPrimaryCtaClick, sx = {} }) => {
+  const { cashflow: customCopy } = useGlobalCopyStore()
+
+  return (
+    <MiniWidgetContainer
+      className="mx-exp-cashflow-miniwidget"
+      onPrimaryCtaClick={onPrimaryCtaClick}
+      primaryCtaLabel={customCopy.primary_cta}
+      subTitle={customCopy.sub_title}
+      sx={sx}
+      title={customCopy.title}
+    >
+      <CashflowWidgetContent onAddIncomeClick={onPrimaryCtaClick} />
+    </MiniWidgetContainer>
+  )
+}
+
+export default observer(CashflowMiniWidget)