def create_examples(examples_data):
examples = []
for example in examples_data:
examples += [
html.H3(example['param_name'].title()),
dcc.Markdown(example['description']),
ComponentBlock(example['code']),
html.Hr()
]
return examples
dcc.Markdown('''
```
>>> import dash_core_components as dcc
>>> print(dcc.__version__)
{}
```
'''.replace(' ', '').format(dcc.__version__),
style=styles.code_container),
html.Hr(),
html.H3(dcc.Link('Dropdown', href='/dash-core-components/dropdown')),
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),
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'}
],
multi=True,
value="MTL"
dcc.Markdown(examples['dropdown'][0], style=styles.code_container),
html.Div(examples['dropdown'][1],
className='example-container',
style={'overflow-x': 'initial'}),
html.Hr(),
html.H3('Multi-Value Dropdown'),
dcc.Markdown(
"A dropdown component with the `multi` property set to `True` \
will allow the user to select more than one value \
at a time."),
ComponentBlock('''import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'NYC'],
multi=True
)''',
style=styles.code_container),
html.Hr(),
html.H3('Disable Search'),
dcc.Markdown(
"The `searchable` property is set to `True` by default on all \
`Dropdown` components. To prevent searching the dropdown \
value, just set the `searchable` property to `False`. \
Try searching for 'New York' on this dropdown below and compare \
it to the other dropdowns on the page to see the difference."),
ComponentBlock('''import dash_core_components as dcc
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,
iframe_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) iframe_info: The URL and, if applicable, the height
and width of the iframe containing the example.
: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/master/tests/dashbio_demos/sample_data/'''
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(\"{}{}\").read(){}
'''.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)
if sys.version_info < (3, 0):
imports_string = imports_string.replace('urllib.request', 'urllib2')
# 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 iframe_info is not None:
component_demo = IframeComponentBlock(example_string, **iframe_info)
else:
component_demo = ComponentBlock(example_string)
# full component section
return [
html.Hr(),
html.H3(dcc.Link(component_name,
href='/{}/{}'.format(library_name.replace('_', '-'),
component_name.lower())),
id=component_name.replace(' ', '-').lower()),
dcc.Markdown(s(description)), component_demo,
html.Br(),
dcc.Link('More {} Examples and Reference'.format(component_name),
href='/{}/{}'.format(library_name.replace('_', '-'),
component_name.lower()))
]
html.Hr(),
html.H3('Default Boolean Switch'),
html.P("An example of a default boolean switch without \
any extra properties."),
dcc.Markdown(examples['boolean-switch'][0], style=styles.code_container),
html.Div(examples['boolean-switch'][1],
className='example-container',
style={'overflow-x': 'initial'}),
html.Hr(),
html.H3('Color'),
dcc.Markdown("Set the color of the boolean switch with \
`color=#<hex_value>`."),
ComponentBlock('''import dash_daq as daq
daq.BooleanSwitch(
on=True,
color="#9B51E0",
)''',
style=styles.code_container),
html.Hr(),
html.H3('Label'),
dcc.Markdown(
"Set the label and label position using the `label` and `labelPosition` \
properties."),
ComponentBlock('''import dash_daq as daq
daq.BooleanSwitch(
on=True,
label="Label",
labelPosition="top"
)''',
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='/{}/{}'.format(
library_name,
component_name.lower())),
id=component_name.replace(' ', '-').lower()),
dcc.Markdown(description),
ComponentBlock(
example_string
),
html.Br(),
dcc.Link('More {} Examples and Reference'.format(component_name),
href='/{}/{}'.format(
library_name,
component_name.lower()))
]
