- **Note: The % is based on daily weighted average data, thus the percentages might alter slightly. -
- -)); +import { format } from "date-fns"; +import { Maximize2, RefreshCcw } from "lucide-react"; +import { + CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis +} from "recharts"; + +import { Asset, DateRange } from "../../types"; +import { DateRangePicker } from "../utils/DateRangePicker"; +import { ChartLegend } from "./ChartLegend"; + +interface ChartContentProps { + dateRange: DateRange; + handleUpdateDateRange: (range: DateRange) => void; + handleReRender: () => void; + isFullscreen: boolean; + setIsFullscreen: (value: boolean) => void; + renderKey: number; + isDarkMode: boolean; + hideAssets: boolean; + hiddenAssets: Set+ **Note: The % is based on daily weighted average data, thus the percentages might alter slightly. +
+ +); diff --git a/src/components/Chart/ChartLegend.tsx b/src/components/Chart/ChartLegend.tsx index cb282d1..ef1f330 100644 --- a/src/components/Chart/ChartLegend.tsx +++ b/src/components/Chart/ChartLegend.tsx @@ -1,66 +1,83 @@ -import { BarChart2, Eye, EyeOff } from "lucide-react"; -import { memo } from "react"; - -interface ChartLegendProps { - payload: any[]; - hideAssets: boolean; - hiddenAssets: Set- {new Date(label).toLocaleDateString('de-DE')} -
-- Value: {formatCurrency(value)} -
-- Invested: {formatCurrency(invested)} -
- {withdrawn > 0 && ( - <> -- Monthly Withdrawal: {formatCurrency(withdrawn)} -
-- Total Withdrawn: {formatCurrency(totalWithdrawn)} -
- - )} -= 0 ? 'text-green-500' : 'text-red-500'}`}> - Return: {percentageGain.toFixed(2)}% -
-- {new Date(label).toLocaleDateString('de-DE')} -
-- Best-Case: {formatCurrency(bestCase)} {((bestCase - invested) / invested * 100).toFixed(2)}% -
-- Avg. Base-Case: {formatCurrency(baseCase)} {((baseCase - invested) / invested * 100).toFixed(2)}% -
-- Worst-Case: {formatCurrency(worstCase)} {((worstCase - invested) / invested * 100).toFixed(2)}% -
-- Future projections are calculated with your portfolio's average annual return rate of{' '} - {performancePerAnno.toFixed(2)}%. -
-- {withdrawalPlan.autoStrategy?.type === 'maintain' && ( - "The calculator will determine when your portfolio can sustain this withdrawal amount while maintaining its value." - )} - {withdrawalPlan.autoStrategy?.type === 'deplete' && ( - "The calculator will determine when you can start withdrawing this amount to deplete the portfolio over your specified timeframe." - )} - {withdrawalPlan.autoStrategy?.type === 'grow' && ( - "The calculator will determine when you can start withdrawing this amount while maintaining the target growth rate." - )} -
-- To withdraw {formatCurrency(withdrawalPlan.amount)} {withdrawalPlan.interval}, you need to invest for{' '} - {sustainabilityAnalysis.yearsToReachTarget} years until your portfolio reaches{' '} - {formatCurrency(sustainabilityAnalysis.targetValue)}. -
-- With this withdrawal plan, your portfolio will{' '} - {sustainabilityAnalysis.sustainableYears === 'infinite' ? ( - remain sustainable indefinitely - ) : ( - <> - last for{' '} - - {sustainabilityAnalysis.sustainableYears} years - {' '} - {sustainabilityAnalysis.sustainableYears > parseInt(years) && ( - - (extends beyond the current chart view of {years} years) - - )} - - )} - . -
-+ {new Date(label).toLocaleDateString('de-DE')} +
++ Value: {formatCurrency(value)} +
++ Invested: {formatCurrency(invested)} +
+ {withdrawn > 0 && ( + <> ++ Monthly Withdrawal: {formatCurrency(withdrawn)} +
++ Total Withdrawn: {formatCurrency(totalWithdrawn)} +
+ + )} += 0 ? 'text-green-500' : 'text-red-500'}`}> + Return: {percentageGain.toFixed(2)}% +
++ {new Date(label).toLocaleDateString('de-DE')} +
++ Best-Case: {formatCurrency(bestCase)} {((bestCase - invested) / invested * 100).toFixed(2)}% +
++ Avg. Base-Case: {formatCurrency(baseCase)} {((baseCase - invested) / invested * 100).toFixed(2)}% +
++ Worst-Case: {formatCurrency(worstCase)} {((worstCase - invested) / invested * 100).toFixed(2)}% +
++ Future projections are calculated with your portfolio's average annual return rate of{' '} + {performancePerAnno.toFixed(2)}%. +
++ {withdrawalPlan.autoStrategy?.type === 'maintain' && ( + "The calculator will determine when your portfolio can sustain this withdrawal amount while maintaining its value." + )} + {withdrawalPlan.autoStrategy?.type === 'deplete' && ( + "The calculator will determine when you can start withdrawing this amount to deplete the portfolio over your specified timeframe." + )} + {withdrawalPlan.autoStrategy?.type === 'grow' && ( + "The calculator will determine when you can start withdrawing this amount while maintaining the target growth rate." + )} +
++ To withdraw {formatCurrency(withdrawalPlan.amount)} {withdrawalPlan.interval}, you need to invest for{' '} + {sustainabilityAnalysis.yearsToReachTarget} years until your portfolio reaches{' '} + {formatCurrency(sustainabilityAnalysis.targetValue)}. +
++ With this withdrawal plan, your portfolio will{' '} + {sustainabilityAnalysis.sustainableYears === 'infinite' ? ( + remain sustainable indefinitely + ) : ( + <> + last for{' '} + + {sustainabilityAnalysis.sustainableYears} years + {' '} + {sustainabilityAnalysis.sustainableYears > parseInt(years) && ( + + (extends beyond the current chart view of {years} years) + + )} + + )} + . +
+The performance of your portfolio is {performance.summary.performancePercentage.toFixed(2)}%
-The average (acc.) performance of all positions is {averagePerformance}%
-The average (p.a.) performance of every year is {(performance.summary.performancePerAnnoPerformance || 0)?.toFixed(2)}%
-Best p.a.: {(performance.summary.bestPerformancePerAnno?.[0]?.percentage || 0)?.toFixed(2)}% ({performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})
-Worst p.a.: {(performance.summary.worstPerformancePerAnno?.[0]?.percentage || 0)?.toFixed(2)}% ({performance.summary.worstPerformancePerAnno?.[0]?.year || "N/A"})
-- Note: An average performance of positions doesn't always match your entire portfolio's average, - especially with single investments or investments on different time ranges. -
-"Buy-in" shows the asset's price when that position was bought.
-"Avg" shows the average buy-in price across all positions for that asset.
-Time Travel Without Risk (TTWOR) shows how your portfolio would have performed if all investments had been made at the beginning of the period.
-- It helps to evaluate the impact of your investment timing strategy compared to a single early investment. -
-| Start Price: | -Current Price: | -
|---|---|
| β¬{startPrice?.toFixed(2) || 'N/A'} | -β¬{endPrice?.toFixed(2) || 'N/A'} - ({endPrice && startPrice && endPrice - startPrice > 0 ? '+' : ''}{endPrice && startPrice && ((endPrice - startPrice) / startPrice * 100).toFixed(2)}%) - | -
| Asset | -Interval Amount | -Allocation | -Total Invested | -Current Value | -Performance (%) | -Performance (p.a.) | -Actions | -
|---|---|---|---|---|---|---|---|
| Total | -β¬{savingsPlansSummary.totalAmount.toFixed(2)} | -100% | -β¬{savingsPlansSummary.totalInvested.toFixed(2)} | -β¬{savingsPlansSummary.totalCurrentValue.toFixed(2)} | -{savingsPlansSummary.weightedPerformance.toFixed(2)}% | -{savingsPlansSummary.weightedPerformancePA.toFixed(2)}% | -- |
| {plan.assetName} | -β¬{plan.amount.toFixed(2)} | -{plan.allocation?.toFixed(2)}% | -β¬{plan.totalInvested.toFixed(2)} | -β¬{plan.currentValue.toFixed(2)} | -{plan.performancePercentage.toFixed(2)}% | -{plan.performancePerAnnoPerformance.toFixed(2)}% | -
-
-
-
-
- |
-
| Asset | -Type | -Date | -Invested Amount | -
- |
-
- |
-
- |
- Actions | -
|---|---|---|---|---|---|---|---|
| Total Portfolio | -- | - | β¬{performance.summary.totalInvested.toFixed(2)} | -β¬{performance.summary.currentValue.toFixed(2)} | -- |
- {performance.summary.performancePercentage.toFixed(2)}%
-
|
- - |
| TTWOR | -- | {new Date(performance.investments[0]?.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })} | -β¬{performance.summary.totalInvested.toFixed(2)} | -β¬{performance.summary.ttworValue.toFixed(2)} | -- | - | |
| {inv.assetName} | -
- {investment?.type === 'periodic' ? (
-
- |
- {format(new Date(inv.date), 'dd.MM.yyyy')} | -β¬{inv.investedAmount.toFixed(2)} | -β¬{inv.currentValue.toFixed(2)} | -β¬{inv.investedAtPrice.toFixed(2)} (β¬{avgBuyIn.toFixed(2)}) | -{inv.performancePercentage.toFixed(2)}% | -
-
-
-
-
- |
-
The performance of your portfolio is {performance.summary.performancePercentage.toFixed(2)}%
+The average (acc.) performance of all positions is {averagePerformance}%
+The average (p.a.) performance of every year is {(performance.summary.performancePerAnnoPerformance || 0)?.toFixed(2)}%
+Best p.a.: {(performance.summary.bestPerformancePerAnno?.[0]?.percentage || 0)?.toFixed(2)}% ({performance.summary.bestPerformancePerAnno?.[0]?.year || "N/A"})
+Worst p.a.: {(performance.summary.worstPerformancePerAnno?.[0]?.percentage || 0)?.toFixed(2)}% ({performance.summary.worstPerformancePerAnno?.[0]?.year || "N/A"})
++ Note: An average performance of positions doesn't always match your entire portfolio's average, + especially with single investments or investments on different time ranges. +
+"Buy-in" shows the asset's price when that position was bought.
+"Avg" shows the average buy-in price across all positions for that asset.
+Time Travel Without Risk (TTWOR) shows how your portfolio would have performed if all investments had been made at the beginning of the period.
++ It helps to evaluate the impact of your investment timing strategy compared to a single early investment. +
+| Start Price: | +Current Price: | +
|---|---|
| β¬{startPrice?.toFixed(2) || 'N/A'} | +β¬{endPrice?.toFixed(2) || 'N/A'} + ({endPrice && startPrice && endPrice - startPrice > 0 ? '+' : ''}{endPrice && startPrice && ((endPrice - startPrice) / startPrice * 100).toFixed(2)}%) + | +
| Asset | +Interval Amount | +Allocation | +Total Invested | +Current Value | +Performance (%) | +Performance (p.a.) | +Actions | +
|---|---|---|---|---|---|---|---|
| Total | +β¬{savingsPlansSummary.totalAmount.toFixed(2)} | +100% | +β¬{savingsPlansSummary.totalInvested.toFixed(2)} | +β¬{savingsPlansSummary.totalCurrentValue.toFixed(2)} | +{savingsPlansSummary.weightedPerformance.toFixed(2)}% | +{savingsPlansSummary.weightedPerformancePA.toFixed(2)}% | ++ |
| {plan.assetName} | +β¬{plan.amount.toFixed(2)} | +{plan.allocation?.toFixed(2)}% | +β¬{plan.totalInvested.toFixed(2)} | +β¬{plan.currentValue.toFixed(2)} | +{plan.performancePercentage.toFixed(2)}% | +{plan.performancePerAnnoPerformance.toFixed(2)}% | +
+
+
+
+
+ |
+
| Asset | +Type | +Date | +Invested Amount | +
+ |
+
+ |
+
+ |
+ Actions | +
|---|---|---|---|---|---|---|---|
| Total Portfolio | ++ | + | β¬{performance.summary.totalInvested.toFixed(2)} | +β¬{performance.summary.currentValue.toFixed(2)} | ++ |
+ {performance.summary.performancePercentage.toFixed(2)}%
+
|
+ + |
| TTWOR | ++ | {new Date(performance.investments[0]?.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })} | +β¬{performance.summary.totalInvested.toFixed(2)} | +β¬{performance.summary.ttworValue.toFixed(2)} | ++ | + | |
| {inv.assetName} | +
+ {investment?.type === 'periodic' ? (
+
+ |
+ {format(new Date(inv.date), 'dd.MM.yyyy')} | +β¬{inv.investedAmount.toFixed(2)} | +β¬{inv.currentValue.toFixed(2)} | +β¬{inv.investedAtPrice.toFixed(2)} (β¬{avgBuyIn.toFixed(2)}) | +{inv.performancePercentage.toFixed(2)}% | +
+
+
+
+
+ |
+
No stocks selected for comparison
+ ) : ( +| Stock | +Total Return | +Annualized Return | +Current Price | +
|---|---|---|---|
|
+
+
+ {stock.name}
+
+ |
+ {metrics.total} | +{metrics.annualized} | +β¬{currentPrice.toFixed(2)} | +