major refactor of the dashboard and react-openapi integration (#1)
## Summary This MR introduces a major refactor of the dashboard and react-openapi integration, focusing on configurability, separation of concerns, and improved extensibility. --- ## Key Changes ### 1. OpenAPI / Admin Refactor * Extracted `ConfigContext` into a dedicated provider. * Introduced `AppProvider` to encapsulate: * Config loading * API client initialization * React Query setup * Removed internal `QueryClientProvider` from `Admin` for better composability. * `Admin` now supports both: * Standalone usage * Nested usage inside an existing provider ### 2. Resource System Improvements * Added `hidden` flag to `ResourceConfig` and overrides. * Admin UI now filters out hidden resources. * Added `useResourceByName` helper for dynamic resource access. * Improved `useResource`: * Handles undefined config safely * Adds guards for missing endpoints * Disables queries when endpoint is absent ### 3. API Client Enhancements * Added custom `paramsSerializer`: * Serializes arrays without `[]` * Ensures backend-compatible query formats ### 4. Dashboard Architecture Overhaul * Replaced hardcoded dashboard with **config-driven system**: * Introduced `ConfigurableDashboard` * Dashboard sections defined via config * New state model: * `mode` (expense/income) * `periodType` (rolling/calendar) * `comparison` * `selectedPeriodId` ### 5. Component Refactor (View / Logic Split) * Split major components into: * `.tsx` (logic/controller) * `.view.tsx` (presentation) * `.models.ts` (types) * Applied to: * Dashboard * HistoryChart * ProgressCard * LatestItems ### 6. HistoryChart Redesign * Fully rebuilt using report-driven data * Supports: * Weekly / Monthly / Yearly / FY / Full views * Rolling vs Calendar periods * Comparison mode (auto-aligned offsets) * Introduced: * Bucket merging logic * Dynamic comparison attachment ### 7. Reporting Integration * Dashboard now powered by: * `useReport` * `prepareReport` * Removes need for multiple manual API calls ### 8. UI / UX Improvements * Theme-aware color system * Dynamic accent colors per mode * Cleaner layout using section-based rendering * Improved selection and interaction in charts ### 9. Cleanup & Removals * Removed legacy components: * Old `HistoryChart` * Old `ProgressCard` * Simplified Header layout spacing --- ## Behavior Changes * Hidden resources are no longer visible in Admin UI. * Dashboard is now entirely configuration-driven. * API query params for arrays no longer use `[]`. * Resource hooks no longer crash on missing config. --- ## Risks / Considerations * Dashboard depends on correct configuration structure. * Hidden flag may unintentionally hide resources if misconfigured. * Query param serialization change must align with backend expectations. --- ## Follow-ups * Add typing improvements to remove `@ts-ignore` in `GenericForm`. * Extend dashboard config with more reusable section presets. * Add tests for report aggregation and comparison logic. --- Reviewed-on: #1 Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
This commit is contained in:
212
src/components/HistoryChart/HistoryChart.tsx
Normal file
212
src/components/HistoryChart/HistoryChart.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import * as React from "react";
|
||||
import { HistoryChartProps, ChartDataPoint } from "./HistoryChart.models";
|
||||
import HistoryChartView from "./HistoryChart.view";
|
||||
import { ReportPeriod } from "../../features/report";
|
||||
|
||||
type DecoratedPeriod = ReportPeriod & {
|
||||
id: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
const TAB_TO_KEY: Record<string, "weekly" | "monthly" | "yearly" | "fyly" | "full"> = {
|
||||
Weekly: "weekly",
|
||||
Monthly: "monthly",
|
||||
Yearly: "yearly",
|
||||
'Financial Year': "fyly",
|
||||
'All Time': "full"
|
||||
};
|
||||
|
||||
function getAmount(p: ReportPeriod, mode: "expense" | "income") {
|
||||
return mode === "expense" ? p.expenses.sum : p.incomes.sum;
|
||||
}
|
||||
|
||||
function mergeMetric(a: any, b: any) {
|
||||
const sum = a.sum + b.sum;
|
||||
const count = a.count + b.count;
|
||||
|
||||
return {
|
||||
...a,
|
||||
sum,
|
||||
count,
|
||||
average: count > 0 ? sum / count : 0,
|
||||
transactions: a.transactions || b.transactions
|
||||
? [
|
||||
...(a.transactions || []),
|
||||
...(b.transactions || [])
|
||||
]
|
||||
: undefined
|
||||
};
|
||||
}
|
||||
|
||||
function mergeBuckets(
|
||||
buckets: any[],
|
||||
key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
|
||||
): DecoratedPeriod[] {
|
||||
const map = new Map<string, DecoratedPeriod>();
|
||||
|
||||
for (const bucket of buckets) {
|
||||
const periods = (bucket.periods[key] || []) as DecoratedPeriod[];
|
||||
|
||||
for (const p of periods) {
|
||||
const existing = map.get(p.id);
|
||||
|
||||
if (!existing) {
|
||||
map.set(p.id, {
|
||||
...p,
|
||||
expenses: { ...p.expenses },
|
||||
incomes: { ...p.incomes }
|
||||
});
|
||||
} else {
|
||||
map.set(p.id, {
|
||||
...existing,
|
||||
expenses: mergeMetric(existing.expenses, p.expenses),
|
||||
incomes: mergeMetric(existing.incomes, p.incomes)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(map.values()).sort(
|
||||
(a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
|
||||
);
|
||||
}
|
||||
|
||||
function attachComparison(
|
||||
points: ChartDataPoint[],
|
||||
key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
|
||||
): ChartDataPoint[] {
|
||||
const getCompareIndex = (i: number) => {
|
||||
if (key === "weekly") return i - 4;
|
||||
if (key === "monthly") return i - 12;
|
||||
if (key === "yearly") return i - 1;
|
||||
if (key === "fyly") return i - 1;
|
||||
return -1;
|
||||
};
|
||||
|
||||
return points.map((p, i) => {
|
||||
const ci = getCompareIndex(i);
|
||||
|
||||
return {
|
||||
...p,
|
||||
compare:
|
||||
ci >= 0 && points[ci]
|
||||
? {
|
||||
id: points[ci].id,
|
||||
label: points[ci].label,
|
||||
amount: points[ci].amount
|
||||
}
|
||||
: undefined
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function buildChartData(
|
||||
reportData: HistoryChartProps["reportData"],
|
||||
key: "weekly" | "monthly" | "yearly" | "fyly" | "full",
|
||||
mode: "expense" | "income",
|
||||
comparison: boolean
|
||||
): ChartDataPoint[] {
|
||||
const merged = mergeBuckets(reportData.buckets, key);
|
||||
console.log("Merged periods:", merged);
|
||||
|
||||
let points: ChartDataPoint[] = merged.map((p) => ({
|
||||
id: p.id,
|
||||
label: p.label,
|
||||
amount: getAmount(p, mode)
|
||||
}));
|
||||
|
||||
if (comparison) {
|
||||
points = attachComparison(points, key);
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
export default function HistoryChart(props: HistoryChartProps) {
|
||||
const {
|
||||
tabs,
|
||||
reportData,
|
||||
mode,
|
||||
periodType,
|
||||
comparison,
|
||||
selectedPeriodId,
|
||||
setSelectedPeriodId
|
||||
} = props;
|
||||
|
||||
const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
|
||||
const [startIndex, setStartIndex] = React.useState(0);
|
||||
|
||||
const activeDataKey = TAB_TO_KEY[activeTab];
|
||||
|
||||
const currentData = React.useMemo(() => {
|
||||
return buildChartData(reportData, activeDataKey, mode, comparison);
|
||||
}, [reportData, activeDataKey, mode, comparison]);
|
||||
|
||||
const maxAmount =
|
||||
currentData.length > 0
|
||||
? Math.max(
|
||||
...currentData.flatMap((d) =>
|
||||
comparison
|
||||
? [d.amount, ...(d.compare ? [d.compare.amount] : [])]
|
||||
: [d.amount]
|
||||
),
|
||||
1
|
||||
)
|
||||
: 1;
|
||||
|
||||
const visibleCountMap = {
|
||||
weekly: 6,
|
||||
monthly: 4,
|
||||
yearly: 4,
|
||||
fyly: 4,
|
||||
full: 4,
|
||||
};
|
||||
|
||||
const visibleCount = visibleCountMap[activeDataKey] ?? 4;
|
||||
|
||||
const total = currentData.length;
|
||||
|
||||
const clampedStartIndex = Math.min(
|
||||
startIndex,
|
||||
Math.max(total - visibleCount, 0)
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (startIndex !== clampedStartIndex) {
|
||||
setStartIndex(clampedStartIndex);
|
||||
}
|
||||
}, [startIndex, clampedStartIndex]);
|
||||
|
||||
const visibleData = currentData.slice(
|
||||
clampedStartIndex,
|
||||
clampedStartIndex + visibleCount
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
setSelectedPeriodId(null);
|
||||
}, [activeTab, periodType]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (
|
||||
selectedPeriodId &&
|
||||
!visibleData.some((p) => p.id === selectedPeriodId)
|
||||
) {
|
||||
setSelectedPeriodId(null);
|
||||
}
|
||||
}, [visibleData, selectedPeriodId]);
|
||||
|
||||
return (
|
||||
<HistoryChartView
|
||||
{...props}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
currentData={currentData}
|
||||
visibleData={visibleData}
|
||||
maxAmount={maxAmount}
|
||||
visibleCount={visibleCount}
|
||||
startIndex={clampedStartIndex}
|
||||
setStartIndex={setStartIndex}
|
||||
activeDataKey={activeDataKey}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user