# -*- coding: utf-8 -*-
import dash_html_components as html
from dash_docs import tools
from dash_docs import reusable_components as rc
examples = tools.load_examples(__file__)
layout = html.Div([
html.H1('dcc.Store'),
rc.Markdown('''
The `dcc.Store` component is used to store JSON data in the browser.
'''),
html.H2('Store clicks example'),
rc.Syntax(examples['store_clicks.py'][0]),
rc.Example(examples['store_clicks.py'][1]),
html.H2('Share data between callbacks'),
rc.Syntax(examples['store_share.py'][0]),
rc.Example(examples['store_share.py'][1]),
rc.Markdown('''
## Storage Limitations
- The maximum browser [storage space](https://demo.agektmr.com/storage/) is determined by the following factors:
- Mobile or laptop
- The browser, under which a sophisticated algorithm is implemented within *Quota Management*
- Storage encoding where UTF-16 can end up saving only half of the size of UTF-8
- It's generally safe to store up to 2MB in most environments, and 5~10MB in most desktop-only applications.
import dash_core_components as dcc
import dash_html_components as html
from dash_docs.tools import load_examples
from dash_docs import reusable_components as rc
examples = load_examples(__file__)
layout = html.Div([
rc.Markdown('''
# Persistence
*New - released September 2019 with Dash 1.3*
Sometimes you want to save things the user has done in your app beyond the
lifetime of the individual affected components. Perhaps you let your users
choose their language, or edit the headers of a table, and they want to see
these same settings every time they load the app. Or perhaps you have a
tabbed app, so a form disappears when you switch to a different tab, and
you want the same settings when the user comes back to that tab, but you
want to reset them if the page is reloaded. There are ways to do this with
`dcc.Store` components, but the Dash `persistence` feature dramatically
simplifies these cases.
Persistence is supported by `dash-table` and all the form-like components
in `dash-core-components`. If you are a component author, it's easy to add
it to your component - see the last section below.
Components that support persistence have three new props:
- **`persistence`** (boolean | string | number; optional): Any truthy value
will enable persistence for this component. Persistence is keyed to the
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import tools
from dash_docs import reusable_components as rc
examples = tools.load_examples(__file__, run=False)
layout = html.Div(children=[
rc.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.
<blockquote>
For a simple example of using memoization in a Dash app to improve
performance, see the "Improving performance with memoization" section
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
from dash_docs import styles
from dash_docs import tools
from dash_docs import reusable_components as rc
examples = tools.load_examples(__file__, omit=['darkthemeprovider_daq.py'])
# BooleanSwitch
BooleanSwitch = html.Div(children=[
html.H1('Boolean Switch Examples and Reference'),
html.Hr(),
html.H3('Default Boolean Switch'),
html.P("An example of a default boolean switch without \
any extra properties."),
rc.Markdown(examples['boolean-switch.py'][0], style=styles.code_container),
html.Div(examples['boolean-switch.py'][1],
className='example-container',
style={'overflow-x': 'initial'}),
html.Hr(),
html.H3('Color'),
rc.Markdown("Set the color of the boolean switch with \
`color=#<hex_value>`."),
rc.ComponentBlock('''import dash_daq as daq
daq.BooleanSwitch(
on=True,
color="#9B51E0",