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

package/src/trends/mocks.ts

@@ -0,0 +1,423 @@
+export const mockStackedDatasetsSequential = [
+  {
+    top_level_category_guid: 'category1',
+    category_guid: 'category1-sub1',
+    category_name: 'Category 1',
+    category_color: '#FF0000',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 100 },
+      { x: new Date(2024, 1, 1), y: 150 },
+      { x: new Date(2024, 2, 1), y: 200 },
+      { x: new Date(2024, 3, 1), y: 250 },
+      { x: new Date(2024, 4, 1), y: 300 },
+      { x: new Date(2024, 5, 1), y: 350 },
+      { x: new Date(2024, 6, 1), y: 400 },
+      { x: new Date(2024, 7, 1), y: 450 },
+      { x: new Date(2024, 8, 1), y: 500 },
+      { x: new Date(2024, 9, 1), y: 550 },
+      { x: new Date(2024, 10, 1), y: 600 },
+      { x: new Date(2024, 11, 1), y: 650 },
+    ],
+  },
+  {
+    top_level_category_guid: 'category2',
+    category_guid: 'category2-sub1',
+    category_name: 'Category 2',
+    category_color: '#00FF00',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 200 },
+      { x: new Date(2024, 1, 1), y: 250 },
+      { x: new Date(2024, 2, 1), y: 300 },
+      { x: new Date(2024, 3, 1), y: 350 },
+      { x: new Date(2024, 4, 1), y: 400 },
+      { x: new Date(2024, 5, 1), y: 450 },
+      { x: new Date(2024, 6, 1), y: 500 },
+      { x: new Date(2024, 7, 1), y: 550 },
+      { x: new Date(2024, 8, 1), y: 600 },
+      { x: new Date(2024, 9, 1), y: 650 },
+      { x: new Date(2024, 10, 1), y: 700 },
+      { x: new Date(2024, 11, 1), y: 750 },
+    ],
+  },
+  {
+    top_level_category_guid: 'category3',
+    category_guid: 'category3-sub1',
+    category_name: 'Category 3',
+    category_color: '#0000FF',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 300 },
+      { x: new Date(2024, 1, 1), y: 350 },
+      { x: new Date(2024, 2, 1), y: 400 },
+      { x: new Date(2024, 3, 1), y: 450 },
+      { x: new Date(2024, 4, 1), y: 500 },
+      { x: new Date(2024, 5, 1), y: 550 },
+      { x: new Date(2024, 6, 1), y: 600 },
+      { x: new Date(2024, 7, 1), y: 650 },
+      { x: new Date(2024, 8, 1), y: 700 },
+      { x: new Date(2024, 9, 1), y: 750 },
+      { x: new Date(2024, 10, 1), y: 800 },
+      { x: new Date(2024, 11, 1), y: 850 },
+    ],
+  },
+]
+
+export const mockStackedDatasetsVarying = [
+  {
+    top_level_category_guid: 'category1',
+    category_guid: 'category1-sub1',
+    category_name: 'Category 1',
+    category_color: '#FF0000',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 100 },
+      { x: new Date(2024, 1, 1), y: 150 },
+      { x: new Date(2024, 2, 1), y: 200 },
+      { x: new Date(2024, 3, 1), y: 0 }, // Zero filled missing April
+      { x: new Date(2024, 4, 1), y: 300 },
+      { x: new Date(2024, 5, 1), y: 350 },
+      { x: new Date(2024, 6, 1), y: 0 }, // Zero filled missing July
+      { x: new Date(2024, 7, 1), y: 450 },
+      { x: new Date(2024, 8, 1), y: 0 }, // Zero filled missing September
+      { x: new Date(2024, 9, 1), y: 550 },
+      { x: new Date(2024, 10, 1), y: 0 }, // Zero filled missing November
+      { x: new Date(2024, 11, 1), y: 650 },
+    ],
+  },
+  {
+    top_level_category_guid: 'category2',
+    category_guid: 'category2-sub1',
+    category_name: 'Category 2',
+    category_color: '#00FF00',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 0 }, // Zero filled missing January
+      { x: new Date(2024, 1, 1), y: 250 },
+      { x: new Date(2024, 2, 1), y: 300 },
+      { x: new Date(2024, 3, 1), y: 350 },
+      { x: new Date(2024, 4, 1), y: 0 }, // Zero filled missing May
+      { x: new Date(2024, 5, 1), y: 450 },
+      { x: new Date(2024, 6, 1), y: 500 },
+      { x: new Date(2024, 7, 1), y: 0 }, // Zero filled missing August
+      { x: new Date(2024, 8, 1), y: 600 },
+      { x: new Date(2024, 9, 1), y: 0 }, // Zero filled missing October
+      { x: new Date(2024, 10, 1), y: 700 },
+      { x: new Date(2024, 11, 1), y: 0 }, // Zero filled missing December
+    ],
+  },
+  {
+    top_level_category_guid: 'category3',
+    category_guid: 'category3-sub1',
+    category_name: 'Category 3',
+    category_color: '#0000FF',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 300 },
+      { x: new Date(2024, 1, 1), y: 0 }, // Zero filled missing February
+      { x: new Date(2024, 2, 1), y: 400 },
+      { x: new Date(2024, 3, 1), y: 0 }, // Zero filled missing April
+      { x: new Date(2024, 4, 1), y: 500 },
+      { x: new Date(2024, 5, 1), y: 0 }, // Zero filled missing July
+      { x: new Date(2024, 6, 1), y: 600 },
+      { x: new Date(2024, 7, 1), y: 0 }, // Zero filled missing September
+      { x: new Date(2024, 8, 1), y: 700 },
+      { x: new Date(2024, 9, 1), y: 0 }, // Zero filled missing November
+      { x: new Date(2024, 10, 1), y: 800 },
+      { x: new Date(2024, 11, 1), y: 0 }, // Zero filled missing December
+    ],
+  },
+]
+
+export const mockStackedDatasetsOverlapping = [
+  {
+    top_level_category_guid: 'category1',
+    category_guid: 'category1-sub1',
+    category_name: 'Category 1',
+    category_color: '#FF0000',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 300 },
+      { x: new Date(2024, 1, 1), y: 350 },
+      { x: new Date(2024, 2, 1), y: 400 },
+      { x: new Date(2024, 3, 1), y: 200 }, // Overlapping
+      { x: new Date(2024, 4, 1), y: 250 },
+      { x: new Date(2024, 5, 1), y: 500 }, // Overlapping
+      { x: new Date(2024, 6, 1), y: 550 },
+      { x: new Date(2024, 7, 1), y: 600 },
+      { x: new Date(2024, 8, 1), y: 700 },
+      { x: new Date(2024, 9, 1), y: 750 },
+      { x: new Date(2024, 10, 1), y: 800 },
+      { x: new Date(2024, 11, 1), y: 850 },
+    ],
+  },
+  {
+    top_level_category_guid: 'category2',
+    category_guid: 'category2-sub1',
+    category_name: 'Category 2',
+    category_color: '#00FF00',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 200 },
+      { x: new Date(2024, 1, 1), y: 250 },
+      { x: new Date(2024, 2, 1), y: 450 }, // Overlapping
+      { x: new Date(2024, 3, 1), y: 400 },
+      { x: new Date(2024, 4, 1), y: 500 },
+      { x: new Date(2024, 5, 1), y: 300 }, // Overlapping
+      { x: new Date(2024, 6, 1), y: 650 },
+      { x: new Date(2024, 7, 1), y: 700 },
+      { x: new Date(2024, 8, 1), y: 750 },
+      { x: new Date(2024, 9, 1), y: 800 },
+      { x: new Date(2024, 10, 1), y: 850 },
+      { x: new Date(2024, 11, 1), y: 900 },
+    ],
+  },
+  {
+    top_level_category_guid: 'category3',
+    category_guid: 'category3-sub1',
+    category_name: 'Category 3',
+    category_color: '#0000FF',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 100 },
+      { x: new Date(2024, 1, 1), y: 150 },
+      { x: new Date(2024, 2, 1), y: 200 },
+      { x: new Date(2024, 3, 1), y: 450 }, // Overlapping
+      { x: new Date(2024, 4, 1), y: 600 },
+      { x: new Date(2024, 5, 1), y: 700 },
+      { x: new Date(2024, 6, 1), y: 250 }, // Overlapping
+      { x: new Date(2024, 7, 1), y: 800 },
+      { x: new Date(2024, 8, 1), y: 850 },
+      { x: new Date(2024, 9, 1), y: 900 },
+      { x: new Date(2024, 10, 1), y: 950 },
+      { x: new Date(2024, 11, 1), y: 1000 },
+    ],
+  },
+]
+
+export const mockStackedDatasetsRepeatValues = [
+  {
+    top_level_category_guid: 'category1',
+    category_guid: 'category1-sub1',
+    category_name: 'Category 1',
+    category_color: '#FF0000',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 300 },
+      { x: new Date(2024, 1, 1), y: 300 }, // Consecutive same y-value (January/February)
+      { x: new Date(2024, 2, 1), y: 350 },
+      { x: new Date(2024, 3, 1), y: 400 },
+      { x: new Date(2024, 4, 1), y: 350 }, // Non-consecutive same y-value (March/May)
+      { x: new Date(2024, 5, 1), y: 450 },
+      { x: new Date(2024, 6, 1), y: 500 },
+      { x: new Date(2024, 7, 1), y: 500 }, // Consecutive same y-value (July/August)
+      { x: new Date(2024, 8, 1), y: 550 },
+      { x: new Date(2024, 9, 1), y: 600 },
+      { x: new Date(2024, 10, 1), y: 550 }, // Non-consecutive same y-value (October/November)
+      { x: new Date(2024, 11, 1), y: 650 },
+    ],
+  },
+  {
+    top_level_category_guid: 'category2',
+    category_guid: 'category2-sub1',
+    category_name: 'Category 2',
+    category_color: '#00FF00',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 250 },
+      { x: new Date(2024, 1, 1), y: 300 },
+      { x: new Date(2024, 2, 1), y: 300 }, // Consecutive same y-value (February/March)
+      { x: new Date(2024, 3, 1), y: 350 },
+      { x: new Date(2024, 4, 1), y: 400 },
+      { x: new Date(2024, 5, 1), y: 400 }, // Consecutive same y-value (May/June)
+      { x: new Date(2024, 6, 1), y: 450 },
+      { x: new Date(2024, 7, 1), y: 500 },
+      { x: new Date(2024, 8, 1), y: 500 }, // Non-consecutive same y-value (August/September)
+      { x: new Date(2024, 9, 1), y: 550 },
+      { x: new Date(2024, 10, 1), y: 600 },
+      { x: new Date(2024, 11, 1), y: 550 }, // Non-consecutive same y-value (October/December)
+    ],
+  },
+  {
+    top_level_category_guid: 'category3',
+    category_guid: 'category3-sub1',
+    category_name: 'Category 3',
+    category_color: '#0000FF',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 100 },
+      { x: new Date(2024, 1, 1), y: 150 },
+      { x: new Date(2024, 2, 1), y: 150 }, // Consecutive same y-value (February/March)
+      { x: new Date(2024, 3, 1), y: 200 },
+      { x: new Date(2024, 4, 1), y: 250 },
+      { x: new Date(2024, 5, 1), y: 250 }, // Consecutive same y-value (May/June)
+      { x: new Date(2024, 6, 1), y: 300 },
+      { x: new Date(2024, 7, 1), y: 350 },
+      { x: new Date(2024, 8, 1), y: 350 }, // Non-consecutive same y-value (July/September)
+      { x: new Date(2024, 9, 1), y: 400 },
+      { x: new Date(2024, 10, 1), y: 450 },
+      { x: new Date(2024, 11, 1), y: 450 }, // Non-consecutive same y-value (October/December)
+    ],
+  },
+]
+
+export const mockUnstackedDatasetsSequential = [
+  {
+    top_level_category_guid: 'income1',
+    category_guid: 'income1-sub1',
+    category_name: 'Income 1',
+    category_color: '#FFA500',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 500 },
+      { x: new Date(2024, 1, 1), y: 550 },
+      { x: new Date(2024, 2, 1), y: 600 },
+      { x: new Date(2024, 3, 1), y: 650 },
+      { x: new Date(2024, 4, 1), y: 700 },
+      { x: new Date(2024, 5, 1), y: 750 },
+      { x: new Date(2024, 6, 1), y: 800 },
+      { x: new Date(2024, 7, 1), y: 850 },
+      { x: new Date(2024, 8, 1), y: 900 },
+      { x: new Date(2024, 9, 1), y: 950 },
+      { x: new Date(2024, 10, 1), y: 1000 },
+      { x: new Date(2024, 11, 1), y: 1050 },
+    ],
+  },
+  {
+    top_level_category_guid: 'income2',
+    category_guid: 'income2-sub1',
+    category_name: 'Income 2',
+    category_color: '#800080',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 400 },
+      { x: new Date(2024, 1, 1), y: 450 },
+      { x: new Date(2024, 2, 1), y: 500 },
+      { x: new Date(2024, 3, 1), y: 550 },
+      { x: new Date(2024, 4, 1), y: 600 },
+      { x: new Date(2024, 5, 1), y: 650 },
+      { x: new Date(2024, 6, 1), y: 700 },
+      { x: new Date(2024, 7, 1), y: 750 },
+      { x: new Date(2024, 8, 1), y: 800 },
+      { x: new Date(2024, 9, 1), y: 850 },
+      { x: new Date(2024, 10, 1), y: 900 },
+      { x: new Date(2024, 11, 1), y: 950 },
+    ],
+  },
+]
+
+export const mockUnstackedDatasetsVarying = [
+  {
+    top_level_category_guid: 'income1',
+    category_guid: 'income1-sub1',
+    category_name: 'Income 1',
+    category_color: '#FFA500',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 500 },
+      { x: new Date(2024, 1, 1), y: 0 }, // Zero filled missing February
+      { x: new Date(2024, 2, 1), y: 600 },
+      { x: new Date(2024, 3, 1), y: 650 },
+      { x: new Date(2024, 4, 1), y: 0 }, // Zero filled missing May
+      { x: new Date(2024, 5, 1), y: 750 },
+      { x: new Date(2024, 6, 1), y: 800 },
+      { x: new Date(2024, 7, 1), y: 0 }, // Zero filled missing August
+      { x: new Date(2024, 8, 1), y: 0 }, // Zero filled missing September
+      { x: new Date(2024, 9, 1), y: 950 },
+      { x: new Date(2024, 10, 1), y: 0 }, // Zero filled missing November
+      { x: new Date(2024, 11, 1), y: 1050 },
+    ],
+  },
+  {
+    top_level_category_guid: 'income2',
+    category_guid: 'income2-sub1',
+    category_name: 'Income 2',
+    category_color: '#800080',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 0 }, // Zero filled missing January
+      { x: new Date(2024, 1, 1), y: 450 },
+      { x: new Date(2024, 2, 1), y: 500 },
+      { x: new Date(2024, 3, 1), y: 550 },
+      { x: new Date(2024, 4, 1), y: 0 }, // Zero filled missing May
+      { x: new Date(2024, 5, 1), y: 650 },
+      { x: new Date(2024, 6, 1), y: 700 },
+      { x: new Date(2024, 7, 1), y: 0 }, // Zero filled missing August
+      { x: new Date(2024, 8, 1), y: 0 }, // Zero filled missing September
+      { x: new Date(2024, 9, 1), y: 850 },
+      { x: new Date(2024, 10, 1), y: 0 }, // Zero filled missing November
+      { x: new Date(2024, 11, 1), y: 950 },
+    ],
+  },
+]
+
+export const mockUnstackedDatasetsOverlapping = [
+  {
+    top_level_category_guid: 'income1',
+    category_guid: 'income1-sub1',
+    category_name: 'Income 1',
+    category_color: '#FFA500',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 500 },
+      { x: new Date(2024, 1, 1), y: 600 },
+      { x: new Date(2024, 2, 1), y: 550 }, // Overlapping
+      { x: new Date(2024, 3, 1), y: 650 },
+      { x: new Date(2024, 4, 1), y: 750 },
+      { x: new Date(2024, 5, 1), y: 800 },
+      { x: new Date(2024, 6, 1), y: 900 },
+      { x: new Date(2024, 7, 1), y: 700 }, // Overlapping
+      { x: new Date(2024, 8, 1), y: 1000 },
+      { x: new Date(2024, 9, 1), y: 1050 },
+      { x: new Date(2024, 10, 1), y: 1100 },
+      { x: new Date(2024, 11, 1), y: 1200 },
+    ],
+  },
+  {
+    top_level_category_guid: 'income2',
+    category_guid: 'income2-sub1',
+    category_name: 'Income 2',
+    category_color: '#800080',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 400 },
+      { x: new Date(2024, 1, 1), y: 500 },
+      { x: new Date(2024, 2, 1), y: 450 }, // Overlapping
+      { x: new Date(2024, 3, 1), y: 550 },
+      { x: new Date(2024, 4, 1), y: 650 },
+      { x: new Date(2024, 5, 1), y: 600 }, // Overlapping
+      { x: new Date(2024, 6, 1), y: 800 },
+      { x: new Date(2024, 7, 1), y: 900 },
+      { x: new Date(2024, 8, 1), y: 850 }, // Overlapping
+      { x: new Date(2024, 9, 1), y: 1000 },
+      { x: new Date(2024, 10, 1), y: 1100 },
+      { x: new Date(2024, 11, 1), y: 1150 },
+    ],
+  },
+]
+
+export const mockUnstackedDatasetsRepeatValues = [
+  {
+    top_level_category_guid: 'income1',
+    category_guid: 'income1-sub1',
+    category_name: 'Income 1',
+    category_color: '#FFA500',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 500 },
+      { x: new Date(2024, 1, 1), y: 500 }, // Consecutive same y-value (January/February)
+      { x: new Date(2024, 2, 1), y: 550 },
+      { x: new Date(2024, 3, 1), y: 600 },
+      { x: new Date(2024, 4, 1), y: 550 }, // Non-consecutive same y-value (March/May)
+      { x: new Date(2024, 5, 1), y: 650 },
+      { x: new Date(2024, 6, 1), y: 700 },
+      { x: new Date(2024, 7, 1), y: 700 }, // Consecutive same y-value (July/August)
+      { x: new Date(2024, 8, 1), y: 750 },
+      { x: new Date(2024, 9, 1), y: 800 },
+      { x: new Date(2024, 10, 1), y: 750 }, // Non-consecutive same y-value (October/November)
+      { x: new Date(2024, 11, 1), y: 850 },
+    ],
+  },
+  {
+    top_level_category_guid: 'income2',
+    category_guid: 'income2-sub1',
+    category_name: 'Income 2',
+    category_color: '#800080',
+    dataset: [
+      { x: new Date(2024, 0, 1), y: 400 },
+      { x: new Date(2024, 1, 1), y: 450 },
+      { x: new Date(2024, 2, 1), y: 450 }, // Consecutive same y-value (February/March)
+      { x: new Date(2024, 3, 1), y: 500 },
+      { x: new Date(2024, 4, 1), y: 550 },
+      { x: new Date(2024, 5, 1), y: 550 }, // Consecutive same y-value (May/June)
+      { x: new Date(2024, 6, 1), y: 600 },
+      { x: new Date(2024, 7, 1), y: 650 },
+      { x: new Date(2024, 8, 1), y: 650 }, // Non-consecutive same y-value (August/September)
+      { x: new Date(2024, 9, 1), y: 700 },
+      { x: new Date(2024, 10, 1), y: 750 },
+      { x: new Date(2024, 11, 1), y: 750 }, // Non-consecutive same y-value (November/December)
+    ],
+  },
+]

package/src/trends/utils/SpendingData.ts

@@ -0,0 +1,76 @@
+import { addMonths } from 'date-fns/addMonths'
+import { isBefore } from 'date-fns/isBefore'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { subMonths } from 'date-fns/subMonths'
+import { endOfMonth } from 'date-fns/endOfMonth'
+
+import { CategoryGuids, DATE_FORMATS_INTL, formatDate, MonthlyCategoryTotals } from '../../common'
+import { isIncome, isPayment, isSpend } from './shared'
+
+type DateRange = {
+  start: Date
+  end: Date
+}
+
+export const getMonthlyTotals = (totals: MonthlyCategoryTotals[], range?: DateRange) => {
+  const data: { x: string; y: number }[] = []
+  let startDate = startOfMonth(range?.start ?? subMonths(new Date(), 5))
+  const endDate = range?.end ?? new Date()
+
+  while (isBefore(startDate, endDate)) {
+    // Add total amount for each month
+    data.push({
+      x: formatDate(startDate, DATE_FORMATS_INTL.MONTH_SHORT),
+      y: totals
+        .filter((t) => t.year === startDate.getFullYear() && t.month === startDate.getMonth() + 1)
+        .reduce((total, item) => total + item.total, 0),
+    })
+    startDate = addMonths(startDate, 1)
+  }
+
+  return data
+}
+
+export const getIncomeTotals = (totals: MonthlyCategoryTotals[], range?: DateRange) => {
+  const incomeTotals = totals.filter(isIncome)
+  // Income totals are negative values, but we want to display them as positive
+  return getMonthlyTotals(incomeTotals, range).map((t) => ({ ...t, y: Math.abs(t.y) }))
+}
+
+export const getPaymentTotals = (totals: MonthlyCategoryTotals[], range?: DateRange) => {
+  const paymentTotals = totals.filter(isPayment)
+  // Payment totals are negative values, but we want to display them as positive
+  return getMonthlyTotals(paymentTotals, range).map((t) => ({ ...t, y: Math.abs(t.y) }))
+}
+
+export const getSpendingTotals = (totals: MonthlyCategoryTotals[], range?: DateRange) => {
+  const spendingTotals = totals.filter(isSpend)
+  return getMonthlyTotals(spendingTotals, range)
+}
+
+export const getSpendingData = (totals: MonthlyCategoryTotals[]) => {
+  const data: { x: string; y: number }[] = []
+
+  // Filter out income and transfers
+  const filteredTotals = totals.filter(
+    (t) =>
+      t.top_level_category_guid !== CategoryGuids.INCOME &&
+      t.top_level_category_guid !== CategoryGuids.TRANSFER &&
+      t.total > 0,
+  )
+
+  let startDate = startOfMonth(subMonths(new Date(), 5))
+  const endDate = endOfMonth(new Date())
+  while (isBefore(startDate, endDate)) {
+    // Add total amount for each month
+    data.push({
+      x: formatDate(startDate, DATE_FORMATS_INTL.MONTH_SHORT),
+      y: filteredTotals
+        .filter((t) => t.year === startDate.getFullYear() && t.month === startDate.getMonth() + 1)
+        .reduce((total, item) => total + item.total, 0),
+    })
+    startDate = addMonths(startDate, 1)
+  }
+
+  return data
+}

package/src/trends/utils/TrendsData.ts

@@ -0,0 +1,127 @@
+import { GridComparatorFn } from '@mui/x-data-grid-pro'
+
+import { CategoryColors, CategoryGuidToName, MonthlyCategoryTotals } from '../../common'
+
+type DataPoint = { x: Date; y: number }
+type Dataset = DataPoint[]
+
+type CategoryTotalData = {
+  top_level_category_guid: string
+  category_guid: string
+  amount: number
+  year_month: number // e.g. 202409
+}
+
+type GroupedCategoryTotalData = {
+  [categoryGuid: string]: CategoryTotalData[]
+}
+
+export interface StackedLineChartData {
+  top_level_category_guid: string
+  category_guid: string
+  category_name: string
+  category_color: string
+  dataset: Dataset
+}
+
+const getCategoryColor = (categoryGuid: string): string => {
+  return CategoryColors[categoryGuid] ?? CategoryColors.default
+}
+
+const getCategoryName = (categoryGuid: string): string => {
+  return CategoryGuidToName[categoryGuid]
+}
+
+function createYearMonthRange(start: Date, end: Date): number[] {
+  const result = []
+  const current = new Date(start)
+
+  while (current <= end) {
+    const year = current.getFullYear()
+    const month = String(current.getMonth() + 1).padStart(2, '0')
+    result.push(Number(`${year}${month}`))
+    current.setMonth(current.getMonth() + 1)
+  }
+
+  return result
+}
+
+const createGroupedCategoryTotals = (totals: MonthlyCategoryTotals[]): GroupedCategoryTotalData => {
+  const groupedTotals = totals.reduce((result, item) => {
+    const totalData: CategoryTotalData = {
+      top_level_category_guid: item.top_level_category_guid,
+      category_guid: item.category_guid,
+      amount: item.total,
+      year_month: item.year_month,
+    }
+
+    const { top_level_category_guid, category_guid } = totalData
+
+    // Ensure category bucket exists
+    if (!result[category_guid]) {
+      result[category_guid] = []
+    }
+    result[category_guid].push(totalData)
+
+    // Ensure top-level category bucket exists (if different than category)
+    if (top_level_category_guid !== category_guid) {
+      if (!result[top_level_category_guid]) {
+        result[top_level_category_guid] = []
+      }
+      result[top_level_category_guid].push(totalData)
+    }
+
+    return result
+  }, {} as GroupedCategoryTotalData)
+
+  return groupedTotals
+}
+
+export const getStackedLineChartData = (
+  totals: MonthlyCategoryTotals[],
+  start: Date,
+  end: Date,
+): StackedLineChartData[] => {
+  const groupedTotals = createGroupedCategoryTotals(totals)
+  const yearMonths = createYearMonthRange(start, end)
+
+  const chartData = Object.entries(groupedTotals).map(([categoryGuid, totals]) => {
+    const topLevelCategoryGuid = totals[0].top_level_category_guid
+    // Build dataset for current category
+    const dataset: Dataset = yearMonths
+      // Build chart coordinates and fill missing totals with 0
+      .map((yearMonth) => {
+        // Sum category totals for same month
+        // (totals with same top_level_category_guid but different category_guid)
+        // And fill missing totals with 0
+        // (necessary for StackedLineChart lines to be smooth)
+        const sumTotal = totals
+          .filter((total) => total.year_month === yearMonth)
+          .reduce((sum, total) => sum + Math.abs(total.amount), 0)
+
+        const year = Number(String(yearMonth).slice(0, 4))
+        const month = Number(String(yearMonth).slice(4))
+        const date = new Date(year, month - 1)
+
+        return { x: date, y: sumTotal }
+      })
+      .sort((a, b) => a.x.getTime() - b.x.getTime())
+
+    return {
+      top_level_category_guid: topLevelCategoryGuid,
+      category_guid: categoryGuid,
+      category_name: getCategoryName(categoryGuid),
+      category_color: getCategoryColor(topLevelCategoryGuid),
+      dataset: dataset,
+    }
+  })
+
+  return chartData
+}
+
+export const amountComparator: GridComparatorFn<string | number> = (v1, v2) => {
+  const num1 = typeof v1 === 'string' ? parseFloat(v1.replace(/[^0-9.-]+/g, '')) : v1
+  const num2 = typeof v2 === 'string' ? parseFloat(v2.replace(/[^0-9.-]+/g, '')) : v2
+
+  return (num1 || 0) - (num2 || 0)
+}

package/src/trends/utils/shared.ts

@@ -0,0 +1,39 @@
+import { CategoryGuids, MonthlyCategoryTotals, PaymentCategories } from '../../common'
+import { StackedLineChartData } from './TrendsData'
+
+type TotalsData = MonthlyCategoryTotals | StackedLineChartData
+
+export const isIncome = (totals: TotalsData) => {
+  return (
+    totals.top_level_category_guid === CategoryGuids.INCOME ||
+    totals.category_guid === CategoryGuids.INCOME
+  )
+}
+
+export const isExpense = (totals: TotalsData) => {
+  return !isIncome(totals) && !isTransfer(totals)
+}
+
+export const isPayment = (totals: TotalsData) => {
+  return (
+    PaymentCategories.includes(totals.top_level_category_guid) ||
+    PaymentCategories.includes(totals.category_guid)
+  )
+}
+
+export const isTransfer = (totals: TotalsData) => {
+  return (
+    totals.top_level_category_guid === CategoryGuids.TRANSFER ||
+    totals.category_guid === CategoryGuids.TRANSFER
+  )
+}
+
+export const isSpend = (totals: TotalsData) => {
+  return !isIncome(totals) && !isPayment(totals) && !isTransfer(totals)
+}
+
+export const getTopLevelCategoryTotals = (
+  totals: (MonthlyCategoryTotals | StackedLineChartData)[],
+) => {
+  return totals.filter((item) => item.category_guid === item.top_level_category_guid)
+}