Dash data table return from callback and dropdown list

Dash Python
1

I want to return the whole data table properties from the callbacks function cause I want to transpose data and modify it based on the dropdown filter and add style data conditions based on filter and display quarter and annual data

import pandas as pd
import numpy as np
import seaborn as sns
import warnings
import matplotlib.pyplot as plt
#from prophet import Prophet
import dash  # you need Dash version 1.15.0 or higher
import dash_table
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output,State
import dash_auth
from dash.dash_table import DataTable, FormatTemplate
import pandas as pd
import plotly.graph_objs as go
import plotly.express as px
df=pd.read_excel("D:\\Early alarm system\\quarters and annual.xlsx",sheet_name='Sheet1')
#df
df=df.sort_values(by=['Date'],ascending=True)
df.replace(to_replace='-',value=np.nan,inplace=True)
#df=df.drop('Year',axis=1).round(decimals=2)
#df=df.round(decimals=2)
df.head(5)
df['quarter'] = pd.PeriodIndex(df.Date, freq='Q').astype(str)
df['Year'] = pd.PeriodIndex(df.Date, freq='Y').astype(str)
df.head(4)
periodicity=df.periodicity.unique()
app = dash.Dash(__name__)

app.layout = html.Div([

html.Div([ html.Label('Periodicity'),dcc.Dropdown(
            id="filter_dropdown",
            options=[{'label':i,'value':i} for i in df.periodicity.unique()],
            placeholder="Select periodicity",
            #multi=True,
            value=periodicity[0]
)]),
               
                
html.Div(id="final_table")


])


@app.callback(Output("final_table","table"),
              [Input("filter_dropdown","value")])

def update(Select_periodicity):
    df_filtered = df[df['periodicity']==Select_periodicity].dropna(how='all',axis=1)
    if Select_periodicity == 'Annual':
        df_Transpose=df_filtered.drop(['Date','quarter','periodicity'],axis=1)
        df_Transpose=df_Transpose_annual.set_index('Year').T
        df_Transpose.reset_index(inplace=True)
        df_Transpose.rename(columns={'index':'Indicators'},inplace=True)
    elif Select_periodicity == 'Quarter':
        df_Transpose=df_filtered.drop(['Date','Year','periodicity'],axis=1)
        df_Transpose=df_Transpose_annual.set_index('quarter').T
        df_Transpose.reset_index(inplace=True)
        df_Transpose.rename(columns={'index':'Indicators'},inplace=True)
    return [ dash_table.DataTable(
                id='table',
                columns=[{'name':i,'id': i} for i in df_Transpose.columns],
                data= df_Transpose.to_dict("records"))]
            
if __name__ == "__main__":
    app.run_server(debug=False)

Screenshot 2023-04-15 132624
Screenshot 2023-04-15 1326241366×624 2.12 KB

2

Just print the DataFrame after each action and see the result to find where the problem is.

    elif Select_periodicity == 'Quarter':
        df_Transpose=df_filtered.drop(['Date','Year','periodicity'],axis=1)
        print(df_Transpose)
3

Thanks more my buddy

periodicity=df.periodicity.unique()
app = dash.Dash(__name__)
#percentage = FormatTemplate.percentage(2)
app.layout = html.Div([ html.H1(
                                children='Early Alarm Dashboard',
                                 style={
                                        'textAlign': 'center',
                                         'color':'#111111'
                                        }
                                ),

html.Div([ html.Label('Select Periodicity'),
          dcc.Dropdown(
            id="filter_dropdown",
            options=[{'label':i,'value':i} for i in df.periodicity.unique()],
            placeholder="Select periodicity",
            #multi=True,
            value=periodicity[0]
        )]),
                     #,style={'width':'50%','float':'left','display':'inline-block'}        
html.Div(id="final_table")
])

@app.callback(Output("final_table",'children'),
              [Input("filter_dropdown","value")])

def update(Select_periodicity):
    df_filtered = df[df['periodicity']==Select_periodicity].dropna(how='all',axis=1)
    df_filtered=df_filtered.assign(**df_filtered.select_dtypes('number')/100)
    if Select_periodicity == 'Annual':
        df_Transpose=df_filtered.drop(['Date','quarter','periodicity'],axis=1)
        df_Transpose=df_Transpose.set_index('Year').T
        df_Transpose.reset_index(inplace=True)
        df_Transpose.rename(columns={'index':'Indicators'},inplace=True)
        style_data_conditional=cond_year
        columns=[{'name':i,'id': i,'type':'numeric','format':percentage} for i in df_Transpose.columns] #,'format':percentage
    elif Select_periodicity == 'Quarter':
        df_Transpose=df_filtered.drop(['Date','Year','periodicity'],axis=1)
        df_Transpose=df_Transpose.set_index('quarter').T
        df_Transpose.reset_index(inplace=True)
        df_Transpose.rename(columns={'index':'Indicators'},inplace=True)
        style_data_conditional=cond_quarter
        columns=[{'name':i,'id': i,'type':'numeric','format':percentage} for i in df_Transpose.columns]#
    return [dash_table.DataTable(
                id='table',
                columns=columns,
                data= df_Transpose.to_dict("records"),
                page_action='native',
                fixed_rows={'headers':True,'data':0},
                fixed_columns={'headers':True,'data':1},
        
        style_cell={'textAlign': 'center','minWidth': 'auto', 
                    'width': 'auto', 'maxWidth': 'auto', 'whiteSpace':'normal', 
                    'height':'auto', 'lineHeight':'20px'},
        
         style_header={'textAlign': 'center',
      'backgroundColor': 'rgb(210, 210, 210)',
       'color': 'black',
      'fontWeight': 'bold',
    'whiteSpace': 'normal',
       'width': 'auto', 'maxWidth': 'auto','minWidth': '20px', 'height':'auto'
     },
        #style_data={
         #'overflow': 'hidden',
         #'textOverflow': 'clip', #use 'clip' to hide content
         #'maxWidth': 50,
#},
 style_table={'height':'auto',
            'minWidth': 'auto', 
          'width':'auto','maxWidth':'100%',
            'overflow': 'hidden'
          #'overflowY': 'scroll',
        #'overflowX': 'scroll'
             },
                style_data_conditional=style_data_conditional
                )]#style_data_conditional=style_data_conditional
            
if __name__ == "__main__":
    app.run_server(debug=False)
1 Like