from collections import OrderedDict
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import dash_table
from dash_docs import reusable_components as rc
from dash_docs import datasets
Display = rc.CreateDisplay({
'dash_table': dash_table,
'html': html,
'df': datasets.df_regions,
'df_election': datasets.df_election,
'df_long': datasets.df_long,
'df_long_columns': datasets.df_long_columns,
'df_15_columns': datasets.df_15_columns,
'df_moby_dick': datasets.df_moby_dick,
'df_numeric': datasets.df_numeric,
'pd': pd
})
layout = html.Div(children=[
rc.Markdown('''
# DataTable Height
By default, the table's height will expand in order
to render up to 250 rows.
After 250 rows, the table will display a **pagination** UI
which enables viewing of up to 250 rows at a time.
'''),
double_edged_el = [{'data': {'id': id_}} for id_ in 'ABCD'] + double_edges
directed_edges = [{
'data': {
'id': src + tgt,
'source': src,
'target': tgt
}
} for src, tgt in ['BA', 'BC', 'CD', 'DA']]
directed_elements = [{'data': {'id': id_}} for id_ in 'ABCD'] + directed_edges
Display = rc.CreateDisplay({
'cyto': cyto,
'simple_elements': simple_elements,
'weighted_elements': weighted_elements,
'named_elements': named_elements,
'double_edged_el': double_edged_el,
'directed_elements': directed_elements
})
layout = html.Div([
rc.Markdown('''
# Cytoscape Styling
## The `stylesheet` parameter
Just like how the `elements` parameter takes as an input a list of
dictionaries specifying all the elements in the graph, the stylesheet takes
a list of dictionaries specifying the style for a group of elements, a
class of elements, or a single element. Each of these dictionaries accept
two keys:
'selector': '.red',
'style': {
'background-color': 'red',
'line-color': 'red'
}
},
{
'selector': '.triangle',
'style': {
'shape': 'triangle'
}
}
]
Display = rc.CreateDisplay({
'cyto': cyto,
'my_stylesheet': my_stylesheet
})
layout = html.Div([
rc.Markdown('''
# Cytoscape Elements
## Element Declaration
Each element is defined by a dictionary declaring its purpose and
describing its properties. Usually, you specify what group the
element belongs to (i.e., if it's a node or an edge), indicate what
position you want to give to your element (if it's a node), or what data
it contains. In fact, the `data` and `position` keys are themselves mapped
import dash_html_components as html
import dash_core_components as dcc
import dash_table
from dash_docs import tools
from dash_docs import styles
from dash_docs import reusable_components as rc
examples = tools.load_examples(__file__)
Display = rc.CreateDisplay({
'dash_table': dash_table,
})
layout = html.Div([
rc.Markdown('''
# Editable DataTable
The DataTable is editable. Like a spreadsheet, it can be used
as an input for controlling models with a variable number
of inputs.
This chapter includes recipes for:
- Reading the contents of the DataTable
- Filtering out null values
- Uploading data
- Determining which cell has changed
- Adding or removing columns
- Adding or removing rows
- Clearable, deletable, renamable, and hideable columns
edges = [{
'data': {
'source': source,
'target': target
}
} for source, target in (('van', 'la'), ('la', 'chi'), ('hou', 'chi'),
('to', 'mtl'), ('mtl', 'bos'), ('nyc', 'bos'),
('to', 'hou'), ('to', 'nyc'), ('la', 'nyc'), ('nyc',
'bos'))]
elements = nodes + edges
Display = rc.CreateDisplay({
'cyto': cyto,
'elements': elements,
'math': math,
'nodes': nodes
})
layout = html.Div([
rc.Markdown('''
# Cytoscape Layouts
The layout parameter of `cyto.Cytoscape` takes as argument a
dictionary specifying how the nodes should be positioned on the screen.
Every graph requires this dictionary with a value specified for the
`name` key. It represents a built-in display method, which is one of the
following:
- `preset`
- `random`
- `grid`
'label': 'data(label)'
}
},
{
'selector': 'edge',
'style': {
'line-color': '#A3C4BC'
}
}
]
Display = rc.CreateDisplay({
'cyto': cyto,
'elements': nodes + edges,
'html': html,
'dcc': dcc,
'default_stylesheet': default_stylesheet,
'nodes': nodes,
'edges': edges
})
layout = html.Div([
rc.Markdown('''
# Dash Callbacks for Cytoscape
<dccLink href="/basic-callbacks" children="Dash callbacks"/> allow you to update your
Cytoscape graph via other components like dropdowns, buttons, and sliders.
If you have used Cytoscape.js before, you have probably used event handlers
to interactively update your graph; with Dash Cytoscape, we will instead
use callbacks.
"Southern Vermont",
],
),
])
df_election = pd.DataFrame(data_election)
df_long = pd.DataFrame(
OrderedDict([(name, col_data * 10) for (name, col_data) in data.items()]))
df_long_columns = pd.DataFrame(
{"This is Column {} Data".format(i): [1, 2]
for i in range(10)})
Display = rc.CreateDisplay({
'dash_table': dash_table,
'df': df,
'df_election': df_election,
'df_long': df_long,
'df_long_columns': df_long_columns,
'pd': pd
})
layout = html.Div(children=[
html.H1('DataTable Sizing'),
html.H3('Default Styles'),
rc.Markdown('''
By default, the table will expand to the width of its container.
The width of the columns is determined automatically in order to
accommodate the content in the cells.
'''),
Display('''
dash_table.DataTable(
data=df.to_dict('records'),
'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,
'df_long': datasets.df_long,
'df_long_columns': datasets.df_long_columns,
'df_wide': datasets.df_wide,
'df_gapminder': datasets.df_gapminder,
'df_with_none': datasets.df_with_none,
'pd': pd
})
layout = html.Div(
children=[
rc.Markdown("""
# Conditional Formatting