<jupyter_start><jupyter_text>Primer Dashboard<jupyter_code># importar librerias

import pandas as pd
import plotly.express as px  
from dash import Dash, dcc, html, Input, Output


#crear un dataframe con toda la informacion de la encuesta
df = pd.read_csv ('../data/survey_results_public2021.csv', index_col = [0]) # El indice sera la columna con el ID de la respuesta
df #mostrar df ()<jupyter_output><empty_output><jupyter_text>Tratamiento de datos de las columnas que se van a usar<jupyter_code># Algunas columnas tienen datos que no van a poder procesados correctamente. Por ejemplo:
#less than 1 year y More than 50 years seran problematicos a la hora de hacer estadisticas
df['YearsCode'] = df['YearsCode'].replace(['More than 50 years', 'Less than 1 year'],["50.5", "0.5"])

#convertir todos los NaN del dfen 0
df.fillna("0", inplace=True) 

#YearsCode es ahora una columna de enteros. 
df.YearsCode = df.YearsCode.astype(float)

df<jupyter_output><empty_output><jupyter_text>App layout (Diseño de la aplicacion)<jupyter_code>app = Dash(__name__)
app.layout = html.Div([

    html.H1("Dashboard ejemplo", style={'text-align': 'center'}), #cabecero h1. Header
    
    #primera mini prueba con un menu desplegable.
    dcc.Dropdown(id="slct_OS",  
                 options=[ #el usuario va a ver las label.
                     {"label": "Windows", "value": "Windows"},
                     {"label": "Linux-based", "value": "Linux-based"},
                     {"label": "MacOS", "value": "MacOS"},
                     {"label": "Windows Subsystem for Linux", "value": "Windows Subsystem for Linux (WSL)"},
                     {"label": "BSD", "value": "BSD"},
                     {"label": "Other", "value": "Other (please specify):"}],
                 multi=False,
                 value="Windows",
                 style={'width': "40%"}
                 ),

    dcc.Graph(id='my_survey', figure={}) # graph container

])<jupyter_output><empty_output><jupyter_text>Conectar los gráficos plotly con los componentes dash Para crear un dashboard completo, hay que conectar los componentes del app layout usando callback. Callback va a usar los ID y los *component property*<jupyter_code>@app.callback(
    Output(component_id='my_survey', component_property='figure'),
    Input(component_id='slct_OS', component_property='value'))
def update_graph(option_slctd):
    #filtered_df = df[df.year == selected_year]
    
    dff = df.copy() #copia del df
    dff = dff[dff["OpSys"] == option_slctd]
        
    fig = px.line(dff, x= dff['YearsCode'].sort_values(), 
                  y=dff['Age'].sort_values(), 
                  color=dff['EdLevel']) 
    return fig
app.run_server(debug=True, use_reloader=False)<jupyter_output>Dash is running on http://127.0.0.1:8050/

 * Serving Flask app "__main__" (lazy loading)
 * Environment: production
[31m   WARNING: This is a development server. Do not use it in a production deployment.[0m
[2m   Use a production WSGI server instead.[0m
 * Debug mode: on
{'fraction_non_alphanumeric': 0.1269893899204244, 'fraction_numerical': 0.01226790450928382, 'mean_word_length': 3.3979591836734695, 'pattern_counts': {'":': 12, '<': 16, '<?xml version=': 0, '>': 16, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 1, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '4', 'dir': 'jupyter-structured-clean-dedup', 'id': '100731', 'license': 'BSD-3-Clause', 'n_tokens_mistral': 1021, 'n_tokens_neox': 969, 'n_words': 286, 'path': 'old/.ipynb_checkpoints/primer_dashboard-checkpoint.ipynb', 'repo_name': 'albarrom/GII_O_MA_21.05', 'size': '3016'}