app.py

import streamlit as st
import pandas as pd
from datasets import load_dataset
import pygwalker as pyg
import json
import os
from PIL import Image
import requests
from io import BytesIO
import time

# Page configuration
st.set_page_config(
    page_title="Ecuador Stock Exchange Dashboard",
    page_icon="📊",
    layout="wide"
)

# Custom CSS for centered title and banners
st.markdown("""
    <style>
    .main-title {
        text-align: center;
        margin-bottom: 20px;
    }
    .banner-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 100%;
        margin: 20px 0;
    }
    .banner-container a {
        width: 200px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .banner-container img {
        width: 200px;
        height: 60px;
        object-fit: contain;
        transition: transform 0.2s;
    }
    .banner-container img:hover {
        transform: scale(1.05);
    }
    .loading-container {
        background-color: #1E1E1E;
        color: #FFD700;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
        border-left: 5px solid #FFD700;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .loading-container strong {
        color: #FFD700;
    }
    .element-container p {
        text-align: justify;
    }
    </style>
""", unsafe_allow_html=True)

# Main title with custom CSS
st.markdown('<h1 class="main-title">Ecuador Stock Exchange Dashboard</h1>', unsafe_allow_html=True)

# Loading warning message
st.markdown("""
    <div class="loading-container">
        ⚠️ Loading Notice: The data is being fetched from Hugging Face's servers. This process may take a few moments depending on your internet connection and the size of the selected dataset. Please be patient while the data loads.
    </div>
""", unsafe_allow_html=True)

# Financial instruments configuration and their corresponding splits
INSTRUMENTS = {
    "Stocks": {"config": "default_stocks", "split": "stocks"},
    "Corporate Bonds": {"config": "default_corporate_bonds", "split": "corporate_bonds"},
    "Commercial Paper": {"config": "default_comercial_paper", "split": "comercial_paper"},
    "Securitizations": {"config": "default_securitizations", "split": "securitizations"},
    "Credit Notes": {"config": "default_credit_notes", "split": "credit_notes"},
    "Treasury Bills": {"config": "default_treasury_bills", "split": "treasury_bills"},
    "Government Bonds": {"config": "default_goverment_bonds", "split": "goverment_bonds"}
}

# Function to load data
def load_data(config_name, split_name):
    try:
        with st.spinner('Loading data from Hugging Face...'):
            dataset = load_dataset(
                "beta3/Historical_Data_of_Ecuador_Stock_Exchange",
                config_name,
                split=split_name,
                cache_dir="/app/.cache"
            )
            return pd.DataFrame(dataset)
    except Exception as e:
        st.error(f"Error loading data: {str(e)}")
        return None

# Instrument selector
selected_instrument = st.selectbox(
    "Select financial instrument:",
    list(INSTRUMENTS.keys())
)

# Load data for selected instrument
instrument_config = INSTRUMENTS[selected_instrument]
df = load_data(instrument_config["config"], instrument_config["split"])

if df is not None:
    df["FECHA NEGOCIACIÓN"] = pd.to_datetime(df["FECHA NEGOCIACIÓN"], format="%Y-%m-%d")

    # Cargar configuración guardada si existe
    config_path = f"configs/{instrument_config['config']}_config.json"
    if os.path.exists(config_path):
        with open(config_path, 'r') as f:
            config = json.load(f)
    else:
        config = None
    
    pyg_html = pyg.to_html(df, config=config, return_html=True)
    st.components.v1.html(pyg_html, height=960)

# Introduction
st.markdown("""
    <div style="text-align: justify;">
    This interactive dashboard provides comprehensive access to historical data from Ecuador's Stock Exchange, encompassing both the Guayaquil Stock Exchange (BVG) and Quito Stock Exchange (BVQ). The dataset represents a significant milestone in financial data accessibility, offering structured and clean information that was previously difficult to obtain in a ready-to-use format. This compilation of official BVG and national data serves as a valuable resource for researchers, analysts, and financial enthusiasts seeking to understand Ecuador's market dynamics.
    The data collection process is rigorous and systematic, beginning with direct sourcing from official BVG records. Each dataset undergoes thorough pre-processing to remove non-tabular elements, followed by standardization into CSV format. The validation process ensures data consistency across multiple dimensions, including row counts, column integrity, and handling of missing values. This meticulous approach guarantees the reliability and usability of the information for various analytical purposes.
    The dataset covers a wide range of financial instruments, from traditional stocks and corporate bonds to specialized securities like commercial paper and government bonds. Each instrument's data is regularly updated on a monthly basis, ensuring that users have access to the most current market information. This comprehensive coverage, combined with the interactive visualization capabilities of this dashboard, enables users to explore market trends, perform quantitative analysis, and develop predictive models for Ecuador's financial markets.
    </div>
""", unsafe_allow_html=True)

# Banner container with hyperlinks
st.markdown("""
    <div class="banner-container">
        <a href="https://www.kaggle.com/datasets/beta3logic/historical-data-of-ecuadors-stock-exchange" target="_blank">
            <img src="https://images.seeklogo.com/logo-png/33/2/kaggle-logo-png_seeklogo-335156.png" alt="Kaggle">
        </a>
        <a href="https://huggingface.co/datasets/beta3/Historical_Data_of_Ecuador_Stock_Exchange" target="_blank">
            <img src="https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/dark/huggingface-color.png" alt="Hugging Face">
        </a>
    </div>
""", unsafe_allow_html=True)