Components API
The Chartlets component API is used by both application contributors and providers:
- Application contributors use the concrete component classes to create a contribution's user interface and to output updated components or parts of it from their callback implementations.
- Application providers use the abstract base classes
ComponentandContainerto implement new specific components.
Chart Components
chartlets.components.VegaChart
dataclass
Bases: Component
A container for a Vega Altair chart.
Note: to use this component the altair package
must be available in your python environment.
chart: AltairChart | None = None
class-attribute
instance-attribute
The Vega Altair chart.
theme: str | None = None
class-attribute
instance-attribute
The name of a Vega theme.
Widget Components
chartlets.components.Box
dataclass
Bases: Container
The Box component is a generic container for grouping other components.
It's a fundamental building block. Think of it as an HTML <div> element.
Use the style attribute to layout the box and its child components.
component: str | None = None
class-attribute
instance-attribute
The component to be used, e.g., div or span.
chartlets.components.Button
dataclass
Bases: Component
Buttons allow users to take actions, and make choices, with a single tap.
color: str | None = None
class-attribute
instance-attribute
The button color. One of "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning". Defaults to "primary".
endIcon: str | None = None
class-attribute
instance-attribute
The button's end icon. Must be a name supported by the app's UI.
startIcon: str | None = None
class-attribute
instance-attribute
The button's start icon. Must be a name supported by the app's UI.
text: str | None = None
class-attribute
instance-attribute
The button text.
variant: str | None = None
class-attribute
instance-attribute
The button variant. One "contained" | "outlined" | "text". Defaults to "text".
chartlets.components.Checkbox
dataclass
Bases: Component
Checkboxes allow the user to select one or more items from a set. They can be used to turn an option on or off.
label: str = ''
class-attribute
instance-attribute
The checkbox label.
value: bool | None = None
class-attribute
instance-attribute
The checkbox value.
chartlets.components.IconButton
dataclass
Bases: Component
Icon buttons are commonly found in app bars and toolbars. Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.
color: str | None = None
class-attribute
instance-attribute
The button color. One of "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning". Defaults to "primary".
icon: str | None = None
class-attribute
instance-attribute
The button's icon. Must be a name supported by the app's UI.
variant: str | None = None
class-attribute
instance-attribute
The button variant. One "contained" | "outlined" | "text". Defaults to "text".
chartlets.components.Select
dataclass
Bases: Component
Select components are used for collecting user provided information from a list of options.
options: list[SelectOption] = field(default_factory=list)
class-attribute
instance-attribute
The options given as a list of number or text values or a list of (value, label) pairs.
chartlets.components.Typography
dataclass
Bases: Component
Use typography to present your design and content as clearly and efficiently as possible.
align: str | None = None
class-attribute
instance-attribute
Set the text-align on the component.
color: str | None = None
class-attribute
instance-attribute
The color of the component.
component: str | None = None
class-attribute
instance-attribute
The HTML element used for the root node.
gutterBottom: bool | None = None
class-attribute
instance-attribute
If True, the text will have a bottom margin.
noWrap: bool | None = None
class-attribute
instance-attribute
If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
text: str | None = None
class-attribute
instance-attribute
Text to be displayed.
variant: str | None = None
class-attribute
instance-attribute
Applies the theme typography styles.
Base classes
chartlets.Component
dataclass
Bases: ABC
Base class for components. Provides the common attributes that apply to all components.
children: list[Union[Component, str, None]] | None = None
class-attribute
instance-attribute
Children used by many specific components. Optional.
color: str | None = None
class-attribute
instance-attribute
HTML color attribute. Optional.
disabled: bool | None = None
class-attribute
instance-attribute
HTML disabled attribute. Optional.
id: str | None = None
class-attribute
instance-attribute
HTML id attribute. Required for referring to this component.
label: str | None = None
class-attribute
instance-attribute
HTML label attribute. Optional.
name: str | None = None
class-attribute
instance-attribute
HTML name attribute. Optional.
style: dict[str, Any] | None = None
class-attribute
instance-attribute
HTML style attribute. Optional.
value: bool | int | float | str | None = None
class-attribute
instance-attribute
HTML value attribute. Required for specific components.
chartlets.Container
dataclass
Bases: Component, ABC
Base class for components that require child components to be useful.
children: list[Component] = field(default_factory=list)
class-attribute
instance-attribute
The child components.
add(component)
Add a component.
Parameters:
| Name | Type | Description | Default |
|---|---|---|---|
component
|
Component
|
the child component. |
required |