improve insight info

package.json

@@ -29,6 +29,7 @@
 	"dependencies": {
 		"@tailwindcss/postcss": "^4.1.4",
 		"chart.js": "^4.4.8",
+		"chartjs-plugin-datalabels": "^2.2.0",
 		"postcss": "^8.5.3",
 		"tailwindcss": "^4.1.4"
 	}

src/components/CurrentPositionChart.svelte

@@ -120,6 +120,18 @@
 				centerText: {
 					displayTotal: total,
 					displayCurrency: currency
+				},
+				datalabels: {
+					color: '#fff',
+					font: {
+					},
+					formatter: (value) => {
+						const percentage = (value / total) * 100;
+						if (percentage < 3) {
+							return '';
+						}
+						return `${percentage.toFixed(1)}%`;
+					}
 				}
 			}
 		};

src/components/MarketDistributionChart.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { ArcElement, Chart, DoughnutController, Legend, Title, Tooltip } from 'chart.js';
+	import ChartDataLabels from 'chartjs-plugin-datalabels';
 	import { onDestroy } from 'svelte';
 
 	export let data = {};
@@ -50,7 +51,7 @@
 		}
 	};
 
-	Chart.register(DoughnutController, ArcElement, Tooltip, Legend, Title, centerTextPlugin);
+	Chart.register(DoughnutController, ArcElement, Tooltip, Legend, Title, centerTextPlugin, ChartDataLabels);
 
 	const groupByMarket = (stocks) => {
 		const groups = {
@@ -114,14 +115,26 @@
 					callbacks: {
 						label: function(tooltipItem) {
 							const value = tooltipItem.raw;
-							const percentage = ((value / total) * 100).toFixed(2);
-							return `${formatCurrency(value, currency)} (${percentage}%)`;
+							return `${formatCurrency(value, currency)}`;
 						}
 					}
 				},
 				centerText: {
 					displayTotal: total,
 					displayCurrency: currency
+				},
+				datalabels: {
+					color: '#fff',
+					font: {
+						weight: 'bold'
+					},
+					formatter: (value) => {
+						const percentage = (value / total) * 100;
+						if (percentage < 0.1) {
+							return '';
+						}
+						return `${percentage.toFixed(1)}%`;
+					}
 				}
 			}
 		};