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 = None
class-attribute
instance-attribute
The Vega Altair chart.
theme = 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 = 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 = None
class-attribute
instance-attribute
The button color. One of "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning". Defaults to "primary".
endIcon = None
class-attribute
instance-attribute
The button's end icon. Must be a name supported by the app's UI.
startIcon = None
class-attribute
instance-attribute
The button's start icon. Must be a name supported by the app's UI.
text = None
class-attribute
instance-attribute
The button text.
tooltip = None
class-attribute
instance-attribute
Tooltip title. Optional.
variant = 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 = ''
class-attribute
instance-attribute
The checkbox label.
tooltip = None
class-attribute
instance-attribute
Tooltip title. Optional.
value = 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 = None
class-attribute
instance-attribute
The button color. One of "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning". Defaults to "primary".
icon = None
class-attribute
instance-attribute
The button's icon. Must be a name supported by the app's UI.
tooltip = None
class-attribute
instance-attribute
Tooltip title. Optional.
variant = None
class-attribute
instance-attribute
The button variant. One "contained" | "outlined" | "text". Defaults to "text".
chartlets.components.DataGrid
dataclass
Bases: Component
The DataGrid presents information in a structured format of rows and columns.
ariaLabel = None
class-attribute
instance-attribute
The aria-label of the grid.
autoPageSize = None
class-attribute
instance-attribute
If true, the page size is automatically adjusted to fit the content.
checkboxSelection = None
class-attribute
instance-attribute
If true, checkboxes are displayed for row selection.
columns = field(default_factory=list)
class-attribute
instance-attribute
The column definitions for the grid. Please have a look here to identify the keys https://mui.com/x/api/data-grid/grid-col-def/
density = None
class-attribute
instance-attribute
The density of the grid.
disableAutoSize = None
class-attribute
instance-attribute
If true, disables autosizing of columns.
disableColumnFilter = None
class-attribute
instance-attribute
If true, disables column filtering.
disableColumnMenu = None
class-attribute
instance-attribute
If true, disables the column menu.
disableColumnResize = None
class-attribute
instance-attribute
If true, disables column resizing.
disableColumnSelector = None
class-attribute
instance-attribute
If true, disables the column selector.
disableColumnSorting = None
class-attribute
instance-attribute
If true, disables column sorting.
disableDensitySelector = None
class-attribute
instance-attribute
If true, disables the density selector.
disableMultipleRowSelection = None
class-attribute
instance-attribute
If true, disables multiple row selection.
disableRowSelectionOnClick = None
class-attribute
instance-attribute
If true, clicking on a row does not select it.
editMode = None
class-attribute
instance-attribute
The editing mode of the grid.
hideFooter = None
class-attribute
instance-attribute
If true, hides the footer.
hideFooterPagination = None
class-attribute
instance-attribute
If true, hides the pagination in the footer.
hideFooterSelectedRowCount = None
class-attribute
instance-attribute
If true, hides the selected row count in the footer.
initialState = None
class-attribute
instance-attribute
The initial state of the grid, including pagination.
isLoading = None
class-attribute
instance-attribute
If true, displays a loading indicator.
pageSizeOptions = None
class-attribute
instance-attribute
Available page size options.
paginationModel = None
class-attribute
instance-attribute
The pagination model for the grid.
rowHeight = None
class-attribute
instance-attribute
The height of each row.
rowSelection = None
class-attribute
instance-attribute
If true, row selection is enabled.
rows = field(default_factory=list)
class-attribute
instance-attribute
The data for the rows in the grid.
chartlets.components.Dialog
dataclass
Bases: Container
A modal dialog that presents content and actions in a focused interface.
ariaDescribedBy = None
class-attribute
instance-attribute
Defines the ID of an element that describes the dialog for accessibility.
ariaLabel = None
class-attribute
instance-attribute
Defines a string value that labels the dialog for accessibility.
content = None
class-attribute
instance-attribute
The content of the dialog.
contentProps = None
class-attribute
instance-attribute
Additional properties for the dialog content. Can include typography-related attributes. https://mui.com/material-ui/api/dialog-content-text/
disableEscapeKeyDown = None
class-attribute
instance-attribute
If true, pressing the Escape key does not close the dialog.
fullScreen = None
class-attribute
instance-attribute
If true, the dialog will be displayed in full-screen mode.
fullWidth = None
class-attribute
instance-attribute
If true, the dialog will take up the full width of the screen.
maxWidth = None
class-attribute
instance-attribute
The maximum width of the dialog.
open = field(default=False)
class-attribute
instance-attribute
Controls whether the dialog is open.
scroll = None
class-attribute
instance-attribute
Determines the scroll behavior of the dialog's content.
title = None
class-attribute
instance-attribute
The title of the dialog.
titleProps = None
class-attribute
instance-attribute
Additional properties for the dialog title. Can include typography-related attributes. https://mui.com/material-ui/api/dialog-title/
chartlets.components.Divider
dataclass
Bases: Container
The Divider component provides a thin,
unobtrusive line for grouping elements to reinforce visual hierarchy.
flexItem = None
class-attribute
instance-attribute
Use the flexItem prop to display the divider when it's being
used in a flex container.
orientation = None
class-attribute
instance-attribute
The orientation. Can be horizontal (default) or vertical.
textAlign = None
class-attribute
instance-attribute
Use the textAlign prop to align elements that are
wrapped by the divider. One of left, center (default), and right.
variant = None
class-attribute
instance-attribute
The variant. One of fullWidth (default), inset, and middle.
chartlets.components.RadioGroup
dataclass
Bases: Component
The Radio Group allows the user to select one option from a set.
Use radio buttons when the user needs to see all available options.
If available options can be collapsed, consider using a Select
component because it uses less space.
Radio buttons should have the most commonly used option selected by default.
children = field(default_factory=list)
class-attribute
instance-attribute
The list of radio buttons.
dense = None
class-attribute
instance-attribute
Dense styling with smaller radio buttons.
label = None
class-attribute
instance-attribute
A label for the group. Optional
tooltip = None
class-attribute
instance-attribute
Tooltip title. Optional.
chartlets.components.Select
dataclass
Bases: Component
Select components are used for collecting user provided information from a list of options.
multiple = None
class-attribute
instance-attribute
Allows for multiple selection in Select Menu. If true, value
must be an array.
options = 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.
tooltip = None
class-attribute
instance-attribute
Tooltip title. Optional.
chartlets.components.Slider
dataclass
Bases: Component
Sliders allow users to make selections from a range of values along a bar.
aria_label = None
class-attribute
instance-attribute
The label of the slider.
color = None
class-attribute
instance-attribute
The color of the component. It supports both default and custom theme colors
defaultValue = None
class-attribute
instance-attribute
The default value. Use when the component is not controlled. If used as an array, it will create multiple sliding points on the bar
disableSwap = None
class-attribute
instance-attribute
If true, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
getAriaValueText = None
class-attribute
instance-attribute
Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.
Signature: function(value: number, index: number) => string
value: The thumb label's value to format. index: The thumb label's index to format.
marks = None
class-attribute
instance-attribute
Marks indicate predetermined values to which the user can move the slider. If true the marks are spaced according the value of the step prop. If an array, it should contain objects with value and an optional label keys.
max = None
class-attribute
instance-attribute
The maximum allowed value of the slider. Should not be equal to min.
min = None
class-attribute
instance-attribute
The minimum allowed value of the slider. Should not be equal to max.
orientation = None
class-attribute
instance-attribute
The component orientation.
size = None
class-attribute
instance-attribute
The size of the slider.
step = None
class-attribute
instance-attribute
The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step. When step is null, the thumb can only be slid onto marks provided with the marks prop.
tooltip = None
class-attribute
instance-attribute
Tooltip title. Optional.
track = None
class-attribute
instance-attribute
The track presentation:
normal: the track will render a bar representing the slider value.inverted: the track will render a bar representing the remaining slider value.false: the track will render without a bar.
value = None
class-attribute
instance-attribute
The value of the slider. For ranged sliders, provide an array with two values.
valueLabelDisplay = None
class-attribute
instance-attribute
Controls when the value label is displayed:
autothe value label will display when the thumb is hovered or focused.onwill display persistently.offwill never display.
chartlets.components.Switch
dataclass
Bases: Component
Switches toggle the state of a single setting on or off.
label = ''
class-attribute
instance-attribute
The switch label.
value = None
class-attribute
instance-attribute
The switch value.
chartlets.components.Table
dataclass
Bases: Component
A basic Table with configurable rows and columns.
columns = None
class-attribute
instance-attribute
The columns to display in the table.
hover = None
class-attribute
instance-attribute
A boolean indicating whether to highlight a row when hovered over
rows = None
class-attribute
instance-attribute
The rows of data to display in the table.
stickyHeader = None
class-attribute
instance-attribute
A boolean to set the header of the table sticky
chartlets.components.Tabs
dataclass
Bases: Component
Tabs make it easy to explore and switch between different views. Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
children = field(default_factory=list)
class-attribute
instance-attribute
The list of tab labels or Tab components.
value = None
class-attribute
instance-attribute
The currently selected tab index.
chartlets.components.Typography
dataclass
Bases: Component
Use typography to present your design and content as clearly and efficiently as possible.
align = None
class-attribute
instance-attribute
Set the text-align on the component.
color = None
class-attribute
instance-attribute
The color of the component.
component = None
class-attribute
instance-attribute
The HTML element used for the root node.
gutterBottom = None
class-attribute
instance-attribute
If True, the text will have a bottom margin.
noWrap = None
class-attribute
instance-attribute
If true, the text will not wrap, but instead will truncate with a text overflow ellipsis.
text = None
class-attribute
instance-attribute
Text to be displayed.
variant = 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 = None
class-attribute
instance-attribute
Children used by many specific components. Optional.
color = None
class-attribute
instance-attribute
HTML color attribute. Optional.
disabled = None
class-attribute
instance-attribute
HTML disabled attribute. Optional.
id = None
class-attribute
instance-attribute
HTML id attribute. Required for referring to this component.
label = None
class-attribute
instance-attribute
HTML label attribute. Optional.
name = None
class-attribute
instance-attribute
HTML name attribute. Optional.
style = None
class-attribute
instance-attribute
HTML style attribute. Optional.
value = 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 = 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 |