add insight selector

src/components/MarketDistributionChart.svelte

@@ -4,6 +4,7 @@
 
 	export let data = {};
 	export let currency = 'USD';
+	export let total = 0;
 
 	let chartContainer;
 	let chartInstance;
@@ -15,7 +16,37 @@
 		});
 	}
 
-	Chart.register(DoughnutController, ArcElement, Tooltip, Legend, Title);
+	const centerTextPlugin = {
+		id: 'centerText',
+		beforeDraw(chart) {
+			const centerTextOptions = chart.options.plugins.centerText;
+			if (!centerTextOptions || centerTextOptions.displayTotal === undefined || !centerTextOptions.displayCurrency) {
+				return;
+			}
+
+			const displayTotal = centerTextOptions.displayTotal;
+			const displayCurrency = centerTextOptions.displayCurrency;
+
+			const { width, height, ctx } = chart;
+			ctx.save();
+
+			ctx.font = 'bold 20px sans-serif';
+
+			const probe = document.getElementById('chart-text-color');
+			const computedColor = getComputedStyle(probe)?.color;
+			ctx.fillStyle = computedColor || '#333';
+
+			ctx.textAlign = 'center';
+			ctx.textBaseline = 'middle';
+
+			const text = `${formatCurrency(displayTotal, displayCurrency)}`;
+			ctx.fillText(text, width / 2, height / 2);
+
+			ctx.restore();
+		}
+	};
+
+	Chart.register(DoughnutController, ArcElement, Tooltip, Legend, Title, centerTextPlugin);
 
 	const groupByMarket = (stocks) => {
 		const groups = {
@@ -81,6 +112,10 @@
 							return `${label}: ${formatCurrency(value, currency)}`;
 						}
 					}
+				},
+				centerText: {
+					displayTotal: total,
+					displayCurrency: currency
 				}
 			}
 		};
@@ -109,6 +144,7 @@
 		<p class="text-center font-semibold text-gray-700 dark:text-gray-300 mb-2 text-base">
 			Market Distribution
 		</p>
+		<span id="chart-text-color" class="hidden text-gray-900 dark:text-gray-100"></span>
 		<canvas bind:this={chartContainer} class="w-full h-full"></canvas>
 	{:else}
 		<p class="text-center text-gray-500 dark:text-gray-400">No data available.</p>

src/routes/insights/+page.svelte

@@ -12,6 +12,7 @@
 	let isLoading = true;
 	let currency;
 	let total = 0;
+	let chartView = 'positions';
 
 	onMount(() => {
 		return authentication.subscribe(async (auth) => {
@@ -94,8 +95,34 @@
 			</select>
 		</div>
 
-		<CurrentPositionChart {data} {currency} {total} />
-		<br />
-		<MarketDistributionChart {data} {currency} />
+		<!-- Chart View Selector -->
+		<div class="flex justify-center gap-4 mb-4">
+			<button
+				class="px-4 py-2 rounded-md text-sm font-medium transition
+			{chartView === 'positions'
+				? 'bg-blue-500 text-white'
+				: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-100'}"
+				on:click={() => chartView = 'positions'}
+			>
+				By Position
+			</button>
+
+			<button
+				class="px-4 py-2 rounded-md text-sm font-medium transition
+			{chartView === 'markets'
+				? 'bg-blue-500 text-white'
+				: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-100'}"
+				on:click={() => chartView = 'markets'}
+			>
+				By Market
+			</button>
+		</div>
+
+		<!-- Chart Display -->
+		{#if chartView === 'positions'}
+			<CurrentPositionChart {data} {currency} {total} />
+		{:else if chartView === 'markets'}
+			<MarketDistributionChart {data} {currency} {total} />
+		{/if}
 	</div>
 {/if}