Merge pull request #114 from bob2402/graph-highlight

problem: merits and satflow graph doesn't highlight on hover

src/components/MeritsAndSatflow.svelte

@@ -122,6 +122,16 @@
 	function c(i: number) {
 		return COLORS[i];
 	}
+
+	let hoveredPubkey: string | null = null;
+
+	function handleRowHover(pubkey: string) {
+		hoveredPubkey = pubkey;
+	}
+
+	function handleRowLeave() {
+		hoveredPubkey = null;
+	}
 </script>
 
 <Card.Root class="sm:col-span-3">
@@ -131,7 +141,7 @@
 			<div class="col-span-1">
 				This graph displays the Meritization of equity in {rocket.Name()}. These npubs own the {rocket.Name()}
 				satflow.
-				<Pie data={$merits} />
+				<Pie data={$merits} {hoveredPubkey} />
 			</div>
 
 			<Table.Root class="col-span-1 text-black">
@@ -144,7 +154,11 @@
 				</Table.Header>
 				<Table.Body>
 					{#each $merits as { pubkey, merits, sats }, i (pubkey)}
-						<Table.Row class="{c(i)} hover:{c(i)} hover:brightness-125 hover:contrast-150">
+						<Table.Row
+							class="{c(i)} hover:{c(i)} filter transition duration-300 hover:brightness-50"
+							on:mouseenter={() => handleRowHover(pubkey)}
+							on:mouseleave={handleRowLeave}
+						>
 							<Table.Cell>
 								<div class="flex flex-nowrap items-center gap-2">
 									<Avatar ndk={$ndk} {pubkey} class="h-8 w-8 flex-none rounded-full object-cover" />

src/components/Pie.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 	import { ndk } from '@/ndk.js';
 	import { Chart } from 'flowbite-svelte';
+	import type { ApexOptions } from 'apexcharts';
 	import { writable } from 'svelte/store';
 	import { Toaster } from '$lib/components/ui/sonner';
+
 	export let data: { pubkey: string; merits: number; sats: number }[];
+	export let hoveredPubkey: string | null = null;
 
 	let pubkeys = Array.from(data, (x) => x.pubkey);
-	let options = {
+	let chartInstance: ApexCharts;
+	let options: ApexOptions = {
 		series: Array.from(data, (x) => x.merits),
 		colors: [
 			'#f43f5e',
@@ -23,11 +27,16 @@
 		chart: {
 			height: 320,
 			width: '100%',
-			type: 'donut'
+			type: 'donut',
+			events: {
+				mounted: function (chartContext, config) {
+					chartInstance = chartContext;
+				}
+			}
 		},
 		stroke: {
 			colors: ['transparent'],
-			lineCap: ''
+			lineCap: undefined
 		},
 		plotOptions: {
 			pie: {
@@ -45,7 +54,7 @@
 							label: 'Merit Distribution',
 							fontFamily: 'Inter, sans-serif',
 							formatter: function (w) {
-								const sum = w.globals.seriesTotals.reduce((a, b) => {
+								const sum = w.globals.seriesTotals.reduce((a: number, b: number) => {
 									return a + b;
 								}, 0);
 								return `${sum}`;
@@ -71,7 +80,7 @@
 		},
 		labels: ['Direct', 'Sponsor', 'Affiliate', 'Email marketing'],
 		dataLabels: {
-			enabled: false
+			enabled: true
 		},
 		legend: {
 			show: false,
@@ -118,21 +127,18 @@
 		});
 	}
 
-	//     <Card>
+	$: {
-	//     <div class="flex justify-between items-start w-full">
+		if (chartInstance && hoveredPubkey !== null) {
-	//       <div class="flex-col items-center">
+			const index = data.findIndex((item) => item.pubkey === hoveredPubkey);
-	//         <div class="flex items-center mb-1">
+			if (index !== -1) {
-	//           <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white me-1">Merit Distribution</h5>
+				chartInstance.toggleDataPointSelection(index);
-
+			}
-	//         </div>
+		}
-	//       </div>
+	}
-
-	//     </div>
-	// </Card>
 </script>
 
 <div class="relative h-full w-full">
-	<Chart options={$o} class="py-6" />
+	<Chart options={$o} class="py-6" bind:chart={chartInstance} />
 	<div class="absolute -top-10 left-1/2 z-20 w-[356px] -translate-x-1/2 transform">
 		<Toaster position="top-center" id="purchase" duration={3000} />
 	</div>

src/lib/components/ui/table/table-row.svelte

@@ -18,6 +18,8 @@
 	{...$$restProps}
 	on:click
 	on:keydown
+	on:mouseenter
+	on:mouseleave
 >
 	<slot />
 </tr>