# -*- 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.
