From 49db46468bfd8d73a43da74dc4a53cf34350735d Mon Sep 17 00:00:00 2001 From: Daniel Kim Date: Sat, 17 Feb 2024 16:33:07 -0800 Subject: [PATCH] added SingleValueLine --- views/DashboardContainer.tsx | 22 ++--- views/MapsContainer.tsx | 80 ++++++++++++++++--- .../SingleValueChart/SingleValueChart.tsx | 11 +-- .../singlevaluechart.module.css | 5 ++ .../SingleValueLine/SingleValueLine.tsx | 30 +++++++ .../singlevalueline.module.css | 17 ++++ 6 files changed, 133 insertions(+), 32 deletions(-) create mode 100644 views/components/SingleValueChart/singlevaluechart.module.css create mode 100644 views/components/SingleValueLine/SingleValueLine.tsx create mode 100644 views/components/SingleValueLine/singlevalueline.module.css diff --git a/views/DashboardContainer.tsx b/views/DashboardContainer.tsx index 64fbd16..30d739a 100644 --- a/views/DashboardContainer.tsx +++ b/views/DashboardContainer.tsx @@ -63,10 +63,10 @@ class DashboardContainer extends React.PureComponent { - + - + { return angle * Math.PI / 180 } - const earthRadius = 6571 // in km + const EARTH_RADIUS = 6571 // in km - var delta_lat = lat2-lat1 - var delta_lat_rad = toRadians(delta_lat) - var delta_long = long2-long1 - var delta_long_rad = toRadians(delta_long) + let delta_lat = lat2-lat1 + let delta_lat_rad = toRadians(delta_lat) + let delta_long = long2-long1 + let delta_long_rad = toRadians(delta_long) - var a = (Math.sin(delta_lat_rad/2) * Math.sin(delta_lat_rad/2)) + let a = (Math.sin(delta_lat_rad/2) * Math.sin(delta_lat_rad/2)) + (Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(delta_long_rad/2) * Math.sin(delta_long_rad/2)) - var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); + let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); - var distance = earthRadius * c; + let distance = EARTH_RADIUS * c; return distance } @@ -129,7 +129,7 @@ class DashboardContainer extends React.PureComponent { return -1; } - var totalDistance = 0; + let totalDistance = 0; for(let i = 1; i < latitude.length; i++){ totalDistance += this._haversineDistance(latitude[i-1], longitude[i-1], latitude[i], longitude[i]); diff --git a/views/MapsContainer.tsx b/views/MapsContainer.tsx index bbee97e..e7b9dee 100644 --- a/views/MapsContainer.tsx +++ b/views/MapsContainer.tsx @@ -5,6 +5,8 @@ import { GlobalPathState } from '@/stores/GlobalPath/GlobalPathTypes'; import { AISShipsState } from '@/stores/AISShips/AISShipsTypes'; import { WayPoint, LocalPathState } from '@/stores/LocalPath/LocalPathTypes'; import Maps, { convertToLatLng } from './components/Maps/Maps'; +import SingleValueLine from './components/SingleValueLine/SingleValueLine'; +import styles from './components/SingleValueLine/singlevalueline.module.css' export interface MapsContainerProps { gps: GPSState; @@ -15,22 +17,74 @@ export interface MapsContainerProps { class MapsContainer extends React.PureComponent { render() { + const { gps, batteries, windSensors } = this.props; + + const gpsDistanceData = [ + gps.data.map((data) => data.latitude), + gps.data.map((data) => data.longitude) + ]; + + const totalTripDistance = this._computeTotalTripDistance(gpsDistanceData[0], gpsDistanceData[1]) + return ( - - convertToLatLng(gpsPoint), - )} - globalPath={this.props.globalPath.data.waypoints.map( - (waypoint: WayPoint) => convertToLatLng(waypoint), - )} - aisShips={this.props.aisShips.data.ships} - localPath={this.props.localPath.data.waypoints.map( - (waypoint: WayPoint) => convertToLatLng(waypoint), - )} - /> +
+
+ +
+ + convertToLatLng(gpsPoint), + )} + globalPath={this.props.globalPath.data.waypoints.map( + (waypoint: WayPoint) => convertToLatLng(waypoint), + )} + aisShips={this.props.aisShips.data.ships} + localPath={this.props.localPath.data.waypoints.map( + (waypoint: WayPoint) => convertToLatLng(waypoint), + )} + /> +
); } + + _haversineDistance(lat1: number, long1: number, lat2: number, long2: number) { + + function toRadians(angle: number): number{ + return angle * Math.PI / 180 + } + + const EARTH_RADIUS = 6571 // in km + + let delta_lat = lat2-lat1 + let delta_lat_rad = toRadians(delta_lat) + let delta_long = long2-long1 + let delta_long_rad = toRadians(delta_long) + + let a = (Math.sin(delta_lat_rad/2) * Math.sin(delta_lat_rad/2)) + + (Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) + * Math.sin(delta_long_rad/2) + * Math.sin(delta_long_rad/2)) + let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); + + let distance = EARTH_RADIUS * c; + + return distance + } + + _computeTotalTripDistance(latitude: number[], longitude: number[]) { + if(latitude.length != longitude.length){ + return -1; + } + + let totalDistance = 0; + + for(let i = 1; i < latitude.length; i++){ + totalDistance += this._haversineDistance(latitude[i-1], longitude[i-1], latitude[i], longitude[i]); + } + + return Number(totalDistance.toFixed(2)); + } } const mapStateToProps = (state: any) => ({ diff --git a/views/components/SingleValueChart/SingleValueChart.tsx b/views/components/SingleValueChart/SingleValueChart.tsx index a729149..83f1803 100644 --- a/views/components/SingleValueChart/SingleValueChart.tsx +++ b/views/components/SingleValueChart/SingleValueChart.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { CardHeader, Container, Typography } from '@mui/material'; +import { Typography } from '@mui/material'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; +import styles from './singlevaluechart.module.css' interface SingleValueChartProps { @@ -14,14 +15,8 @@ class SingleValueChart extends React.Component { render() { const { title, data, unit } = this.props; - var cardStyle = { - display: 'block', - width: '15vw', - height: '8vw' - } - return ( - + {`${title}`} diff --git a/views/components/SingleValueChart/singlevaluechart.module.css b/views/components/SingleValueChart/singlevaluechart.module.css new file mode 100644 index 0000000..6e9d317 --- /dev/null +++ b/views/components/SingleValueChart/singlevaluechart.module.css @@ -0,0 +1,5 @@ +.card{ + display: block; + width: 15vw; + height: 8vw; +} diff --git a/views/components/SingleValueLine/SingleValueLine.tsx b/views/components/SingleValueLine/SingleValueLine.tsx new file mode 100644 index 0000000..fc26c81 --- /dev/null +++ b/views/components/SingleValueLine/SingleValueLine.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Typography } from '@mui/material'; +import Card from '@mui/material/Card'; +import CardContent from '@mui/material/CardContent'; +import styles from './singlevalueline.module.css' + + +interface SingleValueLineProps { + title: string; + data: number | string | undefined; + unit: string; +} + +class SingleValueLine extends React.Component { + render() { + const { title, data, unit } = this.props; + + return ( + + + + {(data) ? `${title}: ${data} ${unit}` : `-- ${unit}`} + + + + ); + } +} + +export default SingleValueLine; diff --git a/views/components/SingleValueLine/singlevalueline.module.css b/views/components/SingleValueLine/singlevalueline.module.css new file mode 100644 index 0000000..f3980ac --- /dev/null +++ b/views/components/SingleValueLine/singlevalueline.module.css @@ -0,0 +1,17 @@ +.card{ + display: block; + width: 11.9vw; + height: 4vw; +} + +.parent { + position: relative; +} + +.topRight { + position: absolute; + z-index: 10000000000; + top: 0vw; + right: 0vw; + +}