73 lines
2.5 KiB
JavaScript
73 lines
2.5 KiB
JavaScript
// EconomicProjections (in EconomicProjections.js)
|
|
import React, { useEffect, useState } from 'react';
|
|
import * as XLSX from 'xlsx';
|
|
|
|
function EconomicProjections({ socCode }) {
|
|
const [projections, setProjections] = useState(null);
|
|
const [error, setError] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (socCode) {
|
|
const cleanedSocCode = socCode.split('.')[0]; // Clean the SOC code
|
|
console.log(`Fetching economic projections for cleaned SOC code: ${cleanedSocCode}`);
|
|
|
|
const fetchProjections = async () => {
|
|
try {
|
|
// Load the Excel file from public folder
|
|
const response = await fetch('/public/ltprojections.xlsx');
|
|
const arrayBuffer = await response.arrayBuffer();
|
|
const workbook = XLSX.read(arrayBuffer, { type: 'array' });
|
|
|
|
// Assuming data is in the first sheet
|
|
const sheetName = workbook.SheetNames[0];
|
|
const sheet = workbook.Sheets[sheetName];
|
|
const data = XLSX.utils.sheet_to_json(sheet);
|
|
|
|
// Find the projections matching the SOC code
|
|
const filteredProjections = data.find(
|
|
(row) => row['SOC Code'] === cleanedSocCode
|
|
);
|
|
|
|
if (filteredProjections) {
|
|
setProjections(filteredProjections);
|
|
} else {
|
|
throw new Error('No data found for the given SOC code.');
|
|
}
|
|
} catch (err) {
|
|
setError('Error loading economic projections.');
|
|
console.error('Projections Fetch Error:', err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchProjections();
|
|
}
|
|
}, [socCode]);
|
|
|
|
if (error) {
|
|
return <div className="error">{error}</div>;
|
|
}
|
|
|
|
if (loading) {
|
|
return <div className="loading-spinner">Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="economic-projections">
|
|
<h3>Economic Projections for {projections['Occupation Title'] || 'Unknown Occupation'}</h3>
|
|
<ul>
|
|
<li>2022 Employment: {projections['2022 Employment']}</li>
|
|
<li>2032 Employment: {projections['2032 Employment']}</li>
|
|
<li>Total Change: {projections['Total Change']}</li>
|
|
<li>Annual Openings: {projections['Annual Openings']}</li>
|
|
<li>Labor Force Exits: {projections['Labor Force Exits']}</li>
|
|
<li>Projected Growth: {projections['Projected Growth']}</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EconomicProjections;
|