facultyai / dash-bootstrap-components Goto Github PK
View Code? Open in Web Editor NEWBootstrap components for Plotly Dash
Home Page: https://dash-bootstrap-components.opensource.faculty.ai/
License: Apache License 2.0
Bootstrap components for Plotly Dash
Home Page: https://dash-bootstrap-components.opensource.faculty.ai/
License: Apache License 2.0
Events are being removed from Dash.
We should remove them from the source and documentation.
When trying to release 0.2.6, I noticed that our release scripts were broken because the master branch was protected. At the moment, our release script:
invoke release 0.2.6
invoke postrelease 0.2.6
.I temporarily removed the restriction, pushed and re-enabled it afterwards.
I'm not sure who enabled the branch restriction. To fix this permanently, we can do one of:
The current state of the docstrings could be improved. A few props on some components have no documentation, and many have fairly uninformative sentence fragment descriptions. We should do a pass of all the components to clarify and unify the documentation.
We should document how to use the custom CSS added by #147
The pypi landing page doesn't look great at the moment. Adding a long_description
would go a long way towards solving this.
#152 added tab_style
and label_style
props to Tab
. We should add an example demonstrating their use to the docs.
Add DatePicker components that style themselves with relevant bootstrap classes (such as form-control
) rather than having the styles hard coded. This will better support use with Bootswatch and other non-default Bootstrap stylesheets.
See also #122
The progress bar component occasionally triggers an error -- I think when it's first loaded. This is the stack trace.
Traceback (most recent call last):
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 2309, in __call__
return self.wsgi_app(environ, start_response)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 2295, in wsgi_app
response = self.handle_exception(e)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1741, in handle_exception
reraise(exc_type, exc_value, tb)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/_compat.py", line 35, in reraise
raise value
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 2292, in wsgi_app
response = self.full_dispatch_request()
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1815, in full_dispatch_request
rv = self.handle_user_exception(e)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1718, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/_compat.py", line 35, in reraise
raise value
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1813, in full_dispatch_request
rv = self.dispatch_request()
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/flask/app.py", line 1799, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/dash/dash.py", line 962, in dispatch
return self.callback_map[target_id]['callback'](*args)
File "/opt/anaconda/envs/Python3/lib/python3.6/site-packages/dash/dash.py", line 902, in add_context
output_value = func(*args, **kwargs)
File "<string>", line 17, in advance_progress
TypeError: unsupported operand type(s) for %: 'NoneType' and 'int'
I haven't had time to investigate, but I suspect we don't catch the initial None in the callback.
The example app on the docs homepage uses docs-content
CSS class to add margins, which is not documented and part of the documentation app's internal stylesheet. It should be changed to use Bootstrap classes.
This was spotted by ndbcorp on the Plotly forums
Install dash>=0.31.1 then add this command to package.json
:
"build:py": "dash-generate-components ./src/lib/components dash_bootstap_components"
Dash must be installed on the current environment when you run the command. Or you can make sure the environment is activated with this, assuming you have a venv directory in the project root:
(. venv/bin/activate || venv\\scripts\\activate && dash-generate-components ./src/lib/components dash_bootstap_components)
Then change dash_bootstrap_components/__init__.py
to:
from __future__ import print_function as _
import os as _os
import sys as _sys
import json
import dash as _dash
# noinspection PyUnresolvedReferences
from ._imports_ import *
from ._imports_ import __all__
if not hasattr(_dash, 'development'):
print('Dash was not successfully imported. '
'Make sure you don\'t have a file '
'named \n"dash.py" in your current directory.', file=_sys.stderr)
_sys.exit(1)
_basepath = _os.path.dirname(__file__)
_filepath = _os.path.abspath(_os.path.join(_basepath, 'package.json'))
with open(_filepath) as f:
package = json.load(f)
package_name = package['name'].replace(' ', '_').replace('-', '_')
__version__ = package['version']
_current_path = _os.path.dirname(_os.path.abspath(__file__))
_this_module = _sys.modules[__name__]
_js_dist = [
{
'relative_package_path': 'dash_bootstap_components.min.js',
'dev_package_path': 'dash_bootstap_components.dev.js',
'external_url': 'https://unpkg.com/{0}@{2}/{1}/{1}.min.js'.format(
package_name, __name__, __version__),
'namespace': package_name
}
]
_css_dist = []
for _component in __all__:
setattr(locals()[_component], '_js_dist', _js_dist)
setattr(locals()[_component], '_css_dist', _css_dist)
Please commit all the files generated (metadata.json
, _imports_.py
, bundles).
Reactstrap supports dropdowns in input groups (see docs, for instance) via the InputGroupButtonDropdown
component.
This just passes an addonType
prop to a Dropdown
component. See:
InputGroupButtonDropdown
sourceaddonType
prop.I think the easiest would be to add an addonType
prop to Dropdown
. I don't think we need to replicate InputGroupButtonDropdown
, since it just wraps Dropdown
and we would need to copy all the prop types.
Happy to implement this if we think it's the right thing to do. If we do this, we should amend the documentation on input groups (PR #51 ) to document dropdowns.
Using dash-bootstrap-component 0.3.5
Dash's dcc.Dropdown doesn't style easily, at least from my experience.
Is there a way to add a dbc dropdown component that can change the size and appearance in the same way that input does for dcc.Input?
Hi,
Is it possible to add icon support in next release? Similar to what shiny button supports.
Hi,
Really awesome and helpful project!
I'm just a little confused at designing a multi-page app using your NavBar bootstrap component. I'm using Dash's structure currently to do so; specifically, the app1-app2 example toward the bottom of the page.
My question is this: If I want the same NavBar component on every page, do I need to copy/paste the NavBar component with a slightly different class name (NavBar app1, NavBar app2, etc) and then define a callback on each page? Or do you guys offer a way around that?
An R interface for Dash is in development, it would be cool if we supported this. A cursory look at the dash-core-components repo suggest it may not be too much extra work?? Perhaps those will be famous last words.
Hi,
Is there plan to add something like this?
twbs/bootstrap#15783
Hi, I'm not sure if I'm missing an obvious solution to this, but it seems like as currently written the Navbar brand has to be a string, even though the NavbarBrand component itself could in principle contain other items as children (eg an Html.Img)?
I'm looking for an easy way to add a left-aligned logo to a Navbar instead of only brand text.
Many thanks for releasing this component suite, it looks very useful.
Traceback (most recent call last):
File "run.py", line 3, in
from app import App
File "/project/nadine/dash-bootstrap-components/docs/app.py", line 7, in
from components_page import ComponentsPage
File "/project/nadine/dash-bootstrap-components/docs/components_page/init.py", line 1, in
from .page import ComponentsPage # noqa: F401
File "/project/nadine/dash-bootstrap-components/docs/components_page/page.py", line 5, in
from .alerts_content import content as alerts_content
File "/project/nadine/dash-bootstrap-components/docs/components_page/alerts_content.py", line 3, in
from .api_doc import ApiDoc
File "/project/nadine/dash-bootstrap-components/docs/components_page/api_doc.py", line 4, in
from dash.development.base_component import (
ImportError: cannot import name 'filter_props'
We should add the Apache 2 license.
At the moment, we just use the default Dash favicon. It would be a nice to have a custom one.
... this probably means having some kind of logo.
PR #44 adds isort
configuration. I don't have any strong preferences, but if we think imports should be sorted, should we add isort checks to the CI pipeline?
If some developers use isort and not others, it will lead to confusing diffs.
Hello,
Refer to dash exmaple, click dcc.Link
would trigger Input('url', 'pathname')
callback .
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
dcc.Link('head', href='/'),
html.Br(),
dcc.Link('order_source', href='/order_source'),
html.Div(id='page-content')
])
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
print('Enter : %s' % pathname)
if pathname == '/order_source':
return order_source_statistics.layout
elif pathname == '/apps/app2':
return app2.layout
else:
return 'something'
But this doesn't work in dbc.NavLink('order_source', href='/order_source')
.
external_stylesheets = [dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
navbar = dbc.NavbarSimple(
children=[
dbc.NavItem(dbc.NavLink("aaaa", href="/")),
dbc.NavItem(dbc.NavLink("order_source", href="/order_source")),
],
brand="Demo",
brand_href="#",
sticky="top",
)
....
app.layout = html.Div([
navbar,
body
])
Web app examples are particularly effective at demonstrating what a library can do, and how to do it. Since we have some great examples, it would be beneficial to host them somewhere.
We don't really want to host one different app for each example, though. One idea might be to use different base paths for different apps? E.g.
server = Flask(__name__)
app_iris = Dash(__name__, server, routes_pathname="/iris/" # etc.)
app_faithful = Dash(__name__, server, routes_path_name="/faithful/", # etc.)
I'm not sure whether we can get the above to work.
An alternative would be to have each app running on a different port with either a single webserver in front that loads apps in iframes or a load balancer that proxies to a different upstream depending on the path. I don't know how easy either of these alternatives would be to deploy.
It would be good to add a function to the python module that creates a Table
component from a pandas Dataframe.
DatePickerSingle
and DatePickerRange
work well inside FormGroup
components, but the default styling makes them look a bit out of place when next to Bootstrap themed inputs. For example, they are taller than Bootstrap inputs and don't have rounded corners. It would be good to look into whether we can bundle some CSS that unifies everything.
Currently the pipeline for generating docstrings for each of the components (which is also visible as part of the auto-generated api documentation in the docs app) fails on custom prop-types such as columnProps
as used by Col
. This would be most robustly resolved by adding a handler to the pipeline that can correctly extract and parse the prop type.
The generated bundle is fairly big. I think this is because we include parts of modules that we don't need.
I don't think this is urgent at all, but if we can, it might be worth spending some time understanding how to reduce the bundle size.
Many of the components don't expose key
to the Python interface. This can be useful for, among other things, forcing components to re-render when working with multi-page Dash apps that have multiple pages with similar structures.
When I set the width to over 275px,
like style={'width':'275px','height':'300px'}
popover body will exceed the border.
I am wondering how I could use the Progress component to implement an indeterminate progress bar that shows up when I click a button (which is meant to update a graph) and disappears when the graph is loaded.
The reason I ask this is because I have an application where a button-click is supposed to retrieve data from a database, which can take an unknown amount of time. During that waiting period I would like to see the progress bar.
I can kind of simulate an indeterminate progress bar by setting the value to 100 from the start and setting animated to True. But I am having difficulties making the progressbar appear right before the data retrieval and disappear right after.
Do you have any idea or suggestions how to tackle this problem?
PS: I discovered the Dash Bootstrap Components module last week and I've been absolutely loving it. It makes the job of developing a good modern looking dashboard so much easier, so thank you to its developers really!
At the moment, only the following input types are allowed:
Reactstrap explicitly supports checkbox and radio inputs as well. Is there a reason those weren't included? There's a comment to the effect that we only want to support types with wide browser support, but checkbox and radio inputs are very widely supported.
Happy to add those in if we think it's useful. If we do this, we should amend the documentation on input groups (PR #51 ) to document dropdowns.
Is it possible to get right-aligned menu on the navbar?
Bootstrap | menu-alignment
It'd be great to be able to write:
external_stylesheets=[dbc.themes.DARKLY]
These two components make our bundle a lot larger through the react-dates
dependency, but ultimately just replicate functionality present in dash-core-components. I think we should kill them and instead encourage use of the dash-core-components version, in conjunction with the CSS being added in #147.
Neither component is explicitly documented (though DatePickerSingle
does appear in the inline form example on the forms page of the docs.). Nevertheless, it would be good to decide on the best way to deprecate these.
I like the style of the DBC Dropdowns compared to the DCC ones. However, the DCC dropdowns display the dropdown item I selected. Was wondering if this feature could be styled into the Bootstrap dropdowns?
Also, it's a little difficult to understand (from the Bootstrap documentation) how a dropdown menu selection can be used to filter graphical information. Would I need to design callbacks on multiple input dropdown menu components using their id property? If you could provide an example on filtering data using callbacks with dropdowns, that would be great!
Otherwise, I really love this project and the work you guys are doing. You're really making designing data dashboards a lot easier for beginners like me!
I tried to use a dbc.Input
with type="textarea"
but found that this didn't seem to apply any attributes/styles to make it emulate the behaviour of an actual textarea
element. So I fell back to using a dcc.Textarea
component with Bootstrap form-control
classes. I'm wondering if there should just be a dbs.Textarea
component or alternatively, making type="textarea"
emulate a textarea
element, if that can be done.
In the button section of the input group docs, the random name button isn't working.
Happy to look into this in the coming days.
This issue is for tracking changes that either need to be made, or can't be made before the release of Dash v1. Most of the changes are the result of Dash v1 (or specifically dash-renderer) supporting React 16, while the current release of Dash does not.
Dropdown
which we use in DropdownMenu
) has switched to using createPortal
which is React 16 only.createPortal
for this). Resolved by #146DropdownMenu
. See #65DropdownMenu
. Resolved by #143, thanks @jmsblah!There are pre-releases out for the v1 series of Dash libraries, so we can already build much of this and test against those then release when they are released. I have a dash-v1
branch open, I propose any of the above changes are PR'd against and merged into that branch.
I have installed dash-bootstrap-components
via Pip, and included the Bootstrap 4 CSS in my project manually (since I don't want to use CDN). When adding a dbc.Button()
to a layout, I get the following error in the browser:
Error loading dependencies
The browser console says:
Error: "dash_bootstrap_components was not found."
I believe we have both been using black for formatting Python source code, and mostly sticking to pep 8. For now, the JS source code is mostly fairly self-consistent.
Would it make sense to adopt a consistent code style through reformatters and CI tests? It'd help outside contributors make pull requests that are visually similar to the current codebase. I suggest:
The timing around this needs to be somewhat well thought through to avoid merge conflicts with existing PRs.
Any thoughts?
Hello @tcbegley
This is the problem I was telling you in my repo.
With the new navBar
component introduced in version 0.3.0
there is a strange behavior when parameter 'nav' is set to True. It adds a point and make the navbar bigger than expected
I would like to set nav=True
so that the dropdown does not appear as a button. Something similar to the navbarSimple
example in the doc.
And here a full example:
from dash import Dash
from dash_bootstrap_components.themes import BOOTSTRAP
import dash_bootstrap_components as dbc
import dash_html_components as html
app = Dash('expensor_personal', external_stylesheets=[BOOTSTRAP])
navbar = dbc.Navbar(
[
dbc.Row(
[
dbc.Col(dbc.NavbarBrand("Dash", className="ml-2")),
],
align="center",
no_gutters=True,
),
dbc.Row(
[
dbc.DropdownMenu(
label="Pages",
children=[
dbc.DropdownMenuItem("Page 1", href="/"),
dbc.DropdownMenuItem("Page 2", href="/"),
],
className="mr-1",
nav=True
),
dbc.Button(
"Button1",
className="mr-1",
),
],
no_gutters=True,
className="ml-auto",
align="center",
)
],
)
app.layout = html.Div([navbar])
if __name__ == '__main__':
app.run_server(debug=True)
Having a development bundle with source maps would make development easier. See issue #93 for an explanation.
The style property that can be set on the Tab item is not used at all.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.