feat(dashboard): Add BaroData graphs

wuespace · Mar 2, 2021 · 45a2a60 · 45a2a60
1 parent e451b92
commit 45a2a60
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 6 deletions.
diff --git a/src/model/channels.ts b/src/model/channels.ts
@@ -25,6 +25,8 @@ export const Amplitude =
 	MONGODB_NEW + '/de.jvpichowski.rocketsound.messages.sound.Amplitude';
 export const Spectrum =
 	MONGODB_NEW + '/de.jvpichowski.rocketsound.messages.sound.Spectrum';
+export const BaroData =
+	MONGODB_NEW + '/de.jvpichowski.rocketsound.messages.base.BaroData';
 
 export interface DataMessage<T extends JsonSerializable> {
 	[key: string]: JsonSerializable;

diff --git a/src/model/messages/baro-data.ts b/src/model/messages/baro-data.ts
@@ -0,0 +1,22 @@
+import { DataMessage } from '../channels';
+import { JsonSerializable } from '@wuespace/telestion-client-types';
+
+export interface PressureData extends Record<string, JsonSerializable> {
+	pressure: number;
+}
+
+export interface TemperatureData extends Record<string, JsonSerializable> {
+	temperature: number;
+}
+
+export interface AltitudeData extends Record<string, JsonSerializable> {
+	altitude: number;
+}
+
+export interface BaroDataData extends Record<string, JsonSerializable> {
+	press: PressureData;
+	temp: TemperatureData;
+	alt: AltitudeData;
+}
+
+export type BaroDataMessage = DataMessage<BaroDataData>;
diff --git a/src/model/sample-graph-definitions.ts b/src/model/sample-graph-definitions.ts
@@ -1,5 +1,5 @@
 import { GraphWidgetProps } from '../widgets/graph-widget';
-import { NineDOF } from './channels';
+import { BaroData, NineDOF } from './channels';
 
 export const accLineGraph: GraphWidgetProps = {
 	isArea: false,
@@ -91,6 +91,66 @@ export const magLineGraph: GraphWidgetProps = {
 	]
 };
 
+export const altitudeGraph: GraphWidgetProps = {
+	isArea: false,
+	isCartesianGrid: true,
+	isHoldOnHover: true,
+	isTooltip: true,
+	maxDataSamples: 60,
+	connections: [
+		{
+			channel: BaroData,
+			descriptors: [
+				{
+					key: 'result[0].alt.altitude',
+					title: 'Altitude',
+					color: 'purple-500'
+				}
+			]
+		}
+	]
+};
+
+export const pressureGraph: GraphWidgetProps = {
+	isArea: false,
+	isCartesianGrid: true,
+	isHoldOnHover: true,
+	isTooltip: true,
+	maxDataSamples: 60,
+	connections: [
+		{
+			channel: BaroData,
+			descriptors: [
+				{
+					key: 'result[0].press.pressure',
+					title: 'Pressure',
+					color: 'seafoam-500'
+				}
+			]
+		}
+	]
+};
+
+export const temperatureGraph: GraphWidgetProps = {
+	isArea: false,
+	isCartesianGrid: true,
+	isHoldOnHover: true,
+	isTooltip: true,
+	maxDataSamples: 60,
+	connections: [
+		{
+			channel: BaroData,
+			descriptors: [
+				{
+					key: 'result[0].temp.temperature',
+					title: 'Temperature',
+					color: 'celery-500'
+				}
+			]
+		}
+	]
+};
+
 export const detailsGraph: GraphWidgetProps = {
 	isArea: true,
 	isCartesianGrid: true,

diff --git a/src/model/sample-user-config.ts b/src/model/sample-user-config.ts
@@ -2,9 +2,12 @@ import { UserConfig } from '@wuespace/telestion-client-types';
 
 import {
 	accLineGraph,
+	altitudeGraph,
 	detailsGraph,
 	gyroLineGraph,
-	magLineGraph
+	magLineGraph,
+	pressureGraph,
+	temperatureGraph
 } from './sample-graph-definitions';
 import { Amplitude } from './channels';
 import { WaveformWidgetProps } from '../widgets/waveform-widget';
@@ -122,11 +125,32 @@ export const userConfig: UserConfig = {
 					},
 					{
 						widgetName: 'graphWidget',
-						width: 6,
+						width: 2,
 						height: 4,
-						title: 'Details',
-						initialProps: detailsGraph
+						title: 'Altitude',
+						initialProps: altitudeGraph
+					},
+					{
+						widgetName: 'graphWidget',
+						width: 2,
+						height: 4,
+						title: 'Pressure',
+						initialProps: pressureGraph
+					},
+					{
+						widgetName: 'graphWidget',
+						width: 2,
+						height: 4,
+						title: 'Temperature',
+						initialProps: temperatureGraph
 					},
+					// {
+					// 	widgetName: 'graphWidget',
+					// 	width: 6,
+					// 	height: 4,
+					// 	title: 'Details',
+					// 	initialProps: detailsGraph
+					// },
 					{
 						widgetName: 'stateWidget',
 						width: 2,

diff --git a/src/plugins/mock-server-plugin.ts b/src/plugins/mock-server-plugin.ts
@@ -1,9 +1,16 @@
 import http from 'http';
 import sockjs from 'sockjs';
-import { Amplitude, FlightState, NineDOF, Spectrum } from '../model/channels';
+import {
+	Amplitude,
+	BaroData,
+	DataMessage,
+	FlightState,
+	Spectrum
+} from '../model/channels';
 import { SpectrumMessage } from '../model/messages/spectrum';
 
 import { AmplitudeMessage, FlightStateMessage } from '../model/messages';
+import { BaroDataData } from '../model/messages/baro-data';
 
 export function onReady() {
 	if (
@@ -111,6 +118,29 @@ export function onReady() {
 				connection.write(bare2); // stringify entire message!
 				console.log('<---   Message sent     -', bare2);
 
+				const baroDataState: DataMessage<BaroDataData> = {
+					result: [
+						{
+							alt: { altitude: 5 },
+							press: { pressure: 3 },
+							temp: { temperature: 100 }
+						}
+					],
+					className: 'a',
+					dataType: 'a'
+				};
+
+				const message4 = {
+					type: 'rec',
+					address: BaroData,
+					body: baroDataState
+				};
+
+				const bare4 = JSON.stringify(message4);
+
+				connection.write(bare4); // stringify entire message!
+				console.log('<---   Message sent     -', bare4);
+
 				const spectrumMessage: SpectrumMessage = {
 					dataType: 'abc',
 					className: 'abc',