-
-
NORAD ID:
- {noradId ? (
-
- {noradId}
-
- ) : (
-
- No NORAD ID has been assigned yet{" "}
-
- )}
-
+
+
+ {selectedTab === "sat parameters" ? (
+ // Render the parameters of the satellite
+
+
+
+
NORAD ID:
+ {noradId ? (
+
+ {noradId}
+
+ ) : (
+
+ No NORAD ID has been assigned yet{" "}
+
+ )}
+
-
- {satAttributes?.massKg
- ? "Mass: " + satAttributes?.massKg + " kg"
- : null}
-
-
- {satAttributes?.missionStatus === "IN ORBIT" ? (
-
-
+
+ {satAttributes?.massKg
+ ? "Mass: " + satAttributes?.massKg + " kg"
+ : null}
+
- ) : null}
+ {satAttributes?.missionStatus === "IN ORBIT" ? (
+
+
+
+ ) : null}
+
+ ) : selectedTab === "satellite image" ? (
+
+ ) : selectedTab === "satellite telemetry" ? (
+
+ ) : null}
+
+ {/* Image container */}
+ {imageURL && selectedTab !== "satellite telemetry" ? (
+
+
+ {is3DModel ? (
+
+ ) : (
+
+ )}
+
- ) : selectedTab === "satellite image" ? (
-
) : null}
);
diff --git a/frontend/src/app/satellites/[satelliteSlug]/satTelemetry.tsx b/frontend/src/app/satellites/[satelliteSlug]/satTelemetry.tsx
new file mode 100644
index 0000000..b6cef43
--- /dev/null
+++ b/frontend/src/app/satellites/[satelliteSlug]/satTelemetry.tsx
@@ -0,0 +1,266 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { useSatelliteStore } from "@/lib/store";
+import { SatelliteNumber } from "@/lib/store";
+import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
+
+export default function SatTelemetry({
+ STRAPI_URL,
+ noradID,
+}: {
+ STRAPI_URL: string | undefined;
+ noradID: number | undefined;
+}) {
+ const satNumToEntry = useSatelliteStore((state) => state.satNumToEntry);
+
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState
(null);
+ const [data, setData] = useState(null);
+
+ useEffect(() => {
+ async function fetchTelemetryData() {
+ try {
+ let satSQL;
+ if (noradID !== undefined) {
+ const satName: string | undefined =
+ satNumToEntry[noradID as SatelliteNumber]?.name;
+ if (satName === "HYPSO-1") satSQL = "hypso1";
+ if (satName === "HYPSO-2") satSQL = "hypso2";
+ }
+ const queryDetails = {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ satSQL: satSQL,
+ }),
+ };
+ setLoading(true);
+ const query = await fetch(
+ STRAPI_URL + "/api/grafana-metrics",
+ queryDetails,
+ );
+ if (!query.ok) {
+ throw new Error(
+ `Error fetching telemetry data: ${query.status}`,
+ );
+ }
+ const responseData = await query.json();
+ if (!responseData || responseData.length === 0) {
+ throw new Error("No telemetry data available");
+ }
+ setData(responseData);
+ } catch (error) {
+ console.error("Error fetching telemetry data:", error);
+ setError(
+ `Failed to load telemetry data. Please try again later. ${error}`,
+ );
+ } finally {
+ setLoading(false);
+ }
+ }
+ fetchTelemetryData();
+ }, [STRAPI_URL, noradID, satNumToEntry]);
+
+ if (loading) {
+ return Loading telemetry data...
;
+ }
+ if (error) {
+ return {error}
;
+ }
+
+ {
+ /* Battery Voltage Data */
+ }
+ const batteryVoltageData = data?.batteryVoltage;
+ const chartDataVBatt = batteryVoltageData[0].map(
+ (timestamp: number, index: number) => [
+ timestamp,
+ batteryVoltageData[1][index] / 1000,
+ ],
+ );
+
+ {
+ /* Solar Panel Temperature Data */
+ }
+ const SolarTempData = data.solarPanelTemp1;
+ console.log(
+ "SolarTempData",
+ SolarTempData[0].map((timestamp: number) => {
+ return new Date(timestamp).toLocaleString();
+ }),
+ );
+ const solarPanelTempData = [
+ data?.solarPanelTemp1,
+ data?.solarPanelTemp2,
+ data?.solarPanelTemp3,
+ data?.solarPanelTemp4,
+ data?.solarPanelTemp5,
+ data?.solarPanelTemp6,
+ ].filter((temp) => temp); // Filter out any undefined values
+ const currentTime = Date.now();
+ const solarPanelChartData = solarPanelTempData.map(
+ (tempData, panelIndex) => ({
+ name: `Solar Panel ${panelIndex + 1}`,
+ data: tempData[0]
+ .map((timestamp: number, index: number) => [
+ timestamp,
+ tempData[1][index], // Assuming you need to divide by 1000
+ ])
+ .filter(([timestamp]: number[]) => timestamp <= currentTime), // Filter out future timestamps
+ color: `hsl(${panelIndex * 60}, 70%, 50%)`, // Different color for each panel
+ }),
+ );
+
+ {
+ /* Battery Current Data */
+ }
+ const batteryCurrentData = data?.battCurr;
+ const chartDataIBatt = batteryCurrentData[0].map(
+ (timestamp: number, index: number) => [
+ timestamp,
+ batteryCurrentData[1][index] / 1000, // Convert to Amperes
+ ],
+ );
+
+ {
+ /* Uptime Data */
+ }
+ const uptimeData = data?.uptime;
+ const chartDataUptime = uptimeData[0].map(
+ (timestamp: number, index: number) => [
+ timestamp,
+ parseFloat((uptimeData[1][index] / (3600 * 24 * 7)).toFixed(2)), // Convert seconds to hours
+ ],
+ );
+
+ const chartConfigs = [
+ {
+ title: "Battery Voltage",
+ yAxisTitle: "Voltage (V)",
+ series: [
+ {
+ name: "Battery Voltage",
+ data: chartDataVBatt,
+ color: "blue",
+ },
+ ],
+ valueSuffix: " V",
+ },
+ {
+ title: "Battery Current",
+ yAxisTitle: "Current (A)",
+ series: [
+ {
+ name: "Battery Current",
+ data: chartDataIBatt,
+ color: "yellow",
+ },
+ ],
+ valueSuffix: " A",
+ },
+ {
+ title: "Solar Panel Temperatures",
+ yAxisTitle: "Temperature (°C)",
+ series: solarPanelChartData,
+ valueSuffix: " °C",
+ },
+ {
+ title: "Uptime",
+ yAxisTitle: "Uptime (weeks)",
+ series: [
+ { name: "Uptime", data: chartDataUptime, color: "orange" },
+ ],
+ valueSuffix: " weeks",
+ },
+ ];
+
+ // Base chart template
+ const createChartOptions = (config: any) => ({
+ chart: {
+ type: "line",
+ backgroundColor: "transparent",
+ reflow: true,
+ },
+ title: {
+ text: config.title,
+ style: {
+ color: "#ffffff",
+ fontSize: "24px",
+ },
+ },
+ xAxis: {
+ type: "datetime",
+ labels: {
+ style: {
+ color: "#ffffff",
+ fontSize: "14px",
+ },
+ },
+ },
+ yAxis: {
+ title: {
+ text: config.yAxisTitle,
+ style: {
+ color: "#ffffff",
+ fontSize: "18px",
+ },
+ },
+ labels: {
+ style: {
+ color: "#ffffff",
+ fontSize: "14px",
+ },
+ },
+ },
+ series: config.series.map((serie: any) => ({
+ ...serie,
+ tooltip: {
+ valueSuffix: config.valueSuffix,
+ },
+ })),
+ plotOptions: {
+ series: {
+ marker: { enabled: false },
+ lineWidth: 2,
+ },
+ },
+ credits: { enabled: false },
+ legend: {
+ itemStyle: {
+ color: "#ffffff",
+ fontSize: "16px",
+ },
+ itemHoverStyle: {
+ color: "#ff0000",
+ },
+ },
+ tooltip: {
+ backgroundColor: "#000000",
+ style: {
+ color: "#ffffff",
+ fontSize: "14px",
+ },
+ borderColor: "#ffffff",
+ borderRadius: 5,
+ },
+ });
+
+ return (
+
+ {chartConfigs.map((config, index) => (
+
+
+
+ ))}
+