Comment on page
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.
- 1.First, create a new Python script. Let's call it
app.py
- 2.Open
app.py
in your favorite IDE or text editor, then add these lines:from dash import Dash, callback, Input, Output, html, dccfrom mitosheet.mito_dash.v1 import Spreadsheet, mito_callback, activate_mito - 3.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)
- 4.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)
- 5.Now, run this app withpython app.py
- 6.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! - 7.You can begin to edit this data in the Mito sheet as normal - try adding a column and writing a formula.
Now, we'd like the app to display the code that the user generates by editing their analyses:
- 1.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... - 2.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.
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)