diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx index 9458b93..a712e55 100644 --- a/src/Dashboard.tsx +++ b/src/Dashboard.tsx @@ -12,8 +12,8 @@ import { import LatestItemsList, { LatestItem } from "./components/LatestItemsList"; import HistoryChart from "./components/HistoryChart"; import { - AggregatedDashboardData, -} from "./components/HistoryChart"; + AggregatedDashboardData +} from "./types/historyChart"; import { fetchLatestTransactions, @@ -85,6 +85,13 @@ export default function Dashboard() { }, []); const currentData = aggregated[mode]; + if (!currentData) { + return ( + + + + ); + } const currentLatest = latest[mode]; // -------- UI STATES -------- diff --git a/src/components/HistoryChart.tsx b/src/components/HistoryChart.tsx index 61aa758..4bb4061 100644 --- a/src/components/HistoryChart.tsx +++ b/src/components/HistoryChart.tsx @@ -1,35 +1,16 @@ import * as React from "react"; -import { Box, Typography, ToggleButtonGroup, ToggleButton, Paper } from "@mui/material"; - -export interface ChartDataPoint { - id: string; - amount: number; - compareAmount?: number; - compareLabel?: string; - highlighted?: boolean; -} - -export interface ChartSeries { - rolling: ChartDataPoint[]; - calendar: ChartDataPoint[]; -} - -export interface ChartData { - daily: ChartDataPoint[]; - weekly: ChartSeries; - monthly: ChartSeries; -} - -export interface HistoryChartProps { - header: string; - summary?: string; - tabs: string[]; - data: ChartData; - period: "rolling" | "calendar"; - onPeriodChange: (mode: "rolling" | "calendar") => void; - comparison: boolean; - setComparison: (mode: boolean) => void; -} +import { + Box, + Typography, + ToggleButtonGroup, + ToggleButton, + Paper +} from "@mui/material"; +import { + ChartDataPoint, + HistoryChartProps, + ChartData, +} from "../types/historyChart"; const formatDisplay = ( point: ChartDataPoint, diff --git a/src/types/historyChart.ts b/src/types/historyChart.ts new file mode 100644 index 0000000..c9f9f34 --- /dev/null +++ b/src/types/historyChart.ts @@ -0,0 +1,36 @@ + +export interface ChartDataPoint { + id: string; + amount: number; + compareAmount?: number; + compareLabel?: string; + highlighted?: boolean; +} + +export interface ChartSeries { + rolling: ChartDataPoint[]; + calendar: ChartDataPoint[]; +} + +export interface ChartData { + daily: ChartDataPoint[]; + weekly: ChartSeries; + monthly: ChartSeries; +} + +export interface AggregatedDashboardData { + chartData: ChartData; + totalAmount: number; + topPayees: Array<{ payeeName: string; amount: number }>; +} + +export interface HistoryChartProps { + header: string; + summary?: string; + tabs: string[]; + data: ChartData; + period: "rolling" | "calendar"; + onPeriodChange: (mode: "rolling" | "calendar") => void; + comparison: boolean; + setComparison: (mode: boolean) => void; +}