Your First Dash App with Mito
A Quickstart guide to creating your first Dash app with the Mito Spreadsheet.
The easiest way to create your first Dash application with Mito is to try things yourself. Dash has a plesant developer experience, for each edit you make to your code, you can just refresh the page and see your new changes.
In this guide, we're going to use Mito for Dash to create an interactive app that allows users to explore Tesla stock data. We'll do some basic data cleaning, and then perform an analysis that computes the traded volume in the most recent month.
Create your first app
First, create a new Python script. Let's call it
app.py
Open
app.py
in your favorite IDE or text editor, then add these lines:from dash import Dash, callback, Input, Output, html, dcc from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito
Create a Dash application, and activate the Mito spreadsheet on it. This ensures that Mito can correctly behave as a spreadsheet:
app = Dash(__name__) activate_mito(app)
Define the app layout to have a title, a Mito spreadsheet, and a space for some output:
CSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv' app.layout = html.Div([ html.H1("Stock Analysis"), Spreadsheet(CSV_URL, id={'type': 'spreadsheet', 'id': 'sheet'}), html.Div(id='output') ]) if __name__ == '__main__': app.run_server(debug=True)
Now, run this app with
python app.py
A URL should appear in your terminal with the print
Dash is running on http://127.0.0.1:8050/
. Open a web-browser and navigate tohttp://127.0.0.1:8050/
, you'll see the title an a Mitosheet with some data in it!You can begin to edit this data in the Mito sheet as normal - try adding a column and writing a formula.
Showing the code generated by Mito
Now, we'd like the app to display the code that the user generates by editing their analyses:
Add a callback that is triggered from Mito changing, using the
mito_callback
decorator@mito_callback( Output('output', 'children'), Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'), ) def update_code(spreadsheet_result): return html.Div([ html.Code(spreadsheet_result.code()) ]) # NOTE: Make sure this is above the if __name__ == '__main__' line...
Run the app again, reopen the webpage, and then edit the Mitosheet. If you now add a column to the Mitosheet, you will see all the generated code appear in the div below.
All the code together
from dash import Dash, Input, Output, html
from mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito
app = Dash(__name__)
activate_mito(app)
CSV_URL = 'https://raw.githubusercontent.com/plotly/datasets/master/tesla-stock-price.csv'
app.layout = html.Div([
html.H1("Stock Analysis"),
Spreadsheet(CSV_URL, id={'type': 'spreadsheet', 'id': 'sheet'}),
html.Div(id='output')
])
@mito_callback(
Output('output', 'children'),
Input({'type': 'spreadsheet', 'id': 'sheet'}, 'spreadsheet_result'),
)
def update_code(spreadsheet_result):
return html.Div([
html.Code(spreadsheet_result.code())
])
if __name__ == '__main__':
app.run_server(debug=True)
Ready to build some more complex applications? Check out our app gallery:
Dash App GalleryLast updated
Was this helpful?