78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
|
import { Box, CircularProgress, Alert, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button } from '@mui/material';
|
||
|
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||
|
|
import { useApiData } from '../../hooks/useApiData';
|
||
|
|
import type { CotizacionBolsa } from '../../models/mercadoModels';
|
||
|
|
import { formatCurrency, formatFullDateTime } from '../../utils/formatters';
|
||
|
|
import { copyToClipboard } from '../../utils/clipboardUtils';
|
||
|
|
|
||
|
|
// Función para convertir datos a formato CSV
|
||
|
|
const toCSV = (headers: string[], data: CotizacionBolsa[]) => {
|
||
|
|
const headerRow = headers.join(';');
|
||
|
|
const dataRows = data.map(row =>
|
||
|
|
[
|
||
|
|
row.ticker,
|
||
|
|
row.nombreEmpresa,
|
||
|
|
formatCurrency(row.precioActual),
|
||
|
|
formatCurrency(row.cierreAnterior),
|
||
|
|
`${row.porcentajeCambio.toFixed(2)}%`
|
||
|
|
].join(';')
|
||
|
|
);
|
||
|
|
return [headerRow, ...dataRows].join('\n');
|
||
|
|
};
|
||
|
|
|
||
|
|
export const RawBolsaLocalTable = () => {
|
||
|
|
const { data, loading, error } = useApiData<CotizacionBolsa[]>('/mercados/bolsa/local');
|
||
|
|
|
||
|
|
const handleCopy = () => {
|
||
|
|
if (!data) return;
|
||
|
|
const headers = ["Ticker", "Nombre", "Último Precio", "Cierre Anterior", "Variación %"];
|
||
|
|
const csvData = toCSV(headers, data);
|
||
|
|
|
||
|
|
copyToClipboard(csvData)
|
||
|
|
.then(() => {
|
||
|
|
alert('¡Tabla copiada al portapapeles!');
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
console.error('Error al copiar:', err);
|
||
|
|
alert('Error: No se pudo copiar la tabla.');
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
if (loading) return <CircularProgress />;
|
||
|
|
if (error) return <Alert severity="error">{error}</Alert>;
|
||
|
|
if (!data) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Button startIcon={<ContentCopyIcon />} onClick={handleCopy} sx={{ mb: 1 }}>
|
||
|
|
Copiar como CSV
|
||
|
|
</Button>
|
||
|
|
<TableContainer component={Paper}>
|
||
|
|
<Table size="small">
|
||
|
|
<TableHead>
|
||
|
|
<TableRow>
|
||
|
|
<TableCell>Ticker</TableCell>
|
||
|
|
<TableCell>Nombre</TableCell>
|
||
|
|
<TableCell align="right">Último Precio</TableCell>
|
||
|
|
<TableCell align="right">Cierre Anterior</TableCell>
|
||
|
|
<TableCell align="right">Variación %</TableCell>
|
||
|
|
<TableCell>Última Act.</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
</TableHead>
|
||
|
|
<TableBody>
|
||
|
|
{data.map(row => (
|
||
|
|
<TableRow key={row.id}>
|
||
|
|
<TableCell>{row.ticker}</TableCell>
|
||
|
|
<TableCell>{row.nombreEmpresa}</TableCell>
|
||
|
|
<TableCell align="right">${formatCurrency(row.precioActual)}</TableCell>
|
||
|
|
<TableCell align="right">${formatCurrency(row.cierreAnterior)}</TableCell>
|
||
|
|
<TableCell align="right">{row.porcentajeCambio.toFixed(2)}%</TableCell>
|
||
|
|
<TableCell>{formatFullDateTime(row.fechaRegistro)}</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</TableContainer>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|