mirror of
https://github.com/Tomato6966/investment-portfolio-simulator.git
synced 2025-04-03 21:50:35 +02:00
Performance improvements and new graphs
This commit is contained in:
tomato6966
parent
2036245c2c
commit
0a347eea0d
21 changed files with 786 additions and 330 deletions
10
README.md
10
README.md
|
|
@ -39,7 +39,7 @@ https://github.com/user-attachments/assets/4507e102-8dfb-4614-b2ba-938e20e3d97b
|
|||
- *Export the entire portfolio Overview to a PDF, including Future Projections of 10, 15, 20, 30 and 40 years*
|
||||
- 📄 Export to CSV Tables
|
||||
- *Export all available tables to CSV*
|
||||
|
||||
- See the asset performance p.a. as well as of the portfolio
|
||||
|
||||
## Tech Stack
|
||||
|
||||
|
|
@ -71,8 +71,14 @@ https://github.com/user-attachments/assets/4507e102-8dfb-4614-b2ba-938e20e3d97b
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Credits:
|
||||
|
||||
> Thanks to [yahoofinance](https://finance.yahoo.com/) for the stock data.
|
||||
|
||||
|
||||
- **15.01.2025:** Increased Performance of entire Site by utilizing Maps
|
||||
|
|
|
|||
BIN
docs/assetPerformance.png
Normal file
BIN
docs/assetPerformance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
docs/assetPerformanceCards.png
Normal file
BIN
docs/assetPerformanceCards.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
docs/assetPerformanceWhiteMode.png
Normal file
BIN
docs/assetPerformanceWhiteMode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
docs/portfolioPerformance.png
Normal file
BIN
docs/portfolioPerformance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
110
src/components/Chart/AssetPerformanceModal.tsx
Normal file
110
src/components/Chart/AssetPerformanceModal.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import { X } from "lucide-react";
|
||||
import { memo } from "react";
|
||||
import {
|
||||
CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
|
||||
} from "recharts";
|
||||
|
||||
interface AssetPerformanceModalProps {
|
||||
assetName: string;
|
||||
performances: { year: number; percentage: number; price?: number }[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const AssetPerformanceModal = memo(({ assetName, performances, onClose }: AssetPerformanceModalProps) => {
|
||||
const sortedPerformances = [...performances].sort((a, b) => a.year - b.year);
|
||||
|
||||
const CustomizedDot = (props: any) => {
|
||||
const { cx, cy, payload } = props;
|
||||
return (
|
||||
<circle
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
r={4}
|
||||
fill={payload.percentage >= 0 ? '#22c55e' : '#ef4444'}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-slate-800 p-6 rounded-lg w-[80vw] max-w-4xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-bold">{assetName} - Yearly Performance</h2>
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-[400px]">
|
||||
<ResponsiveContainer>
|
||||
<LineChart data={sortedPerformances}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis
|
||||
yAxisId="left"
|
||||
tickFormatter={(value) => `${value.toFixed(2)}%`}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
tickFormatter={(value) => `€${value.toFixed(2)}`}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number, name: string) => {
|
||||
if (name === 'Performance') return [`${value.toFixed(2)}%`, name];
|
||||
return [`€${value.toFixed(2)}`, name];
|
||||
}}
|
||||
labelFormatter={(year) => `Year ${year}`}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="percentage"
|
||||
name="Performance"
|
||||
stroke="url(#colorGradient)"
|
||||
dot={<CustomizedDot />}
|
||||
strokeWidth={2}
|
||||
yAxisId="left"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="price"
|
||||
name="Price"
|
||||
stroke="#666"
|
||||
strokeDasharray="5 5"
|
||||
dot={false}
|
||||
yAxisId="right"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#22c55e" />
|
||||
<stop offset="100%" stopColor="#ef4444" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{sortedPerformances.map(({ year, percentage, price }) => (
|
||||
<div
|
||||
key={year}
|
||||
className={`p-3 rounded-lg ${
|
||||
percentage >= 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'
|
||||
}`}
|
||||
>
|
||||
<div className="text-sm font-medium">{year}</div>
|
||||
<div className={`text-lg font-bold ${
|
||||
percentage >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
|
||||
}`}>
|
||||
{percentage.toFixed(2)}%
|
||||
</div>
|
||||
{price && (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
€{price.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
184
src/components/Chart/ChartContent.tsx
Normal file
184
src/components/Chart/ChartContent.tsx
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
import { format } from "date-fns";
|
||||
import { Maximize2, RefreshCcw } from "lucide-react";
|
||||
import { memo } from "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<string>;
|
||||
processedData: any[];
|
||||
assets: Asset[];
|
||||
assetColors: Record<string, string>;
|
||||
toggleAsset: (assetId: string) => void;
|
||||
toggleAllAssets: () => void;
|
||||
}
|
||||
|
||||
export const ChartContent = memo(({
|
||||
dateRange,
|
||||
handleUpdateDateRange,
|
||||
handleReRender,
|
||||
isFullscreen,
|
||||
setIsFullscreen,
|
||||
renderKey,
|
||||
isDarkMode,
|
||||
hideAssets,
|
||||
hiddenAssets,
|
||||
processedData,
|
||||
assets,
|
||||
assetColors,
|
||||
toggleAsset,
|
||||
toggleAllAssets
|
||||
}: ChartContentProps) => (
|
||||
<>
|
||||
<div className="flex justify-between items-center mb-4 p-5">
|
||||
<DateRangePicker
|
||||
startDate={dateRange.startDate}
|
||||
endDate={dateRange.endDate}
|
||||
onStartDateChange={(date) => handleUpdateDateRange({ ...dateRange, startDate: date })}
|
||||
onEndDateChange={(date) => handleUpdateDateRange({ ...dateRange, endDate: date })}
|
||||
/>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
onClick={handleReRender}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded ml-2 hover:text-blue-500"
|
||||
>
|
||||
<RefreshCcw className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsFullscreen(!isFullscreen)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded hover:text-blue-500"
|
||||
>
|
||||
<Maximize2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={isFullscreen ? "h-[80vh]" : "h-[400px]"} key={renderKey}>
|
||||
<ResponsiveContainer>
|
||||
<LineChart data={processedData} className="p-3">
|
||||
<CartesianGrid strokeDasharray="3 3" className="dark:stroke-slate-600" />
|
||||
<XAxis
|
||||
tick={{ fill: isDarkMode ? '#D8D8D8' : '#4E4E4E' }}
|
||||
dataKey="date"
|
||||
tickFormatter={(date) => format(new Date(date), 'dd.MM.yyyy')}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: isDarkMode ? '#D8D8D8' : '#4E4E4E' }}
|
||||
yAxisId="left"
|
||||
tickFormatter={(value) => `${value.toFixed(2)}€`}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: isDarkMode ? '#D8D8D8' : '#4E4E4E' }}
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
tickFormatter={(value) => `${value.toFixed(2)}%`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: isDarkMode ? '#1e293b' : '#fff',
|
||||
border: 'none',
|
||||
color: isDarkMode ? '#d1d5d1' : '#000000',
|
||||
boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)',
|
||||
}}
|
||||
formatter={(value: number, name: string, item) => {
|
||||
const assetKey = name.split('_')[0] as keyof typeof assets;
|
||||
const processedKey = `${assets.find(a => a.name === name.replace(" (%)", ""))?.id}_price`;
|
||||
|
||||
if (name === "avg. Portfolio % gain")
|
||||
return [`${value.toFixed(2)}%`, name];
|
||||
|
||||
if (name === "TTWOR")
|
||||
return [`${value.toLocaleString()}€ (${item.payload["ttwor_percent"].toFixed(2)}%)`, name];
|
||||
|
||||
if (name === "Portfolio-Value" || name === "Invested Capital")
|
||||
return [`${value.toLocaleString()}€`, name];
|
||||
|
||||
if (name.includes("(%)"))
|
||||
return [`${Number(item.payload[processedKey]).toFixed(2)}€ ${value.toFixed(2)}%`, name.replace(" (%)", "")];
|
||||
|
||||
return [`${value.toLocaleString()}€ (${((value - Number(assets[assetKey])) / Number(assets[assetKey]) * 100).toFixed(2)}%)`, name];
|
||||
}}
|
||||
labelFormatter={(date) => format(new Date(date), 'dd.MM.yyyy')}
|
||||
/>
|
||||
<Legend content={<ChartLegend
|
||||
payload={assets}
|
||||
hideAssets={hideAssets}
|
||||
hiddenAssets={hiddenAssets}
|
||||
toggleAsset={toggleAsset}
|
||||
toggleAllAssets={toggleAllAssets}
|
||||
/>} />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="total"
|
||||
name="Portfolio-Value"
|
||||
hide={hideAssets || hiddenAssets.has("total")}
|
||||
stroke="#000"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
yAxisId="left"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="invested"
|
||||
name="Invested Capital"
|
||||
hide={hideAssets || hiddenAssets.has("invested")}
|
||||
stroke="#666"
|
||||
strokeDasharray="5 5"
|
||||
dot={false}
|
||||
yAxisId="left"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="ttwor"
|
||||
name="TTWOR"
|
||||
strokeDasharray="5 5"
|
||||
stroke="#a64c79"
|
||||
hide={hideAssets || hiddenAssets.has("ttwor")}
|
||||
dot={false}
|
||||
yAxisId="left"
|
||||
/>
|
||||
{assets.map((asset) => (
|
||||
<Line
|
||||
key={asset.id}
|
||||
type="monotone"
|
||||
hide={hideAssets || hiddenAssets.has(asset.id)}
|
||||
dataKey={`${asset.id}_percent`}
|
||||
name={`${asset.name} (%)`}
|
||||
stroke={assetColors[asset.id] || "red"}
|
||||
dot={false}
|
||||
yAxisId="right"
|
||||
/>
|
||||
))}
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="percentageChange"
|
||||
hide={hideAssets || hiddenAssets.has("percentageChange")}
|
||||
dot={false}
|
||||
name="avg. Portfolio % gain"
|
||||
stroke="#a0a0a0"
|
||||
yAxisId="right"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<i className="text-xs text-gray-500">
|
||||
*Note: The YAxis on the left shows the value of your portfolio (black line) and invested capital (dotted line),
|
||||
all other assets are scaled by their % gain/loss and thus scaled to the right YAxis.
|
||||
</i>
|
||||
<p className="text-xs mt-2 text-gray-500 italic">
|
||||
**Note: The % is based on daily weighted average data, thus the percentages might alter slightly.
|
||||
</p>
|
||||
</>
|
||||
));
|
||||
66
src/components/Chart/ChartLegend.tsx
Normal file
66
src/components/Chart/ChartLegend.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { BarChart2, Eye, EyeOff } from "lucide-react";
|
||||
import { memo } from "react";
|
||||
|
||||
interface ChartLegendProps {
|
||||
payload: any[];
|
||||
hideAssets: boolean;
|
||||
hiddenAssets: Set<string>;
|
||||
toggleAsset: (assetId: string) => void;
|
||||
toggleAllAssets: () => void;
|
||||
}
|
||||
|
||||
export const ChartLegend = memo(({ payload, hideAssets, hiddenAssets, toggleAsset, toggleAllAssets }: ChartLegendProps) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-2 p-4 rounded-lg shadow-md dark:shadow-black/60">
|
||||
<div className="flex items-center justify-between gap-2 pb-2 border-b">
|
||||
<div className="flex items-center gap-1">
|
||||
<BarChart2 className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-sm font-medium">Chart Legend</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleAllAssets}
|
||||
className="flex items-center gap-1 px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
{hideAssets ? (
|
||||
<>
|
||||
<Eye className="w-4 h-4" />
|
||||
Show All
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EyeOff className="w-4 h-4" />
|
||||
Hide All
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{payload.map((entry: any, index: number) => {
|
||||
const assetId = entry.dataKey.split('_')[0];
|
||||
const isHidden = hideAssets || hiddenAssets.has(assetId);
|
||||
return (
|
||||
<button
|
||||
key={`asset-${index}`}
|
||||
onClick={() => toggleAsset(assetId)}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded transition-opacity duration-200 ${isHidden ? 'opacity-40' : ''
|
||||
} hover:bg-gray-100 dark:hover:bg-gray-800`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-8 h-[3px]"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-sm">{entry.value.replace(' (%)', '')}</span>
|
||||
{isHidden ? (
|
||||
<Eye className="w-3 h-3 text-gray-400 dark:text-gray-600" />
|
||||
) : (
|
||||
<EyeOff className="w-3 h-3 text-gray-400 dark:text-gray-600" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
94
src/components/Chart/PortfolioPerformanceModal.tsx
Normal file
94
src/components/Chart/PortfolioPerformanceModal.tsx
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { X } from "lucide-react";
|
||||
import { memo } from "react";
|
||||
import {
|
||||
CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
|
||||
} from "recharts";
|
||||
|
||||
interface PortfolioPerformanceModalProps {
|
||||
performances: { year: number; percentage: number; }[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const PortfolioPerformanceModal = memo(({ performances, onClose }: PortfolioPerformanceModalProps) => {
|
||||
const sortedPerformances = [...performances].sort((a, b) => a.year - b.year);
|
||||
const CustomizedDot = (props: any) => {
|
||||
const { cx, cy, payload } = props;
|
||||
return (
|
||||
<circle
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
r={4}
|
||||
fill={payload.percentage >= 0 ? '#22c55e' : '#ef4444'}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-slate-800 p-6 rounded-lg w-[80vw] max-w-4xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-xl font-bold dark:text-gray-300">Portfolio Performance History</h2>
|
||||
<button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded">
|
||||
<X className="w-6 h-6 dark:text-gray-300" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-[400px]">
|
||||
<ResponsiveContainer>
|
||||
<LineChart data={sortedPerformances}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis
|
||||
yAxisId="left"
|
||||
tickFormatter={(value) => `${value.toFixed(2)}%`}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
tickFormatter={(value) => `€${value.toLocaleString()}`}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number, name: string) => {
|
||||
if (name === 'Performance') return [`${value.toFixed(2)}%`, name];
|
||||
return [`€${value.toLocaleString()}`, 'Portfolio Value'];
|
||||
}}
|
||||
labelFormatter={(year) => `Year ${year}`}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="percentage"
|
||||
name="Performance"
|
||||
stroke="url(#colorGradient)"
|
||||
dot={<CustomizedDot />}
|
||||
strokeWidth={2}
|
||||
yAxisId="left"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#22c55e" />
|
||||
<stop offset="100%" stopColor="#ef4444" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 dark:text-gray-300">
|
||||
{sortedPerformances.map(({ year, percentage }) => (
|
||||
<div
|
||||
key={year}
|
||||
className={`p-3 rounded-lg ${
|
||||
percentage >= 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30'
|
||||
}`}
|
||||
>
|
||||
<div className="text-sm font-medium">{year}</div>
|
||||
<div className={`text-lg font-bold ${
|
||||
percentage >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
|
||||
}`}>
|
||||
{percentage.toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { Loader2 } from "lucide-react";
|
||||
import React, { useState } from "react";
|
||||
import React, { memo, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { useLocaleDateFormat } from "../hooks/useLocalDateFormat";
|
||||
|
|
@ -69,7 +69,7 @@ interface IntervalConfig {
|
|||
unit: 'days' | 'months' | 'years';
|
||||
}
|
||||
|
||||
const InvestmentForm = ({ assetId }: { assetId: string }) => {
|
||||
const InvestmentForm = memo(({ assetId }: { assetId: string }) => {
|
||||
const [type, setType] = useState<'single' | 'periodic'>('single');
|
||||
const [amount, setAmount] = useState('');
|
||||
const [date, setDate] = useState('');
|
||||
|
|
@ -328,4 +328,4 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
|
|||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ export default function MainContent({ isAddingAsset, setIsAddingAsset }: { isAdd
|
|||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Suspense fallback={<LoadingPlaceholder className="h-[500px]" />}>
|
||||
<PortfolioTable />
|
||||
</Suspense>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@ import toast from "react-hot-toast";
|
|||
import { useDebouncedCallback } from "use-debounce";
|
||||
|
||||
import { usePortfolioSelector } from "../../hooks/usePortfolio";
|
||||
import { getHistoricalData, searchAssets } from "../../services/yahooFinanceService";
|
||||
import { EQUITY_TYPES, getHistoricalData, searchAssets } from "../../services/yahooFinanceService";
|
||||
import { Asset } from "../../types";
|
||||
|
||||
export default function AddAssetModal({ onClose }: { onClose: () => void }) {
|
||||
const [ search, setSearch ] = useState('');
|
||||
const [ searchResults, setSearchResults ] = useState<Asset[]>([]);
|
||||
const [ loading, setLoading ] = useState<null | "searching" | "adding">(null);
|
||||
const [ equityType, setEquityType ] = useState<string>(EQUITY_TYPES.all);
|
||||
const { addAsset, dateRange, assets } = usePortfolioSelector((state) => ({
|
||||
addAsset: state.addAsset,
|
||||
dateRange: state.dateRange,
|
||||
|
|
@ -22,7 +23,7 @@ export default function AddAssetModal({ onClose }: { onClose: () => void }) {
|
|||
setLoading("searching");
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
const results = await searchAssets(query);
|
||||
const results = await searchAssets(query, equityType);
|
||||
setSearchResults(results.filter((result) => !assets.some((asset) => asset.symbol === result.symbol)));
|
||||
} catch (error) {
|
||||
console.error('Error searching assets:', error);
|
||||
|
|
@ -44,7 +45,7 @@ export default function AddAssetModal({ onClose }: { onClose: () => void }) {
|
|||
dateRange.endDate
|
||||
);
|
||||
|
||||
if (historicalData.length === 0) {
|
||||
if (historicalData.size === 0) {
|
||||
toast.error(`No historical data available for ${asset.name}`);
|
||||
return;
|
||||
}
|
||||
|
|
@ -72,9 +73,17 @@ export default function AddAssetModal({ onClose }: { onClose: () => void }) {
|
|||
<div className="bg-white dark:bg-slate-800 rounded-lg p-6 w-full max-w-lg">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold dark:text-gray-200">Add Asset</h2>
|
||||
<button onClick={onClose} className="p-2">
|
||||
<X className="w-6 h-6 dark:text-gray-200" />
|
||||
</button>
|
||||
<div className="flex items-center gap-2 justify-end">
|
||||
<label className="text-sm font-medium text-gray-800/30 dark:text-gray-200/30">Asset Type:</label>
|
||||
<select value={equityType} onChange={(e) => setEquityType(e.target.value)} className="w-[30%] p-2 border rounded dark:bg-slate-800 dark:border-slate-700 dark:outline-none dark:text-gray-300">
|
||||
{Object.entries(EQUITY_TYPES).map(([key, value]) => (
|
||||
<option key={key} value={value}>{key.charAt(0).toUpperCase() + key.slice(1)}</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={onClose} className="p-2">
|
||||
<X className="w-6 h-6 dark:text-gray-200" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative mb-4">
|
||||
|
|
@ -105,7 +114,15 @@ export default function AddAssetModal({ onClose }: { onClose: () => void }) {
|
|||
className="w-full text-left p-3 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-slate-900 rounded border-b dark:border-slate-700 border-gray-300"
|
||||
onClick={() => handleAssetSelect(result)}
|
||||
>
|
||||
<div className="font-medium">{result.name}</div>
|
||||
<div className="font-medium flex justify-between">
|
||||
<span>{result.name}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={!result.priceChangePercent?.includes("-") ? "text-green-500/75" : "text-red-500/75"}>
|
||||
{!result.priceChangePercent?.includes("-") && "+"}{result.priceChangePercent}
|
||||
</span>
|
||||
{result.price}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
Ticker-Symbol: {result.symbol} | Type: {result.quoteType?.toUpperCase() || "Unknown"} | Rank: #{result.rank || "-"}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
import { format } from "date-fns";
|
||||
import { BarChart2, Eye, EyeOff, Maximize2, RefreshCcw, X } from "lucide-react";
|
||||
import { X } from "lucide-react";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import {
|
||||
CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
|
||||
} from "recharts";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
|
||||
import { useDarkMode } from "../hooks/useDarkMode";
|
||||
|
|
@ -12,13 +9,14 @@ import { getHistoricalData } from "../services/yahooFinanceService";
|
|||
import { DateRange } from "../types";
|
||||
import { calculatePortfolioValue } from "../utils/calculations/portfolioValue";
|
||||
import { getHexColor } from "../utils/formatters";
|
||||
import { DateRangePicker } from "./utils/DateRangePicker";
|
||||
import { ChartContent } from "./Chart/ChartContent";
|
||||
|
||||
export default function PortfolioChart() {
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [hideAssets, setHideAssets] = useState(false);
|
||||
const [hiddenAssets, setHiddenAssets] = useState<Set<string>>(new Set());
|
||||
const [ isFullscreen, setIsFullscreen ] = useState(false);
|
||||
const [ hideAssets, setHideAssets ] = useState(false);
|
||||
const [ hiddenAssets, setHiddenAssets ] = useState<Set<string>>(new Set());
|
||||
const { isDarkMode } = useDarkMode();
|
||||
|
||||
const { assets, dateRange, updateDateRange, updateAssetHistoricalData } = usePortfolioSelector((state) => ({
|
||||
assets: state.assets,
|
||||
dateRange: state.dateRange,
|
||||
|
|
@ -50,10 +48,10 @@ export default function PortfolioChart() {
|
|||
[asset.id]: color,
|
||||
};
|
||||
}, {});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [assets.map(a => a.id).join(','), isDarkMode]);
|
||||
}, [assets, isDarkMode]);
|
||||
|
||||
const data = useMemo(() => calculatePortfolioValue(assets, dateRange), [assets, dateRange]);
|
||||
|
||||
const data = useMemo(() => calculatePortfolioValue(assets, dateRange).filter(v => Object.keys(v.assets).length > 0), [assets, dateRange]);
|
||||
const allAssetsInvestedKapitals = useMemo<Record<string, number>>(() => {
|
||||
const investedKapitals: Record<string, number> = {};
|
||||
|
||||
|
|
@ -93,7 +91,6 @@ export default function PortfolioChart() {
|
|||
return processed;
|
||||
}), [data, assets, allAssetsInvestedKapitals]);
|
||||
|
||||
|
||||
const toggleAsset = useCallback((assetId: string) => {
|
||||
const newHiddenAssets = new Set(hiddenAssets);
|
||||
if (newHiddenAssets.has(assetId)) {
|
||||
|
|
@ -109,65 +106,8 @@ export default function PortfolioChart() {
|
|||
setHiddenAssets(new Set());
|
||||
}, [hideAssets]);
|
||||
|
||||
const CustomLegend = useCallback(({ payload }: any) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-2 p-4 rounded-lg shadow-md dark:shadow-black/60">
|
||||
<div className="flex items-center justify-between gap-2 pb-2 border-b">
|
||||
<div className="flex items-center gap-1">
|
||||
<BarChart2 className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-sm font-medium">Chart Legend</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleAllAssets}
|
||||
className="flex items-center gap-1 px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
{hideAssets ? (
|
||||
<>
|
||||
<Eye className="w-4 h-4" />
|
||||
Show All
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EyeOff className="w-4 h-4" />
|
||||
Hide All
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{payload.map((entry: any, index: number) => {
|
||||
const assetId = entry.dataKey.split('_')[0];
|
||||
const isHidden = hideAssets || hiddenAssets.has(assetId);
|
||||
return (
|
||||
<button
|
||||
key={`asset-${index}`}
|
||||
onClick={() => toggleAsset(assetId)}
|
||||
className={`flex items-center gap-2 px-2 py-1 rounded transition-opacity duration-200 ${isHidden ? 'opacity-40' : ''
|
||||
} hover:bg-gray-100 dark:hover:bg-gray-800`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-8 h-[3px]"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="text-sm">{entry.value.replace(' (%)', '')}</span>
|
||||
{isHidden ? (
|
||||
<Eye className="w-3 h-3 text-gray-400 dark:text-gray-600" />
|
||||
) : (
|
||||
<EyeOff className="w-3 h-3 text-gray-400 dark:text-gray-600" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}, [hideAssets, hiddenAssets, toggleAsset, toggleAllAssets]);
|
||||
|
||||
const handleUpdateDateRange = useCallback((newRange: DateRange) => {
|
||||
updateDateRange(newRange);
|
||||
|
||||
debouncedFetchHistoricalData(newRange.startDate, newRange.endDate);
|
||||
}, [updateDateRange, debouncedFetchHistoricalData]);
|
||||
|
||||
|
|
@ -177,167 +117,56 @@ export default function PortfolioChart() {
|
|||
setRenderKey(prevKey => prevKey + 1);
|
||||
}, []);
|
||||
|
||||
const ChartContent = useCallback(() => (
|
||||
<>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<DateRangePicker
|
||||
startDate={dateRange.startDate}
|
||||
endDate={dateRange.endDate}
|
||||
onStartDateChange={(date) => handleUpdateDateRange({ ...dateRange, startDate: date })}
|
||||
onEndDateChange={(date) => handleUpdateDateRange({ ...dateRange, endDate: date })}
|
||||
/>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
onClick={handleReRender}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded ml-2 hover:text-blue-500"
|
||||
>
|
||||
<RefreshCcw className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsFullscreen(!isFullscreen)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded hover:text-blue-500"
|
||||
>
|
||||
<Maximize2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={isFullscreen ? "h-[80vh]" : "h-[400px]"} key={renderKey}>
|
||||
<ResponsiveContainer>
|
||||
<LineChart data={processedData} className="p-3">
|
||||
<CartesianGrid strokeDasharray="3 3" className="dark:stroke-slate-600" />
|
||||
<XAxis
|
||||
tick={{ fill: isDarkMode ? '#D8D8D8' : '#4E4E4E' }}
|
||||
dataKey="date"
|
||||
tickFormatter={(date) => format(new Date(date), 'dd.MM.yyyy')}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: isDarkMode ? '#D8D8D8' : '#4E4E4E' }}
|
||||
yAxisId="left"
|
||||
tickFormatter={(value) => `${value.toFixed(2)}€`}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: isDarkMode ? '#D8D8D8' : '#4E4E4E' }}
|
||||
yAxisId="right"
|
||||
orientation="right"
|
||||
tickFormatter={(value) => `${value.toFixed(2)}%`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: isDarkMode ? '#1e293b' : '#fff',
|
||||
border: 'none',
|
||||
color: isDarkMode ? '#d1d5d1' : '#000000',
|
||||
boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)',
|
||||
}}
|
||||
formatter={(value: number, name: string, item) => {
|
||||
const assetKey = name.split('_')[0] as keyof typeof assets;
|
||||
const processedKey = `${assets.find(a => a.name === name.replace(" (%)", ""))?.id}_price`;
|
||||
|
||||
if (name === "avg. Portfolio % gain")
|
||||
return [`${value.toFixed(2)}%`, name];
|
||||
|
||||
if (name === "TTWOR")
|
||||
return [`${value.toLocaleString()}€ (${item.payload["ttwor_percent"].toFixed(2)}%)`, name];
|
||||
|
||||
if (name === "Portfolio-Value" || name === "Invested Capital")
|
||||
return [`${value.toLocaleString()}€`, name];
|
||||
|
||||
if (name.includes("(%)"))
|
||||
return [`${Number(item.payload[processedKey]).toFixed(2)}€ ${value.toFixed(2)}%`, name.replace(" (%)", "")];
|
||||
|
||||
return [`${value.toLocaleString()}€ (${((value - Number(assets[assetKey])) / Number(assets[assetKey]) * 100).toFixed(2)}%)`, name];
|
||||
}}
|
||||
labelFormatter={(date) => format(new Date(date), 'dd.MM.yyyy')}
|
||||
>
|
||||
</Tooltip>
|
||||
<Legend content={<CustomLegend />} />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="total"
|
||||
name="Portfolio-Value"
|
||||
hide={hideAssets || hiddenAssets.has("total")}
|
||||
stroke="#000"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
yAxisId="left"
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="invested"
|
||||
name="Invested Capital"
|
||||
hide={hideAssets || hiddenAssets.has("invested")}
|
||||
stroke="#666"
|
||||
strokeDasharray="5 5"
|
||||
dot={false}
|
||||
yAxisId="left"
|
||||
/>
|
||||
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="ttwor"
|
||||
name="TTWOR"
|
||||
strokeDasharray="5 5"
|
||||
stroke="#a64c79"
|
||||
hide={hideAssets || hiddenAssets.has("ttwor")}
|
||||
dot={false}
|
||||
yAxisId="left"
|
||||
/>
|
||||
{assets.map((asset) => {
|
||||
return (
|
||||
<Line
|
||||
key={asset.id}
|
||||
type="monotone"
|
||||
hide={hideAssets || hiddenAssets.has(asset.id)}
|
||||
dataKey={`${asset.id}_percent`}
|
||||
name={`${asset.name} (%)`}
|
||||
stroke={assetColors[asset.id] || "red"}
|
||||
dot={false}
|
||||
yAxisId="right"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="percentageChange"
|
||||
hide={hideAssets || hiddenAssets.has("percentageChange")}
|
||||
dot={false}
|
||||
name="avg. Portfolio % gain"
|
||||
stroke="#a0a0a0"
|
||||
yAxisId="right"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<i className="text-xs text-gray-500">
|
||||
*Note: The YAxis on the left shows the value of your portfolio (black line) and invested capital (dotted line),
|
||||
all other assets are scaled by their % gain/loss and thus scaled to the right YAxis.
|
||||
</i>
|
||||
<p className="text-xs mt-2 text-gray-500 italic">
|
||||
**Note: The % is based on daily weighted average data, thus the percentages might alter slightly.
|
||||
</p>
|
||||
</>
|
||||
), [assets, handleReRender, isDarkMode, assetColors, handleUpdateDateRange, hideAssets, hiddenAssets, processedData, CustomLegend, dateRange, isFullscreen, renderKey]);
|
||||
|
||||
|
||||
if (isFullscreen) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-white dark:bg-slate-800 z-50">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold">Portfolio Chart</h2>
|
||||
<div className="flex justify-between items-center mb-4 p-5">
|
||||
<h2 className="text-xl font-bold dark:text-gray-300">Portfolio Chart</h2>
|
||||
<button
|
||||
onClick={() => setIsFullscreen(false)}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
<X className="w-6 h-6 dark:text-gray-300" />
|
||||
</button>
|
||||
</div>
|
||||
<ChartContent />
|
||||
<ChartContent
|
||||
dateRange={dateRange}
|
||||
handleUpdateDateRange={handleUpdateDateRange}
|
||||
handleReRender={handleReRender}
|
||||
isFullscreen={isFullscreen}
|
||||
setIsFullscreen={setIsFullscreen}
|
||||
renderKey={renderKey}
|
||||
isDarkMode={isDarkMode}
|
||||
hideAssets={hideAssets}
|
||||
hiddenAssets={hiddenAssets}
|
||||
processedData={processedData}
|
||||
assets={assets}
|
||||
assetColors={assetColors}
|
||||
toggleAsset={toggleAsset}
|
||||
toggleAllAssets={toggleAllAssets}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white dark:bg-slate-800 p-4 rounded-lg shadow dark:shadow-black/60">
|
||||
<ChartContent />
|
||||
<ChartContent
|
||||
dateRange={dateRange}
|
||||
handleUpdateDateRange={handleUpdateDateRange}
|
||||
handleReRender={handleReRender}
|
||||
isFullscreen={isFullscreen}
|
||||
setIsFullscreen={setIsFullscreen}
|
||||
renderKey={renderKey}
|
||||
isDarkMode={isDarkMode}
|
||||
hideAssets={hideAssets}
|
||||
hiddenAssets={hiddenAssets}
|
||||
processedData={processedData}
|
||||
assets={assets}
|
||||
assetColors={assetColors}
|
||||
toggleAsset={toggleAsset}
|
||||
toggleAllAssets={toggleAllAssets}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
import { format, isBefore } from "date-fns";
|
||||
import {
|
||||
Download, FileDown, LineChart, Loader2, Pencil, RefreshCw, ShoppingBag, Trash2
|
||||
BarChart, BarChart2, Download, FileDown, LineChart, Loader2, Pencil, RefreshCw, ShoppingBag,
|
||||
Trash2, TrendingDown, TrendingUp
|
||||
} from "lucide-react";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
import { memo, useCallback, useMemo, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { usePortfolioSelector } from "../hooks/usePortfolio";
|
||||
import { Investment } from "../types";
|
||||
import { calculateInvestmentPerformance } from "../utils/calculations/performance";
|
||||
import { downloadTableAsCSV, generatePortfolioPDF } from "../utils/export";
|
||||
import { AssetPerformanceModal } from "./Chart/AssetPerformanceModal";
|
||||
import { PortfolioPerformanceModal } from "./Chart/PortfolioPerformanceModal";
|
||||
import { EditInvestmentModal } from "./Modals/EditInvestmentModal";
|
||||
import { EditSavingsPlanModal } from "./Modals/EditSavingsPlanModal";
|
||||
import { FutureProjectionModal } from "./Modals/FutureProjectionModal";
|
||||
|
|
@ -24,7 +27,7 @@ interface SavingsPlanPerformance {
|
|||
allocation?: number;
|
||||
}
|
||||
|
||||
export default function PortfolioTable() {
|
||||
export default memo(function PortfolioTable() {
|
||||
const { assets, removeInvestment, clearInvestments } = usePortfolioSelector((state) => ({
|
||||
assets: state.assets,
|
||||
removeInvestment: state.removeInvestment,
|
||||
|
|
@ -49,6 +52,7 @@ export default function PortfolioTable() {
|
|||
yearInterval: number;
|
||||
};
|
||||
} | null>(null);
|
||||
const [showPortfolioPerformance, setShowPortfolioPerformance] = useState(false);
|
||||
|
||||
const performance = useMemo(() => calculateInvestmentPerformance(assets), [assets]);
|
||||
|
||||
|
|
@ -210,8 +214,82 @@ export default function PortfolioTable() {
|
|||
}
|
||||
}, [assets, removeInvestment]);
|
||||
|
||||
const [selectedAsset, setSelectedAsset] = useState<{
|
||||
name: string;
|
||||
performances: { year: number; percentage: number }[];
|
||||
} | null>(null);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="overflow-x-auto dark:text-gray-300 p-4 border-gray-300 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-800 shadow-lg dark:shadow-black/60">
|
||||
<h2 className="text-xl font-bold mb-4 flex items-center gap-2">
|
||||
<BarChart className="w-6 h-6" />
|
||||
Assets Performance Overview
|
||||
</h2>
|
||||
<i>Calculated performance of each asset as of "paper"</i>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{assets.map(asset => {
|
||||
const datas = Array.from(asset.historicalData.values());
|
||||
const startPrice = datas.shift();
|
||||
const endPrice = datas.pop();
|
||||
const avgPerformance = performance.summary.annualPerformancesPerAsset.get(asset.id);
|
||||
const averagePerf = ((avgPerformance?.reduce?.((acc, curr) => acc + curr.percentage, 0) || 0) / (avgPerformance?.length || 1));
|
||||
|
||||
return (
|
||||
<div
|
||||
key={asset.id}
|
||||
className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<h3 className="text-lg font-bold mb-2 text-nowrap">{asset.name}</h3>
|
||||
<div className="space-y-2">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Start Price:</th>
|
||||
<th>Current Price:</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="text-center">€{startPrice?.toFixed(2) || 'N/A'}</td>
|
||||
<td className="text-center">€{endPrice?.toFixed(2) || 'N/A'}
|
||||
<i className="pl-2 text-xs">({endPrice && startPrice && endPrice - startPrice > 0 ? '+' : ''}{endPrice && startPrice && ((endPrice - startPrice) / startPrice * 100).toFixed(2)}%)</i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button
|
||||
onClick={() => avgPerformance && setSelectedAsset({
|
||||
name: asset.name,
|
||||
performances: avgPerformance
|
||||
})}
|
||||
className="w-full mt-2 p-3 border bg-gray-100 border-gray-500 dark:border-gray-500 dark:bg-slate-800 rounded-lg flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
<span className="text-gray-500 dark:text-gray-400">Avg. Performance:</span>
|
||||
<span className={`flex items-center gap-1 font-bold ${
|
||||
averagePerf >= 0 ? 'text-green-500' : 'text-red-500'
|
||||
}`}>
|
||||
{averagePerf.toFixed(2)}%
|
||||
{averagePerf >= 0 ? (
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
) : (
|
||||
<TrendingDown className="w-4 h-4" />
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{selectedAsset && (
|
||||
<AssetPerformanceModal
|
||||
assetName={selectedAsset.name}
|
||||
performances={selectedAsset.performances}
|
||||
onClose={() => setSelectedAsset(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="overflow-x-auto min-h-[500px] dark:text-gray-300 p-4 border-gray-300 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-800 shadow-lg dark:shadow-black/60">
|
||||
<div className="flex flex-wrap justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold dark:text-gray-100">Portfolio's <u>Positions</u> Overview</h2>
|
||||
|
|
@ -244,6 +322,15 @@ export default function PortfolioTable() {
|
|||
)}
|
||||
{isGeneratingPDF ? 'Generating...' : 'Save Analysis'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowPortfolioPerformance(true)}
|
||||
disabled={performance.investments.length === 0}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<BarChart2 size={16} />
|
||||
Portfolio Performance History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -505,6 +592,12 @@ export default function PortfolioTable() {
|
|||
onClose={() => setEditingSavingsPlan(null)}
|
||||
/>
|
||||
)}
|
||||
{showPortfolioPerformance && (
|
||||
<PortfolioPerformanceModal
|
||||
performances={performance.summary.annualPerformances}
|
||||
onClose={() => setShowPortfolioPerformance(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { startOfYear } from "date-fns";
|
||||
import { createContext, useMemo, useReducer } from "react";
|
||||
|
||||
import { Asset, DateRange, HistoricalData, Investment } from "../types";
|
||||
import { Asset, DateRange, Investment } from "../types";
|
||||
|
||||
// State Types
|
||||
interface PortfolioState {
|
||||
|
|
@ -19,7 +19,7 @@ type PortfolioAction =
|
|||
| { type: 'ADD_INVESTMENT'; payload: { assetId: string; investment: Investment | Investment[] } }
|
||||
| { type: 'REMOVE_INVESTMENT'; payload: { assetId: string; investmentId: string } }
|
||||
| { type: 'UPDATE_DATE_RANGE'; payload: DateRange }
|
||||
| { type: 'UPDATE_ASSET_HISTORICAL_DATA'; payload: { assetId: string; historicalData: HistoricalData[]; longName?: string } }
|
||||
| { type: 'UPDATE_ASSET_HISTORICAL_DATA'; payload: { assetId: string; historicalData: Asset['historicalData']; longName?: string } }
|
||||
| { type: 'UPDATE_INVESTMENT'; payload: { assetId: string; investmentId: string; investment: Investment } }
|
||||
| { type: 'CLEAR_INVESTMENTS' }
|
||||
| { type: 'SET_ASSETS'; payload: Asset[] };
|
||||
|
|
@ -130,7 +130,7 @@ export interface PortfolioContextType extends PortfolioState {
|
|||
addInvestment: (assetId: string, investment: Investment | Investment[]) => void;
|
||||
removeInvestment: (assetId: string, investmentId: string) => void;
|
||||
updateDateRange: (dateRange: DateRange) => void;
|
||||
updateAssetHistoricalData: (assetId: string, historicalData: HistoricalData[], longName?: string) => void;
|
||||
updateAssetHistoricalData: (assetId: string, historicalData: Asset['historicalData'], longName?: string) => void;
|
||||
updateInvestment: (assetId: string, investmentId: string, investment: Investment) => void;
|
||||
clearInvestments: () => void;
|
||||
setAssets: (assets: Asset[]) => void;
|
||||
|
|
@ -154,7 +154,7 @@ export const PortfolioProvider = ({ children }: { children: React.ReactNode }) =
|
|||
dispatch({ type: 'REMOVE_INVESTMENT', payload: { assetId, investmentId } }),
|
||||
updateDateRange: (dateRange: DateRange) =>
|
||||
dispatch({ type: 'UPDATE_DATE_RANGE', payload: dateRange }),
|
||||
updateAssetHistoricalData: (assetId: string, historicalData: HistoricalData[], longName?: string) =>
|
||||
updateAssetHistoricalData: (assetId: string, historicalData: Asset['historicalData'], longName?: string) =>
|
||||
dispatch({ type: 'UPDATE_ASSET_HISTORICAL_DATA', payload: { assetId, historicalData, longName } }),
|
||||
updateInvestment: (assetId: string, investmentId: string, investment: Investment) =>
|
||||
dispatch({ type: 'UPDATE_INVESTMENT', payload: { assetId, investmentId, investment } }),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import type { Asset, YahooSearchResponse, YahooChartResult } from "../types";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { formatDateToISO } from "../utils/formatters";
|
||||
|
||||
// this is only needed when hosted staticly without a proxy server or smt
|
||||
// TODO change it to use the proxy server
|
||||
const isDev = import.meta.env.DEV;
|
||||
|
|
@ -8,12 +10,24 @@ const CORS_PROXY = 'https://corsproxy.io/?url=';
|
|||
const YAHOO_API = 'https://query1.finance.yahoo.com';
|
||||
const API_BASE = isDev ? '/yahoo' : `${CORS_PROXY}${encodeURIComponent(YAHOO_API)}`;
|
||||
|
||||
export const searchAssets = async (query: string): Promise<Asset[]> => {
|
||||
export const EQUITY_TYPES = {
|
||||
all: "etf,equity,mutualfund,index,currency,cryptocurrency,future",
|
||||
ETF: "etf",
|
||||
Stock: "equity",
|
||||
"Etf or Stock": "etf,equity",
|
||||
Mutualfund: "mutualfund",
|
||||
Index: "index",
|
||||
Currency: "currency",
|
||||
Cryptocurrency: "cryptocurrency",
|
||||
Future: "future",
|
||||
};
|
||||
|
||||
export const searchAssets = async (query: string, equityType: string): Promise<Asset[]> => {
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
query,
|
||||
lang: 'en-US',
|
||||
type: 'equity,mutualfund,etf,index,currency,cryptocurrency', // allow searching for everything except: future
|
||||
type: equityType,
|
||||
longName: 'true',
|
||||
});
|
||||
|
||||
|
|
@ -32,7 +46,7 @@ export const searchAssets = async (query: string): Promise<Asset[]> => {
|
|||
}
|
||||
|
||||
return data.finance.result[0].documents
|
||||
.filter(quote => quote.quoteType === 'equity' || quote.quoteType === 'etf')
|
||||
.filter(quote => equityType.split(",").map(v => v.toLowerCase()).includes(quote.quoteType.toLowerCase()))
|
||||
.map((quote) => ({
|
||||
id: quote.symbol,
|
||||
isin: '', // not provided by Yahoo Finance API
|
||||
|
|
@ -41,11 +55,11 @@ export const searchAssets = async (query: string): Promise<Asset[]> => {
|
|||
rank: quote.rank,
|
||||
symbol: quote.symbol,
|
||||
quoteType: quote.quoteType,
|
||||
price: quote.regularMarketPrice.raw,
|
||||
priceChange: quote.regularMarketChange.raw,
|
||||
priceChangePercent: quote.regularMarketPercentChange.raw,
|
||||
price: quote.regularMarketPrice.fmt,
|
||||
priceChange: quote.regularMarketChange.fmt,
|
||||
priceChangePercent: quote.regularMarketPercentChange.fmt,
|
||||
exchange: quote.exchange,
|
||||
historicalData: [],
|
||||
historicalData: new Map(),
|
||||
investments: [],
|
||||
}));
|
||||
} catch (error) {
|
||||
|
|
@ -75,15 +89,12 @@ export const getHistoricalData = async (symbol: string, startDate: Date, endDate
|
|||
const quotes = indicators.quote[0];
|
||||
|
||||
return {
|
||||
historicalData: timestamp.map((time: number, index: number) => ({
|
||||
date: new Date(time * 1000),
|
||||
price: quotes.close[index],
|
||||
})),
|
||||
historicalData: new Map(timestamp.map((time: number, index: number) => [formatDateToISO(new Date(time * 1000)), quotes.close[index]])),
|
||||
longName: meta.longName
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching historical data:', error);
|
||||
toast.error(`Failed to fetch historical data for ${symbol}. Please try again later.`);
|
||||
return { historicalData: [], longName: '' };
|
||||
return { historicalData: new Map<string, number>(), longName: '' };
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,18 +3,16 @@ export interface Asset {
|
|||
isin: string;
|
||||
name: string;
|
||||
quoteType: string;
|
||||
price?: string;
|
||||
priceChange?: string;
|
||||
priceChangePercent?: string;
|
||||
rank: string;
|
||||
wkn: string;
|
||||
symbol: string;
|
||||
historicalData: HistoricalData[];
|
||||
historicalData: Map<string, number>;
|
||||
investments: Investment[];
|
||||
}
|
||||
|
||||
export interface HistoricalData {
|
||||
date: Date;
|
||||
price: number;
|
||||
}
|
||||
|
||||
export interface Investment {
|
||||
id: string;
|
||||
assetId: string;
|
||||
|
|
@ -67,12 +65,14 @@ export interface PortfolioPerformance {
|
|||
summary: {
|
||||
totalInvested: number;
|
||||
currentValue: number;
|
||||
annualPerformancesPerAsset: Map<string, { year: number; percentage: number; price: number }[]>;
|
||||
performancePercentage: number;
|
||||
performancePerAnnoPerformance: number;
|
||||
ttworValue: number;
|
||||
ttworPercentage: number;
|
||||
bestPerformancePerAnno: { percentage: number, year: number }[];
|
||||
worstPerformancePerAnno: { percentage: number, year: number }[];
|
||||
annualPerformances: { year: number; percentage: number; }[];
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import {
|
||||
addDays, addMonths, addWeeks, addYears, isAfter, isBefore, isSameDay, setDate
|
||||
} from "date-fns";
|
||||
import { addDays, addMonths, addWeeks, addYears, isAfter, isSameDay, setDate } from "date-fns";
|
||||
|
||||
import { formatDateToISO } from "../formatters";
|
||||
|
||||
import type { Asset, Investment, PeriodicSettings } from "../../types";
|
||||
|
||||
export const calculateAssetValueAtDate = (asset: Asset, date: Date, currentPrice: number) => {
|
||||
let totalShares = 0;
|
||||
|
||||
|
|
@ -14,23 +13,21 @@ export const calculateAssetValueAtDate = (asset: Asset, date: Date, currentPrice
|
|||
if (isAfter(invDate, date) || isSameDay(invDate, date)) continue;
|
||||
|
||||
// Find price at investment date
|
||||
const investmentPrice = asset.historicalData.find(
|
||||
(data) => isSameDay(data.date, invDate)
|
||||
)?.price || 0;
|
||||
let investmentPrice = asset.historicalData.get(formatDateToISO(invDate)) || 0;
|
||||
// if no investment price found, try to find the nearest price
|
||||
if(!investmentPrice) {
|
||||
let previousDate = invDate;
|
||||
let afterDate = invDate;
|
||||
while(!investmentPrice) {
|
||||
previousDate = addDays(previousDate, -1);
|
||||
afterDate = addDays(afterDate, 1);
|
||||
investmentPrice = asset.historicalData.get(formatDateToISO(previousDate)) || asset.historicalData.get(formatDateToISO(afterDate)) || 0;
|
||||
}
|
||||
}
|
||||
|
||||
// if no investment price found, use the previous price
|
||||
const previousInvestmentPrice = investmentPrice || asset.historicalData
|
||||
.filter(({ date }) => isAfter(new Date(date), invDate) || isSameDay(new Date(date), invDate))
|
||||
.find(({ price }) => price !== 0)?.price || 0;
|
||||
|
||||
const investmentPriceToUse = investmentPrice || previousInvestmentPrice || asset.historicalData
|
||||
.filter(({ date }) => isBefore(new Date(date), invDate) || isSameDay(new Date(date), invDate))
|
||||
.reverse()
|
||||
.find(({ price }) => price !== 0)?.price || 0;
|
||||
|
||||
if (investmentPriceToUse > 0) {
|
||||
totalShares += investment.amount / investmentPriceToUse;
|
||||
buyIns.push(investmentPriceToUse);
|
||||
if (investmentPrice > 0) {
|
||||
totalShares += investment.amount / investmentPrice;
|
||||
buyIns.push(investmentPrice);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { isAfter, isBefore, isSameDay } from "date-fns";
|
||||
import { addDays, isBefore } from "date-fns";
|
||||
|
||||
import { formatDateToISO } from "../formatters";
|
||||
|
||||
import type { Asset, InvestmentPerformance, PortfolioPerformance } from "../../types";
|
||||
|
||||
|
||||
export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerformance => {
|
||||
const investments: InvestmentPerformance[] = [];
|
||||
let totalInvested = 0;
|
||||
|
|
@ -16,8 +16,11 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
|
||||
// Sammle erste und letzte Preise für jedes Asset
|
||||
for (const asset of assets) {
|
||||
firstDayPrices[asset.id] = asset.historicalData[0]?.price || 0;
|
||||
currentPrices[asset.id] = asset.historicalData[asset.historicalData.length - 1]?.price || 0;
|
||||
const keys = Array.from(asset.historicalData.values());
|
||||
const firstDay = keys[0];
|
||||
const lastDay = keys[keys.length - 1];
|
||||
firstDayPrices[asset.id] = firstDay;
|
||||
currentPrices[asset.id] = lastDay;
|
||||
investedPerAsset[asset.id] = asset.investments.reduce((sum, inv) => sum + inv.amount, 0);
|
||||
}
|
||||
|
||||
|
|
@ -30,6 +33,10 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
return acc;
|
||||
}, 0);
|
||||
|
||||
// Calculate portfolio-level annual performances
|
||||
const annualPerformances: { year: number; percentage: number }[] = [];
|
||||
const annualPerformancesPerAsset = new Map<string, { year: number; percentage: number; price: number }[]>();
|
||||
|
||||
// Finde das früheste Investmentdatum
|
||||
for (const asset of assets) {
|
||||
for (const investment of asset.investments) {
|
||||
|
|
@ -38,10 +45,37 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
earliestDate = investmentDate;
|
||||
}
|
||||
}
|
||||
const historicalData = Array.from(asset.historicalData.entries());
|
||||
const firstDate = new Date(historicalData[0][0]);
|
||||
const temp_assetAnnualPerformances: { year: number; percentage: number; price: number }[] = [];
|
||||
for (let year = firstDate.getFullYear(); year <= new Date().getFullYear(); year++) {
|
||||
const yearStart = new Date(year, 0, 1);
|
||||
const yearEnd = new Date(year, 11, 31);
|
||||
let startDate = yearStart;
|
||||
let endDate = yearEnd;
|
||||
let startPrice = asset.historicalData.get(formatDateToISO(startDate));
|
||||
let endPrice = asset.historicalData.get(formatDateToISO(endDate));
|
||||
while(!startPrice || !endPrice) {
|
||||
startDate = addDays(startDate, 1);
|
||||
endDate = addDays(endDate, -1);
|
||||
endPrice = endPrice || asset.historicalData.get(formatDateToISO(endDate)) || 0;
|
||||
startPrice = startPrice || asset.historicalData.get(formatDateToISO(startDate)) || 0;
|
||||
if(endDate.getTime() < yearStart.getTime() || startDate.getTime() > yearEnd.getTime()) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (startPrice && endPrice) {
|
||||
const percentage = ((endPrice - startPrice) / startPrice) * 100;
|
||||
temp_assetAnnualPerformances.push({
|
||||
year,
|
||||
percentage,
|
||||
price: (endPrice + startPrice) / 2
|
||||
});
|
||||
}
|
||||
}
|
||||
annualPerformancesPerAsset.set(asset.id, temp_assetAnnualPerformances);
|
||||
}
|
||||
|
||||
// Calculate portfolio-level annual performances
|
||||
const annualPerformances: { year: number; percentage: number }[] = [];
|
||||
|
||||
// Calculate portfolio performance for each year
|
||||
const now = new Date();
|
||||
|
|
@ -56,20 +90,26 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
|
||||
for (const asset of assets) {
|
||||
// Get prices for the start and end of the year
|
||||
const startPrice = asset.historicalData.filter(d =>
|
||||
new Date(d.date).getFullYear() === year &&
|
||||
new Date(d.date).getMonth() === 0
|
||||
).sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()).find(d => d.price !== 0)?.price || 0;
|
||||
|
||||
const endPrice = asset.historicalData.filter(d =>
|
||||
new Date(d.date).getFullYear() === year
|
||||
).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).find(d => d.price !== 0)?.price || 0;
|
||||
let startPrice = 0;
|
||||
let endPrice = 0;
|
||||
let startDate = yearStart;
|
||||
let endDate = yearEnd;
|
||||
while(!startPrice || !endPrice) {
|
||||
startDate = addDays(startDate, 1);
|
||||
endDate = addDays(endDate, -1);
|
||||
endPrice = endPrice || asset.historicalData.get(formatDateToISO(endDate)) || 0;
|
||||
startPrice = startPrice || asset.historicalData.get(formatDateToISO(startDate)) || 0;
|
||||
if(endDate.getTime() < yearStart.getTime() || startDate.getTime() > yearEnd.getTime()) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (startPrice === 0 || endPrice === 0) {
|
||||
console.warn(`Skipping asset for year ${year} due to missing start or end price`);
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
// Get all investments made before or during this year
|
||||
const relevantInvestments = asset.investments.filter(inv =>
|
||||
new Date(inv.date!) <= yearEnd && new Date(inv.date!) >= yearStart
|
||||
|
|
@ -78,17 +118,18 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
for (const investment of relevantInvestments) {
|
||||
const invDate = new Date(investment.date!);
|
||||
|
||||
const investmentPrice = asset.historicalData.find(
|
||||
(data) => isSameDay(data.date, invDate)
|
||||
)?.price || 0;
|
||||
let buyInPrice = asset.historicalData.get(formatDateToISO(invDate)) || 0;
|
||||
|
||||
const previousPrice = investmentPrice || asset.historicalData.filter(
|
||||
(data) => isBefore(new Date(data.date), invDate)
|
||||
).reverse().find((v) => v.price !== 0)?.price || 0;
|
||||
|
||||
const buyInPrice = investmentPrice || previousPrice || asset.historicalData.filter(
|
||||
(data) => isAfter(new Date(data.date), invDate)
|
||||
).find((v) => v.price !== 0)?.price || 0;
|
||||
// try to find the next closest price prior previousdates
|
||||
if(!buyInPrice) {
|
||||
let previousDate = invDate;
|
||||
let afterDate = invDate;
|
||||
while(!buyInPrice) {
|
||||
previousDate = addDays(previousDate, -1);
|
||||
afterDate = addDays(afterDate, 1);
|
||||
buyInPrice = asset.historicalData.get(formatDateToISO(previousDate)) || asset.historicalData.get(formatDateToISO(afterDate)) || 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (buyInPrice > 0) {
|
||||
const shares = investment.amount / buyInPrice;
|
||||
|
|
@ -102,6 +143,7 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Calculate weighted average performance for the year
|
||||
if (yearInvestments.length > 0) {
|
||||
const totalWeight = yearInvestments.reduce((sum, inv) => sum + inv.weight, 0);
|
||||
|
|
@ -127,21 +169,21 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
|
||||
// Normale Performance-Berechnungen...
|
||||
for (const asset of assets) {
|
||||
const currentPrice = asset.historicalData[asset.historicalData.length - 1]?.price || 0;
|
||||
const historicalVals = Array.from(asset.historicalData.values());
|
||||
const currentPrice = historicalVals[historicalVals.length - 1] || 0;
|
||||
|
||||
for (const investment of asset.investments) {
|
||||
const invDate = new Date(investment.date!);
|
||||
const investmentPrice = asset.historicalData.find(
|
||||
(data) => isSameDay(data.date, invDate)
|
||||
)?.price || 0;
|
||||
|
||||
const previousPrice = investmentPrice || asset.historicalData.filter(
|
||||
(data) => isBefore(new Date(data.date), invDate)
|
||||
).reverse().find((v) => v.price !== 0)?.price || 0;
|
||||
|
||||
const buyInPrice = investmentPrice || previousPrice || asset.historicalData.filter(
|
||||
(data) => isAfter(new Date(data.date), invDate)
|
||||
).find((v) => v.price !== 0)?.price || 0;
|
||||
let buyInPrice = asset.historicalData.get(formatDateToISO(invDate)) || 0;
|
||||
if(!buyInPrice) {
|
||||
let previousDate = invDate;
|
||||
let afterDate = invDate;
|
||||
while(!buyInPrice) {
|
||||
previousDate = addDays(previousDate, -1);
|
||||
afterDate = addDays(afterDate, 1);
|
||||
buyInPrice = asset.historicalData.get(formatDateToISO(previousDate)) || asset.historicalData.get(formatDateToISO(afterDate)) || 0;
|
||||
}
|
||||
}
|
||||
|
||||
const shares = buyInPrice > 0 ? investment.amount / buyInPrice : 0;
|
||||
const currentValue = shares * currentPrice;
|
||||
|
|
@ -176,6 +218,7 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
summary: {
|
||||
totalInvested,
|
||||
currentValue: totalCurrentValue,
|
||||
annualPerformancesPerAsset,
|
||||
performancePercentage: totalInvested > 0
|
||||
? ((totalCurrentValue - totalInvested) / totalInvested) * 100
|
||||
: 0,
|
||||
|
|
@ -183,7 +226,8 @@ export const calculateInvestmentPerformance = (assets: Asset[]): PortfolioPerfor
|
|||
ttworValue,
|
||||
ttworPercentage,
|
||||
worstPerformancePerAnno: worstPerformancePerAnno,
|
||||
bestPerformancePerAnno: bestPerformancePerAnno
|
||||
bestPerformancePerAnno: bestPerformancePerAnno,
|
||||
annualPerformances: annualPerformances
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
import { addDays, isAfter, isBefore, isSameDay } from "date-fns";
|
||||
|
||||
import { formatDateToISO } from "../formatters";
|
||||
import { calculateAssetValueAtDate } from "./assetValue";
|
||||
|
||||
import type { Asset, DateRange, DayData } from "../../types";
|
||||
interface WeightedPercent {
|
||||
percent: number;
|
||||
weight: number;
|
||||
}
|
||||
|
||||
|
||||
export const calculatePortfolioValue = (assets: Asset[], dateRange: DateRange) => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
|
|
@ -22,24 +28,16 @@ export const calculatePortfolioValue = (assets: Asset[], dateRange: DateRange) =
|
|||
assets: {},
|
||||
};
|
||||
|
||||
interface WeightedPercent {
|
||||
percent: number;
|
||||
weight: number;
|
||||
}
|
||||
const weightedPercents: WeightedPercent[] = [];
|
||||
|
||||
for (const asset of assets) {
|
||||
// calculate the invested kapital
|
||||
for (const investment of asset.investments) {
|
||||
if (!isAfter(new Date(investment.date!), currentDate) && !isSameDay(new Date(investment.date!), currentDate)) {
|
||||
dayData.invested += investment.amount;
|
||||
}
|
||||
const invDate = new Date(investment.date!);
|
||||
if (!isAfter(invDate, currentDate) && !isSameDay(invDate, currentDate)) dayData.invested += investment.amount;
|
||||
}
|
||||
|
||||
// Get historical price for the asset
|
||||
const currentValueOfAsset = asset.historicalData.find(
|
||||
(data) => isSameDay(data.date, dayData.date)
|
||||
)?.price || beforeValue[asset.id];
|
||||
const currentValueOfAsset = asset.historicalData.get(formatDateToISO(dayData.date)) || beforeValue[asset.id];
|
||||
beforeValue[asset.id] = currentValueOfAsset;
|
||||
|
||||
if (currentValueOfAsset !== undefined) {
|
||||
|
|
@ -52,9 +50,10 @@ export const calculatePortfolioValue = (assets: Asset[], dateRange: DateRange) =
|
|||
dayData.total += investedValue || 0;
|
||||
dayData.assets[asset.id] = currentValueOfAsset;
|
||||
|
||||
const performancePercentage = investedValue > 0
|
||||
? ((currentValueOfAsset - avgBuyIn) / avgBuyIn) * 100
|
||||
: 0;
|
||||
let performancePercentage = 0;
|
||||
if (investedValue > 0) {
|
||||
performancePercentage = ((currentValueOfAsset - avgBuyIn) / avgBuyIn) * 100;
|
||||
}
|
||||
|
||||
weightedPercents.push({
|
||||
percent: performancePercentage,
|
||||
|
|
@ -75,9 +74,11 @@ export const calculatePortfolioValue = (assets: Asset[], dateRange: DateRange) =
|
|||
const totalInvested = dayData.invested; // Total invested amount for the day
|
||||
const totalCurrentValue = dayData.total; // Total current value for the day
|
||||
|
||||
dayData.percentageChange = totalInvested > 0 && totalCurrentValue > 0
|
||||
? ((totalCurrentValue - totalInvested) / totalInvested) * 100
|
||||
: 0;
|
||||
if (totalInvested > 0 && totalCurrentValue > 0) {
|
||||
dayData.percentageChange = ((totalCurrentValue - totalInvested) / totalInvested) * 100;
|
||||
} else {
|
||||
dayData.percentageChange = 0;
|
||||
}
|
||||
|
||||
|
||||
currentDate = addDays(currentDate, 1);
|
||||
|
|
@ -86,6 +87,10 @@ export const calculatePortfolioValue = (assets: Asset[], dateRange: DateRange) =
|
|||
|
||||
// Filter out days with incomplete asset data
|
||||
return data.filter(
|
||||
(dayData) => !Object.values(dayData.assets).some((value) => value === 0)
|
||||
(dayData) => {
|
||||
const vals = Object.values(dayData.assets);
|
||||
if (!vals.length) return false;
|
||||
return !vals.some((value) => value === 0);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
1
src/utils/chartDataWindowing.ts
Normal file
1
src/utils/chartDataWindowing.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
|
||||
Loading…
Add table
Reference in a new issue