Serraniel/investment-portfolio-simulator
1
0
Fork 0
mirror of https://github.com/Tomato6966/investment-portfolio-simulator.git synced 2025-04-18 17:01:15 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

add a little responsiveness

Browse source
This commit is contained in:
tomato6966 2025-01-18 20:11:49 +01:00
parent 3629e5a1d9
commit 1adcad1855
2 changed files with 173 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/Chart/AssetPerformanceModal.tsx
View file

@ -1,5 +1,5 @@
import { X } from "lucide-react"; import { X } from "lucide-react";
import { memo } from "react"; import { memo, useEffect } from "react";
import { import {
CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
} from "recharts"; } from "recharts";
@ -13,6 +13,14 @@ interface AssetPerformanceModalProps {
export const AssetPerformanceModal = memo(({ assetName, performances, onClose }: AssetPerformanceModalProps) => { export const AssetPerformanceModal = memo(({ assetName, performances, onClose }: AssetPerformanceModalProps) => {
const sortedPerformances = [...performances].sort((a, b) => a.year - b.year); const sortedPerformances = [...performances].sort((a, b) => a.year - b.year);
// Prevent body scroll when modal is open
useEffect(() => {
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = 'unset';
};
}, []);
const CustomizedDot = (props: any) => { const CustomizedDot = (props: any) => {
const { cx, cy, payload } = props; const { cx, cy, payload } = props;
return ( return (
@ -26,15 +34,23 @@ export const AssetPerformanceModal = memo(({ assetName, performances, onClose }:
}; };
return ( return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black/50 z-50 md:flex md:items-center md:justify-center">
<div className="bg-white dark:bg-slate-800 p-6 rounded-lg w-[80vw] max-w-4xl"> <div className="h-full md:h-auto w-full md:w-[80vw] bg-white dark:bg-slate-800 md:rounded-lg overflow-hidden">
<div className="flex justify-between items-center mb-6"> {/* Header - Fixed */}
<h2 className="text-xl font-bold">{assetName} - Yearly Performance</h2> <div className="sticky top-0 z-10 bg-white dark:bg-slate-800 p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
<button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded"> <h2 className="text-xl font-bold dark:text-gray-300">{assetName} - Yearly Performance</h2>
<X className="w-6 h-6" /> <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> </button>
</div> </div>
<div className="h-[400px]">
{/* Content - Scrollable */}
<div className="overflow-y-auto h-[calc(100vh-64px)] md:h-[calc(80vh-64px)] p-6">
{/* Chart */}
<div className="h-[400px] mb-6">
<ResponsiveContainer> <ResponsiveContainer>
<LineChart data={sortedPerformances}> <LineChart data={sortedPerformances}>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
@ -82,7 +98,9 @@ export const AssetPerformanceModal = memo(({ assetName, performances, onClose }:
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
<div className="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{/* Performance Cards */}
<div className="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, price }) => ( {sortedPerformances.map(({ year, percentage, price }) => (
<div <div
key={year} key={year}
@ -106,5 +124,6 @@ export const AssetPerformanceModal = memo(({ assetName, performances, onClose }:
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}); });

34
src/components/Chart/PortfolioPerformanceModal.tsx
View file

@ -1,5 +1,5 @@
import { X } from "lucide-react"; import { X } from "lucide-react";
import { memo } from "react"; import { memo, useEffect } from "react";
import { import {
CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
} from "recharts"; } from "recharts";
@ -11,6 +11,15 @@ interface PortfolioPerformanceModalProps {
export const PortfolioPerformanceModal = memo(({ performances, onClose }: PortfolioPerformanceModalProps) => { export const PortfolioPerformanceModal = memo(({ performances, onClose }: PortfolioPerformanceModalProps) => {
const sortedPerformances = [...performances].sort((a, b) => a.year - b.year); const sortedPerformances = [...performances].sort((a, b) => a.year - b.year);
// Prevent body scroll when modal is open
useEffect(() => {
document.body.style.overflow = 'hidden';
return () => {
document.body.style.overflow = 'unset';
};
}, []);
const CustomizedDot = (props: any) => { const CustomizedDot = (props: any) => {
const { cx, cy, payload } = props; const { cx, cy, payload } = props;
return ( return (
@ -24,15 +33,23 @@ export const PortfolioPerformanceModal = memo(({ performances, onClose }: Portfo
}; };
return ( return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"> <div className="fixed inset-0 bg-black/50 z-50 md:flex md:items-center md:justify-center">
<div className="bg-white dark:bg-slate-800 p-6 rounded-lg w-[80vw] max-w-4xl"> <div className="h-full md:h-auto w-full md:w-[80vw] bg-white dark:bg-slate-800 md:rounded-lg overflow-hidden">
<div className="flex justify-between items-center mb-6"> {/* Header - Fixed */}
<div className="sticky top-0 z-10 bg-white dark:bg-slate-800 p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
<h2 className="text-xl font-bold dark:text-gray-300">Portfolio Performance History</h2> <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"> <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" /> <X className="w-6 h-6 dark:text-gray-300" />
</button> </button>
</div> </div>
<div className="h-[400px]">
{/* Content - Scrollable */}
<div className="overflow-y-auto h-[calc(100vh-64px)] md:h-[calc(80vh-64px)] p-6">
{/* Chart */}
<div className="h-[400px] mb-6">
<ResponsiveContainer> <ResponsiveContainer>
<LineChart data={sortedPerformances}> <LineChart data={sortedPerformances}>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
@ -71,7 +88,9 @@ export const PortfolioPerformanceModal = memo(({ performances, onClose }: Portfo
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </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">
{/* Performance Cards */}
<div className="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 }) => ( {sortedPerformances.map(({ year, percentage }) => (
<div <div
key={year} key={year}
@ -90,5 +109,6 @@ export const PortfolioPerformanceModal = memo(({ performances, onClose }: Portfo
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}); });