Compare commits
3 Commits
69c9fd6bef
...
692d907ca5
| Author | SHA1 | Date | |
|---|---|---|---|
| 692d907ca5 | |||
| 15c2cce263 | |||
| 3704bd0c23 |
@@ -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 --------
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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
36
src/types/historyChart.ts
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user