Accessible Cash Flow Chart

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
5import { useMemo, useState } from "react";
6 
7type ChartView = "monthly" | "yearly";
8 
9interface CashFlowDatum {
10  label: string;
11  shortLabel: string;
12  value: number;
13  cashflow: number;
14  inflow: number;
15  dateRange: string;
16}
17 
18const monthlyData: CashFlowDatum[] = [
19  {
20    label: "January 2026",
21    shortLabel: "Jan",
22    value: 35000,
23    cashflow: 35000,
24    inflow: 12000,
25    dateRange: "January 2026",
26  },
27  {
28    label: "February 2026",
29    shortLabel: "Feb",
30    value: 28000,
31    cashflow: 28000,
32    inflow: 9500,
33    dateRange: "February 2026",
34  },
35  {
36    label: "March 2026",
37    shortLabel: "Mar",
38    value: 52000,
39    cashflow: 52000,
40    inflow: 14200,
41    dateRange: "March 2026",
42  },
43  {
44    label: "April 2026",
45    shortLabel: "Apr",
46    value: 31000,
47    cashflow: 31000,
48    inflow: 10100,
49    dateRange: "April 2026",
50  },
51  {
52    label: "May 2026",
53    shortLabel: "May",
54    value: 38000,
55    cashflow: 38000,
56    inflow: 11800,
57    dateRange: "May 2026",
58  },
59  {
60    label: "June 2026",
61    shortLabel: "Jun",
62    value: 22000,
63    cashflow: 22000,
64    inflow: 8200,
65    dateRange: "June 2026",
66  },
67  {
68    label: "July 2026",
69    shortLabel: "Jul",
70    value: 33000,
71    cashflow: 33000,
72    inflow: 9600,
73    dateRange: "July 2026",
74  },
75];
76 
77const yearlyData: CashFlowDatum[] = [
78  {
79    label: "2020",
80    shortLabel: "2020",
81    value: 265000,
82    cashflow: 265000,
83    inflow: 62000,
84    dateRange: "Fiscal Year 2020",
85  },
86  {
87    label: "2021",
88    shortLabel: "2021",
89    value: 302000,
90    cashflow: 302000,
91    inflow: 78500,
92    dateRange: "Fiscal Year 2021",
93  },
94  {
95    label: "2022",
96    shortLabel: "2022",
97    value: 358000,
98    cashflow: 358000,
99    inflow: 91200,
100    dateRange: "Fiscal Year 2022",
101  },
102  {
103    label: "2023",
104    shortLabel: "2023",
105    value: 402000,
106    cashflow: 402000,
107    inflow: 103500,
108    dateRange: "Fiscal Year 2023",
109  },
110  {
111    label: "2024",
112    shortLabel: "2024",
113    value: 446000,
114    cashflow: 446000,
115    inflow: 118000,
116    dateRange: "Fiscal Year 2024",
117  },
118  {
119    label: "2025",
120    shortLabel: "2025",
121    value: 489000,
122    cashflow: 489000,
123    inflow: 124300,
124    dateRange: "Fiscal Year 2025 (projected)",
125  },
126];
127 
128const formatCurrency = (value: number) =>
129  new Intl.NumberFormat("en-US", {
130    style: "currency",
131    currency: "USD",
132    maximumFractionDigits: 0,
133// … truncated