mirror of
https://github.com/Tomato6966/investment-portfolio-simulator.git
synced 2025-04-04 14:50:35 +02:00
added stock screener
This commit is contained in:
Tomato6966
parent
1adcad1855
commit
1a89ea6215
52 changed files with 10881 additions and 10117 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "investment-portfolio-tracker",
|
||||
"version": "1.0.0",
|
||||
"version": "1.2.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "investment-portfolio-tracker",
|
||||
"version": "1.0.0",
|
||||
"version": "1.2.0",
|
||||
"dependencies": {
|
||||
"date-fns": "^4.1.0",
|
||||
"jspdf": "^2.5.2",
|
||||
|
|
|
|||
15
src/App.tsx
15
src/App.tsx
|
|
@ -3,11 +3,12 @@ import { Toaster } from "react-hot-toast";
|
|||
|
||||
import { AppShell } from "./components/Landing/AppShell";
|
||||
import { LoadingPlaceholder } from "./components/utils/LoadingPlaceholder";
|
||||
import StockExplorer from "./pages/StockExplorer";
|
||||
import { PortfolioProvider } from "./providers/PortfolioProvider";
|
||||
|
||||
const MainContent = lazy(() => import("./components/Landing/MainContent"));
|
||||
|
||||
export default function App() {
|
||||
function Root() {
|
||||
const [isAddingAsset, setIsAddingAsset] = useState(false);
|
||||
|
||||
return (
|
||||
|
|
@ -24,3 +25,15 @@ export default function App() {
|
|||
</PortfolioProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Export the routes configuration that will be used in main.tsx
|
||||
export default [
|
||||
{
|
||||
path: '/',
|
||||
element: <Root />
|
||||
},
|
||||
{
|
||||
path: '/explore',
|
||||
element: <StockExplorer />
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
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";
|
||||
|
|
@ -24,9 +23,10 @@ interface ChartContentProps {
|
|||
assetColors: Record<string, string>;
|
||||
toggleAsset: (assetId: string) => void;
|
||||
toggleAllAssets: () => void;
|
||||
removeAsset?: (assetId: string) => void;
|
||||
}
|
||||
|
||||
export const ChartContent = memo(({
|
||||
export const ChartContent = ({
|
||||
dateRange,
|
||||
handleUpdateDateRange,
|
||||
handleReRender,
|
||||
|
|
@ -40,7 +40,8 @@ export const ChartContent = memo(({
|
|||
assets,
|
||||
assetColors,
|
||||
toggleAsset,
|
||||
toggleAllAssets
|
||||
toggleAllAssets,
|
||||
removeAsset
|
||||
}: ChartContentProps) => (
|
||||
<>
|
||||
<div className="flex justify-between items-center mb-4 p-5">
|
||||
|
|
@ -118,6 +119,7 @@ export const ChartContent = memo(({
|
|||
hiddenAssets={hiddenAssets}
|
||||
toggleAsset={toggleAsset}
|
||||
toggleAllAssets={toggleAllAssets}
|
||||
removeAsset={removeAsset}
|
||||
/>} />
|
||||
<Line
|
||||
type="monotone"
|
||||
|
|
@ -152,13 +154,14 @@ export const ChartContent = memo(({
|
|||
{assets.map((asset) => (
|
||||
<Line
|
||||
key={asset.id}
|
||||
type="monotone"
|
||||
type="basis"
|
||||
hide={hideAssets || hiddenAssets.has(asset.id)}
|
||||
dataKey={`${asset.id}_percent`}
|
||||
name={`${asset.name} (%)`}
|
||||
stroke={assetColors[asset.id] || "red"}
|
||||
dot={false}
|
||||
yAxisId="right"
|
||||
connectNulls={true}
|
||||
/>
|
||||
))}
|
||||
<Line
|
||||
|
|
@ -181,4 +184,4 @@ export const ChartContent = memo(({
|
|||
**Note: The % is based on daily weighted average data, thus the percentages might alter slightly.
|
||||
</p>
|
||||
</>
|
||||
));
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { BarChart2, Eye, EyeOff } from "lucide-react";
|
||||
import { BarChart2, Eye, EyeOff, Trash2 } from "lucide-react";
|
||||
import { memo } from "react";
|
||||
|
||||
interface ChartLegendProps {
|
||||
|
|
@ -7,9 +7,10 @@ interface ChartLegendProps {
|
|||
hiddenAssets: Set<string>;
|
||||
toggleAsset: (assetId: string) => void;
|
||||
toggleAllAssets: () => void;
|
||||
removeAsset?: (assetId: string) => void;
|
||||
}
|
||||
|
||||
export const ChartLegend = memo(({ payload, hideAssets, hiddenAssets, toggleAsset, toggleAllAssets }: ChartLegendProps) => {
|
||||
export const ChartLegend = memo(({ payload, hideAssets, hiddenAssets, toggleAsset, toggleAllAssets, removeAsset }: 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">
|
||||
|
|
@ -39,25 +40,41 @@ export const ChartLegend = memo(({ payload, hideAssets, hiddenAssets, toggleAsse
|
|||
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' : ''
|
||||
<div key={`asset-${index}`} className="flex items-center">
|
||||
<button
|
||||
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 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>
|
||||
|
||||
{removeAsset && !['total', 'invested', 'percentageChange', 'ttwor'].includes(assetId) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Are you sure you want to remove ${entry.value.replace(' (%)', '')}?`)) {
|
||||
removeAsset(assetId);
|
||||
}
|
||||
}}
|
||||
className="p-1 ml-1 text-red-500 hover:bg-red-100 dark:hover:bg-red-900/30 rounded"
|
||||
title="Remove asset"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Heart, Moon, Plus, Sun } from "lucide-react";
|
||||
import { BarChart2, Heart, Moon, Plus, Sun } from "lucide-react";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { useDarkMode } from "../../hooks/useDarkMode";
|
||||
|
||||
|
|
@ -36,6 +37,13 @@ export const AppShell = ({ children, onAddAsset }: AppShellProps) => {
|
|||
<Plus className="w-5 h-5" />
|
||||
Add Asset
|
||||
</button>
|
||||
<Link
|
||||
to="/explore"
|
||||
className="flex items-center gap-2 px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
|
||||
>
|
||||
<BarChart2 className="w-5 h-5" />
|
||||
Stock Explorer
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,10 @@ export default function AddAssetModal({ onClose }: { onClose: () => void }) {
|
|||
<h2 className="text-xl font-bold dark:text-gray-200">Add Asset</h2>
|
||||
<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">
|
||||
<select value={equityType} onChange={(e) => {
|
||||
setEquityType(e.target.value);
|
||||
debouncedSearch(search);
|
||||
}} 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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,12 @@ export default function PortfolioChart() {
|
|||
const [ hiddenAssets, setHiddenAssets ] = useState<Set<string>>(new Set());
|
||||
const { isDarkMode } = useDarkMode();
|
||||
|
||||
const { assets, dateRange, updateDateRange, updateAssetHistoricalData } = usePortfolioSelector((state) => ({
|
||||
const { assets, dateRange, updateDateRange, updateAssetHistoricalData, removeAsset } = usePortfolioSelector((state) => ({
|
||||
assets: state.assets,
|
||||
dateRange: state.dateRange,
|
||||
updateDateRange: state.updateDateRange,
|
||||
updateAssetHistoricalData: state.updateAssetHistoricalData,
|
||||
removeAsset: state.removeAsset,
|
||||
}));
|
||||
|
||||
const fetchHistoricalData = useCallback(
|
||||
|
|
@ -62,7 +63,22 @@ export default function PortfolioChart() {
|
|||
return investedKapitals;
|
||||
}, [assets]);
|
||||
|
||||
// Calculate percentage changes for each asset
|
||||
// Compute the initial price for each asset as the first available value (instead of using data[0])
|
||||
const initialPrices = useMemo(() => {
|
||||
const prices: Record<string, number> = {};
|
||||
assets.forEach(asset => {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const price = data[i].assets[asset.id];
|
||||
if (price != null) { // check if data exists
|
||||
prices[asset.id] = price;
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
return prices;
|
||||
}, [assets, data]);
|
||||
|
||||
// Calculate percentage changes for each asset using the first available price from initialPrices
|
||||
const processedData = useMemo(() => data.map(point => {
|
||||
const processed: { date: string, total: number, invested: number, percentageChange: number, ttwor: number, ttwor_percent: number, [key: string]: number | string } = {
|
||||
date: format(point.date, 'yyyy-MM-dd'),
|
||||
|
|
@ -74,7 +90,7 @@ export default function PortfolioChart() {
|
|||
};
|
||||
|
||||
for (const asset of assets) {
|
||||
const initialPrice = data[0].assets[asset.id];
|
||||
const initialPrice = initialPrices[asset.id]; // use the newly computed initial price
|
||||
const currentPrice = point.assets[asset.id];
|
||||
if (initialPrice && currentPrice) {
|
||||
processed[`${asset.id}_price`] = currentPrice;
|
||||
|
|
@ -85,11 +101,8 @@ export default function PortfolioChart() {
|
|||
}
|
||||
|
||||
processed.ttwor_percent = (processed.ttwor - Object.values(allAssetsInvestedKapitals).reduce((acc, curr) => acc + curr, 0)) / Object.values(allAssetsInvestedKapitals).reduce((acc, curr) => acc + curr, 0) * 100;
|
||||
|
||||
|
||||
// add a processed["ttwor"] ttwor is what if you invested all of the kapital of all assets at the start of the period
|
||||
return processed;
|
||||
}), [data, assets, allAssetsInvestedKapitals]);
|
||||
}), [data, assets, allAssetsInvestedKapitals, initialPrices]);
|
||||
|
||||
const toggleAsset = useCallback((assetId: string) => {
|
||||
const newHiddenAssets = new Set(hiddenAssets);
|
||||
|
|
@ -117,9 +130,11 @@ export default function PortfolioChart() {
|
|||
setRenderKey(prevKey => prevKey + 1);
|
||||
}, []);
|
||||
|
||||
console.log(processedData);
|
||||
console.log("TEST")
|
||||
if (isFullscreen) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-white dark:bg-slate-800 z-50">
|
||||
<div className="fixed inset-0 bg-white dark:bg-slate-800 z-50 overflow-y-auto">
|
||||
<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
|
||||
|
|
@ -144,6 +159,7 @@ export default function PortfolioChart() {
|
|||
assetColors={assetColors}
|
||||
toggleAsset={toggleAsset}
|
||||
toggleAllAssets={toggleAllAssets}
|
||||
removeAsset={removeAsset}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -166,6 +182,7 @@ export default function PortfolioChart() {
|
|||
assetColors={assetColors}
|
||||
toggleAsset={toggleAsset}
|
||||
toggleAllAssets={toggleAllAssets}
|
||||
removeAsset={removeAsset}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
16
src/main.tsx
16
src/main.tsx
|
|
@ -1,15 +1,19 @@
|
|||
import "./index.css";
|
||||
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
import App from "./App.tsx";
|
||||
import { DarkModeProvider } from "./providers/DarkModeProvider.tsx";
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
// Let App handle the route definitions
|
||||
const router = createBrowserRouter(App);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<DarkModeProvider>
|
||||
<App />
|
||||
<RouterProvider router={router} />
|
||||
</DarkModeProvider>
|
||||
</StrictMode>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
|
|||
680
src/pages/StockExplorer.tsx
Normal file
680
src/pages/StockExplorer.tsx
Normal file
|
|
@ -0,0 +1,680 @@
|
|||
import { format, subYears } from "date-fns";
|
||||
import { ChevronDown, ChevronLeft, Filter, Plus, RefreshCw, Search, X } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
|
||||
} from "recharts";
|
||||
|
||||
import { useDarkMode } from "../hooks/useDarkMode";
|
||||
import { EQUITY_TYPES, getHistoricalData, searchAssets } from "../services/yahooFinanceService";
|
||||
import { Asset } from "../types";
|
||||
import { getHexColor } from "../utils/formatters";
|
||||
|
||||
// Time period options
|
||||
const TIME_PERIODS = {
|
||||
YTD: "Year to Date",
|
||||
"1Y": "1 Year",
|
||||
"3Y": "3 Years",
|
||||
"5Y": "5 Years",
|
||||
"10Y": "10 Years",
|
||||
"15Y": "15 Years",
|
||||
"20Y": "20 Years",
|
||||
MAX: "Maximum",
|
||||
CUSTOM: "Custom Range"
|
||||
};
|
||||
|
||||
// Equity type options
|
||||
const EQUITY_TYPESMAP: Record<keyof typeof EQUITY_TYPES, string> = {
|
||||
all: "All Types",
|
||||
ETF: "ETFs",
|
||||
Stock: "Stocks",
|
||||
"Etf or Stock": "ETF or Stock",
|
||||
Mutualfund: "Mutual Funds",
|
||||
Index: "Indices",
|
||||
Currency: "Currencies",
|
||||
Cryptocurrency: "Cryptocurrencies",
|
||||
Future: "Futures",
|
||||
};
|
||||
|
||||
const StockExplorer = () => {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [searchResults, setSearchResults] = useState<Asset[]>([]);
|
||||
const [selectedStocks, setSelectedStocks] = useState<Asset[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchLoading, setSearchLoading] = useState(false);
|
||||
const [timePeriod, setTimePeriod] = useState<keyof typeof TIME_PERIODS>("1Y");
|
||||
const [equityType, setEquityType] = useState<keyof typeof EQUITY_TYPESMAP>("all");
|
||||
const [showEquityTypeDropdown, setShowEquityTypeDropdown] = useState(false);
|
||||
const [dateRange, setDateRange] = useState({
|
||||
startDate: subYears(new Date(), 1),
|
||||
endDate: new Date()
|
||||
});
|
||||
const [customDateRange, setCustomDateRange] = useState({
|
||||
startDate: subYears(new Date(), 1),
|
||||
endDate: new Date()
|
||||
});
|
||||
const [stockData, setStockData] = useState<any[]>([]);
|
||||
const [stockColors, setStockColors] = useState<Record<string, string>>({});
|
||||
const { isDarkMode } = useDarkMode();
|
||||
|
||||
// Handle search
|
||||
const handleSearch = useCallback(async () => {
|
||||
if (!searchQuery || searchQuery.length < 2) {
|
||||
// Clear results if query is too short
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setSearchLoading(true);
|
||||
try {
|
||||
// Convert the equity type to a comma-separated string for the API
|
||||
const typeParam = EQUITY_TYPES[equityType];
|
||||
|
||||
console.log(`Searching for "${searchQuery}" with type "${typeParam}"`);
|
||||
|
||||
const results = await searchAssets(searchQuery, typeParam);
|
||||
|
||||
console.log("Search results:", results);
|
||||
|
||||
// Filter out stocks already in the selected list
|
||||
const filteredResults = results.filter(
|
||||
result => !selectedStocks.some(stock => stock.symbol === result.symbol)
|
||||
);
|
||||
|
||||
setSearchResults(filteredResults);
|
||||
|
||||
if (filteredResults.length === 0 && results.length > 0) {
|
||||
toast.custom((t: any) => (
|
||||
<div className={`${t.visible ? 'animate-in' : 'animate-out'}`}>
|
||||
All matching results are already in your comparison
|
||||
</div>
|
||||
));
|
||||
} else if (filteredResults.length === 0) {
|
||||
toast.error(`No ${equityType === 'all' ? '' : EQUITY_TYPESMAP[equityType]} results found for "${searchQuery}"`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Search error:", error);
|
||||
toast.error("Failed to search for stocks");
|
||||
} finally {
|
||||
setSearchLoading(false);
|
||||
}
|
||||
}, [searchQuery, equityType, selectedStocks]);
|
||||
|
||||
// Handle enter key press in search input
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
// Add stock to comparison
|
||||
const addStock = useCallback(async (stock: Asset) => {
|
||||
// Check if the stock is already selected
|
||||
if (selectedStocks.some(s => s.symbol === stock.symbol)) {
|
||||
toast.error(`${stock.name} is already in your comparison`);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const { historicalData, longName } = await getHistoricalData(
|
||||
stock.symbol,
|
||||
dateRange.startDate,
|
||||
dateRange.endDate
|
||||
);
|
||||
|
||||
if (historicalData.size === 0) {
|
||||
toast.error(`No historical data available for ${stock.name}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const stockWithHistory = {
|
||||
...stock,
|
||||
name: longName || stock.name,
|
||||
historicalData,
|
||||
investments: [] // Empty as we're just exploring
|
||||
};
|
||||
|
||||
// Update selected stocks without causing an extra refresh
|
||||
setSelectedStocks(prev => [...prev, stockWithHistory]);
|
||||
|
||||
// Assign a color
|
||||
setStockColors(prev => {
|
||||
const usedColors = new Set(Object.values(prev));
|
||||
const color = getHexColor(usedColors, isDarkMode);
|
||||
return { ...prev, [stockWithHistory.id]: color };
|
||||
});
|
||||
|
||||
// Don't clear results, so users can add multiple stocks
|
||||
// Just clear the specific stock that was added
|
||||
setSearchResults(prev => prev.filter(result => result.symbol !== stock.symbol));
|
||||
|
||||
toast.success(`Added ${stockWithHistory.name} to comparison`);
|
||||
} catch (error) {
|
||||
console.error("Error adding stock:", error);
|
||||
toast.error(`Failed to add ${stock.name}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [dateRange, isDarkMode, selectedStocks]);
|
||||
|
||||
// Remove stock from comparison
|
||||
const removeStock = useCallback((stockId: string) => {
|
||||
setSelectedStocks(prev => prev.filter(stock => stock.id !== stockId));
|
||||
}, []);
|
||||
|
||||
// Update time period and date range
|
||||
const updateTimePeriod = useCallback((period: keyof typeof TIME_PERIODS) => {
|
||||
setTimePeriod(period);
|
||||
|
||||
const endDate = new Date();
|
||||
let startDate;
|
||||
|
||||
switch (period) {
|
||||
case "YTD":
|
||||
startDate = new Date(endDate.getFullYear(), 0, 1); // Jan 1 of current year
|
||||
break;
|
||||
case "1Y":
|
||||
startDate = subYears(endDate, 1);
|
||||
break;
|
||||
case "3Y":
|
||||
startDate = subYears(endDate, 3);
|
||||
break;
|
||||
case "5Y":
|
||||
startDate = subYears(endDate, 5);
|
||||
break;
|
||||
case "10Y":
|
||||
startDate = subYears(endDate, 10);
|
||||
break;
|
||||
case "15Y":
|
||||
startDate = subYears(endDate, 15);
|
||||
break;
|
||||
case "20Y":
|
||||
startDate = subYears(endDate, 20);
|
||||
break;
|
||||
case "MAX":
|
||||
startDate = new Date(1970, 0, 1); // Very early date for "max"
|
||||
break;
|
||||
case "CUSTOM":
|
||||
// Keep the existing custom range
|
||||
startDate = customDateRange.startDate;
|
||||
break;
|
||||
default:
|
||||
startDate = subYears(endDate, 1);
|
||||
}
|
||||
|
||||
if (period !== "CUSTOM") {
|
||||
setDateRange({ startDate, endDate });
|
||||
} else {
|
||||
setDateRange(customDateRange);
|
||||
}
|
||||
}, [customDateRange]);
|
||||
|
||||
// Process the stock data for display
|
||||
const processStockData = useCallback((stocks: Asset[]) => {
|
||||
// Create a combined dataset with data points for all dates
|
||||
const allDates = new Set<string>();
|
||||
const stockValues: Record<string, Record<string, number>> = {};
|
||||
|
||||
// First gather all dates and initial values
|
||||
stocks.forEach(stock => {
|
||||
stockValues[stock.id] = {};
|
||||
|
||||
stock.historicalData.forEach((value, dateStr) => {
|
||||
allDates.add(dateStr);
|
||||
stockValues[stock.id][dateStr] = value;
|
||||
});
|
||||
});
|
||||
|
||||
// Convert to array of data points
|
||||
const sortedDates = Array.from(allDates).sort();
|
||||
return sortedDates.map(dateStr => {
|
||||
const dataPoint: Record<string, any> = { date: dateStr };
|
||||
|
||||
// Add base value for each stock
|
||||
stocks.forEach(stock => {
|
||||
if (stockValues[stock.id][dateStr] !== undefined) {
|
||||
dataPoint[stock.id] = stockValues[stock.id][dateStr];
|
||||
}
|
||||
});
|
||||
|
||||
// Calculate percentage change for each stock
|
||||
stocks.forEach(stock => {
|
||||
// Find first available value for this stock
|
||||
const firstValue = Object.values(stockValues[stock.id])[0];
|
||||
const currentValue = stockValues[stock.id][dateStr];
|
||||
|
||||
if (firstValue && currentValue) {
|
||||
dataPoint[`${stock.id}_percent`] =
|
||||
((currentValue - firstValue) / firstValue) * 100;
|
||||
}
|
||||
});
|
||||
|
||||
return dataPoint;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Refresh stock data when stocks or date range changes
|
||||
const refreshStockData = useCallback(async () => {
|
||||
if (selectedStocks.length === 0) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// Fetch updated data for each stock
|
||||
const updatedStocks = await Promise.all(
|
||||
selectedStocks.map(async stock => {
|
||||
const { historicalData, longName } = await getHistoricalData(
|
||||
stock.symbol,
|
||||
dateRange.startDate,
|
||||
dateRange.endDate
|
||||
);
|
||||
|
||||
return {
|
||||
...stock,
|
||||
name: longName || stock.name,
|
||||
historicalData
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Update chart data
|
||||
setStockData(processStockData(updatedStocks));
|
||||
|
||||
// Unconditionally update selectedStocks so the table refreshes
|
||||
setSelectedStocks(updatedStocks);
|
||||
|
||||
toast.success("Stock data refreshed");
|
||||
} catch (error) {
|
||||
console.error("Error refreshing data:", error);
|
||||
toast.error("Failed to refresh stock data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [dateRange, processStockData]);
|
||||
|
||||
// Calculate performance metrics for each stock with best/worst year
|
||||
const calculatePerformanceMetrics = useCallback((stock: Asset) => {
|
||||
const historicalData = Array.from(stock.historicalData.entries());
|
||||
if (historicalData.length < 2) return {
|
||||
ytd: "N/A",
|
||||
total: "N/A",
|
||||
annualized: "N/A",
|
||||
};
|
||||
|
||||
// Sort by date
|
||||
historicalData.sort((a, b) =>
|
||||
new Date(a[0]).getTime() - new Date(b[0]).getTime()
|
||||
);
|
||||
|
||||
const firstValue = historicalData[0][1];
|
||||
const lastValue = historicalData[historicalData.length - 1][1];
|
||||
|
||||
// Calculate total return
|
||||
const totalPercentChange = ((lastValue - firstValue) / firstValue) * 100;
|
||||
|
||||
// Calculate annualized return using a more precise year duration (365.25 days) and standard CAGR
|
||||
const firstDate = new Date(historicalData[0][0]);
|
||||
const lastDate = new Date(historicalData[historicalData.length - 1][0]);
|
||||
const yearsDiff = (lastDate.getTime() - firstDate.getTime()) / (1000 * 60 * 60 * 24 * 365.25);
|
||||
const annualizedReturn = (Math.pow(lastValue / firstValue, 1 / yearsDiff) - 1) * 100;
|
||||
|
||||
return {
|
||||
total: `${totalPercentChange.toFixed(2)}%`,
|
||||
annualized: `${annualizedReturn.toFixed(2)}%/year`,
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Effect to refresh data when time period or stocks change
|
||||
useEffect(() => {
|
||||
// Only refresh when stocks are added/removed or dateRange changes
|
||||
refreshStockData();
|
||||
// Don't include refreshStockData in dependencies
|
||||
}, [selectedStocks.length, dateRange]);
|
||||
|
||||
// Update custom date range
|
||||
const handleCustomDateChange = useCallback((start: Date, end: Date) => {
|
||||
const newRange = { startDate: start, endDate: end };
|
||||
setCustomDateRange(newRange);
|
||||
if (timePeriod === "CUSTOM") {
|
||||
setDateRange(newRange);
|
||||
}
|
||||
}, [timePeriod]);
|
||||
|
||||
// Add debugging for chart display
|
||||
useEffect(() => {
|
||||
if (selectedStocks.length > 0) {
|
||||
console.log("Selected stocks:", selectedStocks);
|
||||
console.log("Stock data for chart:", stockData);
|
||||
}
|
||||
}, [selectedStocks, stockData]);
|
||||
|
||||
// Ensure processStockData is called immediately when selectedStocks changes
|
||||
useEffect(() => {
|
||||
if (selectedStocks.length > 0) {
|
||||
const processedData = processStockData(selectedStocks);
|
||||
setStockData(processedData);
|
||||
}
|
||||
}, [selectedStocks, processStockData]);
|
||||
|
||||
return (
|
||||
<div className="dark:bg-slate-900 min-h-screen w-full">
|
||||
<div className="container mx-auto p-4">
|
||||
<div className="flex items-center mb-6">
|
||||
<Link
|
||||
to="/"
|
||||
className="flex items-center gap-1 text-blue-500 hover:text-blue-700 mr-4"
|
||||
>
|
||||
<ChevronLeft size={20} />
|
||||
<span>Back to Home</span>
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold dark:text-white">Stock Explorer</h1>
|
||||
</div>
|
||||
|
||||
{/* Search and add stocks */}
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4 mb-6 dark:border dark:border-slate-700">
|
||||
<h2 className="text-lg font-semibold mb-4 dark:text-gray-200">Add Assets to Compare</h2>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-2 mb-4">
|
||||
<div className="flex-grow relative">
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
disabled={searchLoading}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Search for stocks, ETFs, indices..."
|
||||
className="w-full p-2 border rounded disabled:opacity-50 disabled:cursor-not-allowed dark:bg-slate-700 dark:text-white dark:border-slate-600"
|
||||
/>
|
||||
{searchLoading && (
|
||||
<div className="absolute right-3 top-2.5">
|
||||
<div className="animate-spin h-5 w-5 border-2 border-blue-500 rounded-full border-t-transparent"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Equity Type Dropdown */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowEquityTypeDropdown(!showEquityTypeDropdown)}
|
||||
className="flex items-center gap-2 border p-2 rounded dark:bg-slate-700 dark:text-white dark:border-slate-600 min-w-[140px]"
|
||||
>
|
||||
<Filter size={16} />
|
||||
{EQUITY_TYPESMAP[equityType]}
|
||||
<ChevronDown size={16} className="ml-auto" />
|
||||
</button>
|
||||
|
||||
{showEquityTypeDropdown && (
|
||||
<div className="absolute top-full left-0 mt-1 bg-white dark:bg-slate-700 border dark:border-slate-600 rounded shadow-lg z-10 w-full">
|
||||
{Object.entries(EQUITY_TYPESMAP).map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => {
|
||||
setEquityType(key as keyof typeof EQUITY_TYPESMAP);
|
||||
setShowEquityTypeDropdown(false);
|
||||
}}
|
||||
className={`block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-600 dark:text-white ${equityType === key ? 'bg-blue-50 dark:bg-blue-900/30' : ''
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSearch}
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
disabled={searchLoading}
|
||||
>
|
||||
<Search size={16} />
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search results */}
|
||||
{searchResults.length > 0 && (
|
||||
<div className="border rounded mb-4 max-h-[500px] overflow-y-auto dark:border-slate-600">
|
||||
<div className="sticky top-0 bg-gray-100 dark:bg-slate-700 p-2 border-b dark:border-slate-600">
|
||||
<span className="text-sm text-gray-500 dark:text-gray-300">
|
||||
{searchResults.length} result{searchResults.length !== 1 ? 's' : ''} found for "{searchQuery}"
|
||||
</span>
|
||||
</div>
|
||||
{searchResults.map(result => (
|
||||
<div
|
||||
key={result.id}
|
||||
className="p-3 border-b flex justify-between items-center hover:bg-gray-50 dark:hover:bg-slate-700 dark:border-slate-600 dark:text-gray-200"
|
||||
>
|
||||
<div>
|
||||
<div className="font-medium">{result.name}</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{result.symbol} | {result.quoteType?.toUpperCase() || "Unknown"}
|
||||
{result.isin && ` | ${result.isin}`}
|
||||
{result.price && ` | ${result.price}`}
|
||||
{result.priceChangePercent && ` | ${result.priceChangePercent}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => addStock(result)}
|
||||
className="bg-green-500 text-white p-1 rounded hover:bg-green-600"
|
||||
title="Add to comparison"
|
||||
>
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Selected stocks */}
|
||||
<div>
|
||||
<h3 className="font-medium mb-2 dark:text-gray-300">Selected Stocks</h3>
|
||||
{selectedStocks.length === 0 ? (
|
||||
<p className="text-gray-500 dark:text-gray-400 italic">No stocks selected for comparison</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedStocks.map(stock => {
|
||||
const metrics = calculatePerformanceMetrics(stock);
|
||||
return (
|
||||
<div
|
||||
key={stock.id}
|
||||
className="bg-gray-100 dark:bg-slate-700 rounded p-2 flex items-center gap-2"
|
||||
>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: stockColors[stock.id] }}
|
||||
></div>
|
||||
<span className="dark:text-white">{stock.name}</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">
|
||||
({metrics.total})
|
||||
</span>
|
||||
<button
|
||||
onClick={() => removeStock(stock.id)}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
title="Remove"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Time period selector */}
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4 mb-6 dark:border dark:border-slate-700">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-semibold dark:text-gray-200">Time Period</h2>
|
||||
<button
|
||||
onClick={refreshStockData}
|
||||
className="flex items-center gap-1 text-blue-500 hover:text-blue-700"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent"></div>
|
||||
) : (
|
||||
<RefreshCw size={16} />
|
||||
)}
|
||||
Refresh{loading && "ing"} Data
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{Object.entries(TIME_PERIODS).map(([key, label]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => updateTimePeriod(key as keyof typeof TIME_PERIODS)}
|
||||
className={`px-3 py-1 rounded ${timePeriod === key
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-gray-200'
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Custom date range selector (only visible when CUSTOM is selected) */}
|
||||
{timePeriod === "CUSTOM" && (
|
||||
<div className="flex gap-4 mb-4">
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">Start Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={format(customDateRange.startDate, 'yyyy-MM-dd')}
|
||||
onChange={(e) => handleCustomDateChange(
|
||||
new Date(e.target.value),
|
||||
customDateRange.endDate
|
||||
)}
|
||||
className="border p-2 rounded dark:bg-slate-700 dark:text-white dark:border-slate-600"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">End Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={format(customDateRange.endDate, 'yyyy-MM-dd')}
|
||||
onChange={(e) => handleCustomDateChange(
|
||||
customDateRange.startDate,
|
||||
new Date(e.target.value)
|
||||
)}
|
||||
max={format(new Date(), 'yyyy-MM-dd')}
|
||||
className="border p-2 rounded dark:bg-slate-700 dark:text-white dark:border-slate-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Showing data from {format(dateRange.startDate, 'MMM d, yyyy')} to {format(dateRange.endDate, 'MMM d, yyyy')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart */}
|
||||
{selectedStocks.length > 0 && stockData.length > 0 && (
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4 mb-6 dark:border dark:border-slate-700">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-semibold dark:text-gray-200">Performance Comparison</h2>
|
||||
</div>
|
||||
|
||||
<div className="h-[500px] mb-6">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={stockData}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="dark:stroke-slate-600" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tickFormatter={(date) => format(new Date(date), 'dd.MM.yyyy')}
|
||||
tick={{ fill: isDarkMode ? '#D8D8D8' : '#4E4E4E' }}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: isDarkMode ? '#D8D8D8' : '#4E4E4E' }}
|
||||
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, props: any) => {
|
||||
const stockId = name.replace('_percent', '');
|
||||
const price = props.payload[stockId] || 0;
|
||||
const stockName = selectedStocks.find(s => s.id === stockId)?.name || name;
|
||||
return [
|
||||
`${value.toFixed(2)}% (€${price.toFixed(2)})`,
|
||||
stockName
|
||||
];
|
||||
}}
|
||||
labelFormatter={(date) => format(new Date(date), 'dd.MM.yyyy')}
|
||||
/>
|
||||
<Legend />
|
||||
|
||||
{/* Only percentage lines */}
|
||||
{selectedStocks.map(stock => (
|
||||
<Line
|
||||
key={`${stock.id}_percent`}
|
||||
type="monotone"
|
||||
dataKey={`${stock.id}_percent`}
|
||||
name={stock.name}
|
||||
stroke={stockColors[stock.id]}
|
||||
dot={false}
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
{/* Performance metrics table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 dark:bg-slate-700">
|
||||
<th className="p-2 text-left dark:text-gray-200">Stock</th>
|
||||
<th className="p-2 text-right dark:text-gray-200">Total Return</th>
|
||||
<th className="p-2 text-right dark:text-gray-200">Annualized Return</th>
|
||||
<th className="p-2 text-right dark:text-gray-200">Current Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{selectedStocks.map(stock => {
|
||||
const metrics = calculatePerformanceMetrics(stock);
|
||||
const historicalData = Array.from(stock.historicalData.entries());
|
||||
const currentPrice = historicalData.length > 0
|
||||
? historicalData[historicalData.length - 1][1]
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<tr key={stock.id} className="border-b dark:border-slate-600">
|
||||
<td className="p-2 dark:text-gray-200">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: stockColors[stock.id] }}
|
||||
></div>
|
||||
{stock.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-2 text-right dark:text-gray-200">{metrics.total}</td>
|
||||
<td className="p-2 text-right dark:text-gray-200">{metrics.annualized}</td>
|
||||
<td className="p-2 text-right dark:text-gray-200">€{currentPrice.toFixed(2)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StockExplorer;
|
||||
|
|
@ -24,6 +24,9 @@ export const EQUITY_TYPES = {
|
|||
|
||||
export const searchAssets = async (query: string, equityType: string): Promise<Asset[]> => {
|
||||
try {
|
||||
// Log input parameters for debugging
|
||||
console.log(`Searching for "${query}" with type "${equityType}"`);
|
||||
|
||||
const params = new URLSearchParams({
|
||||
query,
|
||||
lang: 'en-US',
|
||||
|
|
@ -32,21 +35,37 @@ export const searchAssets = async (query: string, equityType: string): Promise<A
|
|||
});
|
||||
|
||||
const url = `${API_BASE}/v1/finance/lookup${!isDev ? encodeURIComponent(`?${params}`) : `?${params}`}`;
|
||||
console.log(`Request URL: ${url}`);
|
||||
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error('Network response was not ok');
|
||||
if (!response.ok) {
|
||||
console.error(`Network error: ${response.status} ${response.statusText}`);
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
|
||||
const data = await response.json() as YahooSearchResponse;
|
||||
console.log("API response:", data);
|
||||
|
||||
if (data.finance.error) {
|
||||
console.error(`API error: ${data.finance.error}`);
|
||||
throw new Error(data.finance.error);
|
||||
}
|
||||
|
||||
if (!data.finance.result?.[0]?.documents) {
|
||||
console.log("No results found");
|
||||
return [];
|
||||
}
|
||||
|
||||
const equityTypes = equityType.split(",").map(v => v.toLowerCase());
|
||||
|
||||
return data.finance.result[0].documents
|
||||
.filter(quote => equityType.split(",").map(v => v.toLowerCase()).includes(quote.quoteType.toLowerCase()))
|
||||
.filter(quote => {
|
||||
const matches = equityTypes.includes(quote.quoteType.toLowerCase());
|
||||
if (!matches) {
|
||||
console.log(`Filtering out ${quote.symbol} (${quote.quoteType}) as it doesn't match ${equityTypes.join(', ')}`);
|
||||
}
|
||||
return matches;
|
||||
})
|
||||
.map((quote) => ({
|
||||
id: quote.symbol,
|
||||
isin: '', // not provided by Yahoo Finance API
|
||||
|
|
|
|||
|
|
@ -89,8 +89,8 @@ export const calculatePortfolioValue = (assets: Asset[], dateRange: DateRange) =
|
|||
return data.filter(
|
||||
(dayData) => {
|
||||
const vals = Object.values(dayData.assets);
|
||||
if (!vals.length) return false;
|
||||
return !vals.some((value) => value === 0);
|
||||
// Keep days where at least one asset has data
|
||||
return vals.length > 0 && vals.some(value => value > 0);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue