The Best Fluffy Pancakes recipe you will fall in love with. Full of tips and tricks to help you make the best pancakes.
import React from ‘react’;
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
Rectangle,
ReferenceLine,
} from ‘recharts’;
import { YearlyResult } from ‘../types’;
import { formatCompactNumber, formatCurrency } from ‘../utils/calculations’;
import { BrandLogo } from ‘./BrandLogo’;
interface ResultsChartProps {
data: YearlyResult[];
focusedRate: 6 | 10 | null;
}
export const ResultsChart: React.FC = ({ data, focusedRate }) => {
const data10 = data.find((d) => d.year === 10);
const data20 = data.find((d) => d.year === 20);
const data30 = data.find((d) => d.year === 30);
const diff10 = data10 ? data10.balance10 – data10.balance6 : 0;
const diff20 = data20 ? data20.balance10 – data20.balance6 : 0;
const diff30 = data30 ? data30.balance10 – data30.balance6 : 0;
// Opacity logic: if one is focused, the other becomes faded (0.15), otherwise both full (1)
const opacity6 = focusedRate === 10 ? 0.15 : 1;
const opacity10 = focusedRate === 6 ? 0.15 : 1;
// Active Bar Logic: explicitly disable (pass false) the active highlight for the unfocused bar
// If focusedRate is null (default view), both allow active highlighting.
// If focusedRate is 6, bar 10 activeBar is false.
// If focusedRate is 10, bar 6 activeBar is false.
const activeBar6 = focusedRate === 10 ? false :
{/* Background Pill – Large size */}
+{formattedDiff}
);
};
const CustomTooltip = ({ active, payload, label, focusedRate }: any) => {
if (active && payload && payload.length) {
const data = payload[0].payload as YearlyResult;
// Determine opacity for tooltip rows based on focus
const row6Opacity = focusedRate === 10 ? ‘opacity-40’ : ‘opacity-100’;
const row10Opacity = focusedRate === 6 ? ‘opacity-40’ : ‘opacity-100’;
return (
);
}
return null;
};
{/* Subtle Watermark */}
formatCompactNumber(value)}
tickLine={false}
axisLine={false}
tick={{ fill: ‘#94a3b8’, fontSize: 12 }}
dx={-10}
/>
);
};
// Custom Label Component for ReferenceLine
const DifferenceLabel = ({ viewBox, diff }: any) => {
const { x, y } = viewBox;
const formattedDiff = formatCompactNumber(diff);
return (
資產累積趨勢
Wealth Alchemy{focusedRate ? `重點檢視：${focusedRate === 6 ? ‘養金雞 (6%)’ : ‘種大樹 (10%)’} 效益` : ’30 年期複利效應對比’}
本金投入
養金雞 (6%)
種大樹 (10%)
第 {label} 年
總投入本金
{formatCurrency(data.invested)}
{/* 6% Row */}
養金雞 (6%)
{formatCurrency(data.balance6)}
{/* 10% Row */}
種大樹 (10%)
{formatCurrency(data.balance10)}
差異
+{formatCompactNumber(data.balance10 – data.balance6)}
