refactored HistoryChart to component

src/components/HistoryChart/HistoryChart.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { ChartDataPoint, HistoryChartProps, ChartData } from "./HistoryChart.models";
+import HistoryChartView from "./HistoryChart.view";
+
+export default function HistoryChart(props: HistoryChartProps) {
+  const { tabs, data, period, comparison } = props;
+
+  const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
+  const [startIndex, setStartIndex] = React.useState(0);
+
+  const activeDataKey = activeTab.toLowerCase() as keyof ChartData;
+
+  let rawData: ChartDataPoint[] = [];
+
+  if (activeDataKey === "daily") {
+    rawData = data.daily || [];
+  } else {
+    const section = data[activeDataKey];
+    rawData = section?.[period] || [];
+  }
+
+  const currentData = rawData;
+
+  const maxAmount =
+    currentData.length > 0
+      ? Math.max(
+          ...currentData.flatMap((d) =>
+            comparison ? [d.amount, d.compare?.amount ?? 0] : [d.amount]
+          ),
+          1
+        )
+      : 1;
+
+  const visibleCountMap = { daily: 7, weekly: 6, monthly: 4 };
+  const visibleCount = visibleCountMap[activeDataKey];
+
+  const total = currentData.length;
+
+  const clampedStartIndex = Math.min(startIndex, Math.max(total - visibleCount, 0));
+
+  const visibleData = currentData.slice(
+    clampedStartIndex,
+    clampedStartIndex + visibleCount
+  );
+
+  return (
+    <HistoryChartView
+      {...props}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+      currentData={currentData}
+      visibleData={visibleData}
+      maxAmount={maxAmount}
+      visibleCount={visibleCount}
+      startIndex={startIndex}
+      setStartIndex={setStartIndex}
+      activeDataKey={activeDataKey}
+    />
+  );
+}