Upload 9 files

Dockerfile

@@ -1,20 +1,20 @@
-FROM python:3.13.5-slim
-
-WORKDIR /app
-
-RUN apt-get update && apt-get install -y \
-    build-essential \
-    curl \
-    git \
-    && rm -rf /var/lib/apt/lists/*
-
-COPY requirements.txt ./
-COPY src/ ./src/
-
-RUN pip3 install -r requirements.txt
-
-EXPOSE 8501
-
-HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
-
-ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]
+FROM python:3.13.5-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt ./
+COPY src/ ./src/
+
+RUN pip3 install -r requirements.txt
+
+EXPOSE 8501
+
+HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
+
+ENTRYPOINT ["streamlit", "run", "src/app_streamlit.py", "--server.port=8501", "--server.address=0.0.0.0"]

README.md

@@ -1,20 +1,77 @@
----
-title: EVED Trajectory Viewer
-emoji: 🚀
-colorFrom: red
-colorTo: red
-sdk: docker
-app_port: 8501
-tags:
-- streamlit
-pinned: false
-short_description: Visualização dos dados do eVED
-license: mit
----
-
-# Welcome to Streamlit!
-
-Edit `/src/streamlit_app.py` to customize this app to your heart's desire. :heart:
-
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+# 🌟 eVED Trajectory Viewer
+
+## 📦 Instalação
+
+```bash
+# Navegar para o diretório
+cd data/eVED-animation
+
+# Instalar dependências
+pip install -r requirements.txt
+```
+
+## 🚀 Como Iniciar
+Você pode iniciar o app eVED de duas formas.
+
+### Opção 1: Scripts Automáticos
+
+**Windows:**
+```bash
+run_app.bat
+```
+
+**Linux/Mac:**
+```bash
+bash run_app.sh
+```
+
+### Opção 2: Comando Direto
+
+```bash
+streamlit run app_streamlit.py
+```
+
+A aplicação abrirá automaticamente no navegador em `http://localhost:8501`
+
+## 🎨 Cores e Legendas
+
+### Tipos de Veículos
+
+| Tipo | Nome | Cor | Hex |
+|------|------|-----|-----|
+| EV | Elétrico | 🟢 Verde | #00ff00 |
+| ICE | Combustão | 🔴 Vermelho | #ff0000 |
+| HEV | Híbrido | 🟠 Laranja | #ffaa00 |
+| PHEV | Plug-in Híbrido | 🔵 Azul | #0088ff |
+
+### Marcadores no Mapa
+
+- 🟢 **Verde**: Início do trajeto
+- 🔴 **Vermelho**: Fim do trajeto
+- **Linha colorida**: Trajeto completo (cor varia por tipo de veículo)
+
+## 🔧 Solução de Problemas
+
+### Aplicação não abre
+
+```bash
+# Verificar se Streamlit está instalado
+pip install streamlit
+
+# Verificar versão
+streamlit --version
+
+# Reinstalar se necessário
+pip install --upgrade streamlit
+```
+
+### Erro ao carregar dados
+
+1. Verifique se a pasta `../EVED_Clients` existe
+2. Verifique se há arquivos `.parquet` nos diretórios dos clientes
+3. Tente outro cliente/trip
+
+## 🆘 Suporte
+
+- 💻 Código: [app_streamlit.py](app_streamlit.py)
+- 🐛 Issues: Repositório do [FLEVEn](https://github.com/josewilsonsouza/fleven)

requirements.txt

@@ -1,3 +1,17 @@
-altair
-pandas
-streamlit
+# Dependências para a aplicação Streamlit de visualização eVED
+
+# Core
+streamlit>=1.28.0
+pandas>=2.0.0
+numpy>=1.24.0
+
+# Visualização
+plotly>=5.17.0
+folium>=0.14.0
+
+# Dados
+pyarrow>=12.0.0  # Para ler arquivos .parquet
+
+# Análises avançadas
+scikit-learn>=1.3.0
+statsmodels>=0.14.0  # Para trendlines (lowess) no Plotly

src/__init__.py

@@ -0,0 +1,20 @@
+"""
+Pacote de visualiza��o de trajetos do dataset eVED.
+
+Este pacote fornece ferramentas para visualizar anima��es interativas
+dos trajetos de ve�culos do dataset eVED usado no FLEVEn.
+
+Exemplo de uso:
+    >>> from data.eVED_animation import visualize_trip, EVEDVisualizer
+    >>> visualize_trip(client_id=0, trip_id=706.0)
+
+    >>> viz = EVEDVisualizer()
+    >>> clientes = viz.get_available_clients('train')
+    >>> trips = viz.get_available_trips(0, 'train')
+    >>> viz.create_animated_map(0, trip_id=trips[0])
+"""
+
+from .eved_vizu import EVEDVisualizer, visualize_trip
+
+__all__ = ['EVEDVisualizer', 'visualize_trip']
+__version__ = '1.5.0'

src/app_streamlit.py

@@ -0,0 +1,615 @@
+"""
+Aplicação Streamlit para visualização interativa de trajetos eVED.
+
+Execute com: streamlit run app_streamlit.py
+"""
+
+import streamlit as st
+import streamlit.components.v1 as components
+import pandas as pd
+import numpy as np
+import plotly.express as px
+from pathlib import Path
+import os
+
+# Configuração da página
+st.set_page_config(
+    page_title="eVED Trajectory Viewer",
+    page_icon="🚗",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Importar visualizador
+from eved_vizu import EVEDVisualizer
+
+# Funções auxiliares
+def get_energy_column(df, veh_type):
+    """
+    Determina a coluna de energia/consumo baseada no tipo de veículo.
+    EVs e PHEVs usam Energy_Consumption, ICE e HEV usam Fuel Rate.
+    """
+    if veh_type in ['EV', 'PHEV']:
+        candidates = ['Energy_Consumption', 'Energy Consumption', 'energy_consumption']
+    else:  # ICE, HEV
+        candidates = ['Fuel Rate[g/s]', 'Fuel Rate', 'fuel_rate', 'Energy_Consumption']
+
+    for col in candidates:
+        if col in df.columns:
+            return col
+    return None
+
+def get_numeric_columns(df):
+    """Retorna todas as colunas numéricas do DataFrame, exceto GPS e timestamp."""
+    exclude = ['Latitude[deg]', 'Longitude[deg]', 'Timestamp(ms)', 'Unnamed: 0']
+    numeric_cols = df.select_dtypes(include=[np.number]).columns.tolist()
+    return [col for col in numeric_cols if col not in exclude]
+
+def get_column_display_name(col):
+    """Retorna um nome mais amigável para a coluna."""
+    friendly_names = {
+        'Vehicle Speed[km/h]': 'Velocidade',
+        'Energy_Consumption': 'Consumo de Energia',
+        'Fuel Rate[g/s]': 'Taxa de Combustível',
+        'Gradient': 'Inclinação',
+        'OAT[DegC]': 'Temperatura Externa',
+        'Air Conditioning Power[Watts]': 'Potência do Ar Condicionado',
+        'Heater Power[Watts]': 'Potência do Aquecedor',
+        'Elevation Smoothed[m]': 'Elevação',
+        'Accel Pedal Rate[%/s]': 'Taxa do Acelerador',
+        'Brake Pedal Status': 'Status do Freio',
+    }
+    return friendly_names.get(col, col)
+
+# CSS customizado
+st.markdown("""
+<style>
+    .main-header {
+        font-size: 2.5rem;
+        font-weight: bold;
+        color: #1f77b4;
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+    .sub-header {
+        font-size: 1.2rem;
+        color: #666;
+        text-align: center;
+        margin-bottom: 2rem;
+    }
+    .metric-card {
+        background-color: #f0f2f6;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        border-left: 4px solid #1f77b4;
+    }
+    .vehicle-tag {
+        display: inline-block;
+        padding: 0.25rem 0.75rem;
+        border-radius: 1rem;
+        font-weight: bold;
+        font-size: 0.9rem;
+    }
+    .ev { background-color: #00ff00; color: black; }
+    .ice { background-color: #ff0000; color: white; }
+    .hev { background-color: #ffaa00; color: black; }
+    .phev { background-color: #0088ff; color: white; }
+</style>
+""", unsafe_allow_html=True)
+
+# Inicializar session state
+if 'viz' not in st.session_state:
+    st.session_state.viz = EVEDVisualizer()
+    st.session_state.current_map = None
+    st.session_state.current_data = None
+
+viz = st.session_state.viz
+
+# Header
+st.markdown('<div class="main-header">🚗 eVED Trajectory Viewer</div>', unsafe_allow_html=True)
+st.markdown('<div class="sub-header">Sistema Interativo de Visualização de Trajetos Veiculares</div>', unsafe_allow_html=True)
+
+# Sidebar - Seleção de dados
+st.sidebar.header("⚙️ Configurações")
+
+# Escolher split (train/test)
+split = st.sidebar.selectbox(
+    "📊 Conjunto de Dados",
+    options=['train', 'test'],
+    index=0,
+    help="Selecione o conjunto de dados para explorar"
+)
+
+# Filtro por tipo de veículo
+vehicle_filter = st.sidebar.selectbox(
+    "🚙 Filtrar por Tipo de Veículo",
+    options=['Todos', 'EV', 'ICE', 'HEV', 'PHEV'],
+    index=0
+)
+
+vehicle_type = None if vehicle_filter == 'Todos' else vehicle_filter
+
+# Obter clientes disponíveis
+try:
+    available_clients = viz.get_available_clients(split, vehicle_type)
+
+    if not available_clients:
+        st.error(f"❌ Nenhum cliente encontrado para o filtro selecionado!")
+        st.stop()
+
+    st.sidebar.success(f"✅ {len(available_clients)} clientes disponíveis")
+
+    # Selecionar cliente
+    client_id = st.sidebar.selectbox(
+        "🔢 Selecionar Cliente",
+        options=available_clients,
+        index=0,
+        help="Escolha um cliente para visualizar"
+    )
+
+    # Obter trips do cliente selecionado
+    available_trips = viz.get_available_trips(client_id, split)
+
+    if not available_trips:
+        st.error(f"❌ Cliente {client_id} não possui trips disponíveis!")
+        st.stop()
+
+    st.sidebar.info(f"📍 {len(available_trips)} trips disponíveis")
+
+    # Opção para visualizar todas as trips
+    view_mode = st.sidebar.radio(
+        "🎯 Modo de Visualização",
+        options=["Trip Individual", "Todas as Trips do Cliente"],
+        index=0,
+        help="Escolha entre visualizar uma trip ou todas as trips do cliente"
+    )
+
+    # Selecionar trip apenas se modo individual
+    if view_mode == "Trip Individual":
+        trip_id = st.sidebar.selectbox(
+            "🛣️ Selecionar Trip",
+            options=available_trips,
+            index=0,
+            help="Escolha uma viagem específica"
+        )
+    else:
+        trip_id = None  # Todas as trips
+        st.sidebar.info(f"🗺️ Visualizando todas as {len(available_trips)} trips")
+
+except Exception as e:
+    st.error(f"❌ Erro ao carregar dados: {e}")
+    st.stop()
+
+# Geração automática da animação (sem botão)
+st.sidebar.markdown("---")
+st.sidebar.success("✅ Animação será gerada automaticamente")
+generate_map = True  # Sempre gerar automaticamente
+
+# Opções avançadas
+with st.sidebar.expander("🔧 Opções Avançadas"):
+    show_statistics = st.checkbox("Mostrar Estatísticas Detalhadas", value=True)
+    show_plots = st.checkbox("Mostrar Gráficos Analíticos", value=True)
+    show_data_table = st.checkbox("Mostrar Tabela de Dados", value=False)
+
+st.sidebar.markdown("---")
+st.sidebar.markdown("### 📖 Sobre")
+st.sidebar.info("""
+**eVED Trajectory Viewer** permite explorar e visualizar trajetos de veículos do dataset eVED de forma interativa.
+
+**Tipos de Veículos:**
+- 🔋 **EV**: Elétrico
+- ⛽ **ICE**: Combustão
+- 🔋⛽ **HEV**: Híbrido
+- 🔌 **PHEV**: Plug-in Híbrido
+""")
+
+# Main content
+tab1, tab2, tab3, tab4 = st.tabs(["🗺️ Visualização", "📊 Análise de Dados", "📈 Estatísticas", "ℹ️ Informações"])
+
+with tab1:
+    # Título dinâmico baseado no modo
+    if trip_id is not None:
+        st.header(f"🗺️ Visualização do Trajeto - Cliente {client_id}, Trip {trip_id}")
+    else:
+        st.header(f"🗺️ Visualização de Todas as Trips - Cliente {client_id}")
+
+    # Carregar dados
+    try:
+        with st.spinner("Carregando dados do trajeto..."):
+            # Carregar uma trip específica ou todas
+            if trip_id is not None:
+                df = viz.load_client_data(client_id, split, trips=[trip_id])
+            else:
+                df = viz.load_client_data(client_id, split, trips=None)
+
+            df_clean = df.dropna(subset=['Latitude[deg]', 'Longitude[deg]']).copy()
+            df_clean = df_clean.sort_values('Timestamp(ms)').reset_index(drop=True)
+
+            st.session_state.current_data = df_clean
+
+            # Informações básicas
+            veh_type = viz.get_vehicle_type(df)
+            veh_name = viz.vehicle_types.get(veh_type, 'Desconhecido')
+
+            # Detectar coluna de energia/combustível
+            energy_col = get_energy_column(df, veh_type)
+
+            # Guardar no session state para uso em outras tabs
+            st.session_state.veh_type = veh_type
+            st.session_state.veh_name = veh_name
+            st.session_state.energy_col = energy_col
+
+            # Badges informativos
+            if trip_id is not None:
+                col1, col2, col3, col4 = st.columns(4)
+            else:
+                col1, col2, col3, col4, col5 = st.columns(5)
+                with col5:
+                    st.metric("🛣️ Trips Carregadas", f"{len(available_trips)}")
+
+            with col1:
+                st.metric("🚗 Tipo de Veículo", veh_name)
+            with col2:
+                st.metric("📍 Pontos GPS", f"{len(df_clean):,}")
+            with col3:
+                if 'Vehicle Speed[km/h]' in df.columns:
+                    avg_speed = df['Vehicle Speed[km/h]'].mean()
+                    st.metric("⚡ Velocidade Média", f"{avg_speed:.1f} km/h")
+                else:
+                    st.metric("⚡ Velocidade Média", "N/A")
+            with col4:
+                if energy_col and energy_col in df.columns:
+                    total_value = df[energy_col].sum()
+                    if veh_type in ['ICE', 'HEV']:
+                        st.metric("⛽ Combustível Total", f"{total_value:.2f} g")
+                    else:
+                        st.metric("🔋 Energia Total", f"{total_value:.2f}")
+                else:
+                    st.metric("🔋/⛽ Energia/Combust.", "N/A")
+
+            st.markdown("---")
+
+            # Mapa animado interativo
+            st.subheader("🗺️ Mapa Interativo do Trajeto")
+
+            if generate_map:
+                with st.spinner("Gerando mapa animado com Folium..."):
+                    # Nome do arquivo baseado no modo
+                    if trip_id is not None:
+                        output_file = f'trip_cliente_{client_id}_trip_{int(trip_id)}.html'
+                    else:
+                        output_file = f'trip_cliente_{client_id}_all_trips.html'
+
+                    viz.create_animated_map(
+                        client_id=client_id,
+                        split=split,
+                        trip_id=trip_id,
+                        output_file=output_file
+                    )
+                    st.session_state.current_map = output_file
+                    st.success(f"✅ Mapa animado gerado com sucesso!")
+
+            # Mostrar a animação se já foi gerada
+            if 'current_map' in st.session_state and st.session_state.current_map is not None:
+                output_file = st.session_state.current_map
+                if os.path.exists(output_file):
+                    # Ler o HTML gerado
+                    with open(output_file, 'r', encoding='utf-8') as f:
+                        html_content = f.read()
+
+                    # Exibir a animação diretamente no Streamlit
+                    st.info("🎮 Use os controles para animação. 📊 Gráficos sincronizados aparecem no lado direito.")
+                    components.html(html_content, height=800, scrolling=True)
+
+                    # Botão para download
+                    st.download_button(
+                        label="📥 Download Mapa HTML",
+                        data=html_content,
+                        file_name=output_file,
+                        mime='text/html',
+                        width="stretch"
+                    )
+                else:
+                    st.warning(f"⚠️ Arquivo {output_file} não encontrado. Gere novamente a visualização.")
+            else:
+                st.info("👆 Clique em '🎬 Gerar Visualização Interativa' na sidebar para criar a animação")
+
+    except Exception as e:
+        st.error(f"❌ Erro ao carregar dados: {e}")
+
+with tab2:
+    st.header("📊 Análise de Dados do Trajeto")
+
+    if st.session_state.current_data is not None:
+        df_clean = st.session_state.current_data
+
+        # Obter todas as colunas numéricas disponíveis
+        numeric_cols = get_numeric_columns(df_clean)
+
+        if not numeric_cols:
+            st.warning("Nenhuma variável numérica encontrada nos dados.")
+        else:
+            # Sidebar para seleção de variáveis
+            st.sidebar.markdown("---")
+            st.sidebar.markdown("### 📊 Seleção de Variáveis")
+
+            # Variáveis padrão
+            default_var1 = 'Vehicle Speed[km/h]' if 'Vehicle Speed[km/h]' in numeric_cols else numeric_cols[0]
+            energy_col = st.session_state.get('energy_col')
+            default_var2 = energy_col if energy_col and energy_col in numeric_cols else (numeric_cols[1] if len(numeric_cols) > 1 else numeric_cols[0])
+
+            var1 = st.sidebar.selectbox(
+                "Variável 1 (Principal)",
+                options=numeric_cols,
+                index=numeric_cols.index(default_var1) if default_var1 in numeric_cols else 0,
+                help="Variável para gráficos de linha, histograma e box plot"
+            )
+
+            var2 = st.sidebar.selectbox(
+                "Variável 2 (Secundária)",
+                options=numeric_cols,
+                index=numeric_cols.index(default_var2) if default_var2 in numeric_cols else (1 if len(numeric_cols) > 1 else 0),
+                help="Variável para gráfico de correlação com Variável 1"
+            )
+
+            # Mostrar todas as variáveis disponíveis
+            with st.sidebar.expander("📋 Todas as Variáveis"):
+                for col in numeric_cols:
+                    display_name = get_column_display_name(col)
+                    st.text(f"• {display_name}")
+                    st.caption(f"  {col}")
+
+            if show_plots:
+                # Gráfico de linha - Variável 1
+                st.subheader(f"📈 {get_column_display_name(var1)} ao Longo do Trajeto")
+
+                fig_line = px.line(
+                    df_clean.reset_index(),
+                    x='index',
+                    y=var1,
+                    labels={'index': 'Ponto do Trajeto', var1: get_column_display_name(var1)},
+                    title=f'Variação de {get_column_display_name(var1)}'
+                )
+                fig_line.update_traces(line_color='#1f77b4')
+                st.plotly_chart(fig_line, width="stretch")
+
+                # Histograma e Box Plot
+                col1, col2 = st.columns(2)
+
+                with col1:
+                    st.subheader(f"📊 Distribuição de {get_column_display_name(var1)}")
+                    fig_hist = px.histogram(
+                        df_clean,
+                        x=var1,
+                        nbins=50,
+                        labels={var1: get_column_display_name(var1)},
+                        title=f'Histograma de {get_column_display_name(var1)}'
+                    )
+                    st.plotly_chart(fig_hist, width="stretch")
+
+                with col2:
+                    st.subheader(f"📦 Box Plot de {get_column_display_name(var1)}")
+                    fig_box = px.box(
+                        df_clean,
+                        y=var1,
+                        labels={var1: get_column_display_name(var1)},
+                        title=f'Dispersão de {get_column_display_name(var1)}'
+                    )
+                    st.plotly_chart(fig_box, width="stretch")
+
+                # Gráfico de linha - Variável 2
+                st.subheader(f"📈 {get_column_display_name(var2)} ao Longo do Trajeto")
+
+                fig_line2 = px.line(
+                    df_clean.reset_index(),
+                    x='index',
+                    y=var2,
+                    labels={'index': 'Ponto do Trajeto', var2: get_column_display_name(var2)},
+                    title=f'Variação de {get_column_display_name(var2)}'
+                )
+                fig_line2.update_traces(line_color='#ff7f0e')
+                st.plotly_chart(fig_line2, width="stretch")
+
+                # Scatter: Correlação entre Var1 e Var2
+                st.subheader(f"🔗 Relação {get_column_display_name(var1)} × {get_column_display_name(var2)}")
+
+                try:
+                    fig_scatter = px.scatter(
+                        df_clean,
+                        x=var1,
+                        y=var2,
+                        labels={
+                            var1: get_column_display_name(var1),
+                            var2: get_column_display_name(var2)
+                        },
+                        title=f'{get_column_display_name(var1)} vs {get_column_display_name(var2)}',
+                        opacity=0.6,
+                        trendline="lowess"
+                    )
+                    st.plotly_chart(fig_scatter, width="stretch")
+                except Exception as e:
+                    # Se falhar com trendline, tenta sem
+                    fig_scatter = px.scatter(
+                        df_clean,
+                        x=var1,
+                        y=var2,
+                        labels={
+                            var1: get_column_display_name(var1),
+                            var2: get_column_display_name(var2)
+                        },
+                        title=f'{get_column_display_name(var1)} vs {get_column_display_name(var2)}',
+                        opacity=0.6
+                    )
+                    st.plotly_chart(fig_scatter, width="stretch")
+                    st.caption(f"⚠️ Trendline não disponível: {str(e)}")
+
+        # Tabela de dados
+        if show_data_table:
+            st.subheader("📋 Tabela de Dados Brutos")
+            st.dataframe(df_clean, width="stretch", height=400)
+
+            # Download CSV
+            csv = df_clean.to_csv(index=False).encode('utf-8')
+            st.download_button(
+                label="📥 Download CSV",
+                data=csv,
+                file_name=f'trip_cliente_{client_id}_trip_{int(trip_id)}.csv',
+                mime='text/csv',
+                width="stretch"
+            )
+    else:
+        st.info("Selecione um cliente e trip, depois clique em 'Carregar Dados' na tab de Visualização.")
+
+with tab3:
+    st.header("📈 Estatísticas Detalhadas")
+
+    if st.session_state.current_data is not None and show_statistics:
+        df_clean = st.session_state.current_data
+
+        col1, col2 = st.columns(2)
+
+        with col1:
+            st.subheader("🌍 Estatísticas de GPS")
+            stats_gps = {
+                "Total de Pontos": f"{len(df_clean):,}",
+                "Latitude Mínima": f"{df_clean['Latitude[deg]'].min():.6f}°",
+                "Latitude Máxima": f"{df_clean['Latitude[deg]'].max():.6f}°",
+                "Longitude Mínima": f"{df_clean['Longitude[deg]'].min():.6f}°",
+                "Longitude Máxima": f"{df_clean['Longitude[deg]'].max():.6f}°",
+            }
+            st.json(stats_gps)
+
+        with col2:
+            if 'Vehicle Speed[km/h]' in df_clean.columns:
+                st.subheader("⚡ Estatísticas de Velocidade")
+                stats_speed = {
+                    "Média": f"{df_clean['Vehicle Speed[km/h]'].mean():.2f} km/h",
+                    "Mediana": f"{df_clean['Vehicle Speed[km/h]'].median():.2f} km/h",
+                    "Desvio Padrão": f"{df_clean['Vehicle Speed[km/h]'].std():.2f} km/h",
+                    "Mínima": f"{df_clean['Vehicle Speed[km/h]'].min():.2f} km/h",
+                    "Máxima": f"{df_clean['Vehicle Speed[km/h]'].max():.2f} km/h",
+                    "Velocidade > 80 km/h": f"{(df_clean['Vehicle Speed[km/h]'] > 80).sum()} pontos"
+                }
+                st.json(stats_speed)
+
+        # Estatísticas de energia
+        if 'Energy_Consumption' in df_clean.columns:
+            st.subheader("🔋 Estatísticas de Energia")
+            col1, col2, col3, col4 = st.columns(4)
+
+            with col1:
+                st.metric("Consumo Total", f"{df_clean['Energy_Consumption'].sum():.4f}")
+            with col2:
+                st.metric("Consumo Médio", f"{df_clean['Energy_Consumption'].mean():.6f}")
+            with col3:
+                st.metric("Consumo Máximo", f"{df_clean['Energy_Consumption'].max():.6f}")
+            with col4:
+                st.metric("Consumo Mínimo", f"{df_clean['Energy_Consumption'].min():.6f}")
+
+        # Informações da trip
+        st.subheader("���️ Informações da Trip")
+        info = {
+            "Cliente ID": client_id,
+            "Trip ID": trip_id,
+            "Split": split,
+            "Tipo de Veículo": f"{veh_name} ({veh_type})",
+            "Total de Colunas": df_clean.shape[1],
+            "Memória Utilizada": f"{df_clean.memory_usage(deep=True).sum() / 1024:.2f} KB"
+        }
+        st.json(info)
+
+    else:
+        st.info("Ative 'Mostrar Estatísticas Detalhadas' na sidebar e carregue os dados.")
+
+with tab4:
+    st.header("ℹ️ Informações do Sistema")
+
+    st.markdown("""
+    ### 🚗 eVED Trajectory Viewer
+
+    Sistema interativo de visualização de trajetos veiculares do dataset eVED.
+
+    #### 📚 Funcionalidades:
+
+    - **Visualização Interativa**: Mapas interativos com Plotly
+    - **Animação Folium**: Gere mapas HTML com animação JavaScript
+    - **Análise de Dados**: Gráficos e estatísticas detalhadas
+    - **Filtros Avançados**: Filtre por tipo de veículo e conjunto de dados
+    - **Export de Dados**: Download de mapas HTML e dados em CSV
+
+    #### 🚙 Tipos de Veículos:
+
+    - 🔋 **EV** (Electric Vehicle): Veículos totalmente elétricos
+    - ⛽ **ICE** (Internal Combustion Engine): Veículos a combustão
+    - 🔋⛽ **HEV** (Hybrid Electric Vehicle): Veículos híbridos
+    - 🔌 **PHEV** (Plug-in Hybrid Electric Vehicle): Híbridos plug-in
+
+    #### 📊 Datasets:
+
+    - **Train**: Conjunto de treinamento para modelos FL
+    - **Test**: Conjunto de teste para validação
+
+    #### 🛠️ Tecnologias:
+
+    - Streamlit
+    - Plotly
+    - Folium
+    - Pandas
+    - Python 3.11+
+    """)
+
+    # Estatísticas gerais
+    st.subheader("📊 Estatísticas Gerais do Dataset")
+
+    try:
+        total_train = len(viz.get_available_clients('train'))
+        total_test = len(viz.get_available_clients('test'))
+
+        col1, col2, col3 = st.columns(3)
+        with col1:
+            st.metric("Clientes (Train)", total_train)
+        with col2:
+            st.metric("Clientes (Test)", total_test)
+        with col3:
+            st.metric("Total de Clientes", total_train + total_test)
+
+        # Por tipo de veículo
+        st.subheader("🚙 Distribuição por Tipo de Veículo (Train)")
+
+        vehicle_counts = {}
+        for vtype in ['EV', 'ICE', 'HEV', 'PHEV']:
+            count = len(viz.get_available_clients('train', vehicle_type=vtype))
+            vehicle_counts[vtype] = count
+
+        df_vehicles = pd.DataFrame.from_dict(
+            vehicle_counts,
+            orient='index',
+            columns=['Quantidade']
+        ).reset_index()
+        df_vehicles.columns = ['Tipo', 'Quantidade']
+
+        fig_pie = px.pie(
+            df_vehicles,
+            values='Quantidade',
+            names='Tipo',
+            title='Distribuição de Tipos de Veículos',
+            color='Tipo',
+            color_discrete_map={
+                'EV': '#00ff00',
+                'ICE': '#ff0000',
+                'HEV': '#ffaa00',
+                'PHEV': '#0088ff'
+            }
+        )
+        st.plotly_chart(fig_pie, width="stretch")
+
+    except Exception as e:
+        st.error(f"Erro ao carregar estatísticas: {e}")
+
+# Footer
+st.markdown("---")
+st.markdown("""
+<div style="text-align: center; color: #666;">
+    <p>FLEVEn</p>
+</div>
+""", unsafe_allow_html=True)

src/eved_vizu.py

@@ -0,0 +1,637 @@
+import os
+import json
+import folium
+import numpy as np
+import pandas as pd
+from folium import plugins
+
+class EVEDVisualizer:
+    """Sistema de visualização de trajetos do dataset eVED no contexto Fleven"""
+
+    def __init__(self, base_path=None):
+        # Se base_path não for fornecido, usa caminho relativo da subpasta
+        if base_path is None:
+            # Estamos em data/eVED-animation, então EVED_Clients está em ../EVED_Clients
+            script_dir = os.path.dirname(os.path.abspath(__file__))
+            base_path = os.path.join(script_dir, "..", "EVED_Clients")
+
+        self.base_path = os.path.abspath(base_path)
+        self.train_path = os.path.join(self.base_path, "train")
+        self.test_path = os.path.join(self.base_path, "test")
+
+        # Verifica se o caminho base existe
+        if not os.path.exists(self.base_path):
+            print(f"⚠️  Aviso: Caminho base não encontrado: {self.base_path}")
+            print(f"   Certifique-se de que EVED_Clients existe em {os.path.dirname(self.base_path)}")
+
+        # Mapeamento de tipos de veículos
+        self.vehicle_types = {
+            'EV': 'Elétrico',
+            'ICE': 'Combustão',
+            'HEV': 'Híbrido',
+            'PHEV': 'Plug-in Híbrido'
+        }
+        
+        # Cores por tipo de veículo
+        self.colors = {
+            'EV': '#00ff00',
+            'ICE': '#ff0000',
+            'HEV': '#ffaa00',
+            'PHEV': '#0088ff'
+        }
+    
+    def load_client_data(self, client_id, split='train', trips=None):
+        """Carrega dados de um cliente específico"""
+        path = self.train_path if split == 'train' else self.test_path
+        client_path = os.path.join(path, f"client_{client_id}")
+        
+        if not os.path.exists(client_path):
+            raise ValueError(f"Cliente {client_id} não encontrado em {split}")
+        
+        trip_files = [f for f in os.listdir(client_path) 
+                      if f.startswith('trip_') and f.endswith('.parquet')]
+        
+        if trips is not None:
+            trip_files = [f for f in trip_files 
+                         if any(f == f"trip_{t}.parquet" for t in trips)]
+        
+        dfs = []
+        for trip_file in trip_files:
+            try:
+                df = pd.read_parquet(os.path.join(client_path, trip_file))
+                dfs.append(df)
+            except Exception as e:
+                print(f"Aviso: Falha ao ler {trip_file}: {e}")
+                continue
+        
+        if not dfs:
+            raise ValueError(f"Nenhuma viagem válida encontrada para cliente {client_id}")
+        
+        return pd.concat(dfs, ignore_index=True)
+    
+    def get_vehicle_type(self, df):
+        """Determina o tipo de veículo baseado nas colunas corretas"""
+        if 'EngineType' in df.columns:
+            veh_type = df['EngineType'].iloc[0]
+            if pd.notna(veh_type) and veh_type in ('EV', 'PHEV'):
+                return veh_type
+        
+        if 'Vehicle Type' in df.columns:
+            veh_type = df['Vehicle Type'].iloc[0]
+            if pd.notna(veh_type) and veh_type in ('ICE', 'HEV'):
+                return veh_type
+        
+        return 'Unknown'
+    
+    def get_available_clients(self, split='train', vehicle_type=None):
+        """Lista clientes disponíveis, opcionalmente filtrados por tipo"""
+        path = self.train_path if split == 'train' else self.test_path
+        
+        if not os.path.exists(path):
+            return []
+        
+        clients = []
+        for client_dir in os.listdir(path):
+            if not client_dir.startswith('client_'):
+                continue
+            
+            try:
+                client_id = int(client_dir.split('_')[1])
+                
+                if not vehicle_type:
+                    clients.append(client_id)
+                    continue
+                
+                metadata_path = os.path.join(path, client_dir, 'metadata.json')
+                
+                if os.path.exists(metadata_path):
+                    with open(metadata_path, 'r') as f:
+                        metadata = json.load(f)
+                    
+                    if metadata.get('VehicleType') == vehicle_type:
+                        clients.append(client_id)
+                else:
+                    df = self.load_client_data(client_id, split)
+                    if self.get_vehicle_type(df) == vehicle_type:
+                        clients.append(client_id)
+                    
+            except Exception as e:
+                continue
+        
+        return sorted(clients)
+    
+    def get_available_trips(self, client_id, split='train'):
+        """Lista os IDs das viagens disponíveis para um cliente"""
+        path = self.train_path if split == 'train' else self.test_path
+        client_path = os.path.join(path, f"client_{client_id}")
+        
+        if not os.path.exists(client_path):
+            return []
+        
+        trips = []
+        for f in os.listdir(client_path):
+            if f.startswith('trip_') and f.endswith('.parquet'):
+                try:
+                    trip_str = f.replace('trip_', '').replace('.parquet', '')
+                    trip_id = float(trip_str)
+                    trips.append(trip_id)
+                except:
+                    continue
+        
+        return sorted(trips)
+    
+    def create_animated_map(self, client_id, split='train', trip_id=None,
+                          output_file='trajectory_animation.html'):
+        """
+        Cria mapa HTML interativo com animação do trajeto usando JavaScript puro.
+        Se trip_id=None, visualiza todas as trips do cliente com cores diferentes.
+        """
+
+        print(f"Carregando dados do cliente {client_id}...")
+
+        trips_to_load = [trip_id] if trip_id is not None else None
+        df = self.load_client_data(client_id, split, trips_to_load)
+
+        df_clean = df.dropna(subset=['Latitude[deg]', 'Longitude[deg]']).copy()
+
+        if df_clean.empty:
+            raise ValueError("Nenhum dado válido de GPS encontrado")
+
+        df_clean = df_clean.sort_values('Timestamp(ms)').reset_index(drop=True)
+
+        # Detectar se temos múltiplas trips (procurar por Trip_ID, TripID ou similar)
+        trip_col = None
+        for col in ['Trip_ID', 'TripID', 'trip_id', 'Trip ID']:
+            if col in df_clean.columns:
+                trip_col = col
+                break
+
+        is_multi_trip = trip_id is None and trip_col is not None
+        if is_multi_trip:
+            unique_trips = df_clean[trip_col].nunique()
+            print(f"Múltiplas trips detectadas: {unique_trips} trips")
+        
+        veh_type = self.get_vehicle_type(df)
+        color = self.colors.get(veh_type, '#888888')
+        veh_name = self.vehicle_types.get(veh_type, 'Desconhecido')
+        
+        print(f"Tipo de veículo: {veh_name}")
+        print(f"Total de pontos: {len(df_clean)}")
+        
+        # Reduzir pontos para performance
+        step = max(1, len(df_clean) // 300)
+        df_animation = df_clean.iloc[::step].reset_index(drop=True)
+        
+        center_lat = df_animation['Latitude[deg]'].mean()
+        center_lon = df_animation['Longitude[deg]'].mean()
+        
+        # Criar mapa base
+        m = folium.Map(
+            location=[center_lat, center_lon], 
+            zoom_start=13,
+            tiles='OpenStreetMap'
+        )
+        
+        # Trajeto completo (cinza claro)
+        coordinates = df_animation[['Latitude[deg]', 'Longitude[deg]']].values.tolist()
+        
+        folium.PolyLine(
+            coordinates,
+            color='#cccccc',
+            weight=5,
+            opacity=0.5,
+            popup=f"Trajeto completo - {veh_name}"
+        ).add_to(m)
+        
+        # Marcadores de início e fim
+        folium.CircleMarker(
+            coordinates[0],
+            radius=10,
+            popup=f"<b>INÍCIO</b><br>{veh_name}",
+            color='green',
+            fill=True,
+            fillColor='green',
+            fillOpacity=0.8
+        ).add_to(m)
+        
+        folium.CircleMarker(
+            coordinates[-1],
+            radius=10,
+            popup=f"<b>FIM</b><br>{veh_name}",
+            color='red',
+            fill=True,
+            fillColor='red',
+            fillOpacity=0.8
+        ).add_to(m)
+        
+        # Preparar dados para JavaScript
+        coords_js = [[lat, lon] for lat, lon in coordinates]
+
+        # Preparar dados das variáveis para os gráficos
+        variables_data = {}
+
+        # Velocidade
+        if 'Vehicle Speed[km/h]' in df_animation.columns:
+            variables_data['speed'] = df_animation['Vehicle Speed[km/h]'].fillna(0).tolist()
+
+        # Energia/Combustível
+        energy_col = None
+        if veh_type in ['EV', 'PHEV']:
+            for col in ['Energy_Consumption', 'Energy Consumption', 'energy_consumption']:
+                if col in df_animation.columns:
+                    energy_col = col
+                    break
+        else:  # ICE, HEV
+            for col in ['Fuel Rate[g/s]', 'Fuel Rate', 'fuel_rate']:
+                if col in df_animation.columns:
+                    energy_col = col
+                    break
+
+        if energy_col:
+            variables_data['energy'] = df_animation[energy_col].fillna(0).tolist()
+            variables_data['energy_label'] = 'Consumo de Energia' if veh_type in ['EV', 'PHEV'] else 'Taxa de Combustível'
+
+        # Elevação
+        if 'Elevation Smoothed[m]' in df_animation.columns:
+            variables_data['elevation'] = df_animation['Elevation Smoothed[m]'].fillna(0).tolist()
+
+        # Adicionar JavaScript customizado para animação com gráficos
+        animation_js = f"""
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
+        <script>
+        (function() {{
+            // Esperar o mapa carregar completamente
+            var checkMap = setInterval(function() {{
+                if (typeof {m.get_name()} !== 'undefined') {{
+                    clearInterval(checkMap);
+                    initAnimation();
+                }}
+            }}, 100);
+
+            function initAnimation() {{
+                var coords = {json.dumps(coords_js)};
+                var variablesData = {json.dumps(variables_data)};
+                var currentIndex = 0;
+                var isPlaying = false;
+                var animationSpeed = 50;
+                var intervalId = null;
+
+                var pathColor = '{color}';
+                var markerColor = '#ffffff';
+
+                // Função para inicializar gráficos
+                function initCharts(data) {{
+                    var chartsObj = {{}};
+
+                    // Gráfico de Velocidade
+                    if (data.speed) {{
+                        var speedCtx = document.getElementById('speedChart').getContext('2d');
+                        chartsObj.speed = new Chart(speedCtx, {{
+                            type: 'line',
+                            data: {{
+                                labels: Array.from({{length: data.speed.length}}, (_, i) => i),
+                                datasets: [{{
+                                    label: 'Velocidade (km/h)',
+                                    data: data.speed,
+                                    borderColor: '#3498db',
+                                    backgroundColor: 'rgba(52, 152, 219, 0.1)',
+                                    borderWidth: 2,
+                                    tension: 0.4,
+                                    pointRadius: 0
+                                }}]
+                            }},
+                            options: {{
+                                responsive: false,
+                                maintainAspectRatio: false,
+                                animation: false,
+                                plugins: {{
+                                    legend: {{display: false}}
+                                }},
+                                scales: {{
+                                    x: {{display: false}},
+                                    y: {{
+                                        beginAtZero: true,
+                                        ticks: {{color: '#666', font: {{size: 10}}}}
+                                    }}
+                                }}
+                            }}
+                        }});
+                    }}
+
+                    // Gráfico de Energia/Combustível
+                    if (data.energy) {{
+                        var energyCtx = document.getElementById('energyChart').getContext('2d');
+                        chartsObj.energy = new Chart(energyCtx, {{
+                            type: 'line',
+                            data: {{
+                                labels: Array.from({{length: data.energy.length}}, (_, i) => i),
+                                datasets: [{{
+                                    label: data.energy_label || 'Energia',
+                                    data: data.energy,
+                                    borderColor: '#e74c3c',
+                                    backgroundColor: 'rgba(231, 76, 60, 0.1)',
+                                    borderWidth: 2,
+                                    tension: 0.4,
+                                    pointRadius: 0
+                                }}]
+                            }},
+                            options: {{
+                                responsive: false,
+                                maintainAspectRatio: false,
+                                animation: false,
+                                plugins: {{
+                                    legend: {{display: false}}
+                                }},
+                                scales: {{
+                                    x: {{display: false}},
+                                    y: {{
+                                        beginAtZero: true,
+                                        ticks: {{color: '#666', font: {{size: 10}}}}
+                                    }}
+                                }}
+                            }}
+                        }});
+                    }}
+
+                    // Gráfico de Elevação
+                    if (data.elevation) {{
+                        var elevCtx = document.getElementById('elevationChart').getContext('2d');
+                        chartsObj.elevation = new Chart(elevCtx, {{
+                            type: 'line',
+                            data: {{
+                                labels: Array.from({{length: data.elevation.length}}, (_, i) => i),
+                                datasets: [{{
+                                    label: 'Elevação (m)',
+                                    data: data.elevation,
+                                    borderColor: '#2ecc71',
+                                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
+                                    borderWidth: 2,
+                                    tension: 0.4,
+                                    pointRadius: 0,
+                                    fill: true
+                                }}]
+                            }},
+                            options: {{
+                                responsive: false,
+                                maintainAspectRatio: false,
+                                animation: false,
+                                plugins: {{
+                                    legend: {{display: false}}
+                                }},
+                                scales: {{
+                                    x: {{display: false}},
+                                    y: {{
+                                        ticks: {{color: '#666', font: {{size: 10}}}}
+                                    }}
+                                }}
+                            }}
+                        }});
+                    }}
+
+                    return chartsObj;
+                }}
+
+                // Inicializar gráficos
+                var charts = initCharts(variablesData);
+
+                // Camada para o trajeto percorrido
+                var traveledPath = L.polyline([], {{
+                    color: pathColor,
+                    weight: 5,
+                    opacity: 0.9
+                }}).addTo({m.get_name()});
+
+                // Marcador do carro
+                var carMarker = L.circleMarker(coords[0], {{
+                    radius: 8,
+                    color: pathColor,
+                    weight: 3,
+                    fillColor: markerColor,
+                    fillOpacity: 1
+                }}).addTo({m.get_name()});
+
+                // Atualizar indicador de posição nos gráficos
+                function updateChartIndicators(index) {{
+                    Object.keys(charts).forEach(function(key) {{
+                        var chart = charts[key];
+                        // Criar/atualizar linha vertical no gráfico
+                        if (chart.options.plugins.annotation) {{
+                            chart.options.plugins.annotation.annotations.line1.xMin = index;
+                            chart.options.plugins.annotation.annotations.line1.xMax = index;
+                        }} else {{
+                            // Atualizar viewport do gráfico
+                            var maxVisible = 50; // Mostrar últimos 50 pontos
+                            var minX = Math.max(0, index - maxVisible);
+                            chart.options.scales.x.min = minX;
+                            chart.options.scales.x.max = Math.max(maxVisible, index + 10);
+                        }}
+                        chart.update('none');
+                    }});
+
+                    // Atualizar valores numéricos
+                    if (variablesData.speed) {{
+                        document.getElementById('speedValue').textContent =
+                            variablesData.speed[index].toFixed(1) + ' km/h';
+                    }}
+                    if (variablesData.energy) {{
+                        document.getElementById('energyValue').textContent =
+                            variablesData.energy[index].toFixed(2);
+                    }}
+                    if (variablesData.elevation) {{
+                        document.getElementById('elevationValue').textContent =
+                            variablesData.elevation[index].toFixed(1) + ' m';
+                    }}
+                }}
+
+                window.updateAnimation = function() {{
+                    // Só atualiza se estiver realmente tocando
+                    if (!isPlaying) return;
+
+                    if (currentIndex < coords.length) {{
+                        carMarker.setLatLng(coords[currentIndex]);
+                        var traveled = coords.slice(0, currentIndex + 1);
+                        traveledPath.setLatLngs(traveled);
+
+                        document.getElementById('timeSlider').value = currentIndex;
+                        document.getElementById('timeDisplay').textContent =
+                            'Ponto: ' + (currentIndex + 1) + ' / ' + coords.length;
+
+                        // Atualizar gráficos
+                        updateChartIndicators(currentIndex);
+
+                        currentIndex++;
+                    }} else {{
+                        currentIndex = 0;
+                    }}
+                }};
+                
+                window.playAnimation = function() {{
+                    if (!isPlaying) {{
+                        isPlaying = true;
+                        document.getElementById('playBtn').innerHTML = '⏸ Pausar';
+                        intervalId = setInterval(window.updateAnimation, animationSpeed);
+                    }}
+                }};
+                
+                window.pauseAnimation = function() {{
+                    isPlaying = false;
+                    document.getElementById('playBtn').innerHTML = '▶ Play';
+                    if (intervalId) {{
+                        clearInterval(intervalId);
+                        intervalId = null;
+                    }}
+                }};
+                
+                window.togglePlay = function() {{
+                    if (isPlaying) {{
+                        window.pauseAnimation();
+                    }} else {{
+                        window.playAnimation();
+                    }}
+                }};
+                
+                window.resetAnimation = function() {{
+                    window.pauseAnimation();
+                    currentIndex = 0;
+                    carMarker.setLatLng(coords[0]);
+                    traveledPath.setLatLngs([coords[0]]);
+                    document.getElementById('timeSlider').value = 0;
+                    document.getElementById('timeDisplay').textContent = 'Ponto: 1 / ' + coords.length;
+                }};
+                
+                window.changeSpeed = function(value) {{
+                    animationSpeed = 200 - value;
+                    document.getElementById('speedDisplay').textContent = 'Velocidade: ' + value + '%';
+                    
+                    if (isPlaying) {{
+                        clearInterval(intervalId);
+                        intervalId = setInterval(window.updateAnimation, animationSpeed);
+                    }}
+                }};
+                
+                window.seekTo = function(index) {{
+                    currentIndex = parseInt(index);
+                    carMarker.setLatLng(coords[currentIndex]);
+                    var traveled = coords.slice(0, currentIndex + 1);
+                    traveledPath.setLatLngs(traveled);
+                    document.getElementById('timeDisplay').textContent =
+                        'Ponto: ' + (currentIndex + 1) + ' / ' + coords.length;
+
+                    // Atualizar gráficos ao usar o slider
+                    updateChartIndicators(currentIndex);
+                }};
+                
+                // Auto-play
+                setTimeout(window.playAnimation, 1000);
+            }}
+        }})();
+        </script>
+
+        <!-- Painéis de Gráficos Laterais -->
+        <div style="position: fixed; right: 15px; top: 15px; width: 400px; z-index: 1000; max-height: 90vh; overflow-y: auto;">
+            {'<div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); margin-bottom: 15px; border-left: 5px solid #3498db;"><h4 style="margin: 0 0 10px 0; font-size: 16px; color: #3498db; font-weight: bold;">⚡ Velocidade</h4><div id="speedValue" style="font-size: 32px; font-weight: bold; color: #3498db; margin-bottom: 15px; text-align: center;">0 km/h</div><canvas id="speedChart" width="360" height="120"></canvas></div>' if 'speed' in variables_data else ''}
+            {'<div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); margin-bottom: 15px; border-left: 5px solid #e74c3c;"><h4 style="margin: 0 0 10px 0; font-size: 16px; color: #e74c3c; font-weight: bold;">' + ('🔋 ' if veh_type in ['EV', 'PHEV'] else '⛽ ') + variables_data.get('energy_label', 'Energia') + '</h4><div id="energyValue" style="font-size: 32px; font-weight: bold; color: #e74c3c; margin-bottom: 15px; text-align: center;">0</div><canvas id="energyChart" width="360" height="120"></canvas></div>' if 'energy' in variables_data else ''}
+            {'<div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); border-left: 5px solid #2ecc71;"><h4 style="margin: 0 0 10px 0; font-size: 16px; color: #2ecc71; font-weight: bold;">⛰️ Elevação</h4><div id="elevationValue" style="font-size: 32px; font-weight: bold; color: #2ecc71; margin-bottom: 15px; text-align: center;">0 m</div><canvas id="elevationChart" width="360" height="120"></canvas></div>' if 'elevation' in variables_data else ''}
+        </div>
+
+        <!-- Controles de Animação -->
+        <div style="position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+                    background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+                    z-index: 1000; min-width: 400px;">
+            <div style="text-align: center; margin-bottom: 10px;">
+                <h4 style="margin: 0 0 10px 0;">🚗 {veh_name} - Cliente {client_id}{'<br><small style="color: #888;">Todas as Trips</small>' if trip_id is None else ''}</h4>
+                <div id="timeDisplay" style="font-size: 14px; color: #666;">Ponto: 1 / {len(coords_js)}</div>
+            </div>
+
+            <div style="display: flex; gap: 10px; margin-bottom: 10px; justify-content: center;">
+                <button id="playBtn" onclick="togglePlay()"
+                        style="padding: 10px 20px; font-size: 16px; cursor: pointer; border: none;
+                               background: {color}; color: white; border-radius: 5px;">
+                    ▶ Play
+                </button>
+                <button onclick="resetAnimation()"
+                        style="padding: 10px 20px; font-size: 16px; cursor: pointer; border: none;
+                               background: #666; color: white; border-radius: 5px;">
+                    🔄 Reiniciar
+                </button>
+            </div>
+
+            <div style="margin-bottom: 10px;">
+                <input type="range" id="timeSlider" min="0" max="{len(coords_js) - 1}" value="0"
+                       oninput="seekTo(this.value)"
+                       style="width: 100%;">
+            </div>
+
+            <div>
+                <div id="speedDisplay" style="font-size: 12px; color: #666; margin-bottom: 5px;">
+                    Velocidade: 100%
+                </div>
+                <input type="range" id="speedSlider" min="10" max="190" value="100"
+                       oninput="changeSpeed(this.value)"
+                       style="width: 100%;">
+            </div>
+        </div>
+        """
+        
+        # Adicionar o JavaScript ao mapa
+        m.get_root().html.add_child(folium.Element(animation_js))
+        
+        # Salvar mapa
+        m.save(output_file)
+        print(f"\n✅ Mapa animado salvo em: {output_file}")
+        print(f"📍 Trip ID: {trip_id if trip_id else 'todas as trips'}")
+        print(f"🎯 Total de pontos: {len(coords_js)}")
+        print(f"\n🌐 Abra o arquivo no navegador - A animação inicia automaticamente!")
+        
+        return m
+
+
+# Função auxiliar para uso rápido
+def visualize_trip(client_id=0, split='train', trip_id=None):
+    """Função rápida para visualizar uma trip"""
+    viz = EVEDVisualizer()
+    
+    if trip_id is None:
+        available_trips = viz.get_available_trips(client_id, split)
+        if available_trips:
+            trip_id = available_trips[0]
+            print(f"ℹ️  Usando trip {trip_id} (primeira disponível)")
+        else:
+            raise ValueError(f"Nenhuma trip encontrada para cliente {client_id}")
+    
+    trip_id = float(trip_id)
+    output_name = f'trip_client_{client_id}_trip_{int(trip_id)}.html'
+    
+    return viz.create_animated_map(
+        client_id=client_id,
+        split=split,
+        trip_id=trip_id,
+        output_file=output_name
+    )
+
+
+# Exemplo de uso
+if __name__ == "__main__":
+    print("=" * 60)
+    print("Sistema de Visualização eVED - Animação JavaScript")
+    print("=" * 60)
+    
+    viz = EVEDVisualizer()
+    
+    all_clients = viz.get_available_clients('train')
+    print(f"\n📋 Total de clientes: {len(all_clients)}")
+    print(f"Primeiros 5: {all_clients[:5]}")
+    
+    if all_clients:
+        client_to_viz = all_clients[0]
+        trips = viz.get_available_trips(client_to_viz, 'train')
+        print(f"\n🚗 Cliente {client_to_viz}")
+        print(f"Trips: {trips[:10]}")
+        
+        if trips:
+            print(f"\n🎬 Criando animação...")
+            visualize_trip(client_id=client_to_viz, trip_id=trips[0])
+    
+    print("\n" + "=" * 60)
+    print("✅ Pronto! Use: visualize_trip(client_id=0, trip_id=706.0)")
+    print("=" * 60)

src/test_charts.py

@@ -0,0 +1,48 @@
+"""
+Script de teste para verificar a geração de animação com gráficos sincronizados
+"""
+
+from eved_vizu import EVEDVisualizer
+
+# Criar visualizador
+viz = EVEDVisualizer()
+
+# Tentar gerar uma animação com o primeiro cliente disponível
+try:
+    print("🔍 Buscando clientes disponíveis...")
+    clients = viz.get_available_clients('train')
+
+    if clients:
+        client_id = clients[0]
+        print(f"✅ Cliente {client_id} encontrado")
+
+        print("🔍 Buscando trips disponíveis...")
+        trips = viz.get_available_trips(client_id, 'train')
+
+        if trips:
+            trip_id = trips[0]
+            print(f"✅ Trip {trip_id} encontrada")
+
+            print("🎬 Gerando animação com gráficos...")
+            viz.create_animated_map(
+                client_id=client_id,
+                split='train',
+                trip_id=trip_id,
+                output_file='test_animation_with_charts.html'
+            )
+
+            print("\n✅ Sucesso! Abra test_animation_with_charts.html no navegador")
+            print("📊 Você deverá ver:")
+            print("   - Mapa animado no centro")
+            print("   - Painéis de gráficos no lado direito")
+            print("   - Controles de animação na parte inferior")
+            print("   - Gráficos sincronizados com a posição do veículo")
+        else:
+            print("❌ Nenhuma trip encontrada")
+    else:
+        print("❌ Nenhum cliente encontrado")
+
+except Exception as e:
+    print(f"❌ Erro: {e}")
+    import traceback
+    traceback.print_exc()

src/trip_cliente_0_trip_706.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html>
+<head>
+    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
+    
+            <meta name="viewport" content="width=device-width,
+                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+            <style>
+                #map_800878dfafeb753832dd2df9330a23c5 {
+                    position: relative;
+                    width: 100.0%;
+                    height: 100.0%;
+                    left: 0.0%;
+                    top: 0.0%;
+                }
+                .leaflet-container { font-size: 1rem; }
+            </style>
+
+            <style>html, body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+            </style>
+
+            <style>#map {
+                position:absolute;
+                top:0;
+                bottom:0;
+                right:0;
+                left:0;
+                }
+            </style>
+
+            <script>
+                L_NO_TOUCH = false;
+                L_DISABLE_3D = false;
+            </script>
+
+        
+</head>
+<body>
+    
+    
+        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
+        <script>
+        (function() {
+            // Esperar o mapa carregar completamente
+            var checkMap = setInterval(function() {
+                if (typeof map_800878dfafeb753832dd2df9330a23c5 !== 'undefined') {
+                    clearInterval(checkMap);
+                    initAnimation();
+                }
+            }, 100);
+
+            function initAnimation() {
+                var coords = [[42.2775583333, -83.6987497222], [42.2775583333, -83.6987497222], [42.2775583333, -83.6987497222], [42.2775583333, -83.6987497222], [42.2775583333, -83.6987497222], [42.2782552778, -83.6988030556], [42.2782552778, -83.6988030556], [42.2782552778, -83.6988030556], [42.2782552778, -83.6988030556], [42.2790125, -83.6989011111], [42.2790125, -83.6989011111], [42.2790125, -83.6989011111], [42.2790125, -83.6989011111], [42.2790125, -83.6989011111], [42.2798258333, -83.6990825], [42.2798258333, -83.6990825], [42.2798258333, -83.6990825], [42.2798258333, -83.6990825], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2814252778, -83.6996786111], [42.2814252778, -83.6996786111], [42.2814252778, -83.6996786111], [42.2814252778, -83.6996786111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2829597222, -83.7005038889], [42.2829597222, -83.7005038889], [42.2829597222, -83.7005038889], [42.2829597222, -83.7005038889], [42.2829597222, -83.7005038889], [42.2838672222, -83.7011169444], [42.2838672222, -83.7011169444], [42.2838672222, -83.7011169444], [42.2838672222, -83.7011169444], [42.2845911111, -83.7016091667], [42.2845911111, -83.7016091667], [42.2845911111, -83.7016091667], [42.2845911111, -83.7016091667], [42.28548, -83.7022116667], [42.28548, -83.7022116667], [42.28548, -83.7022116667], [42.28548, -83.7022116667], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2869772222, -83.7031025], [42.2869772222, -83.7031025], [42.2869772222, -83.7031025], [42.2869772222, -83.7031025], [42.2869772222, -83.7031025], [42.2877736111, -83.7033411111], [42.2877736111, -83.7033411111], [42.2877736111, -83.7033411111], [42.2877736111, -83.7033411111], [42.2885552778, -83.70357], [42.2885552778, -83.70357], [42.2885552778, -83.70357], [42.2885552778, -83.70357], [42.2895066667, -83.7038441667], [42.2895066667, -83.7038441667], [42.2895066667, -83.7038441667], [42.2895066667, -83.7038441667], [42.2895066667, -83.7038441667], [42.2902852778, -83.7041030556], [42.2902852778, -83.7041030556], [42.2902852778, -83.7041030556], [42.2910025, -83.7044836111], [42.2910025, -83.7044836111], [42.2910025, -83.7044836111], [42.2916858333, -83.7049836111], [42.2916858333, -83.7049836111], [42.2916858333, -83.7049836111], [42.2916858333, -83.7049836111], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2931136111, -83.7052613889], [42.2931136111, -83.7052613889], [42.2931136111, -83.7052613889], [42.2931136111, -83.7052613889], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222]];
+                var variablesData = {"speed": [40.0, 40.0, 45.0, 47.0, 48.0, 52.0, 55.0, 59.0, 59.0, 60.0, 62.0, 63.0, 65.0, 66.0, 67.0, 67.0, 67.0, 65.0, 65.0, 65.0, 65.0, 64.0, 63.0, 63.0, 62.0, 62.0, 63.0, 63.0, 63.0, 64.0, 64.0, 65.0, 66.0, 66.0, 68.0, 69.0, 69.0, 68.0, 68.0, 66.0, 66.0, 66.0, 65.0, 65.0, 65.0, 65.0, 65.0, 65.0, 66.0, 66.0, 66.0, 67.0, 67.0, 67.0, 66.0, 65.0, 65.0, 64.0, 63.0, 63.0, 63.0, 64.0, 64.0, 65.0, 65.0, 65.0, 64.0, 64.0, 64.0, 64.0, 63.0, 63.0, 64.0, 64.0, 65.0, 64.0, 63.0, 62.0, 62.0, 62.0, 62.0, 62.0, 62.0, 62.0, 62.0, 61.0, 60.0, 60.0, 60.0, 60.0, 59.0, 59.0, 57.0, 55.0, 55.0, 50.0, 49.0, 49.0, 49.0, 47.0, 47.0, 45.0, 44.0, 44.0, 41.0, 41.0, 39.0, 36.0, 34.0, 31.0, 24.0, 24.0, 24.0, 19.0, 8.0, 8.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 2.0, 11.0, 11.0, 11.0, 18.0, 20.0, 20.0, 20.0, 25.0, 25.0, 32.0, 32.0, 32.0, 37.0], "elevation": [230.5630340576172, 230.5630340576172, 230.5630340576172, 230.5952026367188, 230.62737121582032, 230.65953979492187, 230.69170837402345, 230.8247192382813, 230.9255615234375, 231.02640380859376, 231.12724609375, 231.2280883789062, 231.46845092773432, 231.70881347656243, 231.9491760253906, 232.1895385742188, 232.79419555664063, 233.1584899902344, 233.5227844238281, 233.88707885742187, 234.2513732910156, 234.2513732910156, 234.97682495117184, 235.70227661132813, 236.4277282714844, 237.15317993164064, 237.8022918701172, 237.7259521484375, 237.6496124267578, 237.57327270507807, 237.4969329833984, 237.4969329833984, 237.4969329833984, 237.4969329833984, 237.1122131347656, 236.7274932861328, 236.3427734375, 235.9580535888672, 235.57333374023443, 235.7831665039063, 235.99299926757817, 236.20283203125004, 236.4126647949219, 236.7957427978516, 236.96898803710943, 237.1422332763672, 237.315478515625, 237.63580322265625, 237.7828826904297, 237.92996215820312, 238.07704162597656, 238.3168884277344, 238.4096557617188, 238.5024230957032, 238.5951904296875, 238.687957763672, 238.687957763672, 238.687957763672, 238.7843505859375, 238.8807434082032, 238.9771362304688, 239.0735290527344, 239.169921875, 239.29015197753907, 239.4103820800781, 239.5306121826172, 239.65084228515624, 239.8400848388672, 239.90909729003903, 239.9781097412109, 240.0471221923828, 240.26297912597656, 240.40982360839843, 240.55666809082032, 240.7035125732422, 240.8503570556641, 241.26884765625005, 241.687338256836, 242.10582885742195, 242.74490661621093, 243.38398437500004, 243.6045715332032, 244.21497192382816, 244.8253723144532, 245.21518554687503, 245.6049987792969, 246.47822875976567, 246.96164550781253, 247.44506225585937, 247.92847900390623, 248.41189575195307, 248.41189575195307, 248.90110473632808, 249.3903137207031, 249.87952270507807, 250.36873168945309, 251.47001037597656, 252.082080078125, 252.69414978027345, 253.30621948242188, 253.9182891845703, 253.9182891845703, 253.9182891845703, 254.52310791015623, 255.1279266357422, 255.7327453613281, 256.3375640869141, 256.9423828125, 256.9423828125, 257.217431640625, 257.49248046875, 257.767529296875, 258.042578125, 258.317626953125, 258.317626953125, 258.34251708984374, 258.3674072265625, 258.3922973632813, 258.4171875, 258.4420776367188, 258.4420776367188, 258.4420776367188, 258.4420776367188, 258.4420776367188, 258.4420776367188, 258.4420776367188, 258.4650024414063, 258.4879272460938, 258.51085205078124, 258.5337768554688, 258.5567016601562, 258.5567016601562, 258.5567016601562, 258.5567016601562, 258.5567016601562, 258.5567016601562, 258.5567016601562]};
+                var currentIndex = 0;
+                var isPlaying = false;
+                var animationSpeed = 50;
+                var intervalId = null;
+
+                var pathColor = '#ff0000';
+                var markerColor = '#ffffff';
+
+                // Função para inicializar gráficos
+                function initCharts(data) {
+                    var chartsObj = {};
+
+                    // Gráfico de Velocidade
+                    if (data.speed) {
+                        var speedCtx = document.getElementById('speedChart').getContext('2d');
+                        chartsObj.speed = new Chart(speedCtx, {
+                            type: 'line',
+                            data: {
+                                labels: Array.from({length: data.speed.length}, (_, i) => i),
+                                datasets: [{
+                                    label: 'Velocidade (km/h)',
+                                    data: data.speed,
+                                    borderColor: '#3498db',
+                                    backgroundColor: 'rgba(52, 152, 219, 0.1)',
+                                    borderWidth: 2,
+                                    tension: 0.4,
+                                    pointRadius: 0
+                                }]
+                            },
+                            options: {
+                                responsive: false,
+                                maintainAspectRatio: false,
+                                animation: false,
+                                plugins: {
+                                    legend: {display: false}
+                                },
+                                scales: {
+                                    x: {display: false},
+                                    y: {
+                                        beginAtZero: true,
+                                        ticks: {color: '#666', font: {size: 10}}
+                                    }
+                                }
+                            }
+                        });
+                    }
+
+                    // Gráfico de Energia/Combustível
+                    if (data.energy) {
+                        var energyCtx = document.getElementById('energyChart').getContext('2d');
+                        chartsObj.energy = new Chart(energyCtx, {
+                            type: 'line',
+                            data: {
+                                labels: Array.from({length: data.energy.length}, (_, i) => i),
+                                datasets: [{
+                                    label: data.energy_label || 'Energia',
+                                    data: data.energy,
+                                    borderColor: '#e74c3c',
+                                    backgroundColor: 'rgba(231, 76, 60, 0.1)',
+                                    borderWidth: 2,
+                                    tension: 0.4,
+                                    pointRadius: 0
+                                }]
+                            },
+                            options: {
+                                responsive: false,
+                                maintainAspectRatio: false,
+                                animation: false,
+                                plugins: {
+                                    legend: {display: false}
+                                },
+                                scales: {
+                                    x: {display: false},
+                                    y: {
+                                        beginAtZero: true,
+                                        ticks: {color: '#666', font: {size: 10}}
+                                    }
+                                }
+                            }
+                        });
+                    }
+
+                    // Gráfico de Elevação
+                    if (data.elevation) {
+                        var elevCtx = document.getElementById('elevationChart').getContext('2d');
+                        chartsObj.elevation = new Chart(elevCtx, {
+                            type: 'line',
+                            data: {
+                                labels: Array.from({length: data.elevation.length}, (_, i) => i),
+                                datasets: [{
+                                    label: 'Elevação (m)',
+                                    data: data.elevation,
+                                    borderColor: '#2ecc71',
+                                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
+                                    borderWidth: 2,
+                                    tension: 0.4,
+                                    pointRadius: 0,
+                                    fill: true
+                                }]
+                            },
+                            options: {
+                                responsive: false,
+                                maintainAspectRatio: false,
+                                animation: false,
+                                plugins: {
+                                    legend: {display: false}
+                                },
+                                scales: {
+                                    x: {display: false},
+                                    y: {
+                                        ticks: {color: '#666', font: {size: 10}}
+                                    }
+                                }
+                            }
+                        });
+                    }
+
+                    return chartsObj;
+                }
+
+                // Inicializar gráficos
+                var charts = initCharts(variablesData);
+
+                // Camada para o trajeto percorrido
+                var traveledPath = L.polyline([], {
+                    color: pathColor,
+                    weight: 5,
+                    opacity: 0.9
+                }).addTo(map_800878dfafeb753832dd2df9330a23c5);
+
+                // Marcador do carro
+                var carMarker = L.circleMarker(coords[0], {
+                    radius: 8,
+                    color: pathColor,
+                    weight: 3,
+                    fillColor: markerColor,
+                    fillOpacity: 1
+                }).addTo(map_800878dfafeb753832dd2df9330a23c5);
+
+                // Atualizar indicador de posição nos gráficos
+                function updateChartIndicators(index) {
+                    Object.keys(charts).forEach(function(key) {
+                        var chart = charts[key];
+                        // Criar/atualizar linha vertical no gráfico
+                        if (chart.options.plugins.annotation) {
+                            chart.options.plugins.annotation.annotations.line1.xMin = index;
+                            chart.options.plugins.annotation.annotations.line1.xMax = index;
+                        } else {
+                            // Atualizar viewport do gráfico
+                            var maxVisible = 50; // Mostrar últimos 50 pontos
+                            var minX = Math.max(0, index - maxVisible);
+                            chart.options.scales.x.min = minX;
+                            chart.options.scales.x.max = Math.max(maxVisible, index + 10);
+                        }
+                        chart.update('none');
+                    });
+
+                    // Atualizar valores numéricos
+                    if (variablesData.speed) {
+                        document.getElementById('speedValue').textContent =
+                            variablesData.speed[index].toFixed(1) + ' km/h';
+                    }
+                    if (variablesData.energy) {
+                        document.getElementById('energyValue').textContent =
+                            variablesData.energy[index].toFixed(2);
+                    }
+                    if (variablesData.elevation) {
+                        document.getElementById('elevationValue').textContent =
+                            variablesData.elevation[index].toFixed(1) + ' m';
+                    }
+                }
+
+                window.updateAnimation = function() {
+                    // Só atualiza se estiver realmente tocando
+                    if (!isPlaying) return;
+
+                    if (currentIndex < coords.length) {
+                        carMarker.setLatLng(coords[currentIndex]);
+                        var traveled = coords.slice(0, currentIndex + 1);
+                        traveledPath.setLatLngs(traveled);
+
+                        document.getElementById('timeSlider').value = currentIndex;
+                        document.getElementById('timeDisplay').textContent =
+                            'Ponto: ' + (currentIndex + 1) + ' / ' + coords.length;
+
+                        // Atualizar gráficos
+                        updateChartIndicators(currentIndex);
+
+                        currentIndex++;
+                    } else {
+                        currentIndex = 0;
+                    }
+                };
+                
+                window.playAnimation = function() {
+                    if (!isPlaying) {
+                        isPlaying = true;
+                        document.getElementById('playBtn').innerHTML = '⏸ Pausar';
+                        intervalId = setInterval(window.updateAnimation, animationSpeed);
+                    }
+                };
+                
+                window.pauseAnimation = function() {
+                    isPlaying = false;
+                    document.getElementById('playBtn').innerHTML = '▶ Play';
+                    if (intervalId) {
+                        clearInterval(intervalId);
+                        intervalId = null;
+                    }
+                };
+                
+                window.togglePlay = function() {
+                    if (isPlaying) {
+                        window.pauseAnimation();
+                    } else {
+                        window.playAnimation();
+                    }
+                };
+                
+                window.resetAnimation = function() {
+                    window.pauseAnimation();
+                    currentIndex = 0;
+                    carMarker.setLatLng(coords[0]);
+                    traveledPath.setLatLngs([coords[0]]);
+                    document.getElementById('timeSlider').value = 0;
+                    document.getElementById('timeDisplay').textContent = 'Ponto: 1 / ' + coords.length;
+                };
+                
+                window.changeSpeed = function(value) {
+                    animationSpeed = 200 - value;
+                    document.getElementById('speedDisplay').textContent = 'Velocidade: ' + value + '%';
+                    
+                    if (isPlaying) {
+                        clearInterval(intervalId);
+                        intervalId = setInterval(window.updateAnimation, animationSpeed);
+                    }
+                };
+                
+                window.seekTo = function(index) {
+                    currentIndex = parseInt(index);
+                    carMarker.setLatLng(coords[currentIndex]);
+                    var traveled = coords.slice(0, currentIndex + 1);
+                    traveledPath.setLatLngs(traveled);
+                    document.getElementById('timeDisplay').textContent =
+                        'Ponto: ' + (currentIndex + 1) + ' / ' + coords.length;
+
+                    // Atualizar gráficos ao usar o slider
+                    updateChartIndicators(currentIndex);
+                };
+                
+                // Auto-play
+                setTimeout(window.playAnimation, 1000);
+            }
+        })();
+        </script>
+
+        <!-- Painéis de Gráficos Laterais -->
+        <div style="position: fixed; right: 15px; top: 15px; width: 400px; z-index: 1000; max-height: 90vh; overflow-y: auto;">
+            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); margin-bottom: 15px; border-left: 5px solid #3498db;"><h4 style="margin: 0 0 10px 0; font-size: 16px; color: #3498db; font-weight: bold;">⚡ Velocidade</h4><div id="speedValue" style="font-size: 32px; font-weight: bold; color: #3498db; margin-bottom: 15px; text-align: center;">0 km/h</div><canvas id="speedChart" width="360" height="120"></canvas></div>
+            
+            <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); border-left: 5px solid #2ecc71;"><h4 style="margin: 0 0 10px 0; font-size: 16px; color: #2ecc71; font-weight: bold;">⛰️ Elevação</h4><div id="elevationValue" style="font-size: 32px; font-weight: bold; color: #2ecc71; margin-bottom: 15px; text-align: center;">0 m</div><canvas id="elevationChart" width="360" height="120"></canvas></div>
+        </div>
+
+        <!-- Controles de Animação -->
+        <div style="position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+                    background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+                    z-index: 1000; min-width: 400px;">
+            <div style="text-align: center; margin-bottom: 10px;">
+                <h4 style="margin: 0 0 10px 0;">🚗 Combustão - Cliente 0</h4>
+                <div id="timeDisplay" style="font-size: 14px; color: #666;">Ponto: 1 / 137</div>
+            </div>
+
+            <div style="display: flex; gap: 10px; margin-bottom: 10px; justify-content: center;">
+                <button id="playBtn" onclick="togglePlay()"
+                        style="padding: 10px 20px; font-size: 16px; cursor: pointer; border: none;
+                               background: #ff0000; color: white; border-radius: 5px;">
+                    ▶ Play
+                </button>
+                <button onclick="resetAnimation()"
+                        style="padding: 10px 20px; font-size: 16px; cursor: pointer; border: none;
+                               background: #666; color: white; border-radius: 5px;">
+                    🔄 Reiniciar
+                </button>
+            </div>
+
+            <div style="margin-bottom: 10px;">
+                <input type="range" id="timeSlider" min="0" max="136" value="0"
+                       oninput="seekTo(this.value)"
+                       style="width: 100%;">
+            </div>
+
+            <div>
+                <div id="speedDisplay" style="font-size: 12px; color: #666; margin-bottom: 5px;">
+                    Velocidade: 100%
+                </div>
+                <input type="range" id="speedSlider" min="10" max="190" value="100"
+                       oninput="changeSpeed(this.value)"
+                       style="width: 100%;">
+            </div>
+        </div>
+        
+    
+            <div class="folium-map" id="map_800878dfafeb753832dd2df9330a23c5" ></div>
+        
+</body>
+<script>
+    
+    
+            var map_800878dfafeb753832dd2df9330a23c5 = L.map(
+                "map_800878dfafeb753832dd2df9330a23c5",
+                {
+                    center: [42.28783561840511, -83.7026126236854],
+                    crs: L.CRS.EPSG3857,
+                    ...{
+  "zoom": 13,
+  "zoomControl": true,
+  "preferCanvas": false,
+}
+
+                }
+            );
+
+            
+
+        
+    
+            var tile_layer_58a14cc39991c665ede74c4e142e750a = L.tileLayer(
+                "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+                {
+  "minZoom": 0,
+  "maxZoom": 19,
+  "maxNativeZoom": 19,
+  "noWrap": false,
+  "attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors",
+  "subdomains": "abc",
+  "detectRetina": false,
+  "tms": false,
+  "opacity": 1,
+}
+
+            );
+        
+    
+            tile_layer_58a14cc39991c665ede74c4e142e750a.addTo(map_800878dfafeb753832dd2df9330a23c5);
+        
+    
+            var poly_line_e9c44cdc0aa4f16477e75fb82bac2504 = L.polyline(
+                [[42.2775583333, -83.6987497222], [42.2775583333, -83.6987497222], [42.2775583333, -83.6987497222], [42.2775583333, -83.6987497222], [42.2775583333, -83.6987497222], [42.2782552778, -83.6988030556], [42.2782552778, -83.6988030556], [42.2782552778, -83.6988030556], [42.2782552778, -83.6988030556], [42.2790125, -83.6989011111], [42.2790125, -83.6989011111], [42.2790125, -83.6989011111], [42.2790125, -83.6989011111], [42.2790125, -83.6989011111], [42.2798258333, -83.6990825], [42.2798258333, -83.6990825], [42.2798258333, -83.6990825], [42.2798258333, -83.6990825], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2806536111, -83.6993497222], [42.2814252778, -83.6996786111], [42.2814252778, -83.6996786111], [42.2814252778, -83.6996786111], [42.2814252778, -83.6996786111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2821922222, -83.7000411111], [42.2829597222, -83.7005038889], [42.2829597222, -83.7005038889], [42.2829597222, -83.7005038889], [42.2829597222, -83.7005038889], [42.2829597222, -83.7005038889], [42.2838672222, -83.7011169444], [42.2838672222, -83.7011169444], [42.2838672222, -83.7011169444], [42.2838672222, -83.7011169444], [42.2845911111, -83.7016091667], [42.2845911111, -83.7016091667], [42.2845911111, -83.7016091667], [42.2845911111, -83.7016091667], [42.28548, -83.7022116667], [42.28548, -83.7022116667], [42.28548, -83.7022116667], [42.28548, -83.7022116667], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2862297222, -83.7027197222], [42.2869772222, -83.7031025], [42.2869772222, -83.7031025], [42.2869772222, -83.7031025], [42.2869772222, -83.7031025], [42.2869772222, -83.7031025], [42.2877736111, -83.7033411111], [42.2877736111, -83.7033411111], [42.2877736111, -83.7033411111], [42.2877736111, -83.7033411111], [42.2885552778, -83.70357], [42.2885552778, -83.70357], [42.2885552778, -83.70357], [42.2885552778, -83.70357], [42.2895066667, -83.7038441667], [42.2895066667, -83.7038441667], [42.2895066667, -83.7038441667], [42.2895066667, -83.7038441667], [42.2895066667, -83.7038441667], [42.2902852778, -83.7041030556], [42.2902852778, -83.7041030556], [42.2902852778, -83.7041030556], [42.2910025, -83.7044836111], [42.2910025, -83.7044836111], [42.2910025, -83.7044836111], [42.2916858333, -83.7049836111], [42.2916858333, -83.7049836111], [42.2916858333, -83.7049836111], [42.2916858333, -83.7049836111], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2923916667, -83.7053377778], [42.2931136111, -83.7052613889], [42.2931136111, -83.7052613889], [42.2931136111, -83.7052613889], [42.2931136111, -83.7052613889], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2937136111, -83.7049280556], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2943641667, -83.704695], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2948241667, -83.7045802778], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2949858333, -83.7045213889], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222], [42.2950961111, -83.7045172222]],
+                {"bubblingMouseEvents": true, "color": "#cccccc", "dashArray": null, "dashOffset": null, "fill": false, "fillColor": "#cccccc", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "noClip": false, "opacity": 0.5, "smoothFactor": 1.0, "stroke": true, "weight": 5}
+            ).addTo(map_800878dfafeb753832dd2df9330a23c5);
+        
+    
+        var popup_49d98a7aed00d3635d09a9a11d4d362a = L.popup({
+  "maxWidth": "100%",
+});
+
+        
+            
+                var html_8b547677f443b5ef0c2af2b87e25ad91 = $(`<div id="html_8b547677f443b5ef0c2af2b87e25ad91" style="width: 100.0%; height: 100.0%;">Trajeto completo - Combustão</div>`)[0];
+                popup_49d98a7aed00d3635d09a9a11d4d362a.setContent(html_8b547677f443b5ef0c2af2b87e25ad91);
+            
+        
+
+        poly_line_e9c44cdc0aa4f16477e75fb82bac2504.bindPopup(popup_49d98a7aed00d3635d09a9a11d4d362a)
+        ;
+
+        
+    
+    
+            var circle_marker_19b390385dc7c4c7854a5a7fc11f45e9 = L.circleMarker(
+                [42.2775583333, -83.6987497222],
+                {"bubblingMouseEvents": true, "color": "green", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "green", "fillOpacity": 0.8, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 10, "stroke": true, "weight": 3}
+            ).addTo(map_800878dfafeb753832dd2df9330a23c5);
+        
+    
+        var popup_f15de743ca68f16ece2af83acd040e45 = L.popup({
+  "maxWidth": "100%",
+});
+
+        
+            
+                var html_73e20b65ed5a888ad0008c392ccdbe93 = $(`<div id="html_73e20b65ed5a888ad0008c392ccdbe93" style="width: 100.0%; height: 100.0%;"><b>INÍCIO</b><br>Combustão</div>`)[0];
+                popup_f15de743ca68f16ece2af83acd040e45.setContent(html_73e20b65ed5a888ad0008c392ccdbe93);
+            
+        
+
+        circle_marker_19b390385dc7c4c7854a5a7fc11f45e9.bindPopup(popup_f15de743ca68f16ece2af83acd040e45)
+        ;
+
+        
+    
+    
+            var circle_marker_fc2c224a37c8956d47eb89ed4f3402b8 = L.circleMarker(
+                [42.2950961111, -83.7045172222],
+                {"bubblingMouseEvents": true, "color": "red", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "red", "fillOpacity": 0.8, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 10, "stroke": true, "weight": 3}
+            ).addTo(map_800878dfafeb753832dd2df9330a23c5);
+        
+    
+        var popup_b32be036144b4cb12eaa6e6d036a5b92 = L.popup({
+  "maxWidth": "100%",
+});
+
+        
+            
+                var html_dd691795a81c1ea059bec29c545fbb50 = $(`<div id="html_dd691795a81c1ea059bec29c545fbb50" style="width: 100.0%; height: 100.0%;"><b>FIM</b><br>Combustão</div>`)[0];
+                popup_b32be036144b4cb12eaa6e6d036a5b92.setContent(html_dd691795a81c1ea059bec29c545fbb50);
+            
+        
+
+        circle_marker_fc2c224a37c8956d47eb89ed4f3402b8.bindPopup(popup_b32be036144b4cb12eaa6e6d036a5b92)
+        ;
+
+        
+    
+</script>
+</html>