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** ![The Dash Dev Tools Callback Graph](/assets/images/devtools/callback-graph.png) *** **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** ![The Dash Dev Tools Callback Graph](/assets/images/devtools/callback-graph.png) *** **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"),