# -*- coding: utf-8 -*- from textwrap import dedent as s import dash_core_components as dcc import dash_html_components as html from components import Example, Syntax import tools examples = { 'filesystem-session-cache': tools.load_example( 'tutorial/examples/sharing_state_filesystem_sessions.py') } layout = html.Div([ html.H1('Sharing State Between Callbacks'), dcc.Markdown( s(''' One of the core Dash principles explained in the [Getting Started Guide on Callbacks](/getting-started-part-2) is that **Dash Callbacks must never modify variables outside of their scope**. It is not safe to modify any `global` variables. This chapter explains why and provides some alternative patterns for sharing state between callbacks. ## Why Share State? In some apps, you may have multiple callbacks that depend on expensive data processing tasks like making SQL queries, running simulations, or downloading data.
# -*- coding: utf-8 -*- import dash_core_components as dcc import dash_html_components as html from dash.dependencies import State, Event, Input, Output from server import app import time import styles import tools examples = [ tools.load_example(s) for s in [ 'tutorial/examples/callbacks_with_dependencies.py' ] ] layout = [ dcc.Markdown(''' ## Callback Resolution A core feature in Dash is callback dependency resolution. A common real-world example is with forms. Often, the options of one dropdown depend on the value of another dropdown. A third component might depend on the values of both components. When the first dropdown changes, the second dropdown is triggered to change but the third component shouldn't update until both dropdowns have finished updating.
# -*- coding: utf-8 -*- import dash import dash_renderer import dash_core_components as dcc import dash_html_components as html import plotly from dash.dependencies import Input, Output, Event, State import styles from tools import load_example, merge examples = [ load_example(s) for s in [ 'tutorial/examples/getting_started_layout_1.py', 'tutorial/examples/getting_started_layout_2.py', 'tutorial/examples/getting_started_table.py', 'tutorial/examples/getting_started_viz.py', 'tutorial/examples/getting_started_markdown.py', 'tutorial/examples/getting_started_core_components.py', ] ] layout = html.Div([ dcc.Markdown(''' # Dash Tutorial - Part 1: App Layout This tutorial will walk you through the fundamentals of creating Dash apps through {} self-contained apps. '''.format(len(examples)).replace(' ', '')),
import dash_html_components as html from dash.dependencies import Input, Output, State, Event from pandas_datareader import data as web import core_component_examples as examples from datetime import datetime as dt import plotly.graph_objs as go import json import styles import tools from utils.component_block import ComponentBlock from server import app examples = { 'button': tools.load_example('tutorial/examples/core_components/button.py') } layout = html.Div( className="gallery", children=[ html.H1('Dash Core Components'), dcc.Markdown(''' Dash ships with supercharged components for interactive user interfaces. A core set of components, written and maintained by the Dash team, is available in the `dash-core-components` library. The source is on GitHub at [plotly/dash-core-components](https://github.com/plotly/dash-core-components). These docs are using version {}. '''.replace(' ', '').format(dcc.__version__)),
# -*- coding: utf-8 -*- import dash_core_components as dcc import dash_html_components as html import plotly.graph_objs as go import pandas as pd import styles from datetime import datetime as dt import dash import tools from utils.convert_props_to_table import generate_prop_table from utils.component_block import ComponentBlock examples = { 'date_picker_single': tools.load_example('tutorial/examples/core_components/date_picker_single.py'), 'date_picker_range': tools.load_example('tutorial/examples/core_components/date_picker_range.py'), 'dropdown': tools.load_example('tutorial/examples/core_components/dropdown.py'), 'slider': tools.load_example('tutorial/examples/core_components/slider.py'), 'slider-updatemode': tools.load_example('tutorial/examples/core_components/slider_updatemode.py'), 'rangeslider': tools.load_example('tutorial/examples/core_components/rangeslider.py'), 'rangeslider-nonlinear': tools.load_example('tutorial/examples/core_components/rangeslider_nonlinear.py'), } # Dropdown Dropdown = html.Div(children=[ html.H1('Dropdown Examples and Reference'), html.Hr(), html.H3('Default Dropdown'), html.P("An example of a default dropdown without \ any extra properties."),
import dash_core_components as dcc import dash_html_components as html import plotly.graph_objs as go import pandas as pd import styles from datetime import datetime as dt import dash from textwrap import dedent as s import tools from utils.convert_props_to_table import generate_prop_table from utils.component_block import ComponentBlock from components import Syntax, Example examples = { 'date_picker_single': tools.load_example('tutorial/examples/core_components/date_picker_single.py'), 'date_picker_range': tools.load_example('tutorial/examples/core_components/date_picker_range.py'), 'dropdown': tools.load_example('tutorial/examples/core_components/dropdown.py'), 'slider': tools.load_example('tutorial/examples/core_components/slider.py'), 'slider-updatemode': tools.load_example('tutorial/examples/core_components/slider_updatemode.py'), 'rangeslider': tools.load_example('tutorial/examples/core_components/rangeslider.py'), 'rangeslider-nonlinear': tools.load_example('tutorial/examples/core_components/rangeslider_nonlinear.py'), 'upload-image': tools.load_example('tutorial/examples/core_components/upload-image.py'), 'upload-datafile': tools.load_example('tutorial/examples/core_components/upload-datafile.py'), 'upload-gallery': tools.load_example('tutorial/examples/core_components/upload-gallery.py'), 'confirm': tools.load_example('tutorial/examples/core_components/confirm.py'), 'confirm-provider': tools.load_example('tutorial/examples/core_components/confirm_provider.py'), 'tabs_simple': tools.load_example('tutorial/examples/core_components/tabs_simple.py'), 'tabs_callback': tools.load_example('tutorial/examples/core_components/tabs_callback_graph.py'), }
from pandas_datareader import data as web import core_component_examples as examples from datetime import datetime as dt import plotly.graph_objs as go import json import styles from textwrap import dedent as s import tools from utils.component_block import ComponentBlock from server import app examples = { 'button': tools.load_example('tutorial/examples/core_components/button.py'), 'tabs': tools.load_example('tutorial/examples/core_components/tabs_callback.py') } layout = html.Div( className="gallery", children=[ html.H1('Dash Core Components'), dcc.Markdown(''' Dash ships with supercharged components for interactive user interfaces. A core set of components, written and maintained by the Dash team, is available in the `dash-core-components` library. The source is on GitHub at [plotly/dash-core-components](https://github.com/plotly/dash-core-components).
from textwrap import dedent as s import dash_core_components as dcc import dash_html_components as html from tools import load_example from components import Example, Syntax examples = { 'simple-graph-events': load_example( 'tutorial/examples/graph_callbacks_simple.py'), 'world-indicators': load_example( 'tutorial/examples/getting_started_crossfilter.py' ), 'crossfilter-recipe': load_example( 'tutorial/examples/crossfilter_recipe.py' ) } layout = html.Div([ dcc.Markdown(''' # Interactive Visualizations The `dash_core_components` library includes a component called `Graph`. `Graph` renders interactive data visualizations using the open source [plotly.js](https://github.com/plotly/plotly.js) JavaScript graphing library. Plotly.js supports over 35 chart types and renders charts in both vector-quality SVG and high-performance WebGL. The `figure` argument in the `dash_core_components.Graph` component is the same `figure` argument that is used by `plotly.py`, Plotly's
import dash_core_components as dcc import dash_html_components as html import styles import tools examples = [ tools.load_example(s) for s in [ 'tutorial/examples/basic_callbacks_example_1.py', 'tutorial/examples/basic_callbacks_example_2.py', 'tutorial/examples/basic_callbacks_events.py' ] ] layout = html.Div(children=[ dcc.Markdown(''' ## Interactivity with Callbacks The heart and soul of Dash is providing an easy way to bind Python callbacks to web interfaces. With Dash's callback decorators, you can update certain components when other components change values. Here's a practical example. View the interactive app below the code. '''.replace(' ', '')), dcc.SyntaxHighlighter( examples[0][0], language='python', customStyle=styles.code_container), html.Div('This code will generate an app like this:'), html.Div(examples[0][1], className='example-container') ])
from textwrap import dedent as s import dash_core_components as dcc import dash_html_components as html from components import Example, Syntax import tools examples = { 'basic-input': tools.load_example('tutorial/examples/basic-input.py'), 'basic-state': tools.load_example('tutorial/examples/basic-state.py') } layout = html.Div([ html.H1('Dash State'), dcc.Markdown( s(''' In the previous chapter on [basic dash callbacks](/getting-started-part-2), our callbacks looked something like: ''')), Syntax(examples['basic-input'][0]), Example(examples['basic-input'][1]), dcc.Markdown( s(''' In this example, the callback function is fired whenever any of the attributes described by the `dash.dependencies.Input` change. Try it for yourself by entering data in the inputs above. `dash.dependencies.State` allows you to pass along extra values without firing the callbacks. Here's the same example as above but with the `dcc.Input` as `dash.dependencies.State` and a button as
# -*- coding: utf-8 -*- import dash import dash_renderer import dash_core_components as dcc import dash_html_components as html import plotly from textwrap import dedent as s import styles from tools import load_example examples = [ load_example(example) for example in [ 'tutorial/examples/getting_started_interactive_simple.py', 'tutorial/examples/getting_started_graph.py', 'tutorial/examples/getting_started_multiple_viz.py', 'tutorial/examples/getting_started_multiple_outputs_1.py', 'tutorial/examples/getting_started_callback_chain.py', ] ] layout = html.Div([ dcc.Markdown( s(''' # Basic Dash Callbacks > This is the *3rd* chapter of the [Dash Tutorial](/). > The [previous chapter](/getting-started) covered the Dash app `layout` > and the [next chapter](/state) covers an additional concept of callbacks > known as `state`.
# -*- coding: utf-8 -*- import dash_core_components as dcc import dash_html_components as html from textwrap import dedent as s import styles from tools import load_example, read_file examples = { 'local-css': load_example('tutorial/examples/external_css_and_js/local-css.py'), 'custom-index-string': read_file('tutorial/examples/external_css_and_js/custom-index-string.py'), 'custom-interpolate-string': read_file( 'tutorial/examples/external_css_and_js/custom-interpolate-string.py'), 'dash-meta-tags': read_file('tutorial/examples/external_css_and_js/dash-meta-tags.py'), } layout = html.Div([ html.H1('Adding Local CSS & JS and Overriding the Page-Load Template'), dcc.Markdown( s(''' Dash applications are rendered in the web browser with CSS and JavaScript. On page load, Dash serves a small HTML template that includes references to the CSS and JavaScript that are required to render the application. This chapter covers everything that you need to know about configuring this HTML file and about including external CSS and JavaScript in Dash applications.
# -*- coding: utf-8 -*- import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output, State, Event from pandas_datareader import data as web from datetime import datetime as dt import plotly.graph_objs as go import json from server import app import styles import tools examples = [ tools.load_example(s) for s in ['tutorial/examples/dynamic_content.py'] ] layout = html.Div(children=[ dcc.Markdown(''' ## Loading Content Dynamically Dash callbacks can return any type of property. By returning `children`, they can even dynamically render their content. This is an example that can be used in app development for quicker feedback. Instead of refreshing the page to view your layout, just render the layout as a response to clicking on a button. '''.replace(' ', '')), dcc.SyntaxHighlighter(
# -*- coding: utf-8 -*- import dash_core_components as dcc import dash_html_components as html import styles import tools examples = [ tools.load_example(s) for s in ['tutorial/examples/callbacks_with_dependencies.py'] ] layout = [ dcc.Markdown(''' ## Callback Resolution A core feature in Dash is callback dependency resolution. A common real-world example is with forms. Often, the options of one dropdown depend on the value of another dropdown. A third component might depend on the values of both components. When the first dropdown changes, the second dropdown is triggered to change but the third component shouldn't update until both dropdowns have finished updating. If Dash updated the third component without waiting for the second dropdown to update, then its callback could get called with inconsistent state.
# -*- coding: utf-8 -*- import dash import dash_renderer import dash_core_components as dcc import dash_html_components as html import plotly from dash.dependencies import Input, Output, Event, State import styles from tools import load_example, merge examples = [ load_example(s) for s in [ 'tutorial/examples/getting_started_interactive_simple.py', 'tutorial/examples/getting_started_graph.py', 'tutorial/examples/getting_started_multiple_viz.py', 'tutorial/examples/getting_started_multiple_outputs_1.py', 'tutorial/examples/getting_started_callback_chain.py', 'tutorial/examples/graph_callbacks_simple.py', 'tutorial/examples/getting_started_crossfilter.py' ] ] layout = html.Div([ dcc.Markdown(''' # Dash Tutorial - Part 2: Interactivity This tutorial will walk you through the fundamentals of creating Dash apps
import dash_html_components as html import plotly.graph_objs as go import pandas as pd import styles from datetime import datetime as dt import dash from textwrap import dedent as s import tools from utils.convert_props_to_table import generate_prop_table from utils.component_block import ComponentBlock from components import Syntax, Example examples = { 'date_picker_single': tools.load_example( 'tutorial/examples/core_components/date_picker_single.py'), 'date_picker_range': tools.load_example( 'tutorial/examples/core_components/date_picker_range.py'), 'dropdown': tools.load_example('tutorial/examples/core_components/dropdown.py'), 'slider': tools.load_example('tutorial/examples/core_components/slider.py'), 'slider-updatemode': tools.load_example( 'tutorial/examples/core_components/slider_updatemode.py'), 'rangeslider': tools.load_example('tutorial/examples/core_components/rangeslider.py'), 'rangeslider-nonlinear': tools.load_example( 'tutorial/examples/core_components/rangeslider_nonlinear.py'),
import dash_core_components as dcc import dash_html_components as html from textwrap import dedent as s from tools import load_example from components import Example, Syntax examples = { 'simple-graph-events': load_example('tutorial/examples/graph_callbacks_simple.py'), 'world-indicators': load_example('tutorial/examples/getting_started_crossfilter.py'), 'crossfilter-recipe': load_example('tutorial/examples/crossfilter_recipe.py') } layout = html.Div([ dcc.Markdown(''' # Interactive Visualizations The `dash_core_components` library includes a component called `Graph`. `Graph` renders interactive data visualizations using the open source [plotly.js](https://github.com/plotly/plotly.js) JavaScript graphing library. Plotly.js supports over 35 chart types and renders charts in both vector-quality SVG and high-performance WebGL. The `figure` argument in the `dash_core_components.Graph` component is the same `figure` argument that is used by `plotly.py`, Plotly's open source Python graphing library. Check out the [plotly.py documentation and gallery](https://plot.ly/python)
import dash_core_components as dcc from components import Syntax import tools examples = { 'memoization': tools.load_example('tutorial/examples/performance_memoization.py'), 'performance_flask_caching': tools.load_example('tutorial/examples/performance_flask_caching.py'), 'performance_flask_caching_dataset': open('tutorial/examples/performance_flask_caching_dataset.py').read() } layout = [ dcc.Markdown('''# Performance This chapter contains several recommendations for improving the performance of your dash apps. The main performance limitation of dash apps is likely the callbacks in the application code itself. If you can speed up your callbacks, your app will feel snappier. ### Memoization Since Dash's callbacks are functional in nature (they don't contain any state), it's easy to add memoization caching. Memoization stores the results of a function after it is called and re-uses the result if the function is called with the same arguments.