Build dynamic graphs that update to your users's Mito edits.
Motivation
A user is filtering a dataset using a Mito sheet.
You want to update a graph of this data elsewhere in your dashboard.
How to:
Simply use the @mito_callback to watch for changes on the spreadsheet_result prop, and then graph the resulting dataframe.
from dash import Dash, html, dcc, Output, Input
from dash.exceptions import PreventUpdate
import plotly.express as px
import pandas as pd
from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder_unfiltered.csv')
app = Dash(__name__)
activate_mito(app)
app.layout = html.Div([
Spreadsheet(df, id={'type': 'spreadsheet', 'id': 'sheet'}),
dcc.Graph(id='graph-content'),
])
@mito_callback(
Output('graph-content', 'figure'),
Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result')
)
def update_code(spreadsheet_result):
if spreadsheet_result is None:
raise PreventUpdate
# Get the current value of the original dataframe
dff = spreadsheet_result.dfs()[0]
# Requires that the user doesn't delete the year, lifeExp, or continent column
return px.line(dff, x='year', y='lifeExp', color='continent')
if __name__ == '__main__':
app.run(debug=True)
Now, if the user filters the original data in any way, the new data will be displayed on the page.
