# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import styles
from dash_docs.tools import load_example, read_file, relpath
from dash_docs import reusable_components as rc
examples = {
'local-css':
load_example('chapters/external_resources/examples/local-css.py',
relative_path=True),
'custom-index-string':
read_file('chapters/external_resources/examples/custom-index-string.py'),
'custom-interpolate-string':
read_file(
'chapters/external_resources/examples/custom-interpolate-string.py'),
'dash-meta-tags':
read_file('chapters/external_resources/examples/dash-meta-tags.py'),
'custom-dash-renderer':
read_file('chapters/external_resources/examples/custom-dash-renderer.py'),
'custom-dash-renderer-hooks':
read_file(
'chapters/external_resources/examples/custom-dash-renderer-hooks.py'),
'external-resources-init':
read_file(
'chapters/external_resources/examples/external-resources-init.py'),
}
layout = html.Div([
html.H1('Adding CSS & JS and Overriding the Page-Load Template'),
import dash_core_components as dcc
from dash_docs.tutorial.components import Syntax
from dash_docs import tools
from dash_docs import reusable_components
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':
tools.read_file('tutorial/examples/performance_flask_caching_dataset.py')
}
layout = [
reusable_components.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.
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import styles
from dash_docs import tools
from dash_docs import reusable_components as rc
examples = tools.load_examples(__file__)
tabs_styled_with_classes_css = tools.read_file(
'assets/tabs-styled-with-classes.css')
layout = html.Div(children=[
html.H1('Tabs Examples and Reference'),
rc.Markdown('''
The `dcc.Tabs` and `dcc.Tab` components can be used to create tabbed sections in your app.
The `dcc.Tab` component controls the style and value of the individual tab
and the `dcc.Tabs` component hold a collection of `dcc.Tab` components.
'''),
html.H2('Method 1. Content as Callback'),
rc.Markdown('''
Attach a callback to the Tabs `value` prop and update a container's `children`
property in your callback.
'''),
rc.Markdown(examples['tabs_callback.py'][0], style=styles.code_container),
html.Div(examples['tabs_callback.py'][1], className='example-container'),
rc.Markdown('''
In the example above, our callback contains all of the content. In practice,
we'll keep the tab's content in separate files and import the data.
For an example, see the <dccLink children="URLs and Multi-Page App Tutorial" href="/urls"/>.
# -*- coding: utf-8 -*-
from collections import OrderedDict
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import numpy as np
import os
import dash_table
from dash_docs import reusable_components as rc
from dash_docs import tools
from dash_docs import datasets
from .heatmap_recipe import discrete_background_color_bins
discrete_background_color_bins_string = tools.read_file(os.path.join(
os.path.dirname(__file__),
'heatmap_recipe.py'
))
from .databars_recipes import data_bars, data_bars_diverging
databars_string = tools.read_file(os.path.join(
os.path.dirname(__file__),
'databars_recipes.py'
))
Display = rc.CreateDisplay({
'discrete_background_color_bins': discrete_background_color_bins,
'data_bars': data_bars,
'data_bars_diverging': data_bars_diverging,
'dash_table': dash_table,
'html': html,
'df_regions': datasets.df_regions,
'df_election': datasets.df_election,
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash_docs import styles
from dash_docs.tools import load_example, read_file, relpath
from dash_docs import reusable_components
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'),
'custom-dash-renderer':
read_file('tutorial/examples/external_css_and_js/custom-dash-renderer.py'),
'custom-dash-renderer-hooks':
read_file(
'tutorial/examples/external_css_and_js/custom-dash-renderer-hooks.py'),
'external-resources-init':
read_file(
'tutorial/examples/external_css_and_js/external-resources-init.py'),
}
layout = html.Div([
html.H1('Adding CSS & JS and Overriding the Page-Load Template'),
reusable_components.Markdown('''