import dash
from dash import html, dcc
import plotly.graph_objs as go
import pandas as pd
from sqlalchemy import create_engine

# SQLAlchemy engine for MySQL connection (use your username, password, and database)
engine = create_engine('mysql+pymysql://root:@localhost/datasetdbej0')

# Using pandas to load SQL data through SQLAlchemy engine
df = pd.read_sql("SELECT * FROM tbl_datos", engine)

# Iniciar la aplicación Dash
app = dash.Dash(__name__)

# Layout de la aplicación
app.layout = html.Div([
    html.H1("Dashboard de Datos de Ondas"),
    dcc.Graph(
        id='onda-cuadrada',
        figure={
            'data': [
                go.Scatter(
                    x=df.index,
                    y=df['datos_val1'],
                    mode='lines+markers',
                    name='Onda Cuadrada'
                )
            ],
            'layout': go.Layout(
                title='Onda Cuadrada',
                xaxis={'title': 'Muestra'},
                yaxis={'title': 'Amplitud'}
            )
        }
    ),
    dcc.Graph(
        id='onda-exponencial',
        figure={
            'data': [
                go.Scatter(
                    x=df.index,
                    y=df['datos_val2'],
                    mode='lines+markers',
                    name='Onda Exponencial'
                )
            ],
            'layout': go.Layout(
                title='Onda Exponencial',
                xaxis={'title': 'Muestra'},
                yaxis={'title': 'Amplitud'}
            )
        }
    ),
    dcc.Graph(
        id='onda-triangular',
        figure={
            'data': [
                go.Scatter(
                    x=df.index,
                    y=df['datos_val3'],
                    mode='lines+markers',
                    name='Onda Triangular'
                )
            ],
            'layout': go.Layout(
                title='Onda Triangular',
                xaxis={'title': 'Muestra'},
                yaxis={'title': 'Amplitud'}
            )
        }
    )
])

# Correr el servidor
if __name__ == '__main__':
    app.run_server(debug=True)