+ {/* --- HUD (Heads-Up Display) --- */}
+
+
+
+ CURRENT YEAR
+
+
+ {currentData.year}
+
+
+
+
+ ASSET BALANCE
+
+
+ {currentData.financials.assetBalance.toLocaleString()}{" "}
+ {meta.currencyUnit}
+
+
+
+
+
INCOME
+
+ +{currentData.financials.income}
+
+
+
+
EXPENSE
+
+ -{currentData.financials.expenditure}
+
+
+
+
+
+ {/* --- Chart Area --- */}
+
+
+
+
+
+ }
+ height={95}
+ tickLine={false}
+ domain={
+ visibleData.length < 10
+ ? [timeline[0].year, timeline[0].year + 9]
+ : undefined
+ }
+ type={visibleData.length < 10 ? "number" : "category"}
+ />
+
+
+ val >= 10000 || val <= -10000 ? `${val / 10000}億` : val
+ }
+ />
+
+
+
+
+ {visibleData.map((entry: any, index) => (
+ | = 0
+ ? "#4299E1"
+ : "#E53E3E"
+ }
+ />
+ ))}
+ |
+
+
+
+
+ );
+};
diff --git a/src/LifePlanChart.tsx b/src/LifePlanChart.tsx
new file mode 100644
index 0000000..d9cab5a
--- /dev/null
+++ b/src/LifePlanChart.tsx
@@ -0,0 +1,348 @@
+import React from "react";
+import {
+ AreaChart,
+ Area,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ ReferenceLine,
+ ResponsiveContainer,
+} from "recharts";
+import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
+
+// Ensure this import points to your new types file
+import type { LifePlanChartProps, YearlySnapshot } from "./types";
+
+// --- Helper: The 3-Row X-Axis Tick ---
+const CustomXAxisTick = ({ x, y, payload, timelineData }: any) => {
+ // Map index to data to ensure safety
+ const index = payload.index;
+ const dataPoint = timelineData[index] as YearlySnapshot;
+
+ if (!dataPoint) return null;
+
+ return (
+