92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import * as React from "react";
|
|
import { HistoryChartProps } from "./HistoryChart.models";
|
|
import HistoryChartView from "./HistoryChart.view";
|
|
import { buildChartData, tabToKey } from "./HistoryChart.adapter";
|
|
|
|
export default function HistoryChart(props: HistoryChartProps) {
|
|
const {
|
|
tabs,
|
|
reportData,
|
|
flow,
|
|
comparison,
|
|
selectedPeriodId,
|
|
setSelectedPeriodId
|
|
} = props;
|
|
|
|
const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
|
|
const [startIndex, setStartIndex] = React.useState(0);
|
|
|
|
const activeDataKey = tabToKey(activeTab);
|
|
|
|
const currentData = React.useMemo(() => {
|
|
return buildChartData(reportData, activeDataKey, flow, comparison);
|
|
}, [reportData, activeDataKey, flow, 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 = {
|
|
daily: 7,
|
|
weekly: 6,
|
|
monthly: 4,
|
|
all: 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]);
|
|
|
|
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}
|
|
/>
|
|
);
|
|
}
|