dawidkopczyk / dash-admin-components

AdminLTE3 Dash components :zap:

dash-admin-components

Creating a fully resposive, beautiful dashboard with Plotly Dash has never been easier!

dash-admin-components relies on shinydashboard implementation of AdminLTE3 template.

It comes with preloaded Bootstrap 4 stylesheet that is fully compatibile with dash-bootstrap-components.

Installation

PyPI

You can install dash-admin-components with pip:

pip install dash-admin-components

Motivation

dash-admin-components was created by Quantee, a company providing statistical and data science solutions in the insurance sector. For our clients, it is extremely important to visualize results from statistical models and we have been looking for a powerful dashboard framework similar to shinydashboard. We have created a package on the top of Plotly Dash to simplify the implementation of dashboards and now, we share the results with you as an open-source solution!

Example

You can analyze the example here and code behind the example here.

Documentation

The documentation is available here.

Components

dash-admin-components includes several high-level components and can be composed with other components from dash-core-components and dash-bootstrap-components.

Dynamic Page with Sidebar, Navbar, Controlbar, Body and Footer.

---

Collapsible and Closeable Boxes

---

InfoBoxes

---

ValueBoxes

---

UserBoxes

---

TabBoxes

For a full list of components, head over to example code.

Contributing

This project was generated by the dash-component-boilerplate it contains the minimal set of code required to create your own custom Dash component.

dash-admin-components's Issues

Initial Basic Cards content not displayed after app loads

Hi,

within example showed on http://dash-admin-components.opensource.quantee.ai/ Basic Cards menu item content is immediately displayed after url is loaded. It is not the case however when running example code. How can I achieve that?

I am running waittres wsgi which serves the example code well, but do not know how this menu item can be loaded automatically.

Thanks
Jan

Make docs

dac.NavbarDropdown Callback type

What kind of event does this component have? tried n_clicks, etc without success.

Delete href from TabBoxMenuItem

Does this have any "admin" features (like Django)?

Hi,

Does this have have any user admin features - similar to Django?

I'm after a Dash library that can do user permissions, etc.

Thanks, Brendan.

Infobox only icon color

how to load the default "home" view

Hello,

Somehow I am not able to define a default view/tab, which should be started once the page is loaded (using your example dashboard)

any hint?

How can I make the sidebar in the icon mode when server start?

When start the dash server, the sidebar is in the icon with text mode. I have to click the list button and change it to icon mode everytime.

Is there an attribute to let the sidebar in icon mode after server start?

Thx a lot.

Jack

Bootstrap Themes

Hi,
I was playing around with this component library and dash_bootstrap_components and noticed that the themes of this library conflict with any custom themes used in that library. I'm not sure if themes are something that can be abstracted away in this library so that the user can set a theme in the external_css files so it's unified across component libraries if users choose to combine multiple component libraries like I tried to

Component Unmount errors

dcc.Interval component not working

Merely adding dcc.Interval component to Page or even as a child of the top level div is blanking out the whole app with no errors or warnings anywhere.

How to build this project?

After running

npm install
npm run build:all

and install the built python package, the example/app.py is not runnable. Are there any additional steps that need to be made? Thanks!

Error with path src/lib/components/js/adminlte.jsError: No suitable component definition found.
Error: No suitable component definition found.

FYI, when building above error pops out.

Adding content to each tab from TabBox

On the example given on the sourcem there is no connection between the text which was to display and the tabs. I don't know exactly how to add content to each tab from TabBox.

dac.TabItem(id='content_tab_cards', 
                                            
                    children=[
                    
                        html.Div(
                            [ 
                                dac.TabBox(
                                    [
                                        dac.TabBoxHeader(
                                            dac.TabBoxMenu(
                                                [
                                                    dac.TabBoxMenuItem(tab_id='tab_box_1_tab1',
                                                                    label='Tab 1'),
                                                    dac.TabBoxMenuItem(tab_id='tab_box_1_tab2',
                                                                    label='Tab 2'),
                                                    dac.TabBoxMenuItem(tab_id='tab_box_1_tab3',
                                                                    label='Tab 3') 
                                                ],
                                                id='tab_box_1_menu'
                                            ),
                                            collapsible = True,
                                            title="Categories"
                                        ),
                                        dac.TabBoxBody(
                                            id='tab_box_1'
                                        )		
                                    ],
                                    width=12,
                                    elevation=2
                                ),
                            ], 
                            className='row'
                        )
                            
                    ]
                )

Enhancement href

dac.SidebarMenuSubItem( id='tab_gallery_1', label='Gallery 1', icon='arrow-circle-right', badge_label='Soon', badge_color='success', ),

It would be nice if there would be the possibility to add href item. So my app can route to other pages. Otherwise I have to write a callback for each pages.

Tables

Are tables available?

if for example, I want to import the tables from the JS version of adminLTE, how can I add it to my dash-plotly dash?

https://adminlte.io/themes/v3/pages/tables/simple.html