def replace_relative_links(children):
children = re.sub(
']\((\/\S*)\)',
lambda match: ']({})'.format(tools.relpath(match.groups()[0])),
children)
children = re.sub(
'href="(/\S*)"',
lambda match: 'href="{}"'.format(tools.relpath(match.groups()[0])),
children)
return children
def component_list(package,
content_module,
base_url,
import_alias,
component_library,
escape_tags=False):
return [{
'url':
tools.relpath('/{}/{}'.format(base_url, component.lower())),
'name':
'{}.{}'.format(import_alias, component),
'description':
' '.join([
'Official examples and reference documentation for {name}.',
'{which_library}'
]).format(
name='{}.{}'.format(import_alias, component),
component_library=component_library,
which_library=('{name} is a {component_library} component.'.format(
name='{}.{}'.format(import_alias, component),
component_library=component_library,
) if component_library != import_alias else '')).strip(),
'content':
(getattr(content_module, component) if
(content_module is not None
and hasattr(content_module, component)) else html.Div([
html.H1(html.Code('{}.{}'.format(import_alias, component))),
html.H2('Reference & Documentation'),
rc.Markdown(getattr(package, component).__doc__,
escape_tags=escape_tags),
]))
} for component in sorted(dir(package)) if not component.startswith('_')
and component[0].upper() == component[0]]
def display_content(pathname):
if pathname is None or pathname == '/':
return [home, '', {'borderBottom': 'none'}, '', '', DEFAULT_AD['src'], DEFAULT_AD['href']]
pathname = pathname.rstrip('/')
backlinks = create_backlinks(pathname)
def make_page(page_path):
return flat_list(
chapter_index.URL_TO_CONTENT_MAP[page_path],
html.Div(id='wait-for-page-{}'.format(page_path)),
)
if pathname in chapter_index.URL_TO_CONTENT_MAP:
children = make_page(pathname)
elif pathname == '/all':
children = build_all()
else:
warning_box = html.Div(
'Page {} not found'.format(pathname),
className='warning-box'
)
# try to match the head of the path, so we can at least get close
# to where the user was trying to go
parts = pathname.lstrip('/').split('/')
for i in reversed(range(len(parts) - 1)):
partial_path = '/' + '/'.join(parts[:i + 1])
if partial_path in chapter_index.URL_TO_CONTENT_MAP:
return flat_list(warning_box, make_page(partial_path))
children = flat_list(warning_box, home)
# update the sidebar ad
ad = DEFAULT_AD['src']
adhref = DEFAULT_AD['href']
if (pathname in chapter_index.URL_TO_META_MAP and
'ad' in chapter_index.URL_TO_META_MAP[pathname]):
ad = tools.relpath('/assets/images/sidebar/{}'.format(
chapter_index.URL_TO_META_MAP[pathname]['ad']
))
adhref = chapter_index.URL_TO_META_MAP[pathname]['adhref']
return [
children,
backlinks,
{'borderBottom': 'thin lightgrey solid'},
backlinks,
'',
ad,
adhref
]
def Chapter(name, href=None, caption=None):
linkComponent = html.A if href.startswith('http') else dcc.Link
return html.Div(className='toc--chapter',
children=[
html.Li(
linkComponent(name,
href=relpath(href),
id=href,
className='toc--chapter-link'), ),
html.Small(className='toc--chapter-content',
children=Markdown(caption or ''),
style={
'display': 'block',
'marginTop': '-10px' if caption else ''
}) if caption else None
])
def component_list(
package, content_module, base_url, import_alias,
component_library, escape_tags=False,
ad='dash-enterprise-kubernetes.jpg',
adhref='https://plotly.com/dash/kubernetes/?utm_source=docs&utm_medium=sidebar&utm_campaign=june&utm_content=kubernetes'):
return [
{
'url': tools.relpath('/{}/{}'.format(base_url, component.lower())),
'name': '{}.{}'.format(import_alias, component),
'description': ' '.join([
'Official examples and reference documentation for {name}.',
'{which_library}'
]).format(
name='{}.{}'.format(import_alias, component),
component_library=component_library,
which_library=(
'{name} is a {component_library} component.'.format(
name='{}.{}'.format(import_alias, component),
component_library=component_library,
) if component_library != import_alias else ''
)
).strip(),
'content': (
getattr(content_module, component)
if (content_module is not None and
hasattr(content_module, component))
else html.Div([
html.H1(html.Code('{}.{}'.format(
import_alias,
component
))),
html.H2('Reference & Documentation'),
rc.Markdown(
getattr(package, component).__doc__,
escape_tags=escape_tags
),
])
),
'ad': ad,
'adhref': adhref
} for component in sorted(dir(package))
if not component.startswith('_') and
component[0].upper() == component[0]
]
def component_list(package,
content_module,
base_url,
import_alias,
escape_tags=False):
return [{
'url':
tools.relpath('/{}/{}'.format(base_url, component.lower())),
'name':
'{}.{}'.format(import_alias, component),
'content':
(getattr(content_module, component) if
(content_module is not None
and hasattr(content_module, component)) else html.Div([
html.H1(html.Code('{}.{}'.format(import_alias, component))),
html.H2('Reference & Documentation'),
reusable_components.Markdown(getattr(package, component).__doc__,
escape_tags=escape_tags),
]))
} for component in sorted(dir(package)) if not component.startswith('_')
and component[0].upper() == component[0]]
Notice how the line graphs on the right update based off of the point that
you are hovering over.
'''),
html.Hr(),
html.H3('Generic Crossfilter Recipe'),
rc.Syntax(examples['crossfilter_recipe.py'][0], summary="""
Here's a slightly more generic example for crossfiltering across
a six-column data set. Each scatter plot's selection filters the
underlying dataset.
"""),
html.Img(
src=tools.relpath('assets/images/gallery/select.gif'),
alt='Dash Data Selection Example',
style={
'width': '100%', 'border': 'thin lightgrey solid',
'border-radius': '4px'
}),
rc.Markdown('''
Try clicking and dragging in any of the plots to filter different regions.
On every selection, the three graph callbacks are fired with the latest
selected regions of each plot. A pandas dataframe is filtered based off
of the selected points and the graphs are replotted with the selected
points highlighted and the selected region drawn as a dashed rectangle.
> As an aside, if you find yourself filtering and visualizing
highly-dimensional datasets, you should consider checking out the
def generate_component_example(component_name,
library_name,
library_short,
description='',
params=None,
style=None,
default_id=True,
datafile=None,
library_imports=None,
setup_code='',
component_wrap=None,
image_info=None):
'''Generate an example for a component, with hyperlinks to the
appropriate component-specific pages.
:param (str) component_name: The name of the component as it is
defined within the package.
:param (str) library_name: The full name of the library (e.g.,
dash_bio).
:param (str) library_short: The short name of the library, used in an
import statement (i.e., import library_name as library_short).
:param (str) description: A short string describing the component.
:param (dict) params: A dictionary that contains the parameters
assigned to the component that is to be displayed as a live
example; the keys correspond to the parameter names.
:param (dict) style: A dictionary that contains any style
options. The keys correspond to the style parameter names.
:param (bool) default_id: Whether or not to assign a default ID to
the component in the example code.
:param (string) datafile: The name of the data file, if any, used
for the component. This file should be present in the folder
specified by the variable DATA_LOCATION_PREFIX.
:param (list[list]) library_imports: A list for which each element
is a list with two elements: the first element should be the full
name of the library, and the second element should be the short
name of the library. Contains all of the libraries necessary for
running the example code (e.g., pandas).
:param (str) setup_code: Any additional code required before
rendering the component (e.g., parsing a data file).
:param (str) component_wrap: A string that will wrap the component
(e.g., if the component needs to be an argument for a dcc.Graph).
The location of the component code is represented by an
underscore (_).
:param (dict) image_info: The URL and, if applicable, the height
and width of the image of the component.
:rtype (list[obj]): A list containing the entire section for the
component in question, including the code block, component demo,
description, and hyperlinks to the component-specific page.
'''
# location of all sample data
DATA_LOCATION_PREFIX = '''https://raw.githubusercontent.com/plotly/\
dash-bio-docs-files/master/'''
if library_imports is None:
library_imports = []
# parameters for initial declaration of component
paramstring = '\n '
if default_id is True:
paramstring += 'id=\'my-{}-{}\', '.format(library_short,
component_name.lower())
if params is not None:
for key in params.keys():
paramstring += '{}={}, '.format(key, params[key])
# style options
if style is not None:
styleString = 'style={\n '
for key in style.keys():
styleString += ' \'{}\': \'{}\', '.format(key, str(style[key]))
# remove comma and space following the last style option
styleString = styleString[:-2]
styleString += '\n }, '
paramstring += styleString
# loading data if necessary
if datafile is not None:
library_imports.append(['urllib.request', 'urlreq'])
# only decode for python 3
decode_string = ''
if sys.version_info >= (3, 0):
decode_string = '.decode(\"utf-8\")'
# add data location
setup_code = '''\ndata = urlreq.urlopen(\n \"{}\" + \n \"{}\"\n).read(){}\n\n'''.format(
DATA_LOCATION_PREFIX, datafile['name'], decode_string) + setup_code
# declare data in component initialization if necessary
if 'parameter' in datafile.keys():
paramstring += '{}=data, '.format(datafile['parameter'])
# pretty-print param string (spaces for indentation)
paramstring = paramstring.replace(', ', ',\n ')
# remove the characters following the final parameter
# (',\n '), and add unindented newline at end
if (len(paramstring) > 4):
paramstring = paramstring[:-4] + '\n'
# if no params were supplied, remove all newlines
else:
paramstring = ''
# format component string
component_string = '{}.{}({})'.format(library_short, component_name,
paramstring)
# wrap component if necessary
if component_wrap is not None:
component_string = component_wrap.replace('_', component_string)
# add imports
imports_string = ''
for library in library_imports:
if library[0] != library[1]:
imports_string += 'import {} as {}\n'.format(
library[0], library[1])
else:
imports_string += 'import {}\n'.format(library[0])
# change urllib package if necessary (due to Python version)
imports_string = imports_string.replace('urllib.request',
'six.moves.urllib.request')
# full code
example_string = '''import {} as {}
{}
{}
component = {}
'''.format(library_name, library_short, imports_string, setup_code,
component_string)
# load the iframe if that is where the app is
if image_info is not None:
component_demo = imageComponentBlock(example_string, **image_info)
else:
component_demo = rc.ComponentBlock(example_string)
# full component section
return [
html.Hr(),
html.H3(
dcc.Link(component_name,
href=tools.relpath('/{}/{}'.format(
library_name.replace('_', '-'),
component_name.lower())),
id=component_name.replace(' ', '-').lower())),
rc.Markdown(description), component_demo,
html.Br(),
dcc.Link('More {} Examples and Reference'.format(component_name),
href=tools.relpath('/{}/{}'.format(
library_name.replace('_', '-'), component_name.lower())))
]
_This feature was originally sponsored by a customer in Dash v0.42.0 and
was recently improved in Dash v1.16.0 by Community Member [`@jjaraalm`](https://github.com/jjaraalm)
in [#1179](https://github.com/plotly/dash/pull/1179). Many thanks `@jjaraalm`!_
**Screenshot**
***
**60 second demo video (no sound)**
'''),
html.Video(style={'maxWidth': '100%'}, controls=True, children=[
html.Source(src=tools.relpath('/assets/images/devtools/callback-graph.mp4'), type='video/mp4'),
html.P([
"Your browser doesn't support HTML5 video. Here is a ",
html.A('link to the video', href=tools.relpath('/assets/images/devtools/callback-graph.mp4')),
'instead.'
])
]),
dcc.Markdown('''
The Dash Dev Tools Callback Graph provides **Live Introspection**,
**Profiling**, and **Live Debuging** of your callback graph.
This includes:
- The **rounded green boxes** represent your **callback functions**:
- The top number represents the number of times the function has been called
The final callback displays the selected `value` of each component.
If you change the `value` of the countries `RadioItems` component, Dash
will wait until the `value` of the cities component is updated
before calling the final callback. This prevents your callbacks from being
called with inconsistent state like with `"America"` and `"Montréal"`.
'''),
reusable_components.Markdown('''
### Summary
We've covered the fundamentals of callbacks in Dash.
Dash apps are built off of a set
of simple but powerful principles: declarative UIs that are customizable
through reactive and functional Python callbacks.
Every element attribute of the declarative components can be updated
through a callback and a subset of the attributes, like the `value`
properties of the `dcc.Dropdown`, are editable by the user in the
interface.
***
'''),
reusable_components.Markdown('''
The next part of the Dash tutorial covers additional concepts of
Dash callbacks: `State` and `PreventUpdate`
'''),
dcc.Link('Dash Tutorial Part 4: More about callbacks',
href=tools.relpath("/state"))
])
# -*- coding: future_fstrings -*-
from dash_docs import reusable_components as rc
import dash_html_components as html
from dash_docs import tools
import os
base_url = os.environ.get('BASE_URL', 'https://<your-dash-enterprise-server>')
url, domain = tools.get_url_and_domain(base_url)
query_video = html.Video(style={'width': '100%'}, controls=True, autoPlay=True, children=[
html.Source(
src=tools.relpath('/assets/images/gql-api/query.mp4'),
type='video/mp4',
),
])
api_reference_video = html.Video(style={'width': '100%'}, controls=True, autoPlay=True, children=[
html.Source(
src=tools.relpath('/assets/images/gql-api/api-reference.mp4'),
type='video/mp4',
),
])
mutation_video = html.Video(style={'width': '100%'}, controls=True, autoPlay=True, children=[
html.Source(
src=tools.relpath('/assets/images/gql-api/mutation.mp4'),
type='video/mp4',
),
])
},
'ToggleSwitch': {
'description':
'''A switch component that toggles between \
two values.'''
},
}
layout_children = generate_docs('dash-daq', 'daq', daq_library_heading,
dash_daq_components)
layout_children.insert(1, daq_install_instructions)
dtp = load_example(
'dash_docs/chapters/dash_daq/examples/darkthemeprovider_daq.py')
layout_children += [
html.Hr(),
html.H3(
dcc.Link('DarkThemeProvider',
href=tools.relpath('/dash-daq/darkthemeprovider'))),
rc.Markdown('''A component placed at the root of the component \
tree to make all components match the dark theme. '''),
rc.Markdown(dtp[0], style=styles.code_container),
html.Div(dtp[1]),
dcc.Link('More DarkThemeProvider Examples and Reference',
href='dash-daq/darkthemeprovider'),
]
layout = html.Div(className="gallery", children=layout_children)
'outline': 'none',
'padding': '.55rem 1.22rem',
'margin-right': '5px',
'text-align': 'center',
'verticalAlign': 'middle',
'text-decoration': 'none',
'text-transform': 'uppercase',
'transition': 'background-color .2s ease-in-out'
}),
]),
]))
DEFAULT_AD = dict(
alt="📊 Dash 2.0 is Arriving.",
src=tools.relpath(
'https://images.prismic.io/plotly-marketing-website/5f7280e4-3f69-4e8b-b024-3e0e7976820e_Dash-2-sidebar_ads_5-24.jpeg?auto=compress,format'
),
href='https://go.plotly.com/announcing-dash-2')
app.title = 'Dash User Guide and Documentation - Dash by Plotly'
app.layout = html.Div([
# div used in tests
html.Div(id='wait-for-layout'),
dcc.Location(id='location', refresh=False),
header,
html.Div(className='content-wrapper',
children=[
html.Div([
dugc.Sidebar(urls=SIDEBAR_INDEX),
html.A(html.Img(id='sidebar-image-img',
_This feature was originally sponsored by a customer in Dash v0.42.0 and
was recently improved in Dash v1.16.0 by Community Member [`@jjaraalm`](https://github.com/jjaraalm)
in [#1179](https://github.com/plotly/dash/pull/1179). Many thanks `@jjaraalm`!_
**Screenshot**
***
**60 second demo video (no sound)**
'''),
html.Video(style={'maxWidth': '100%'},
controls=True,
children=[
html.Source(src=tools.relpath(
'/assets/images/devtools/callback-graph.mp4'),
type='video/mp4'),
html.P([
"Your browser doesn't support HTML5 video. Here is a ",
html.A(
'link to the video',
href=tools.relpath(
'/assets/images/devtools/callback-graph.mp4')),
'instead.'
])
]),
dcc.Markdown('''
The Dash Dev Tools Callback Graph provides **Live Introspection**,
**Profiling**, and **Live Debuging** of your callback graph.
This includes:
pip install dash=={}
```
'''.format(
dash.__version__,
dash_daq.__version__
), style=styles.code_container),
reusable_components.Markdown('''
> **Note**: starting with dash 0.37.0, dash automatically installs dash-renderer, dash-core-components,
> dash-html-components, and dash-table, using known-compatible versions of each. You need not and
> should not install these separately any longer, only dash itself.
'''),
html.Div([
'Ready? Now, let\'s ',
dcc.Link('make your first Dash app', href=tools.relpath('/getting-started')),
'.'
]),
html.Hr(),
reusable_components.Markdown('''
> A quick note on checking your versions and on upgrading.
> These docs are run using the versions listed above and these
> versions should be the latest versions available.
> To check which version that you have installed, you can run e.g.
> ```
> >>> import dash_core_components
> >>> print(dash_core_components.__version__)
> ```
> To see the latest changes of any package, check the GitHub repo's CHANGELOG.md file:
src=
"https://ghbtns.com/github-btn.html?user=plotly&repo=dash&type=star&count=true&size=small",
style={
'border': 'none',
'height': '30px',
'verticalAlign': 'middle',
'marginTop': '9px',
'width': '105px'
}),
])
]))
DEFAULT_AD = dict(
alt=
'Ad for Dash Enterprise: A Kubernetes platform for rapid Dash app deployment.',
src=tools.relpath('/assets/images/sidebar/dash-enterprise-kubernetes.jpg'),
href=
'https://plotly.com/dash/kubernetes/?utm_source=docs&utm_medium=sidebar&utm_campaign=june&utm_content=kubernetes'
)
app.title = 'Dash User Guide and Documentation - Dash by Plotly'
app.layout = html.Div([
# div used in tests
html.Div(id='wait-for-layout'),
dcc.Location(id='location', refresh=False),
header,
html.Div(className='content-wrapper',
children=[
html.Div([
dugc.Sidebar(urls=SIDEBAR_INDEX),
so install and upgrade frequently.
Python 2 and 3 are supported.'''),
reusable_components.Markdown('''
```shell
pip install dash=={}
```
'''.format(dash.__version__, dash_daq.__version__),
style=styles.code_container),
reusable_components.Markdown('''
> **Note**: starting with dash 0.37.0, dash automatically installs dash-renderer, dash-core-components,
> dash-html-components, and dash-table, using known-compatible versions of each. You need not and
> should not install these separately any longer, only dash itself.
'''),
html.Div([
'Ready? Now, let\'s ',
dcc.Link('make your first Dash app', href=tools.relpath('/layout')),
'.'
]),
html.Hr(),
reusable_components.Markdown('''
> A quick note on checking your versions and on upgrading.
> These docs are run using the versions listed above and these
> versions should be the latest versions available.
> To check which version that you have installed, you can run e.g.
> ```
> >>> import dash_core_components
> >>> print(dash_core_components.__version__)
> ```
> To see the latest changes of any package, check the GitHub repo's CHANGELOG.md file:
> - [dash & dash-renderer changelog](https://github.com/plotly/dash/blob/master/CHANGELOG.md)
> - `dash-renderer` is a separate package installed automatically with
app.layout = ddk.App(show_editor=True, children=[
ddk.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict("rows"),
editable=True
)
])
if __name__ == '__main__':
app.run_server(debug=True)
```
'''),
html.P('Default Theme'),
html.Img(src=tools.relpath(
'/assets/images/ddk/table-default.png')),
html.P('Neptune Theme'),
html.Img(src=tools.relpath(
'/assets/images/ddk/table-neptune.png')),
html.P('Miller Theme'),
html.Img(src=tools.relpath(
'/assets/images/ddk/table-miller.png')),
html.P('Mercury Theme'),
html.Img(src=tools.relpath(
'/assets/images/ddk/table-mercury.png')),
html.P('Design Kit Theme Editor'),
html.Img(src=tools.relpath(
'/assets/images/ddk/theme-editor.png')),
]),
])
]),
- Once the computation is complete, the signal is sent and four callbacks
are executed in parallel to render the graphs.
Each of these callbacks retrieves the data from the
“global store”: the Redis or filesystem cache.
- I’ve set processes=6 in app.run_server so that multiple callbacks
can be executed in parallel. In production, this is done with
something like $ gunicorn --workers 6 --threads 2 app:server
- Selecting a value in the dropdown will take less than five seconds
if it has already been selected in the past.
This is because the value is being pulled from the cache.
- Similarly, reloading the page or opening the app in a new window
is also fast because the initial state and the initial expensive
computation has already been computed.
'''),
html.Div(children=html.Img(
src=tools.relpath('assets/images/gallery/caching.gif'),
alt='Example of a Dash App that uses Caching'),
className="gallery"),
Syntax(summary="Here's what this example looks like in code:",
children='''
import os
import copy
import time
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import pandas as pd
from dash.dependencies import Input, Output
> Not sure what meta tags are?
> [Check out this tutorial on meta tags and why you might want to use them](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML).
To add custom meta tags to your application, you can always override Dash's
HTML Index Template. Alternatively, Dash provides a shortcut:
you can specify meta tags directly in the Dash constructor:
'''),
rc.Markdown('```python \n' + examples['dash-meta-tags'] + ' \n```',
style=styles.code_container),
rc.Markdown('''
If you inspect the source of your app, you should see the meta tags appear:
'''),
html.Img(alt='Dash App with Custom Meta Tags',
src=relpath('assets/images/gallery/external-resources-head.png')),
rc.Markdown('''
***
## Serving Dash's Component Libraries Locally or from a CDN
**Changed in Dash 1.0.0 - now `serve_locally` defaults to `True`,
previously it defaulted to `False`**
Dash's component libraries, like `dash_core_components` and `dash_html_components`,
are bundled with JavaScript and CSS files. Dash automatically checks with
component libraries are being used in your application and will automatically
serve these files in order to render the application.
By default, dash serves the JavaScript and CSS resources from the
app.layout = ddk.App(show_editor=True, children=[
ddk.Header([ddk.Title('Hello Dash')]),
ddk.Card(children=[
ddk.CardHeader(title='Dash: A Web application framework for Python.'),
ddk.Graph(figure=fig)
])
])
if __name__ == '__main__':
app.run_server(debug=True)
'''
),
html.P('Default Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/layout-default.png')),
html.P('Mars Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/layout-mars.png')),
html.P('Neptune Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/layout-neptune.png')),
html.P('Miller Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/layout-miller.png')),
html.P('Extrasolar Theme'),
html.Img(src=tools.relpath('/assets/images/ddk/layout-extrasolar.png')),
html.P('Design Kit Theme Editor'),
html.Img(src=tools.relpath('/assets/images/ddk/theme-editor.png')),
]
)
]),
def generate_code_container(component_name,
library_name,
library_short,
default_id=True,
description='',
props=None,
style=None):
'''
Generates a section for the component specified, including pretty-printed
code containing top-level props (not dicts) and style dictionaries.
:param (str) component_name: The component name in camelcase with the first
letter also capitalized.
:param (str) library_name: Name of the library the component belongs to,
with words separated by dashes ('-').
:param (str) library_short: A short name for the library (e.g., "dcc").
:param (bool) default_id: Whether or not to generate an id for the
component. Can be useful for custom styling.
:param (dict) props: A dictionary of the component's keys and the values
corresponding to those keys.
:param (dict) style: A dictionary that determines the styling of the
component, if 'style' is a property of that component.
(Will fail if this is not true.)
'''
propString = '\n '
if (default_id):
propString += 'id=\'my-{}-{}\', '.format(library_short,
component_name.lower())
if props is not None:
for key in props.keys():
propString += '{}={}, '.format(key, props[key])
if style is not None:
styleString = 'style={\n '
for key in style.keys():
styleString += ' \'{}\': \'{}\', '.format(key, str(style[key]))
styleString = styleString[:-2]
styleString += '\n }, '
propString += styleString
propString = propString.replace(', ', ',\n ')
if (len(propString) > 4):
propString = propString[:-4] + '\n'
else:
propString = ''
example_string = '''import {} as {}
{}.{}({})'''.format(library_name.replace('-', '_'), library_short,
library_short, component_name, propString)
return [
html.Hr(),
html.H3(
dcc.Link(component_name,
href=tools.relpath('/{}/{}'.format(
library_name, component_name.lower())),
id=component_name.replace(' ', '-').lower())),
rc.Markdown(description),
rc.ComponentBlock(example_string),
html.Br(),
dcc.Link('More {} Examples and Reference'.format(component_name),
href=tools.relpath('/{}/{}'.format(library_name,
component_name.lower())))
]
Syntax(examples['basic-state'][0]),
Example(examples['basic-state'][1]),
reusable_components.Markdown('''
In this example, changing text in the `dcc.Input` boxes won't fire
the callback but clicking on the button will. The current values of
the `dcc.Input` values are still passed into the callback even though
they don't trigger the callback function itself.
Note that we're triggering the callback by listening to the
`n_clicks` property of the `html.Button` component. `n_clicks` is a
property that gets incremented every time the component has been
clicked on. It is available in every component in the
`dash_html_components` library.
## Using PreventUpdate in Callback
In certain situations, you don't want to update the callback output. You can
achieve this by raising a `PreventUpdate` exception in the callback function.
'''),
Syntax(examples['prevent-update-button'][0]),
Example(examples['prevent-update-button'][1]),
reusable_components.Markdown('''
This example illustrates how you can show an error while keeping the previous
input, using `dash.no_update` to update the output partially.
'''),
Syntax(examples['prevent-update'][0]),
Example(examples['prevent-update'][1]),
dcc.Link('Dash Tutorial Part 5. Interactive Graphing',
href=tools.relpath('/interactive-graphing')),
])
The source is on GitHub at [plotly/dash-core-components](https://github.com/plotly/dash-core-components).
These docs are using version {}.
'''.format(dcc.__version__)),
rc.Markdown('''
```py
>>> import dash_core_components as dcc
>>> print(dcc.__version__)
{}
```
'''.format(dcc.__version__),
style=styles.code_container),
html.Hr(),
html.H2(dcc.Link('Dropdown', href=tools.relpath('/dash-core-components/dropdown'))),
rc.ComponentBlock('''import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)''', style=styles.code_container),
rc.ComponentBlock('''import dash_core_components as dcc
dcc.Dropdown(
options=[
(the last part of the URL) of the page. The callback simply displays the
`pathname` on page but it could use the `pathname` to display different
content.
The `Link` element updates the `pathname` of the browser _without refreshing the
page_. If you used a `html.A` element instead, the `pathname` would update but
the page would refresh.
Here is a GIF of what this example looks like. Note how clicking on the `Link`
doesn't refresh the page even though it updates the URL!
'''),
html.Img(
alt=
'Example of a multi-page Dash app using the Location and Link components',
src=tools.relpath('assets/images/gallery/url-support.gif')),
reusable_components.Markdown('''
***
You can modify the example above to display different pages depending on the URL:
'''),
reusable_components.Markdown('''
```python
import dash
import dash_core_components as dcc
import dash_html_components as html
print(dcc.__version__) # 0.6.0 or above is required
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
#### Core Components
The `dash_core_components` includes a set of higher-level components like
dropdowns, graphs, markdown blocks, and more.
Like all Dash components, they are described entirely declaratively.
Every option that is configurable is available as a keyword argument
of the component.
'''),
html.P([
'''
We'll see many of these components throughout the tutorial.
You can view all of the available components in the
''',
dcc.Link('Dash Core Components Gallery',
href=tools.relpath('/dash-core-components'))
]),
rc.Syntax(
examples['getting_started_core_components.py'][0],
summary=
"Here are a few of the available components. Create a file named `app.py` with the following code:"
),
html.Div(examples['getting_started_core_components.py'][1],
className="example-container"),
rc.Markdown('''
#### Calling `help`
Dash components are declarative: every configurable aspect of these
components is set during instantiation as a keyword argument.
Call `help` in your Python console on any of the components to
`dash.testing` \U0001f9ea provides some off-the-rack
`pytest` [fixtures](https://docs.pytest.org/en/latest/fixture.html)
and a minimal set of testing **APIs** with our internal crafted
best practices at the integration level.
This tutorial does not intend to cover the usage of
[pytest](https://docs.pytest.org/en/latest/) and
[Selenium WebDriver](https://www.seleniumhq.org/projects/webdriver/),
but focuses on how to do a simple integration test with Dash by hosting
the App server locally and using a Selenium WebDriver to simulate
the interaction inside a web browser.
"""),
html.Img(alt='demo',
src=tools.relpath('assets/images/gallery/dash-testing.gif')),
rc.Markdown("""
## Install
The Dash testing is now part of the main Dash package. After
`pip install dash[testing]`, the Dash `pytest` fixtures are available, you
just need to install the WebDrivers or use a remote Selenium-Grid and you
are ready to test.
- [Chrome Driver](http://chromedriver.chromium.org/getting-started)
- [Firefox Gecko Driver](https://github.com/mozilla/geckodriver/releases)
FYI, We run Dash integration tests with Chrome WebDriver.
But the fixture allows you to choose another browser from the command line,
e.g. `pytest --webdriver Firefox -k bsly001`.
'padding': '.55rem 1.22rem',
'margin-right': '5px',
'text-align': 'center',
'verticalAlign': 'middle',
'text-decoration': 'none',
'text-transform': 'uppercase',
'transition': 'background-color .2s ease-in-out'
}),
]),
]))
DEFAULT_AD = dict(
alt=
"⚾️ It's finally baseball season! Root for your home team! Register today for our Sports Analytics Webinar on April 21st!",
src=tools.relpath(
'https://images.prismic.io/plotly-marketing-website/6fc81948-6832-45b5-9ab7-cf3ca93275b1_sidebar_ads_4-7-21.jpeg?auto=compress,format'
),
href='https://go.plotly.com/sports-analytics')
app.title = 'Dash User Guide and Documentation - Dash by Plotly'
app.layout = html.Div([
# div used in tests
html.Div(id='wait-for-layout'),
dcc.Location(id='location', refresh=False),
header,
html.Div(className='content-wrapper',
children=[
html.Div([
dugc.Sidebar(urls=SIDEBAR_INDEX),
html.A(html.Img(id='sidebar-image-img',
#### Core Components
The `dash_core_components` includes a set of higher-level components like
dropdowns, graphs, markdown blocks, and more.
Like all Dash components, they are described entirely declaratively.
Every option that is configurable is available as a keyword argument
of the component.
'''.replace(' ', '')),
html.P(['''
We'll see many of these components throughout the tutorial.
You can view all of the available components in the
''', dcc.Link(
'Dash Core Components Gallery',
href=tools.relpath('/dash-core-components')
)]),
Syntax(
examples[5][0],
summary="Here are a few of the available components:"),
html.Div(examples[5][1], className="example-container"),
reusable_components.Markdown('''
#### Calling `help`
Dash components are declarative: every configurable aspect of these
components is set during instantiation as a keyword argument.
Call `help` in your Python console on any of the components to
from dash_canvas import DashCanvas
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import dash_daq as daq
from dash_docs import tools
filename = tools.relpath(
'assets/images/gallery/flower-outline-coloring-page.jpg')
canvas_width = 300
app = dash.Dash(__name__)
app.layout = html.Div([
html.Div([
DashCanvas(
id='canvas-color',
width=canvas_width,
filename=filename,
hide_buttons=['line', 'zoom', 'pan'],
)
],
className="six columns"),
html.Div([
html.H6(children=['Brush width']),
dcc.Slider(id='bg-width-slider', min=2, max=40, step=1, value=5),
daq.ColorPicker(
id='color-picker', label='Brush color', value=dict(hex='#119DFF')),
],
className="three columns"),
