diff --git a/README.md b/README.md index 47e94c4..ed72ecc 100644 --- a/README.md +++ b/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 ![PDF Export - Page-1](./docs/analysis-page-1.png) ![PDF Export - Page-2](./docs/analysis-page-2.png) ![Scenario Projection](./docs/scenario-projection.png) - +![Portfolio Performance Modal](./docs/portfolioPerformance.png) +![Asset Performance Modal](./docs/assetPerformance.png) +![Asset Performance Cards](./docs/assetPerformanceCards.png) +![Asset Modal White Mode](.docs/assetPerformanceWhiteMode.png) ### Credits: > Thanks to [yahoofinance](https://finance.yahoo.com/) for the stock data. + + +- **15.01.2025:** Increased Performance of entire Site by utilizing Maps diff --git a/docs/assetPerformance.png b/docs/assetPerformance.png new file mode 100644 index 0000000..26e46c6 Binary files /dev/null and b/docs/assetPerformance.png differ diff --git a/docs/assetPerformanceCards.png b/docs/assetPerformanceCards.png new file mode 100644 index 0000000..cad5567 Binary files /dev/null and b/docs/assetPerformanceCards.png differ diff --git a/docs/assetPerformanceWhiteMode.png b/docs/assetPerformanceWhiteMode.png new file mode 100644 index 0000000..c62dcaa Binary files /dev/null and b/docs/assetPerformanceWhiteMode.png differ diff --git a/docs/portfolioPerformance.png b/docs/portfolioPerformance.png new file mode 100644 index 0000000..ccd5c52 Binary files /dev/null and b/docs/portfolioPerformance.png differ diff --git a/src/components/Chart/AssetPerformanceModal.tsx b/src/components/Chart/AssetPerformanceModal.tsx new file mode 100644 index 0000000..4bcb5e0 --- /dev/null +++ b/src/components/Chart/AssetPerformanceModal.tsx @@ -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 ( + = 0 ? '#22c55e' : '#ef4444'} + /> + ); + }; + + return ( +
+
+
+

{assetName} - Yearly Performance

+ +
+
+ + + + + `${value.toFixed(2)}%`} + /> + `€${value.toFixed(2)}`} + /> + { + if (name === 'Performance') return [`${value.toFixed(2)}%`, name]; + return [`€${value.toFixed(2)}`, name]; + }} + labelFormatter={(year) => `Year ${year}`} + /> + } + strokeWidth={2} + yAxisId="left" + /> + + + + + + + + + +
+
+ {sortedPerformances.map(({ year, percentage, price }) => ( +
= 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30' + }`} + > +
{year}
+
= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' + }`}> + {percentage.toFixed(2)}% +
+ {price && ( +
+ €{price.toFixed(2)} +
+ )} +
+ ))} +
+
+
+ ); +}); diff --git a/src/components/Chart/ChartContent.tsx b/src/components/Chart/ChartContent.tsx new file mode 100644 index 0000000..8b3677b --- /dev/null +++ b/src/components/Chart/ChartContent.tsx @@ -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; + processedData: any[]; + assets: Asset[]; + assetColors: Record; + 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) => ( + <> +
+ handleUpdateDateRange({ ...dateRange, startDate: date })} + onEndDateChange={(date) => handleUpdateDateRange({ ...dateRange, endDate: date })} + /> +
+ + +
+
+
+ + + + format(new Date(date), 'dd.MM.yyyy')} + /> + `${value.toFixed(2)}€`} + /> + `${value.toFixed(2)}%`} + /> + { + 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')} + /> + } /> + + + + {assets.map((asset) => ( + + ))} + + + +
+ + *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. + +

+ **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 new file mode 100644 index 0000000..cb282d1 --- /dev/null +++ b/src/components/Chart/ChartLegend.tsx @@ -0,0 +1,66 @@ +import { BarChart2, Eye, EyeOff } from "lucide-react"; +import { memo } from "react"; + +interface ChartLegendProps { + payload: any[]; + hideAssets: boolean; + hiddenAssets: Set; + toggleAsset: (assetId: string) => void; + toggleAllAssets: () => void; +} + +export const ChartLegend = memo(({ payload, hideAssets, hiddenAssets, toggleAsset, toggleAllAssets }: ChartLegendProps) => { + return ( +
+
+
+ + Chart Legend +
+ +
+
+ {payload.map((entry: any, index: number) => { + const assetId = entry.dataKey.split('_')[0]; + const isHidden = hideAssets || hiddenAssets.has(assetId); + return ( + + ); + })} +
+
+ ); +}); diff --git a/src/components/Chart/PortfolioPerformanceModal.tsx b/src/components/Chart/PortfolioPerformanceModal.tsx new file mode 100644 index 0000000..f696da1 --- /dev/null +++ b/src/components/Chart/PortfolioPerformanceModal.tsx @@ -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 ( + = 0 ? '#22c55e' : '#ef4444'} + /> + ); + }; + + return ( +
+
+
+

Portfolio Performance History

+ +
+
+ + + + + `${value.toFixed(2)}%`} + /> + `€${value.toLocaleString()}`} + /> + { + if (name === 'Performance') return [`${value.toFixed(2)}%`, name]; + return [`€${value.toLocaleString()}`, 'Portfolio Value']; + }} + labelFormatter={(year) => `Year ${year}`} + /> + } + strokeWidth={2} + yAxisId="left" + /> + + + + + + + + +
+
+ {sortedPerformances.map(({ year, percentage }) => ( +
= 0 ? 'bg-green-100 dark:bg-green-900/30' : 'bg-red-100 dark:bg-red-900/30' + }`} + > +
{year}
+
= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' + }`}> + {percentage.toFixed(2)}% +
+
+ ))} +
+
+
+ ); +}); diff --git a/src/components/InvestmentForm.tsx b/src/components/InvestmentForm.tsx index df7b000..5c803cf 100644 --- a/src/components/InvestmentForm.tsx +++ b/src/components/InvestmentForm.tsx @@ -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 }) => { ); -}; +}); diff --git a/src/components/Landing/MainContent.tsx b/src/components/Landing/MainContent.tsx index e426a72..79fca00 100644 --- a/src/components/Landing/MainContent.tsx +++ b/src/components/Landing/MainContent.tsx @@ -23,7 +23,6 @@ export default function MainContent({ isAddingAsset, setIsAddingAsset }: { isAdd - }> diff --git a/src/components/Modals/AddAssetModal.tsx b/src/components/Modals/AddAssetModal.tsx index 53140c7..b762a7a 100644 --- a/src/components/Modals/AddAssetModal.tsx +++ b/src/components/Modals/AddAssetModal.tsx @@ -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([]); const [ loading, setLoading ] = useState(null); + const [ equityType, setEquityType ] = useState(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 }) {

Add Asset

- +
+ + + +
@@ -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)} > -
{result.name}
+
+ {result.name} +
+ + {!result.priceChangePercent?.includes("-") && "+"}{result.priceChangePercent} + + {result.price} +
+
Ticker-Symbol: {result.symbol} | Type: {result.quoteType?.toUpperCase() || "Unknown"} | Rank: #{result.rank || "-"}
diff --git a/src/components/PortfolioChart.tsx b/src/components/PortfolioChart.tsx index 43e6f12..c865969 100644 --- a/src/components/PortfolioChart.tsx +++ b/src/components/PortfolioChart.tsx @@ -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>(new Set()); + const [ isFullscreen, setIsFullscreen ] = useState(false); + const [ hideAssets, setHideAssets ] = useState(false); + const [ hiddenAssets, setHiddenAssets ] = useState>(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>(() => { const investedKapitals: Record = {}; @@ -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 ( -
-
-
- - Chart Legend -
- -
-
- {payload.map((entry: any, index: number) => { - const assetId = entry.dataKey.split('_')[0]; - const isHidden = hideAssets || hiddenAssets.has(assetId); - return ( - - ); - })} -
-
- ); - }, [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(() => ( - <> -
- handleUpdateDateRange({ ...dateRange, startDate: date })} - onEndDateChange={(date) => handleUpdateDateRange({ ...dateRange, endDate: date })} - /> -
- - -
-
-
- - - - format(new Date(date), 'dd.MM.yyyy')} - /> - `${value.toFixed(2)}€`} - /> - `${value.toFixed(2)}%`} - /> - { - 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')} - > - - } /> - - - - - {assets.map((asset) => { - return ( - - ); - })} - - - -
- - *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. - -

- **Note: The % is based on daily weighted average data, thus the percentages might alter slightly. -

- - ), [assets, handleReRender, isDarkMode, assetColors, handleUpdateDateRange, hideAssets, hiddenAssets, processedData, CustomLegend, dateRange, isFullscreen, renderKey]); - - if (isFullscreen) { return (
-
-

Portfolio Chart

+
+

Portfolio Chart

- +
); } return (
- +
); }; diff --git a/src/components/PortfolioTable.tsx b/src/components/PortfolioTable.tsx index b559607..afe9d2c 100644 --- a/src/components/PortfolioTable.tsx +++ b/src/components/PortfolioTable.tsx @@ -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 (
+
+

+ + Assets Performance Overview +

+ Calculated performance of each asset as of "paper" +
+ {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 ( +
+

{asset.name}

+
+ + + + + + + + + + + + + +
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)}%) +
+ +
+
+ ); + })} +
+ {selectedAsset && ( + setSelectedAsset(null)} + /> + )} +

Portfolio's Positions Overview

@@ -244,6 +322,15 @@ export default function PortfolioTable() { )} {isGeneratingPDF ? 'Generating...' : 'Save Analysis'} + +
@@ -505,6 +592,12 @@ export default function PortfolioTable() { onClose={() => setEditingSavingsPlan(null)} /> )} + {showPortfolioPerformance && ( + setShowPortfolioPerformance(false)} + /> + )}
); -}; +}); diff --git a/src/providers/PortfolioProvider.tsx b/src/providers/PortfolioProvider.tsx index d335b75..12876a1 100644 --- a/src/providers/PortfolioProvider.tsx +++ b/src/providers/PortfolioProvider.tsx @@ -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 } }), diff --git a/src/services/yahooFinanceService.ts b/src/services/yahooFinanceService.ts index 872e041..0da1548 100644 --- a/src/services/yahooFinanceService.ts +++ b/src/services/yahooFinanceService.ts @@ -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 => { +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 => { 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 => { } 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 => { 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(), longName: '' }; } }; diff --git a/src/types/index.ts b/src/types/index.ts index c01c1b3..f4ea685 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -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; 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; performancePercentage: number; performancePerAnnoPerformance: number; ttworValue: number; ttworPercentage: number; bestPerformancePerAnno: { percentage: number, year: number }[]; worstPerformancePerAnno: { percentage: number, year: number }[]; + annualPerformances: { year: number; percentage: number; }[]; }; } diff --git a/src/utils/calculations/assetValue.ts b/src/utils/calculations/assetValue.ts index a7bc672..14d5493 100644 --- a/src/utils/calculations/assetValue.ts +++ b/src/utils/calculations/assetValue.ts @@ -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); } } diff --git a/src/utils/calculations/performance.ts b/src/utils/calculations/performance.ts index 0704402..4427232 100644 --- a/src/utils/calculations/performance.ts +++ b/src/utils/calculations/performance.ts @@ -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(); + // 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 }, }; }; diff --git a/src/utils/calculations/portfolioValue.ts b/src/utils/calculations/portfolioValue.ts index 4a2f5bf..5904e57 100644 --- a/src/utils/calculations/portfolioValue.ts +++ b/src/utils/calculations/portfolioValue.ts @@ -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); + } ); }; diff --git a/src/utils/chartDataWindowing.ts b/src/utils/chartDataWindowing.ts new file mode 100644 index 0000000..0519ecb --- /dev/null +++ b/src/utils/chartDataWindowing.ts @@ -0,0 +1 @@ + \ No newline at end of file