add rage for portfolio history chart

src/components/PortfolioValueHistory.svelte

@@ -20,11 +20,14 @@
 	let lastHistoricalValue = null;
 	let showCurrentPoint = false;
 	let currentValueDifferencePercent = null;
+	let selectedRange = '12m';
+
+	const ranges = ['3m', '6m', '12m'];
 
 	async function fetchData() {
 		try {
 			isLoading = true;
-			const data = await getPortfolioHistory(portfolioId, authToken, currency);
+			const data = await getPortfolioHistory(portfolioId, authToken, currency, selectedRange);
 			historyData = data;
 
 			if (data.length > 0) {
@@ -44,10 +47,10 @@
 		}
 	}
 
-	async function getPortfolioHistory(portfolioId, token, currency) {
+	async function getPortfolioHistory(portfolioId, token, currency, range) {
 		try {
 			const response = await getRequest(
-				`${import.meta.env.VITE_STOCKS_HOST}/api/portfolios/${portfolioId}/history?currency=${currency}`,
+				`${import.meta.env.VITE_STOCKS_HOST}/api/portfolios/${portfolioId}/history?currency=${currency}&range=${range}`,
 				{},
 				token
 			);
@@ -273,6 +276,11 @@
 		});
 	}
 
+	async function updateChart(range) {
+		selectedRange = range;
+		await fetchData();
+	}
+
 	$: if (portfolioId && authToken && currency) {
 		fetchData();
 	}
@@ -370,5 +378,19 @@
 		<div class="relative h-80">
 			<canvas bind:this={chartCanvas}></canvas>
 		</div>
+
+		<div class="flex justify-center gap-4 mt-6">
+			{#each ranges as range}
+				<button
+					class="px-4 py-2 rounded-md text-sm font-medium transition cursor-pointer
+				       {selectedRange === range
+						? 'bg-blue-500 text-white'
+						: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-100'}"
+					on:click={() => updateChart(range)}
+				>
+					{range.toUpperCase()}
+				</button>
+			{/each}
+		</div>
 	</div>
 {/if}