Skip to content

Commit

Permalink
Merge pull request #5 from adedolapoadegboye/maps-and-stats
Browse files Browse the repository at this point in the history
Maps and stats
  • Loading branch information
adedolapoadegboye authored Jul 22, 2024
2 parents 82b839f + 2865eb7 commit 9268e78
Show file tree
Hide file tree
Showing 12 changed files with 246 additions and 76 deletions.
9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gnssmetrics",
"version": "1.0.2",
"version": "1.0.3",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
Expand All @@ -12,6 +12,7 @@
"file-saver": "^2.0.5",
"firebase": "^10.11.1",
"framer-motion": "^11.1.9",
"geodesy": "^2.4.0",
"google-map-react": "^2.2.1",
"jszip": "^3.10.1",
"mapbox": "^1.0.0-beta10",
Expand Down
73 changes: 73 additions & 0 deletions src/Dev/Components/Visualizers/AltDataPlot.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React, { useEffect, useRef } from "react";
import Chart from "chart.js/auto";

const LineChart = (data) => {
const chartRef = useRef(null);

console.log("3D errors: ", data);

useEffect(() => {
const ctx = chartRef.current.getContext("2d");

// Destroy the previous chart instance before creating a new one
if (chartRef.current.chart) {
chartRef.current.chart.destroy();
}

// Create the new chart instance
chartRef.current.chart = new Chart(ctx, {
type: "line",
data: {
labels: data.altPlotData.map((_, i) => i),
datasets: [
{
label: "3D Fix Error (m)",
data: data.altPlotData.map((value, index) => ({
x: index,
y: value,
})),
borderColor: "rgba(175, 92, 92, 1)",
backgroundColor: "rgba(255, 255, 255, 1)",
color: "rgba(75, 92, 192, 1)",
tension: 0.5,
},
],
},
options: {
scales: {
x: {
beginAtZero: true,
},
y: {
beginAtZero: true,
},
},
animations: {
tension: {
duration: 1000,
easing: "linear",
from: 0.1,
to: 0,
loop: true,
},
},
elements: {
line: {
borderWidth: 1,
borderJoinStyle: "bevel",
},
},
plugins: {
title: {
display: true,
text: "Plot of 3D Fix Error with respect to Reference 3D Coordinates",
},
},
},
});
}, [data]);

return <canvas ref={chartRef} />;
};

export default LineChart;
13 changes: 9 additions & 4 deletions src/Dev/Components/Visualizers/DataPlot.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import Chart from "chart.js/auto";

const LineChart = (data) => {
const chartRef = useRef(null);
// console.log(data);

console.log("2D errors: ", data);

useEffect(() => {
const ctx = chartRef.current.getContext("2d");

Expand All @@ -19,9 +21,9 @@ const LineChart = (data) => {
labels: data.plotData.map((_, i) => i),
datasets: [
{
label: "Fix Error (m)",
label: "2D Fix Error (m)",
data: data.plotData.map((value, index) => ({
x: index + 1,
x: index,
y: value,
})),
borderColor: "rgba(175, 92, 92, 1)",
Expand All @@ -33,6 +35,9 @@ const LineChart = (data) => {
},
options: {
scales: {
x: {
beginAtZero: true,
},
y: {
beginAtZero: true,
},
Expand All @@ -55,7 +60,7 @@ const LineChart = (data) => {
plugins: {
title: {
display: true,
text: "Plot of Fix Error with respect to Reference Coordinates",
text: "Plot of 2D Fix Error with respect to Reference 3D Coordinates",
},
},
},
Expand Down
13 changes: 11 additions & 2 deletions src/Dev/Components/Visualizers/DataStats.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@ import calcStats from "../../Functions/calcStats";
import calc3DStats from "../../Functions/calc3DStats";

const DataStats = (props) => {
const { file, refLat, refLong, refAlt, startButton, setPlotData } = props;
const {
file,
refLat,
refLong,
refAlt,
startButton,
setPlotData,
setAltPlotData,
} = props;

const [markers, setMarkers] = useState([]);
const [distances, setDistances] = useState([]);
Expand Down Expand Up @@ -67,7 +75,8 @@ const DataStats = (props) => {
setMeanSep98,
meanLat,
meanLong,
meanAlt
meanAlt,
setAltPlotData
);
} catch (error) {
console.error("Error occurred while calculating stats:", error);
Expand Down
37 changes: 23 additions & 14 deletions src/Dev/Functions/StatsAndPlotsRender.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import DataStats from "../Components/Visualizers/DataStats";
import DataPlot from "../Components/Visualizers/DataPlot";
import AltDataPlot from "../Components/Visualizers/AltDataPlot";

const StatsAndPlotsRender = ({
startButton,
Expand All @@ -10,24 +11,32 @@ const StatsAndPlotsRender = ({
refAlt,
setPlotData,
plotData,
setAltPlotData,
altPlotData,
}) => {
try {
if (startButton) {
// console.log(plotData);
return (
<div className="flex flex-col sm:flex-row w-full rounded-lg text-center justify-center items-center gap-4 sm:gap-8 mb-4 sm:mb-8">
<div className="max-w-full sm:w-1/4 max-h-96 rounded-lg overflow-auto sm:flex sm:justify-end">
<DataStats
file={file}
refLat={refLat}
refLong={refLong}
refAlt={refAlt}
startButton={startButton}
setPlotData={setPlotData}
/>
</div>
<div className="max-w-full sm:w-3/4 max-h-96">
<DataPlot plotData={plotData} />
<div className="flex flex-col gap-4 p-4 border rounded-lg shadow-md bg-white">
<h3 className="text-lg sm:text-xl md:text-2xl lg:text-3xl text-gray-600 font-semibold">
Evaluation Results
</h3>
<div className="flex flex-col md:flex-row w-full rounded-lg text-center justify-center items-center gap-4 md:gap-8">
<div className="max-w-full md:w-1/4 max-h-full rounded-lg overflow-auto p-2">
<DataStats
file={file}
refLat={refLat}
refLong={refLong}
refAlt={refAlt}
startButton={startButton}
setPlotData={setPlotData}
setAltPlotData={setAltPlotData}
/>
</div>
<div className="flex flex-col gap-4 md:gap-8 max-w-full md:w-3/4 max-h-full rounded-lg overflow-auto p-2">
<DataPlot plotData={plotData} />
<AltDataPlot altPlotData={altPlotData} />
</div>
</div>
</div>
);
Expand Down
51 changes: 36 additions & 15 deletions src/Dev/Functions/calc3DDistance.jsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,40 @@
import LatLonEllipsoidal from "geodesy/latlon-ellipsoidal";

/**
* Calculates the 3D Cartesian distance between two geographical points using ellipsoidal coordinates.
* @param {number} lat1 - Latitude of the first point.
* @param {number} lon1 - Longitude of the first point.
* @param {number} alt1 - Altitude of the first point.
* @param {number} lat2 - Latitude of the second point.
* @param {number} lon2 - Longitude of the second point.
* @param {number} alt2 - Altitude of the second point.
* @returns {string} - The Cartesian distance between the two points in meters, formatted to two decimal places.
*/
const calc3DDistance = (lat1, lon1, alt1, lat2, lon2, alt2) => {
const earthRadius = 6371e3; // Earth's radius in meters
const latDiff = (lat2 - lat1) * (Math.PI / 180);
const lonDiff = (lon2 - lon1) * (Math.PI / 180);
const altDiff = alt2 - alt1;
const a =
Math.sin(latDiff / 2) * Math.sin(latDiff / 2) +
Math.cos(lat1 * (Math.PI / 180)) *
Math.cos(lat2 * (Math.PI / 180)) *
Math.sin(lonDiff / 2) *
Math.sin(lonDiff / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = Math.sqrt(
Math.pow(earthRadius * c, 2) + Math.pow(altDiff, 2)
); // 3D distance
return distance;
try {
// Convert geographical points to Cartesian coordinates
const refPoint = new LatLonEllipsoidal(lat1, lon1, alt1).toCartesian();
const testPoint = new LatLonEllipsoidal(lat2, lon2, alt2).toCartesian();

// Log the Cartesian points for debugging
// console.log(refPoint, testPoint);

// Calculate the Cartesian distance between the two points
const distance = Math.sqrt(
(refPoint.x - testPoint.x) ** 2 +
(refPoint.y - testPoint.y) ** 2 +
(refPoint.z - testPoint.z) ** 2
);

// console.log(distance);

// Return the distance formatted to two decimal places
return distance.toFixed(2);
} catch (error) {
// Log any errors that occur during the distance calculation
console.error("Error occurred while calculating 3D distance:", error);
return "";
}
};

export default calc3DDistance;
20 changes: 15 additions & 5 deletions src/Dev/Functions/calc3DStats.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,28 @@ const calc3DStats = (
setMeanSep98,
meanLat,
meanLong,
meanAlt
meanAlt,
setAltPlotData
) => {
if (markers.length > 1 && markers[0].alt > 1 && refAlt && refLat && refLong) {
if (
markers.length > 1 &&
markers[0].lat &&
markers[0].lng &&
markers[0].alt > 1 &&
refAlt &&
refLat &&
refLong
) {
try {
const fixErrors = markers.map((data) => {
const { lat, lng, alt } = data;
const fixError = parseFloat(
calc3DDistance(refLat, refLong, refAlt, lat, lng, alt).toFixed(2)
calc3DDistance(refLat, refLong, refAlt, lat, lng, alt)
);
return fixError;
});

setAltPlotData([...fixErrors]);
setTriDDistances([...fixErrors]);

const sortedFixErrors = fixErrors.sort((a, b) => a - b);
Expand All @@ -43,10 +53,10 @@ const calc3DStats = (
const meanTriDFixError = parseFloat(
calc3DDistance(meanLat, meanLong, meanAlt, lat, lng, alt)
);
// console.log(meanTriDFixError);
return meanTriDFixError;
});
setTriDMeanDistances(...meanTriDFixErrors);

setTriDMeanDistances([...meanTriDFixErrors]);

const sortedTriDMeanDistances = meanTriDFixErrors.sort((a, b) => a - b);
const meanSep50Index = Math.floor(sortedTriDMeanDistances.length * 0.5);
Expand Down
34 changes: 17 additions & 17 deletions src/Dev/Functions/calcDistance.jsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
import LatLonEllipsoidal_Vincenty from "geodesy/latlon-ellipsoidal-vincenty";

/**
* Calculates the distance between two geographical points using spherical coordinates.
* @param {number} lat1 - Latitude of the first point.
* @param {number} lon1 - Longitude of the first point.
* @param {number} lat2 - Latitude of the second point.
* @param {number} lon2 - Longitude of the second point.
* @returns {string} - The distance between the two points in meters, formatted to two decimal places.
*/
const calcDistance = (lat1, lon1, lat2, lon2) => {
try {
const earthRadius = 6371 * 1000; // Earth's radius in meters

const toRadians = (degrees) => {
return degrees * (Math.PI / 180);
};

const latDiffRad = toRadians(lat2 - lat1);
const lonDiffRad = toRadians(lon2 - lon1);

const a =
Math.sin(latDiffRad / 2) ** 2 +
Math.cos(toRadians(lat1)) *
Math.cos(toRadians(lat2)) *
Math.sin(lonDiffRad / 2) ** 2;

const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
// Create LatLonSpherical objects for the reference and test points
const refPoint = new LatLonEllipsoidal_Vincenty(lat1, lon1);
const testPoint = new LatLonEllipsoidal_Vincenty(lat2, lon2);

const distance = earthRadius * c;
// Calculate the distance between the points
const distance = refPoint.distanceTo(testPoint);

// Return the distance formatted to two decimal places
return distance.toFixed(2);
} catch (error) {
// Log any errors that occur during the distance calculation
console.error("Error occurred while calculating distance:", error);
return "";
}
Expand Down
Loading

0 comments on commit 9268e78

Please sign in to comment.