feat: satellite cycles consumption chart

Signed-off-by: David Dal Busco <[email protected]>

src/frontend/src/lib/api/mission-control.api.ts

@@ -1,6 +1,7 @@
 import type {
 	Controller,
 	Orbiter,
+	Result,
 	Satellite
 } from '$declarations/mission_control/mission_control.did';
 import type { SetControllerParams } from '$lib/types/controllers';
@@ -325,3 +326,16 @@ export const setOrbiter = async ({
 	const { set_orbiter } = await getMissionControlActor({ missionControlId, identity });
 	return set_orbiter(orbiterId, toNullable(orbiterName));
 };
+
+export const listSatelliteStatuses = async ({
+	missionControlId,
+	identity,
+	satelliteId
+}: {
+	missionControlId: Principal;
+	identity: OptionIdentity;
+	satelliteId: Principal;
+}): Promise<[] | [[bigint, Result][]]> => {
+	const { list_satellite_statuses } = await getMissionControlActor({ missionControlId, identity });
+	return list_satellite_statuses(satelliteId);
+};

src/frontend/src/lib/components/observatory/ObservatoryDashboard.svelte

@@ -25,6 +25,8 @@
 			timestamp = results?.timestamp;
 			statuses = results?.statuses;
 
+			console.log(statuses)
+
 			loading = false;
 		} catch (err: unknown) {
 			toasts.error({

src/frontend/src/lib/components/satellites/SatelliteCycles.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { Satellite } from '$declarations/mission_control/mission_control.did';
+    import { fade } from 'svelte/transition';
+	import { listSatelliteStatuses } from '$lib/api/mission-control.api';
+	import { missionControlStore } from '$lib/stores/mission-control.store';
+	import type { Principal } from '@dfinity/principal';
+	import { authStore } from '$lib/stores/auth.store';
+	import { fromNullable, isNullish } from '@dfinity/utils';
+	import { formatToDay, fromBigIntNanoSeconds } from '$lib/utils/date.utils';
+	import { formatTCycles } from '$lib/utils/cycles.utils';
+	import AxisY from '$lib/components/charts/AxisY.svelte';
+	import AxisX from '$lib/components/charts/AxisX.svelte';
+	import Area from '$lib/components/charts/Area.svelte';
+	import Line from '$lib/components/charts/Line.svelte';
+	import { LayerCake, Svg } from 'layercake';
+
+	export let satellite: Satellite;
+
+	let dailyTotalArray: [string, number][];
+
+	const xKey = 'myX';
+	const yKey = 'myY';
+
+	type ChartsData = {
+		[xKey]: string;
+		[yKey]: number;
+	};
+
+	let chartsData: ChartsData[] = [];
+
+	const load = async ({ missionControlId }: { missionControlId: Principal | undefined | null }) => {
+		if (isNullish(missionControlId)) {
+			return;
+		}
+
+		const results = await listSatelliteStatuses({
+			identity: $authStore.identity,
+			missionControlId,
+			satelliteId: satellite.satellite_id
+		});
+
+		chartsData = (fromNullable(results) ?? []).map(([timestamp, result]) => {
+			if ('Err' in result) {
+				return {
+					[xKey]: `${fromBigIntNanoSeconds(timestamp).getTime()}`,
+					[yKey]: 0
+				};
+			}
+
+			const {
+				Ok: {
+					status: { cycles }
+				}
+			} = result;
+
+			return {
+				[xKey]: `${fromBigIntNanoSeconds(timestamp).getTime()}`,
+				[yKey]: parseFloat(formatTCycles(cycles))
+			};
+		});
+	};
+
+	$: $missionControlStore, (async () => load({ missionControlId: $missionControlStore }))();
+
+	let ticks: string[];
+	$: ticks = Object.values(chartsData).map(({ [xKey]: a }) => a);
+
+	const formatTick = (d: string): string => {
+		const date = new Date(parseInt(d));
+		return formatToDay(date);
+	};
+</script>
+
+Cycles
+
+{#if chartsData.length > 0}
+    <div class="chart-container" in:fade>
+	<LayerCake
+		padding={{ top: 32, right: 16, bottom: 32, left: 16 }}
+		x={xKey}
+		y={yKey}
+		yNice={4}
+		yDomain={[0, null]}
+		data={chartsData}
+	>
+		<Svg>
+			<AxisX {formatTick} {ticks} />
+			<AxisY ticks={4} />
+			<Line />
+			<Area />
+		</Svg>
+	</LayerCake>
+    </div>
+{/if}
+
+
+<style lang="scss">
+  @use '../../styles/mixins/shadow';
+
+  .chart-container {
+    width: 100%;
+    height: 300px;
+    fill: var(--value-color);
+
+    margin: 0 0 var(--padding-4x);
+    padding: var(--padding-2x) var(--padding-6x);
+
+    @include shadow.strong-card;
+  }
+</style>

src/frontend/src/lib/components/satellites/SatelliteOverview.svelte

@@ -8,6 +8,7 @@
 	import type { SatelliteIdText } from '$lib/types/satellite';
 	import SatelliteName from '$lib/components/satellites/SatelliteName.svelte';
 	import SatelliteOverviewVersion from '$lib/components/satellites/SatelliteOverviewVersion.svelte';
+	import SatelliteCycles from "$lib/components/satellites/SatelliteCycles.svelte";
 
 	export let satellite: Satellite;
 
@@ -37,3 +38,5 @@
 
 	<SatelliteActions {satellite} />
 </div>
+
+<SatelliteCycles {satellite} />