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

1. AWS Lake Formation: Para almacenamiento y catalogación de datos.
2. AWS API Gateway: Para exponer los datos a través de endpoints seguros.
3. React con Recharts: Para la visualización dinámica.
4. D3.js: Para gráficos personalizados y avanzados.

Paso 1: Configuración del Data Lake en AWS Lake Formation

Crear el Data Lake

1. Accede a AWS Lake Formation desde la consola.
2. Configura un repositorio de datos utilizando Amazon S3.
3. 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 (
    <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;

Buenas Prácticas de Seguridad

1. Autenticación con AWS Cognito: Asegúrate de proteger los endpoints de la API.
2. Filtrado de Datos: Aplica reglas para evitar la exposición de datos sensibles.
3. 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 escalable y segura.

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios!