Skip to content

Components

Jump to bottom
Matteo Golin edited this page Dec 2, 2022 · 7 revisions

Mission Timer

Parameters:

  • mission_time (int) The mission time in milliseconds

The mission timer displays the mission time in HH:MM:SS format.

Navbar

Parameters:

  • version (string) The version of the backend, provided via the JSON data sent over the websocket
  • org (string) The organization sending the data, provided via the JSON data sent over the websocket
  • status (JSON object) The status information sent from the backend
  • children (React Components) The PageLink components nested within the Navbar component that link to different URLs on the UI

Any pages that are added to the website must be listed within the Navbar through PageLink components in order to be available in the nav.

The navbar displays the connection status of the backend to the ground station hardware. The organization, software version number and links to other pages are also displayed. The mission timer shows the mission duration decided by the timestamp in the last data packet received by the backend. And finally, the rocket call sign and current state are displayed right under the mission duration.

ReplayItem

Parameters:

  • name (string) The name given to the mission recording
  • websocketRef (React mutable ref object) A reference to the current WebSocket instance

The ReplayItem component displays the name of a mission recording. When clicked, the component will send a command to the backend using the WebSocket reference that triggers the replay of the selected mission recording. This will also clear the current buffer of historical data so that graphs will be clear for the new mission information.

The command is telemetry replay play <mission recording>, where <mission recording> is the name parameter passed to the component.

GaugeGraph

Parameters:

  • title (string) The title of the graph
  • x_cb (function) See useStorage documentation
  • y_cb (function) See useStorage documentation
  • unit (string) Unit of the y-axis
  • min (int) Minimum of the display range for the gauge graph
  • max (int) Maximum of the display range for the gauge graph
  • inner_colour_1 (string) The start colour in hex for the gradient of the inner gauge line
  • inner_colour_2 (string) The end colour in hex for the gradient of the inner gauge line
  • outer_colour (string) The colour in hex for the outer gauge line
  • className (string) Allows for custom styling using CSS classes

GaugeGraph displays the latest single data point for the information found using the x and y callbacks in gauge form. This component can be passed custom colours.

DashboardGraph

Parameters:

  • title (string) The title of the graph
  • x-title (string) The title for the x-axis of the graph
  • y-title (string) The title for the y-axis of the graph
  • x_unit (string) The unit of measurement for the x-axis of the graph
  • y_unit (string) The unit of measurement for the y-axis of the graph
  • x_cb (function) See useStorage documentation
  • y_cb (function) See useStorage documentation
  • options (JSON object) The JSON options object required by the ReactEcharts component
  • line_colour (integer) The number associated with the accent colour that will be used to colour the chart's line
  • className (string) The CSS class to be applied to the graph

The DashboardGraph component displays a simple line chart with x and y data. Plotted data points are visible with dots as indicators. If no options are passed the DashboardGraph component, it will use the DashGraph options by default.

Clone this wiki locally