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

package/src/budgets/store/BudgetsStore.ts

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

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

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

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