Dash Charlotte v0.3.1

Table Improvements

Changed

• The id argument of TableColumn and its subclasses is now required.

Added

• Every original argument of the Dash components can be passed through kwargs. See examples below;
• New docstrings with examples to every table column subclass;
• A loading wrapper for each cell. Turn them on with loading=True column argument;
• __repr__ and __str__ methods to table columns.

Examples

>>> col = TableButtonCol(
...     id = ['id_1', 'id_2', 'id_n'],
...     header = 'Button Column,
...     text = 'Default Text',
...     icon = 'fas fa-exclamation-triangle',
...     header_style = {'background-color': 'cyan'},
...     button_size = 'sm',
...     cell_className = 'bg-shade1'
... )

>>> col = TableDropdownCol(
...     id = ['id_1', 'id_2', 'id_n'],
...     header = 'Button Column,
...     header_style = {'background-color': 'cyan'},
...     cell_className = 'bg-shade1',
...     dropdown_value = [True, False, True],
...     dropdown_options = [
...         {'label': 'Yes', 'value': True},
...         {'label': 'No', 'value': False}
...     ],
...     dropdown_clearable = False
... )

>>> col = TableDropdownCol(
...     id = ['id_1', 'id_2', 'id_n'],
...     header = 'Button Column,
...     header_style = {'background-color': 'cyan'},
...     text = [1111.11, 2222.22, 3333.33],
...     text_format = '{:.2%}'.format,
...     text_className = 'red',
...     cell_className = 'bg-shade1'
... )

>>> col = TableDropdownCol(
...     id = ['id_1', 'id_2', 'id_n'],
...     header = 'Button Column,
...     header_style = {'background-color': 'cyan'},
...     cell_className = 'bg-shade1',
...     input_type = 'number',
...     input_min = 0,
...     input_max = 9,
...     input_step = 1,
...     input_value = [2,3,4]
... )

Dash Charlotte v0.3.0

The Button Update

Added

• Two types of Buttons:

For now, it is necessary to add themes.BUTTONS to the Dash's external_stylesheets.
This will probably be expanded in the next updates.

from dash import Dash
from dash_charlotte import themes
from dash_charlotte.components import Button

app = Dash(
    name = __name__,
    external_stylesheets = [
        themes.CHARLOTTE_DARK,
        themes.BUTTONS
    ]
)

# Show a arrow character on hover
button1 = Button(
    children = 'Arrow Button',
    type = 'arrow',
    color = 'green',
    className = 'me-2'
)

# Increase shadow on click
button2 = Button(
    children = 'Shadow Button',
    type = 'shadow',
    color = 'red'
)

• New argument row_id for components.Table.

This iterable argument adds a id for each row of the table.

• New argument input_step for components.TableInputCol.

Adds a step argument for numeric input columns.

from dash_charlotte.components import Table, TableInputCol

tb_col = TableInputCol(
    header = 'Number Input',
    input_type = 'number',
    input_min = 0,
    input_max = 100,
    input_step = 10
)

tb = Table(
    columns = [tb_col],
    row_id = df.col1.apply(lambda x: {'row_id': 1})
)

Fixed

• A circular import error of the version 0.2.x

Dash Charlotte v0.2.4

Removed

• Removed dash-labs dependency

Fixed

• Small mistake causing an error on Github Actions

Dash Charlotte v0.2.3

Added

• New children attribute to components.Navbar.

from dash_charlotte.components import Navbar

nav = Navbar(
    title = 'Title',
    children = content,
    id = 'my-navbar'
)

Changed

• New ids for Navbar callbacks.

@callback(
    Output('my-navbar--title', 'children'),
    Output('my-navbar--children', 'children'),
    ...

• Improved components type hinting;
• Removed Bootstrap dependency from components.Footer.

Dash Charlotte v0.2.2

This is the changelog of version 0.2.2, aka The Table Update.

dash_charlotte.components.Table

Create a Table instance to serve as a wrapper for the table columns.

These table columns are subclasses of the TableColumn object.

• TableButtonCol
• TableCheckBoxCol
• TableDropdownCol
• TableInputCol
• TableTextCol

Each of these TableColumn objects is a type of column to be added to the Table parent component.

col1 = TableDropdownCol(
    header = 'Dropdown',
    cell_style = {'padding': 5},
    dropdown_id = dropdown_data,
    dropdown_placeholder = 'Select...',
    dropdown_options = [
        {'label': 'Yes', 'value': 1},
        {'label': 'No', 'value': 0}
    ]
)

col2 = TableTextCol(
    header = 'Style Format',
    text = text_data,
    text_formatting = format_callable
)

col3 = TableInputCol(
    header = 'Number Input',
    cell_style = {'padding': 5},
    input_id = input_ids,
    input_value = input_values,
    input_type = 'number',
    input_min = 0,
    input_max = 9
)

col4 = TableTextCol(
    header = 'String Format',
    text = number_data,
    text_formatting = '$ {:,.2f}'.format
)

col5 = TableButtonCol(
    header = 'Button',
    cell_style = {'text-align': 'center'},
    button_icon = 'fas fa-exclamation-triangle',
    button_text = button_text,
    button_id = button_ids
)

table = Table(
    columns = [col1, col2, col3, col4, col5],
    bordered = True,
    dark = False,
    hover = True,
    responsive = True,
    striped = True,
    className = 'mb-0'
)

Check the example app or the live demo

Small changes

• Drawer hides itself on small screens
• Add dcc.Location default attribute to LoginForm
• Change icon package dependencies of Navbar

General Dev Stuff

• Add new CDN links to minified CSS theme files.
• Autoupload to PyPI with GitHub Actions

Dash Charlotte v0.2.1

Quick release to expand some of the components funcionalities.

General

Restructuring the folders again... Live demo will be available at dash-charlotte-live-demo repository.

layouts.login

Login page components where renamed and added to the __init__ imports of the layouts submodule.

from dash_charlotte import layouts

layout = layouts.LoginPage(
    left_panel = layouts.LoginSvgPanel(*args),
    right_panel = layouts.LoginForm(*args)
)

layouts.not_found_404

• Minor changes in the layout
• New Docstring
• New src argument.

Dash Charlotte v0.2.0

First major update from Dash Charlotte.

Still fiddling with the code and repository structure, so this will probably change in the near future.

A bunch of branch stuff

I'm not really sure what I'm doing, but the main branch was split into three:

1. main: Contains the package code;
2. gh-pages: Contains the CSS files (for CDN purposes) and a placeholder for future documentation;
3. deploy: Contains the example app to be deployed at Heroku.

New LoginPage layout

A default (and kinda customizable) layout for login pages.

Check the example app to learn how to implement.

New Footer component

Easy to implement HTML Footer component.

>>> Footer(
...    id = 'my-footer',
...    left_text = 'Left Text',
...    right_text = 'Right Text'
...)

CSS Themes

The CSS themes were updated and their CDN links were moved to this GitHub Pages branch.

dash-charlotte v0.1.0

This is a first draft of what I need for a fast dashboard building package.

In the end it should contain components, CSS themes, fonts, icons and standard pages for Plotly-Dash modular web applications.

For now, this is super early (and buggy) work. This does not represent the final product I'm aiming for.