Adds functionality for exporting voyage data as CSV and XLSX

src/website/package.json

@@ -14,13 +14,14 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/x-date-pickers": "^6.19.6",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.12",
+    "@mui/x-date-pickers": "^6.19.6",
     "@react-google-maps/api": "^2.19.2",
     "@reduxjs/toolkit": "^1.9.5",
     "dayjs": "^1.11.10",
     "dotenv": "^16.3.1",
+    "exceljs": "^4.4.0",
     "express": "^4.18.2",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
@@ -32,6 +33,7 @@
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1",
     "react-redux": "^8.1.2",
+    "react-select": "^5.8.0",
     "recharts": "^2.10.4",
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
@@ -44,7 +46,7 @@
     "@types/express": "^4.17.17",
     "@types/leaflet": "^1.9.7",
     "@types/node": "18.7.5",
-    "@types/react": "^18.2.37",
+    "@types/react": "^18.3.11",
     "@types/redux-logger": "^3.0.12",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
@@ -56,6 +58,6 @@
     "stylelint": "^15.11.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^11.1.0",
-    "typescript": "4.6.3"
+    "typescript": "^5.6.3"
   }
 }

src/website/tsconfig.json

@@ -1,9 +1,15 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     },
     "allowJs": true,
     "skipLibCheck": true,
@@ -28,7 +34,12 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "hooks/useSessionState.js"
-, "lib/dotenv.js", "models/helper/parser.js", "utils/DownloadData.js"  ],
-  "exclude": ["node_modules"]
+    "hooks/useSessionState.js",
+    "lib/dotenv.js",
+    "models/helper/parser.js",
+    "utils/DownloadData.js"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

src/website/utils/DownloadData.js

@@ -1,17 +1,33 @@
-const downloadSensorData = async (sensorType) => {
+const downloadSensorData = async (sensorType, format) => {
   try {
+    if(!format) {
+      return
+    }
+
     const apiUrl = `${process.env.NEXT_PUBLIC_SERVER_HOST}:${process.env.NEXT_PUBLIC_SERVER_PORT}/api/${sensorType}`;
     const response = await fetch(apiUrl);
     if (!response.ok) {
       throw new Error(`Error: ${response.statusText}`);
     }
     const { data } = await response.json();
-    const jsonStr = JSON.stringify(data);
-    const blob = new Blob([jsonStr], { type: 'application/json' });
+
+    let blob;
+    let filename = `${sensorType}.${format}`;
+
+    if (format === 'CSV') {
+      const csvString = formatCsv(data, sensorType);
+      blob = new Blob([csvString], { type: 'text/csv' });
+    } else if (format === 'JSON') {
+      const jsonStr = JSON.stringify(data);
+      blob = new Blob([jsonStr], { type: 'application/json' });
+    } else if (format === 'XLSX') {
+      const xlsxBuffer = await formatXLSX(data, sensorType);
+      blob = new Blob([new Uint8Array(xlsxBuffer)], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
+    }
 
     const link = document.createElement('a');
     link.href = URL.createObjectURL(blob);
-    link.download = `${sensorType}.json`;
+    link.download = filename;
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
@@ -20,11 +36,127 @@ const downloadSensorData = async (sensorType) => {
   }
 };
 
-export const downloadGPSData = () => downloadSensorData('gps');
-export const downloadAISShipsData = () => downloadSensorData('aisships');
-export const downloadGlobalPathData = () => downloadSensorData('globalpath');
-export const downloadLocalPathData = () => downloadSensorData('localpath');
-export const downloadBatteriesData = () => downloadSensorData('batteries');
-export const downloadWindSensorsData = () => downloadSensorData('wind-sensors');
-export const downloadGenericSensorsData = () =>
-  downloadSensorData('generic-sensors');
+const formatCsv = (data, sensorType) => {
+  switch (sensorType) {
+    case 'gps':
+      return format2dCsv(data);
+    case 'aisships':
+    case 'globalpath':
+    case 'localpath':
+    case 'batteries':
+    case 'wind-sensors':
+    case 'generic-sensors':
+      return format3dCsv(data);
+    default:
+      throw new Error(`Unsupported sensor type: ${sensorType}`);
+  }
+};
+
+// helper functions based on data dimensionality
+// format3dCsv is built for a very specific data structure
+
+const format2dCsv = (data) => {
+  if (!data) return [];
+  const headers = ["timestamp", ...Object.keys(data[0]).slice(0, -1)];
+  const csvRows = [];
+  csvRows.push(headers);
+
+  data.forEach((reading) => {
+    const csvRowString = headers.map((header) => reading[header])
+    csvRows.push(csvRowString);
+  });
+
+  const csvString = csvRows.join('\n');
+  return csvString;
+}
+
+const format3dCsv = (data) => {
+  const firstItem = data[0];
+  if (!firstItem) return [];
+
+  const innerProperties = Object.keys(firstItem);
+  const innerHeaders = Object.keys(firstItem[innerProperties[0]][0]);
+  const headers = [innerProperties[1], ...innerHeaders];
+  const csvRows = [];
+  csvRows.push(headers);
+
+  data.forEach((reading) => {
+    reading[innerProperties[0]].forEach((innerItem, index) => {
+      const timestamp = index === 0 ? reading.timestamp : ""
+      const innerHeaderValues = innerHeaders.map((innerHeader) => innerItem[innerHeader])
+      const innerRow = [timestamp, ...innerHeaderValues];
+      csvRows.push(innerRow);
+    })
+  });
+
+  const csvString = csvRows.join('\n');
+  return csvString;
+}
+
+const formatXLSX = async (data, sensorType) => {
+  const ExcelJS = require('exceljs');
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet('Sheet 1');
+
+  switch (sensorType) {
+    case 'gps':
+      format2dXLSX(data, worksheet, workbook);
+      break
+    case 'aisships':
+    case 'globalpath':
+    case 'localpath':
+    case 'batteries':
+    case 'wind-sensors':
+    case 'generic-sensors':
+      format3dXLSX(data, worksheet, workbook);
+      break
+    default:
+      throw new Error(`Unsupported sensor type: ${sensorType}`);
+  };
+
+  const excelBuffer = await workbook.xlsx.writeBuffer();
+  return excelBuffer;
+}
+
+const format2dXLSX = (data, worksheet) => {
+  const headers = ["timestamp", ...Object.keys(data[0]).slice(0, -1)];
+  const columns = headers.map((header) => ({ header: header, key: header, width: 30}));
+  worksheet.columns = columns;
+
+  data.forEach((reading) => {
+    const rowObject = {}
+    headers.forEach((header) => rowObject[header] = reading[header]);
+    worksheet.addRow(rowObject);
+  });
+};
+
+const format3dXLSX = (data, worksheet) => {
+  const firstItem = data[0];
+  if (!firstItem) return [];
+
+  const innerProperties = Object.keys(firstItem);
+  const innerHeaders = Object.keys(firstItem[innerProperties[0]][0]);
+  const headers = [innerProperties[1], ...innerHeaders];
+  const columns = headers.map((header) => ({ header: header, key: header, width: 30}));
+  worksheet.columns = columns;
+
+  data.forEach((reading) => {
+    reading[innerProperties[0]].forEach((innerItem, index) => {
+      const rowObject = {};
+      const timestamp = index === 0 ? reading.timestamp : "";
+      rowObject['timestamp'] = timestamp;
+
+      innerHeaders.forEach((innerHeader) => rowObject[innerHeader] = innerItem[innerHeader]);
+      worksheet.addRow(rowObject);
+    })
+  });
+}
+
+export const downloadGPSData = (format) => downloadSensorData('gps', format);
+export const downloadAISShipsData = (format) => downloadSensorData('aisships', format);
+export const downloadGlobalPathData = (format) => downloadSensorData('globalpath', format);
+export const downloadLocalPathData = (format) => downloadSensorData('localpath', format);
+export const downloadBatteriesData = (format) => downloadSensorData('batteries', format);
+export const downloadWindSensorsData = (format) => downloadSensorData('wind-sensors', format);
+export const downloadGenericSensorsData = (format) =>
+  downloadSensorData('generic-sensors', format);

src/website/views/components/Dataset/Dataset.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import styles from './dataset.module.css';
+import Select from 'react-select'
 
 interface DatasetProps {
   title: string;
@@ -11,6 +12,14 @@ interface DatasetProps {
 
 const Dataset = ({ title, content, downloadAction }: DatasetProps) => {
   const titles = ['DATA TYPE', 'TIMESCALE', 'FILE', 'ACCESS'];
+  const fileTypes = [
+    { value: 'JSON', label: 'JSON' },
+    { value: 'CSV', label: 'CSV' },
+    { value: 'XLSX', label: 'EXCEL' },
+  ];
+
+  const [selectedFileType, setSelectedFileType] = useState('JSON');
+
   return (
     <Accordion className={styles.accordionCustom}>
       <AccordionSummary
@@ -30,18 +39,21 @@ const Dataset = ({ title, content, downloadAction }: DatasetProps) => {
           ))}
         </div>
         <div className={styles.contentContainer}>
-          {content.slice(0, 3).map((item, index) => (
+          {content.slice(0, 2).map((item, index) => (
             <div
               className={styles.flexItemContainer}
               key={`content-item-${index}`}
             >
               {item}
             </div>
           ))}
+          <div className={styles.flexItemContainer}>
+            <Select options={fileTypes} defaultValue={fileTypes[0]} onChange={(fileType: { value: string, label: string }) => setSelectedFileType(fileType.value)}/>
+          </div>
           <div className={styles.flexItemContainer}>
             <span
               style={{ cursor: 'pointer', textDecoration: 'underline' }}
-              onClick={downloadAction}
+              onClick={() => downloadAction(selectedFileType)}
             >
               Download
             </span>