Added basics of LCPLegend and more controls for blocks. Added boilerplate for lcp/line-graph

blocks/components/LCPDataUploader.js

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import Papa from 'papaparse';
+
+const LCPDataUploader = ({ onJsonDataUpdate }) => {
+    const [error, setError] = useState(null);
+    const [csvFile, setCsvFile] = useState(null);
+
+    const handleFileUpload = (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        setCsvFile(file);
+
+        // Clear any previous errors
+        setError(null);
+
+        // Log the file info for debugging
+        console.log('Selected file:', file);
+
+        // Parse the CSV using PapaParse
+        Papa.parse(file, {
+            complete: (result) => {
+                console.log('CSV parsing result:', result); // Log the result object
+                try {
+                    const jsonData = convertCsvToJson(result.data);
+                    console.log('Converted JSON:', jsonData); // Log the converted JSON data
+                    onJsonDataUpdate(jsonData); // Pass the parsed JSON data to the parent component
+                } catch (parseError) {
+                    console.error('Error during CSV conversion:', parseError);
+                    setError('Error during CSV conversion');
+                }
+            },
+            error: (error) => {
+                console.error('Error parsing CSV:', error);
+                setError('Error parsing CSV file');
+            },
+        });
+    };
+
+    // Helper function to convert CSV rows into JSON format
+    const convertCsvToJson = (csvData) => {
+        console.log('Converting CSV to JSON. Raw CSV data:', csvData);
+
+        // Get the headers from the first row of the CSV data
+        const headers = csvData[0];
+
+        // Define a new array to hold the processed JSON
+        const jsonData = [];
+
+        // Process the rows (skip the first row as it contains headers)
+        csvData.slice(1).forEach((row, index) => {
+            const obj = {};
+
+            // Map each column in the row to an object key based on the headers
+            headers.forEach((header, headerIndex) => {
+                obj[header] = row[headerIndex] || ''; // Set the value, default to an empty string if not available
+            });
+
+            // Add a unique ID to each row (optional, just to ensure uniqueness)
+            obj.ID = `lcpDatapoint-${index}`;
+
+            console.log('Processed row:', obj); // Log each row's conversion
+            jsonData.push(obj);
+        });
+
+        console.log('Final JSON Data:', jsonData);
+        return jsonData;
+    };
+
+    return (
+        <div>
+            <Button isPrimary onClick={() => document.getElementById('csv-upload-input').click()}>
+                {__('Upload CSV', 'lcp')}
+            </Button>
+
+            <input
+                type="file"
+                id="csv-upload-input"
+                style={{ display: 'none' }}
+                accept=".csv"
+                onChange={handleFileUpload}
+            />
+
+            {error && <p style={{ color: 'red' }}>{error}</p>}
+            {csvFile && <p>{__('File selected: ', 'lcp')}{csvFile.name}</p>}
+        </div>
+    );
+};
+
+export default LCPDataUploader;