Compare commits

...

3 Commits

5 changed files with 86 additions and 54 deletions

View File

@@ -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 (
<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
<CircularProgress />
</Box>
);
}
const currentLatest = latest[mode];
// -------- UI STATES --------

View File

@@ -101,10 +101,10 @@ export default function Header({
>
<Button
color="inherit"
onClick={() => navigate("/dashboard")}
onClick={() => navigate("/admin")}
sx={{ textTransform: "none", fontWeight: 500 }}
>
Dashboard
Admin
</Button>
<Button
color="inherit"

View File

@@ -84,7 +84,7 @@ export default function Home() {
variant="contained"
size="large"
endIcon={<ArrowForwardIcon />}
onClick={() => navigate("/admin")}
onClick={() => navigate("/dashboard")}
sx={{
px: 4,
py: 1.5,

View File

@@ -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,
@@ -181,7 +162,10 @@ export default function HistoryChart({
<Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
{currentData.map((point) => {
const currentHeight = (point.amount / maxAmount) * 100;
const compareHeight = ((point.compareAmount || 0) / maxAmount) * 100;
const compareHeight = comparison
? ((point.compareAmount || 0) / maxAmount) * 100
: 0;
const labelHeight = Math.max(currentHeight, compareHeight);
return (
<Box
@@ -204,6 +188,22 @@ export default function HistoryChart({
position: "relative"
}}
>
<Typography
variant="caption"
sx={{
position: "absolute",
bottom: `${labelHeight}%`,
left: "50%",
transform: "translate(-50%, -6px)",
fontSize: "0.65rem",
whiteSpace: "nowrap",
pointerEvents: "none"
}}
>
{formatDisplay(point, activeTab.toLowerCase(), comparison)}
</Typography>
{/* Compare */}
{comparison && (
<Box
sx={{
@@ -215,29 +215,18 @@ export default function HistoryChart({
/>
)}
{/* Spacer */}
<Box sx={{ width: 4 }} />
{/* Current */}
<Box
sx={{
width: 10,
height: `${currentHeight}%`,
bgcolor: point.highlighted ? "error.main" : "primary.main",
borderRadius: 2,
position: "relative"
borderRadius: 2
}}
>
<Typography
variant="caption"
sx={{
position: "absolute",
top: -18,
left: "50%",
transform: "translateX(-50%)",
fontSize: "0.65rem",
whiteSpace: "nowrap"
}}
>
{formatDisplay(point, activeTab.toLowerCase(), comparison)}
</Typography>
</Box>
/>
</Box>
<Box

36
src/types/historyChart.ts Normal file
View File

@@ -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;
}