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