Creación de Dashboards Interactivos Usando Recharts y AWS Data Lakes

Los dashboards interactivos son esenciales para la toma de decisiones basadas en datos en tiempo real. En este artículo, vamos a combinar la potencia de AWS Lake Formation para el almacenamiento de datos con la flexibilidad de Recharts y D3.js para la visualización. Además, utilizaremos AWS API Gateway para acceder a los datos de manera segura y eficiente. ¿Por qué Recharts y AWS Data Lakes? AWS Lake Formation permite almacenar y catalogar datos estructurados y no estructurados de manera eficiente. AWS API Gateway proporciona una capa de acceso segura a los datos. Recharts y D3.js son bibliotecas de visualización ligeras y poderosas que se integran bien con React. Beneficios de esta arquitectura: Visualización en tiempo real de métricas clave. Conexión segura a los datos almacenados en AWS. Flexibilidad para crear gráficos personalizados y altamente interactivos. Arquitectura General AWS Lake Formation: Para almacenamiento y catalogación de datos. AWS API Gateway: Para exponer los datos a través de endpoints seguros. React con Recharts: Para la visualización dinámica. D3.js: Para gráficos personalizados y avanzados. Paso 1: Configuración del Data Lake en AWS Lake Formation Crear el Data Lake Accede a AWS Lake Formation desde la consola. Configura un repositorio de datos utilizando Amazon S3. Otorga permisos de acceso con IAM para los servicios de consulta (Athena o Glue). Ejemplo de Datos Financieros Guarda un archivo CSV en el bucket de S3 configurado: transactions.csv transaction_id,amount,date,type 1,1200.50,2025-03-01,ingreso 2,850.75,2025-03-02,gasto 3,600.00,2025-03-03,ingreso 4,900.25,2025-03-04,gasto Crear la Tabla en AWS Glue Usa AWS Glue para catalogar los datos: aws glue create-table \ --database data_lake_db \ --table-input '{ "Name": "financial_transactions", "StorageDescriptor": { "Columns": [ {"Name": "transaction_id", "Type": "int"}, {"Name": "amount", "Type": "double"}, {"Name": "date", "Type": "string"}, {"Name": "type", "Type": "string"} ], "Location": "s3://my-data-lake/transactions/" } }' Paso 2: Crear una API con AWS API Gateway Vamos a exponer los datos de Lake Formation a través de un endpoint REST. Crear la API aws apigateway create-rest-api \ --name "FinancialDashboardAPI" Crear el Recurso aws apigateway create-resource \ --rest-api-id {api_id} \ --parent-id {parent_id} \ --path-part transactions Crear el Método GET aws apigateway put-method \ --rest-api-id {api_id} \ --resource-id {resource_id} \ --http-method GET \ --authorization-type NONE Integración con Lambda Usa una función Lambda para consultar los datos en tiempo real: index.js const AWS = require('aws-sdk'); const glue = new AWS.Glue(); exports.handler = async (event) => { const query = `SELECT * FROM financial_transactions`; const params = { DatabaseName: 'data_lake_db', Sql: query }; try { const result = await glue.getQueryResults(params).promise(); return { statusCode: 200, body: JSON.stringify(result) }; } catch (error) { return { statusCode: 500, body: JSON.stringify({ message: 'Error al obtener datos' }) }; } }; Paso 3: Visualización con Recharts y D3.js Instalación de Dependencias npm install recharts d3 @apollo/client graphql Configuración del Cliente GraphQL import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: 'https://api.myapp.com/graphql', cache: new InMemoryCache() }); Crear el Dashboard con Recharts Dashboard.js import React, { useState, useEffect } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'; const Dashboard = () => { const [data, setData] = useState([]); useEffect(() => { fetch('https://api.myapp.com/transactions') .then(res => res.json()) .then(data => setData(data)); }, []); return ( Transacciones Financieras ); }; export default Dashboard; Buenas Prácticas de Seguridad Autenticación con AWS Cognito: Asegúrate de proteger los endpoints de la API. Filtrado de Datos: Aplica reglas para evitar la exposición de datos sensibles. Monitoreo con CloudWatch: Detecta anomalías en el consumo de datos. Conclusión Los dashboards interactivos utilizando Recharts y D3.js combinados con la potencia de AWS Lake Formation son una excelente manera de visualizar datos financieros en tiempo real. Al integrar AWS API Gateway y Lambda, logramos una arquitectura serverless esc

transaction_id,amount,date,type
1,1200.50,2025-03-01,ingreso
2,850.75,2025-03-02,gasto
3,600.00,2025-03-03,ingreso
4,900.25,2025-03-04,gasto

aws glue create-table \
  --database data_lake_db \
  --table-input '{
    "Name": "financial_transactions",
    "StorageDescriptor": {
      "Columns": [
        {"Name": "transaction_id", "Type": "int"},
        {"Name": "amount", "Type": "double"},
        {"Name": "date", "Type": "string"},
        {"Name": "type", "Type": "string"}
      ],
      "Location": "s3://my-data-lake/transactions/"
    }
  }'

aws apigateway create-rest-api \
  --name "FinancialDashboardAPI"

aws apigateway create-resource \
  --rest-api-id {api_id} \
  --parent-id {parent_id} \
  --path-part transactions

aws apigateway put-method \
  --rest-api-id {api_id} \
  --resource-id {resource_id} \
  --http-method GET \
  --authorization-type NONE

const AWS = require('aws-sdk');
const glue = new AWS.Glue();

exports.handler = async (event) => {
    const query = `SELECT * FROM financial_transactions`;
    const params = {
        DatabaseName: 'data_lake_db',
        Sql: query
    };
    try {
        const result = await glue.getQueryResults(params).promise();
        return {
            statusCode: 200,
            body: JSON.stringify(result)
        };
    } catch (error) {
        return {
            statusCode: 500,
            body: JSON.stringify({ message: 'Error al obtener datos' })
        };
    }
};

npm install recharts d3 @apollo/client graphql

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.myapp.com/graphql',
  cache: new InMemoryCache()
});

import React, { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const Dashboard = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.myapp.com/transactions')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h2>Transacciones Financieras</h2>
      <LineChart width={600} height={300} data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="amount" stroke="#8884d8" />
      </LineChart>
    </div>
  );
};

export default Dashboard;

Related Posts

Unlock the Power of Neural Networks – From Scratch!

Feb 16, 2025  0

Angular - Blocked request Vite issue

Feb 20, 2025  0

HMPL.js on DevHunt!

Mar 18, 2025  0