improve insight charts

src/components/CurrentPositionChart.svelte

@@ -36,7 +36,6 @@
 
 			ctx.font = 'bold 20px sans-serif';
 
-			// ✅ Dynamically read computed text color from a hidden DOM element
 			const probe = document.getElementById('chart-text-color');
 			const computedColor = getComputedStyle(probe)?.color;
 			ctx.fillStyle = computedColor || '#333';
@@ -109,7 +108,12 @@
 				tooltip: {
 					callbacks: {
 						label: function (tooltipItem) {
-							return `${tooltipItem.label}: ${formatCurrency(tooltipItem.raw, currency)}`;
+							const value = tooltipItem.raw;
+							const dataset = tooltipItem.chart.data.datasets[tooltipItem.datasetIndex];
+							const data = dataset.data;
+							const total = data.reduce((sum, val) => sum + val, 0);
+							const percentage = total ? ((value / total) * 100).toFixed(2) : '0.00';
+							return `${formatCurrency(value, currency)} (${percentage}%)`;
 						}
 					}
 				},

src/components/MarketDistributionChart.svelte

@@ -96,7 +96,7 @@
 			datasets: [
 				{
 					data: values,
-					backgroundColor: ['#3498db', '#2ecc71', '#f39c12', '#9b59b6'],
+					backgroundColor: ['#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#f1c40f', '#e67e22'],
 					borderColor: '#fff',
 					borderWidth: 1
 				}
@@ -112,10 +112,10 @@
 				},
 				tooltip: {
 					callbacks: {
-						label: function (tooltipItem) {
+						label: function(tooltipItem) {
 							const value = tooltipItem.raw;
-							const label = tooltipItem.label;
-							return `${label}: ${formatCurrency(value, currency)}`;
+							const percentage = ((value / total) * 100).toFixed(2);
+							return `${formatCurrency(value, currency)} (${percentage}%)`;
 						}
 					}
 				},