problem: can't view number of approved merits

src/components/MeritsAndSatflow.svelte

@@ -1,10 +1,47 @@
 <script lang="ts">
 	import * as Card from '@/components/ui/card';
-	import Pie from './Pie.svelte';
 	import * as Table from '@/components/ui/table';
+	import { Rocket } from '@/event_helpers/rockets';
 	import type { NDKEvent } from '@nostr-dev-kit/ndk';
+	import { writable } from 'svelte/store';
+	import Pie from './Pie.svelte';
+	import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';
+	import { ndk } from '@/ndk';
 
 	export let rocket: NDKEvent;
+
+	let parsedRocket = new Rocket(rocket);
+	let _merits: { pubkey: string; merits: number; sats: number }[] = [];
+
+	let merits = writable(_merits);
+
+	$: {
+		let m = new Map<string, { merits: number; sats: number }>();
+		for (let [_, amr] of parsedRocket.ApprovedMeritRequests()) {
+			let existing = m.get(amr.Pubkey);
+			if (!existing) {
+				existing = { merits: 0, sats: 0 };
+			}
+			existing.merits += amr.Merits;
+			existing.sats += amr.SatsOwed();
+			m.set(amr.Pubkey, existing);
+		}
+
+		let _merits: { pubkey: string; merits: number; sats: number }[] = [];
+		for (let [pubkey, _m] of m) {
+			_merits.push({ pubkey: pubkey, merits: _m.merits, sats: _m.sats });
+		}
+		if (_merits.length == 0) {
+			_merits.push({pubkey: rocket.pubkey, merits: 1, sats: 0})
+		}
+		merits.set(_merits);
+	}
+
+	const COLORS = ["bg-pink-800", 'bg-red-800', 'bg-purple-800', 'bg-blue-800'];
+
+	function c(i:number) {
+		return COLORS[i]
+	}
 </script>
 
 <Card.Root class="sm:col-span-3">
@@ -13,7 +50,7 @@
 		<Card.Description class="grid grid-cols-2">
 			<div class=" grid-cols-1">
 				This graph displays the Meritization of equity in {rocket.getMatchingTags('d')[0][1]}
-				<Pie />
+				<Pie data={$merits}/>
 			</div>
 			<div class=" grid-cols-1">
 				<Table.Root>
@@ -25,14 +62,26 @@
 						</Table.Row>
 					</Table.Header>
 					<Table.Body>
-						<Table.Row class=" bg-red-800">
-							<Table.Cell>
-								<div class="font-medium">Liam Johnson</div>
-								<div class="hidden text-sm text-muted-foreground md:inline">liam@example.com</div>
-							</Table.Cell>
-							<Table.Cell class="hidden md:table-cell">17%</Table.Cell>
-							<Table.Cell class="text-right">250k</Table.Cell>
-						</Table.Row>
+						{#each $merits as { pubkey, merits, sats }, i (pubkey)}
+							<Table.Row class="{c(i)} hover:{c(i)}">
+								<Table.Cell>
+									<div class="flex flex-nowrap">
+										<Avatar
+											ndk={$ndk}
+											{pubkey}
+											class="h-10 w-10 flex-none rounded-full object-cover"
+										/>
+										<Name
+											ndk={$ndk}
+											{pubkey}
+											class="hidden max-w-32 truncate p-2 md:inline-block"
+										/>
+									</div>
+								</Table.Cell>
+								<Table.Cell class="hidden md:table-cell">{merits}</Table.Cell>
+								<Table.Cell class="text-right">{sats}</Table.Cell>
+							</Table.Row>
+						{/each}
 					</Table.Body>
 				</Table.Root>
 			</div>

src/components/Pie.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-	import { Card, Chart } from 'flowbite-svelte';
+	import { ndk } from '@/ndk.js';
+	import { Chart } from 'flowbite-svelte';
+	import { writable } from 'svelte/store';
+	export let data:{pubkey: string; merits: number; sats: number}[]
 
-	const options = {
-		series: [35.1, 23.5, 2.4, 5.4],
-		colors: ['#9b1c1c', '#16BDCA', '#FDBA8C', '#E74694'],
+	let pubkeys = Array.from(data,(x)=>x.pubkey)
+	let options = {
+		series: Array.from(data,(x)=>x.merits),
+		colors: ['#9d174d', '#991b1b', '#6b21a8', '#1e40af'],
 		chart: {
 			height: 320,
 			width: '100%',
@@ -32,7 +36,7 @@
 								const sum = w.globals.seriesTotals.reduce((a, b) => {
 									return a + b;
 								}, 0);
-								return `${sum}k`;
+								return `${sum}`;
 							}
 						},
 						value: {
@@ -40,7 +44,7 @@
 							fontFamily: 'Inter, sans-serif',
 							offsetY: -20,
 							formatter: function (value) {
-								return value + 'k';
+								return value + '';
 							}
 						}
 					},
@@ -84,6 +88,24 @@
 		}
 	};
 
+	let o = writable(options)
+
+	$: {
+		let usernames:string[] = []
+		for (let pk of pubkeys) {
+			let user = $ndk.getUser({pubkey:pk})
+			if (user && user.profile && user.profile.name) {
+				usernames.push(user.profile.name)
+			} else {
+				usernames.push(user.npub.substring(0, 10))
+			}
+		}
+		o.update(existing=>{
+			existing.labels = usernames
+			return existing
+		})
+	}
+
 	//     <Card>
 	//     <div class="flex justify-between items-start w-full">
 	//       <div class="flex-col items-center">
@@ -97,4 +119,4 @@
 	// </Card>
 </script>
 
-<Chart {options} class="py-6" />
+<Chart options={$o} class="py-6" />

src/lib/event_helpers/rockets.ts

@@ -207,11 +207,18 @@ function updateIgnitionAndParentTag(event: NDKEvent) {
 }
 
 export class RocketAMR {
+	//todo: also add a query for sats tags to find payments for this AMR
 	ID: string;
 	Pubkey: string;
 	LeadTime: number;
 	LeadTimeUpdate: number;
 	Merits: number;
+	SatsOwed():number {
+		return 0
+	}
+	SatsPaid():number {
+		return 0
+	}
 	Valid(): boolean {
 		let valid = true;
 		if (!(this.ID.length == 64 && this.Pubkey.length == 64 && this.Merits)) {