dash-cool-components 0.1.0

Cool React components, wrapped for Plotly Dash

Dash Cool Components

Cool React components, wrapped for Plotly Dash

Table of contents

• Installation
• Quick Start

Installation

pip install dash-cool-components

Components

Datetime Picker

A date-time-timezone picker input. Implemented with the React Datepicker and Timezone Picker React components.

Component Properties:

The ID used to identify this component in Dash callbacks.

• id: string

The input's current value, on ISO format with date, time and timezone.

• value: string

Defines if the timezone input should be rendered. Defaults to true.

• renderTimezone: boolean

The date input placeholder.

• placeholder: string

The timezone input placeholder.

• timezonePlaceholder: string

The component container's style. Can be a style object or a css string.

• style: object | string

The date input's style. Can be a style object or a css string.

• dateInputStyle: object | string

The timezone container's style. Must be a style object.

• timezoneInputStyle: object

import dash
import dash_html_components as html
import dash_cool_components

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_cool_components.DateTimePicker(
            id='timezone',
            renderTimezone=True,
        ), width={'size':4}
    html.Div(id='output')
])

@app.callback(Output('output', 'children'), [Input('input', 'value')])
def display_output(value):
    if value is not None:
        output_div = html.Div([
            html.H4('Datetime: {}'.format(value['datetime'])),
            html.H4('Timezone: {}'.format(value['timezone']))
        ])
        return output_div

if __name__ == '__main__':
    app.run_server(debug=True)

Keyed File Browser

File and directory browser given a flat keyed list of objects. Implemented with React Keyed File Browser.

Component Properties

The ID used to identify this component in Dash callbacks.

• id: string

The current selected path in the file tree.

• selectedPath: string

The file tree to be displayed in the browser. Each entry in the array must be an object with the key property, which specifies it's location in the tree. Otherproperties are modified and size. To be able to receive the path selection feedback, you must enter keys for both files and folders.

• files: array

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_cool_components


external_stylesheets = [dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

dir_dict = [
    {'key': 'dir1/', 'size': 1},
    {'key': 'dir1/my_image.jpeg', 'size': 2782874},
    {'key': 'dir2/', 'size': 1}
    {'key': 'dir2/other_image.tif', 'size': 499240007}
]

my_component = dash_cool_components.KeyedFileBrowser(
    id='file_explorer',
    files=dir_dict,
)
app.layout = html.Div(my_component, style={'width': '500px'})

if __name__ == '__main__':
    app.run_server(debug=True)

Tag Input

A tag input component. Implemented with React Tag Input.

Components Properties

The ID used to identify this component in Dash callbacks.

• id: string

The component wrapper's style. Can be either a style object or a CSS string.

• wrapperStyle: object

The tag's style. Can be either a style object or a CSS string.

• tagStyle: object

The text input's style. Can be either a style object or a CSS string.

• inputStyle: object

The tag delete button's style. Can be either a style object or a CSS string.

• tagDeleteStyle: object

Placeholder for the text input.

• placeholder: string

The input's current tags.

• value: array

Tags to be inserted on the input. The input's atual tags are replaced.

• injectedTags: array

import dash
import dash_html_components as html
import dash_cool_components

app = dash.Dash(__name__)

my_component = dash_cool_components.Keywords(id='tag_input')
app.layout = html.Div(my_component)

if __name__ == '__main__':
    app.run_server(debug=True)