def get_success_card(product):
sdk_endpoint = ''
if product == SNAPSHOT:
sdk_endpoint = [
html.P(' To use the SDK endpoint call: ',
className='card-title mt-3 mb-0',
style={'display': 'inline-block'}),
html.Code(
' curl -F "upload=@my_file.jpg" http://localhost:8080/v1/plate-reader/'
)
]
return dbc.CardBody([
html.
P(f'You can now start {product.capitalize()}. Open a terminal and type the command below. You can save this command for future use.',
className='card-title'),
html.Code(className='card-text d-block', id=f'command-{product}'),
html.Div([
html.Button('copy to clipboard',
id=f'copy-{product}',
**{'data-clipboard-target': f'#command-{product}'},
className='btn btn-sm btn-warning',
style={'borderRadius': '15px'}),
html.Span(id=f'copy-status-{product}',
className='ml-2',
style={
'fontSize': '13px',
'color': 'green'
}),
],
className='mt-3'),
html.P(sdk_endpoint, className='my-0')
])
def doc_signature(obj, method, prefix):
try:
signature = str(inspect.signature(getattr(obj, method)))
except:
signature = ''
try:
name = method.__name__
except:
name = str(method)
if not prefix:
try:
prefix = obj.__name__
except:
prefix = str(obj)
prefix_signature = prefix
return html.Div([
html.H2(html.Code("{}.{}".format(prefix, name)),
className="docs-article",
style={'overflowX': 'auto'}),
html.Pre(
className="docs-article",
children=html.Code("{}.{}{}".format(
prefix_signature,
name,
signature.replace(",", ",\n ").replace(
"(", "(\n ").replace(")", "\n)").replace(
" self,\n", "").replace("\n self\n", ""),
)),
),
])
def display_output(row_update, rows):
return html.Div(
className='row',
children=[
html.Div([
html.Code('row_update'),
html.Pre(json.dumps(row_update, indent=2))
],
className='six columns'),
html.Div([html.Code('rows'),
html.Pre(json.dumps(rows, indent=2))],
className='six columns'),
])
def component_list(package,
content_module,
base_url,
import_alias,
component_library,
escape_tags=False):
return [{
'url':
tools.relpath('/{}/{}'.format(base_url, component.lower())),
'name':
'{}.{}'.format(import_alias, component),
'description':
' '.join([
'Official examples and reference documentation for {name}.',
'{which_library}'
]).format(
name='{}.{}'.format(import_alias, component),
component_library=component_library,
which_library=('{name} is a {component_library} component.'.format(
name='{}.{}'.format(import_alias, component),
component_library=component_library,
) if component_library != import_alias else '')).strip(),
'content':
(getattr(content_module, component) if
(content_module is not None
and hasattr(content_module, component)) else html.Div([
html.H1(html.Code('{}.{}'.format(import_alias, component))),
html.H2('Reference & Documentation'),
rc.Markdown(getattr(package, component).__doc__,
escape_tags=escape_tags),
]))
} for component in sorted(dir(package)) if not component.startswith('_')
and component[0].upper() == component[0]]
def dataset_itemlist(ds):
return [
html.H6(f'{ds.name}'),
html.Code(f'{str(ds)}'),
# dcc.Markdown(f'{ds.description}'),
# *[dcc.Markdown(f'{d}') for d in ds.history],
]
def Argument(argument_name, argument_metadata):
description = argument_metadata.get("description", "")
required = "" if argument_metadata.get("required", False) else ", optional"
argument_type = argument_metadata.get("type", {})
argument_type = js_to_py_type(argument_type)
if argument_type is not None:
type_string = f" ({argument_type}{required})"
else:
type_string = ""
return html.Li(
[html.Code(argument_name),
html.I(type_string), ": ", description])
def decode_text(res, keywords=None):
txt = res['_source']['raw_txt']
if keywords:
parts = [txt]
for kw in keywords:
i = 0
while i < len(parts):
t = parts[i]
if isinstance(t, str):
els = re.split(kw, t, flags=re.IGNORECASE)
new_list = intersperse(els, html.Mark(kw))
parts = parts[:i] + new_list + parts[i + 1:]
i += 1
el = [html.Code(parts)]
else:
el = html.Code(txt)
return html.Pre(el,
style={
"border": "3px",
"border-style": "solid",
"padding": "1em"
})
def details_panel(data):
el_list = []
for c, t in enumerate(data["Tasks"], 1):
el_list.append(html.Code("{} {}".format(t["executable"],
t["options"])))
files = _metrics_file_links(t, data)
if files:
el_list.append(html.Span(files))
if t["status"] >= 0:
el_list.append(
html.Span([" Exit code: ", t["status"], f"({t['elapsed']})"]))
if t["metrics"]:
el_list.append(metric_table(data, t["metrics"]))
el_list.append(html.Hr())
return html.Div([html.H4("Details"), *el_list])
def display_propeties(*args):
return html.Div([
html.Details(
open=True,
children=[
html.Summary(html.Code(prop)),
html.Pre(
str(pprint.pformat(args[i])),
style={
"maxHeight": 200,
"overflowY": "scroll"
},
),
],
) for (i, prop) in enumerate(AVAILABLE_PROPERTIES)
])
def update_output_files(value):
if value:
res = es.get(index=settings['category'], id=value)
return html.Div([
html.H6('DOCUMENT ID:{}'.format(value)),
html.Div(f"filename: {res['_source']['file_name']}"),
html.Div(f"location: {res['_source']['location']}"),
dcc.Link(title=res['_source']['link'],
href=res['_source']['link']),
html.Br(),
html.Pre(decode_text(res)),
html.Br(),
html.Div([html.Code(res['_source']['tags'])],
style={'font-family': 'Courier New'}),
html.Hr()
])
def component_list(
package, content_module, base_url, import_alias,
component_library, escape_tags=False,
ad='dash-enterprise-kubernetes.jpg',
adhref='https://plotly.com/dash/kubernetes/?utm_source=docs&utm_medium=sidebar&utm_campaign=june&utm_content=kubernetes'):
return [
{
'url': tools.relpath('/{}/{}'.format(base_url, component.lower())),
'name': '{}.{}'.format(import_alias, component),
'description': ' '.join([
'Official examples and reference documentation for {name}.',
'{which_library}'
]).format(
name='{}.{}'.format(import_alias, component),
component_library=component_library,
which_library=(
'{name} is a {component_library} component.'.format(
name='{}.{}'.format(import_alias, component),
component_library=component_library,
) if component_library != import_alias else ''
)
).strip(),
'content': (
getattr(content_module, component)
if (content_module is not None and
hasattr(content_module, component))
else html.Div([
html.H1(html.Code('{}.{}'.format(
import_alias,
component
))),
html.H2('Reference & Documentation'),
rc.Markdown(
getattr(package, component).__doc__,
escape_tags=escape_tags
),
])
),
'ad': ad,
'adhref': adhref
} for component in sorted(dir(package))
if not component.startswith('_') and
component[0].upper() == component[0]
]
def render():
element = [
dbc.Alert(
"Each column can only contain floating point numbers between 0 and 4 inclusive. No empty values are allowed.",
color="light"
),
html.A("Download template", className="btn btn-link", href="/static/sample.csv"),
dbc.Col(
dcc.Upload(
id='upload-data',
children=html.Div([
html.Span(
'DRAG AND DROP OR',
className="text-primary",
style={'fontSize': '0.765625rem'}
),
html.Br(),
dbc.Button([
"Click to upload a ", html.Code(" .csv ")," file"
], color="link", className="p-0"),
html.Br(),
html.Small(
'Maximum size: 2MB',
className="text-secondary",
style={'fontSize': '0.765625rem'}
),
]),
style={
'width': '100%',
'borderWidth': '1px',
'borderStyle': 'dashed',
},
className="py-5 text-center",
className_active="bg-secondary",
className_reject="bg-danger text-white",
accept='.csv',
max_size=2000000,
)
),
dbc.Col(html.H3("Data Preview"), className="mt-4"),
dbc.Col(id="batch-preview"),
]
return dbc.Row(element, id="batch-input-container")
def get_graphs(expression):
style = dict()
try:
expr = to_ak_expr(expression)
style["color"] = "#228B22"
return [
html.Div([
html.Code(expr, style=style),
html.Br(),
html.Br(),
html.Code("Result: " + str(df.draw(expression, to_array=True)),
style=style),
])
]
except SyntaxError as e:
style["color"] = "#ff0000"
style["white-space"] = "pre-wrap"
tb = traceback.format_exc()
expr_line, arrow_line, error_line = tb.splitlines()[-3:]
return [
html.Div([
html.Code("SyntaxError:", style=style),
html.Br(),
html.Code(expr_line, style=style),
html.Br(),
html.Code(arrow_line, style=style),
html.Br(),
])
]
except KeyError as e:
style["color"] = "#ff0000"
style["white-space"] = "pre-wrap"
tb = traceback.format_exc()
return [
html.Div([
html.Code(tb.splitlines()[-1], style=style),
html.Br(),
])
]
except:
tb = traceback.format_exc()
out = tb
return [html.Code(out, style=style)]
def component_list(package,
content_module,
base_url,
import_alias,
escape_tags=False):
return [{
'url':
tools.relpath('/{}/{}'.format(base_url, component.lower())),
'name':
'{}.{}'.format(import_alias, component),
'content':
(getattr(content_module, component) if
(content_module is not None
and hasattr(content_module, component)) else html.Div([
html.H1(html.Code('{}.{}'.format(import_alias, component))),
html.H2('Reference & Documentation'),
reusable_components.Markdown(getattr(package, component).__doc__,
escape_tags=escape_tags),
]))
} for component in sorted(dir(package)) if not component.startswith('_')
and component[0].upper() == component[0]]
def switch_results_tab(at):
try:
opls_data = OPLSModel()
theme = get_plot_theme()
if at == 'summary-tab':
return [
dbc.Card(
dbc.CardBody(opls_data.get_summary_tables(theme)))
]
elif at == 'quality-tab':
return [
dbc.Card(
dbc.CardBody(opls_data.get_quality_plots(theme)))
]
elif at == 'kde-tab':
return [
dbc.Card(
dbc.CardBody(
opls_data.get_metric_kde_plots(theme)))
]
elif at == 'feature-significance-tab':
return [
dbc.Card(
dbc.CardBody(
opls_data.get_loading_significance_tables(
theme)))
]
else:
return [dbc.Card(dbc.CardBody(html.H6('Error occurred.')))]
except Exception as e:
log_internal_exception(e)
return [
dbc.Card(
dbc.CardBody([
html.H6('Error occurred.'),
html.Code(traceback.format_exc())
]))
]
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__)
layout = html.Div(children=[
html.H1('Button Examples and Reference'),
html.H2('Button Basic Example'),
rc.Markdown("An example of a default button without any extra properties \
and `n_clicks` in the callback. `n_clicks` is an integer that represents \
that number of times the button has been clicked. Note that the original \
value is `None`."),
rc.Syntax(examples['button_basic.py'][0]),
rc.Example(examples['button_basic.py'][1]),
html.Br(),
html.H2([
'Determining which Button Changed with ',
html.Code('callback_context')
]),
rc.Markdown("This example utilizes the `dash.callback_context` property, \
to determine which input was changed."),
rc.Syntax(examples['button_ctx.py'][0]),
rc.Example(examples['button_ctx.py'][1]),
html.Br(),
html.H2('Button Properties'),
rc.ComponentReference('Button', html)
])
def build_layout():
min_date = db.min_timestamp().isoformat()
max_date = db.max_timestamp().isoformat()
safe_start_date = (datetime.now() -
timedelta(days=1)).replace(microsecond=0).isoformat()
return html.Div([
html.Div(className='header',
children=[
html.H1(children='BitShares Feed Tracker',
style={'text-align': 'center'})
]),
html.Div(
className='container pure-g',
children=[
html.Div(
className='pure-u-1-5',
children=[
html.Form(
className="pure-form-stacked",
children=[
html.Fieldset(children=[
html.Label('Asset:'),
dcc.Dropdown(id='asset-dropdown',
options=[{
'label': asset,
'value': asset
} for asset in
db.list_assets()],
value='CNY'),
html.Label(children='Publishers:'),
dcc.Dropdown(id='publisher-dropdown',
multi=True),
dcc.Checklist(
id='publisher-option',
options=[{
'label': 'All',
'value': 'publishers-all'
}],
labelClassName='pure-checkbox',
labelStyle={'text-align': 'right'},
values=[]),
html.Label(children='From:'),
dcc.Input(id='from-date',
type='datetime-local',
min=min_date,
max=max_date,
value=safe_start_date),
html.Label(children='To:'),
dcc.Input(id='to-date',
type='datetime-local',
min=min_date,
max=max_date,
value=None),
html.Label(children='Additional feeds:'),
dcc.Checklist(
id='feeds-options',
# options = see configure_feeds_options()
labelClassName='pure-checkbox',
values=[]),
])
])
]),
html.Div(id="graph-container",
className='pure-u-4-5',
children=[dcc.Graph(id='price-graph')])
]),
html.Div([
'Made by ',
html.A(href='https://bitsharestalk.org/index.php?topic=26881.0',
title='Please vote to support!',
children=[
html.Code('zapata42-witness'),
]), ' ',
html.
A(href='https://github.com/Zapata/bitshares-pricefeed-tracker',
title='Edit on Github!',
children=[
html.Img(
height=16,
width=16,
src=
"https://unpkg.com/simple-icons@latest/icons/github.svg")
])
],
className='footer')
])
def update_loading(hash_str, message):
displays[hash_str][load_key].append(
html.Code(children='{:<40s}'.format(message)))
import dash_html_components as html
import dash_table
from dash_docs import reusable_components as rc
layout = html.Div([
html.H1(html.Code('dash_table.DataTable')),
rc.ComponentReference('DataTable', dash_table)
])
Numbers can be entered plain (previously they needed to be wrapped in
`num()`):
- `> 5000` in the "gdpPercap" column
- `< 80` in the `lifeExp` column
## Operators
Many operators have two forms: a symbol (`=`) and a word (`eq`) that
can be used interchangeably.
""")),
html.Table([
html.Tr([
html.Td([
html.H4(html.P([html.Code('='), ' ',
html.Code('eq')]),
style={'margin': '0'}),
dcc.Markdown('Default operator for `number` columns')
]),
html.Td(
dcc.Markdown(
dedent("""
Are the two numbers equal? Regardless of type, will first try to
convert both sides to numbers and compare the numbers. If either
cannot be converted to a number, looks for an exact match.
""")))
]),
html.Tr([
html.Td([
html.H4(html.P(html.Code('contains')), style={'margin': '0'}),
collapse_groups = ["Download WhatsApp data", "Run the analysis online", "Or run the analysis locally"]
collapse_content = [
html.Div(
html.H6([
"You can follow ",
html.A("this", href="https://faq.whatsapp.com/android/chats/how-to-save-your-chat-history/?lang=en" , target='_blank'),
" for a guide to download your WhatsApp data",
html.Br(),
html.Br(),
"After exporting the data, place it in an accessible storage where you can upload it unto the website"
])
),
html.Div(
html.H6([
"Click ",
html.Code("Load Sample"),
" to see what the analysis looks like",
html.Br(),
html.Br(),
"When you're ready to upload your own data, press (or drag and drop) the dotted box ",
html.Code("Select Files"),
html.Br(),
html.Br(),
"Note: It may take a while the first few refreshes, after that the website should be faster, since we're caching your data",
html.Br(),
"If your phone's system language is English (UK) or the data is formatted MM/DD/YYYY then click the checkbox beside the upload box"
])
),
html.Div(
html.H6([
"1- Download python (version 3.6 and above should suffice) from ",
def get_content(app):
return [
html.H2("Navbar"),
html.P(
dcc.Markdown(
"There are two navbar components in "
"*dash-bootstrap-components*, `NavbarSimple` and `Navbar`. "
"The `NavbarSimple` component is simpler but less flexible, "
"whereas the `Navbar` component is fully customisable, but "
"requires more boilerplate to get working.")),
html.H4("NavbarSimple"),
html.P(
dcc.Markdown(
"The pre-built `NavbarSimple` consists of a 'brand' on the "
"left, to which you can attach a link with `brand_href`, and "
"a number nav items as its children. You can use a mix of "
"`NavItem` and `DropdownMenu`.")),
html.P(
dcc.Markdown(
"The `NavbarSimple` will collapse on smaller screens, and add "
"a toggle for revealing the navigation items. You can modify "
"which breakpoint the expansion happens at with the `expand` "
"keyword argument. The default is `'md'`.")),
ExampleContainer(navbar_simple),
HighlightedSource(navbar_simple_source),
html.H4("Navbar"),
html.P(
dcc.Markdown(
"If you want to have more control over the layout of your "
"navbar you can use the `Navbar` component. This gives you "
"full control over the children, but you will have to write "
"your own callbacks to achieve things like the toggle "
"behaviour on small screens. We recommend using a `Nav` "
"component to wrap the navigation items, check the "
"[docs here](/l/components/nav).")),
html.P([
"Here is an example of a custom navbar, see the ",
html.Code("examples/"),
" folder on ",
html.A("GitHub", href=GITHUB_EXAMPLES),
" for more.",
]),
ExampleContainer(
load_source_with_environment(navbar_source, "navbar",
{"app": app})),
HighlightedSource(navbar_source),
ApiDoc(
get_component_metadata("src/components/nav/NavbarSimple.js"),
component_name="NavbarSimple",
),
ApiDoc(
get_component_metadata("src/components/nav/Navbar.js"),
component_name="Navbar",
),
ApiDoc(
get_component_metadata("src/components/nav/NavbarBrand.js"),
component_name="NavbarBrand",
),
ApiDoc(
get_component_metadata("src/components/nav/NavbarToggler.js"),
component_name="NavbarToggler",
),
]
| `options` prop.```'''),
style=styles.code_container),
dcc.Markdown('''
### Summary
The `layout` of a Dash app describes what the app looks like.
The `layout` is a hierarchical tree of components.
The `dash_html_components` library provides classes for all of the HTML
tags and the keyword arguments describe the HTML attributes like `style`,
`className`, and `id`.
The `dash_core_components` library generates higher-level
components like controls and graphs.
For reference, see:
'''.replace(' ', '')),
html.Ul([
html.Li(
dcc.Link([html.Code('dash_core_components'), ' gallery'],
href='/dash-core-components')),
html.Li(
dcc.Link([html.Code('dash_html_components'), ' gallery'],
href='/dash-html-components'))
]),
html.P('''
The next part of the Dash tutorial covers how to make these apps
interactive.
'''),
dcc.Link('Dash Tutorial Part 3: Basic Callbacks',
href="/getting-started-part-2")
])
import dash_bootstrap_components as dbc
import dash_html_components as html
cards = html.Div(
[
dbc.Card(
dbc.CardBody(
[
html.H5("75% width card", className="card-title"),
html.P(
[
"This card uses the ",
html.Code("w-75"),
" class to set the width to 75%",
],
className="card-text",
),
]
),
className="w-75 mb-3",
),
dbc.Card(
dbc.CardBody(
[
html.H5("50% width card", className="card-title"),
html.P(
[
"This card uses the ",
html.Code("w-50"),
" class to set the width to 50%",
],
def make_selected_point_display():
return html.Div(
[html.H4('Selected point'),
html.Code(id=Fields.SELECTED_POINT)])
There actually is no `Button` component in `dash_core_components`.
The regular `dash_html_components.Button` component does the job quite well,
but we've included it here because this is the one plain `html` component
that's commonly used as a callback input:
'''),
rc.Markdown(
examples['button.py'][0],
style=styles.code_container
),
html.Div(examples['button.py'][1], className='example-container'),
html.Br(),
dcc.Link('html.Button Reference',
href=tools.relpath("/dash-html-components/button")),
html.P([
'For more on ',
html.Code('dash.dependencies.State'),
', see the tutorial on ',
dcc.Link('basic callbacks', href=tools.relpath('/basic-callbacks')),
'.'
]),
html.Hr(),
html.H2(dcc.Link('DatePickerSingle', href=tools.relpath('/dash-core-components/datepickersingle'))),
rc.ComponentBlock('''import dash_core_components as dcc
from datetime import date
dcc.DatePickerSingle(
id='date-picker-single',
date=date(1997, 5, 10)
)
The `layout` of a Dash app describes what the app looks like.
The `layout` is a hierarchical tree of components.
The `dash_html_components` library provides classes for all of the HTML
tags and the keyword arguments describe the HTML attributes like `style`,
`className`, and `id`.
The `dash_core_components` library generates higher-level
components like controls and graphs.
For reference, see:
'''.replace(' ', '')),
html.Ul([
html.Li(
dcc.Link(
[html.Code('dash_core_components'), ' gallery'],
href=tools.relpath('/dash-core-components')
)
),
html.Li(
dcc.Link(
[html.Code('dash_html_components'), ' gallery'],
href=tools.relpath('/dash-html-components')
)
)
]),
html.P('''
The next part of the Dash tutorial covers how to make these apps
interactive.
'''),
dcc.Markdown(
"Sometimes you may wish to use Bootstrap's grid system for "
"specifying the layout of your app, but you don't want the "
"changes Bootstrap makes to the typography, or to load all "
"the additional CSS classes that Bootstrap specifies. In such "
"a situation, you can link only the CSS required for the grid "
"system using the `themes` module.")),
html.Div(
dcc.SyntaxHighlighter(grid_only_source,
language="python",
useInlineStyles=False),
className="source-container",
),
html.P([
"Alternatively download ",
html.Code("bootstrap-grid.css"),
" from the ",
html.A("Bootstrap website", href=BOOTSTRAP_DOWNLOAD),
" and place it in your app's ",
html.Code("assets/"),
" directory. See the ",
html.A(
"Plotly Dash documentation",
href="https://dash.plot.ly/external-resources",
),
" for details.",
]),
ApiDoc(
get_component_metadata("src/components/layout/Container.js"),
component_name="Container",
),
labelStyle={'display': 'inline-block'}
)''',
style=styles.code_container),
html.Br(),
dcc.Link(html.A('RadioItems Reference'),
href="/dash-core-components/radioitems"),
html.Hr(),
html.H3(dcc.Link('Button', href='/dash-core-components/button')),
dcc.Markdown(examples['button'][0], style=styles.code_container),
html.Div(examples['button'][1], className='example-container'),
html.Br(),
dcc.Link(html.A('More Button Examples and Reference'),
href="/dash-core-components/button"),
html.P([
'For more on ',
html.Code('dash.dependencies.State'), ', see the tutorial on ',
dcc.Link('Dash State', href='/state'), '.'
]),
html.Hr(),
html.H3(
dcc.Link('DatePickerSingle',
href='/dash-core-components/datepickersingle')),
ComponentBlock('''import dash_core_components as dcc
from datetime import datetime as dt
dcc.DatePickerSingle(
id='date-picker-single',
date=dt(1997, 5, 10)
)
''',
style=styles.code_container),
),
dbc.DropdownMenuItem("Entry 4 - does nothing"),
],
),
],
brand="Dash Bootstrap Components",
brand_href=DBC_DOCS,
sticky="top",
)
header = html.Div(
[
html.P(
[
"This app demonstrates components available in ",
html.Code("dash-bootstrap-components"),
]
)
],
className="mt-4",
)
alerts = html.Div(
[
html.H2("Alerts"),
dbc.Alert("This is an alert", color="primary"),
dbc.Alert("Danger!", color="danger"),
]
)
badges = html.Div(
