# Altair
A Reflex custom component for altair charts.
## Installation
```bash
pip install reflex-altair
```
# Altair Component
The `Altair` component is a React component that integrates with the `react-vega` library to render Vega
and Vega-Lite visualizations in your application. This component allows you to specify the chart specifications,
data, and various configuration options to customize the rendering and behavior of the visualizations.
> It supports [altair python library](https://altair-viz.github.io/index.html) !
## Props
### `spec`
- **Type:** `AltairChart | Dict[str, Any]`
- **Description:** The Vega or Vega-Lite chart specification. This can be an instance of [AltairChart](/altair/custom_components/reflex_altair/type.py#L4) or a dictionary representing the chart specification.
### `data`
- **Type:** `Dict[str, List[Dict[str, Any]]]`
- **Description:** The data to be used in the chart. This should be a dictionary where the keys are dataset names and the values are lists of observations.
> Transform your dataframe like this
```python
df.to_dict("records")
```
### `on_error`
- **Type:** `rx.EventHandler[lambda _e: [_e]]`
- **Description:** Event handler that is triggered when an error occurs during the rendering of the chart.
### `mode`
- **Type:** `"vega" | "vega-lite"`
- **Description:** The mode in which the chart should be rendered. This can be used to specify whether the chart should be rendered in `vega` or `vega-lite` mode.
### `actions`
- **Type:** `bool | AltairAction`
- **Description:** Configuration for the action menu that appears in the top-right corner of the chart. This can be a boolean to enable/disable the menu or an [AltairAction](/altair/custom_components/reflex_altair/type.py#L64) object to customize the actions.
### `download_file_name`
- **Type:** `str`
- **Description:** The default file name to use when downloading the chart as an image.
### `log_level`
- **Type:** `0 - 5`
- **Description:** The log level for the Vega parser. This can be used to control the verbosity of the logging output.
### `renderer`
- **Type:** `AltairRenderer`
- **Description:** The renderer to use for the chart. This can be set to `canvas` or `svg`.
### `tooltip`
- **Type:** `bool`
- **Description:** Boolean flag to enable or disable tooltips in the chart.
> False overwrite tooltips from spec
### `padding`
- **Type:** `Union[int, float] | Dict[AltairPadding, Union[int, float]]]`
- **Description:** Padding around the chart. This can be a single value applied
to all sides or a dictionary specifying different padding values for each side.
Values are `left`, `right`, `bottom`, `left`
> used instead of default style padding
### Events
`on_new_view` depends on :
- on_new_view_click
- on_new_view_dblclick
- on_new_view_dragenter
- on_new_view_dragleave
- on_new_view_dragover
- on_new_view_keydown
- on_new_view_keypress
- on_new_view_keyup
- on_new_view_mousedown
- on_new_view_mousemove
- on_new_view_mouseout
- on_new_view_mouseover
- on_new_view_mouseup
- on_new_view_mousewheel
- on_new_view_touchend
- on_new_view_touchmove
- on_new_view_touchstart
- on_new_view_wheel
> Chart is rerender after an event, removing current selection
`signal_listeners`is not yet supported
## Example Usage
With [altair](https://altair-viz.github.io/index.html)
```python
import altair as alt
import pandas as pd
# Define the data
chart_data = {
"dataset_id": pd.DataFrame(
{
"category": ["A", "B", "C"],
"value": [28, 55, 43]
}
).to_dict("records")
}
# Define the chart
chart_spec = alt.Chart(alt.Data(name="dataset_id")).mark_bar().encode(
x='category:O',
y='value:Q',
tooltip=['category', 'value']
).properties(
title='Bar Chart Example'
)
```
With [vega-lite](https://vega.github.io/vega-lite/)
```python
chart_spec = {
"data": {"name": "table"},
"mark": "bar",
"encoding": {
"x": {"field": "category", "type": "nominal"},
"y": {"field": "value", "type": "quantitative"}
}
}
chart_data = {
"table": [
{"category": "A", "value": 28},
{"category": "B", "value": 55},
{"category": "C", "value": 43}
]
}
```
```python
# Create the altair component
altair_component = altair_chart(
spec=chart_spec,
data=chart_data,
actions={"export": {"svg": False}, "compiled": False},
download_file_name="filename",
)
```
You can run [reflex demo](./altair_demo) also
Raw data
{
"_id": null,
"home_page": null,
"name": "reflex-altair",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "reflex, reflex-custom-components, altair, vega",
"author": null,
"author_email": "L\ufffdopold Grosjean <leo.grosjean@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/53/bd/099902c752f54d7e344efddaad7ddde26f7c06634753ca9ed51f4187481f/reflex_altair-0.1.1.tar.gz",
"platform": null,
"description": "# Altair\r\n\r\nA Reflex custom component for altair charts.\r\n\r\n## Installation\r\n\r\n```bash\r\npip install reflex-altair\r\n```\r\n\r\n# Altair Component\r\n\r\nThe `Altair` component is a React component that integrates with the `react-vega` library to render Vega \r\nand Vega-Lite visualizations in your application. This component allows you to specify the chart specifications,\r\n data, and various configuration options to customize the rendering and behavior of the visualizations.\r\n\r\n> It supports [altair python library](https://altair-viz.github.io/index.html) !\r\n\r\n## Props\r\n\r\n### `spec`\r\n\r\n- **Type:** `AltairChart | Dict[str, Any]`\r\n- **Description:** The Vega or Vega-Lite chart specification. This can be an instance of [AltairChart](/altair/custom_components/reflex_altair/type.py#L4) or a dictionary representing the chart specification.\r\n\r\n### `data`\r\n\r\n- **Type:** `Dict[str, List[Dict[str, Any]]]`\r\n- **Description:** The data to be used in the chart. This should be a dictionary where the keys are dataset names and the values are lists of observations.\r\n\r\n> Transform your dataframe like this\r\n```python\r\ndf.to_dict(\"records\")\r\n```\r\n### `on_error`\r\n\r\n- **Type:** `rx.EventHandler[lambda _e: [_e]]`\r\n- **Description:** Event handler that is triggered when an error occurs during the rendering of the chart.\r\n\r\n\r\n### `mode`\r\n\r\n- **Type:** `\"vega\" | \"vega-lite\"`\r\n- **Description:** The mode in which the chart should be rendered. This can be used to specify whether the chart should be rendered in `vega` or `vega-lite` mode.\r\n\r\n### `actions`\r\n\r\n- **Type:** `bool | AltairAction`\r\n- **Description:** Configuration for the action menu that appears in the top-right corner of the chart. This can be a boolean to enable/disable the menu or an [AltairAction](/altair/custom_components/reflex_altair/type.py#L64) object to customize the actions.\r\n\r\n### `download_file_name`\r\n\r\n- **Type:** `str`\r\n- **Description:** The default file name to use when downloading the chart as an image.\r\n\r\n### `log_level`\r\n\r\n- **Type:** `0 - 5`\r\n- **Description:** The log level for the Vega parser. This can be used to control the verbosity of the logging output.\r\n\r\n### `renderer`\r\n\r\n- **Type:** `AltairRenderer`\r\n- **Description:** The renderer to use for the chart. This can be set to `canvas` or `svg`.\r\n\r\n### `tooltip`\r\n\r\n- **Type:** `bool`\r\n- **Description:** Boolean flag to enable or disable tooltips in the chart.\r\n> False overwrite tooltips from spec \r\n\r\n### `padding`\r\n\r\n- **Type:** `Union[int, float] | Dict[AltairPadding, Union[int, float]]]`\r\n- **Description:** Padding around the chart. This can be a single value applied \r\nto all sides or a dictionary specifying different padding values for each side.\r\nValues are `left`, `right`, `bottom`, `left`\r\n> used instead of default style padding\r\n\r\n### Events\r\n`on_new_view` depends on :\r\n- on_new_view_click\r\n- on_new_view_dblclick\r\n- on_new_view_dragenter\r\n- on_new_view_dragleave\r\n- on_new_view_dragover\r\n- on_new_view_keydown\r\n- on_new_view_keypress\r\n- on_new_view_keyup\r\n- on_new_view_mousedown\r\n- on_new_view_mousemove\r\n- on_new_view_mouseout\r\n- on_new_view_mouseover\r\n- on_new_view_mouseup\r\n- on_new_view_mousewheel\r\n- on_new_view_touchend\r\n- on_new_view_touchmove\r\n- on_new_view_touchstart\r\n- on_new_view_wheel\r\n\r\n> Chart is rerender after an event, removing current selection\r\n\r\n`signal_listeners`is not yet supported\r\n\r\n## Example Usage\r\nWith [altair](https://altair-viz.github.io/index.html)\r\n\r\n```python\r\nimport altair as alt\r\nimport pandas as pd\r\n\r\n# Define the data\r\nchart_data = {\r\n \"dataset_id\": pd.DataFrame(\r\n {\r\n \"category\": [\"A\", \"B\", \"C\"],\r\n \"value\": [28, 55, 43]\r\n }\r\n ).to_dict(\"records\")\r\n}\r\n\r\n# Define the chart\r\nchart_spec = alt.Chart(alt.Data(name=\"dataset_id\")).mark_bar().encode(\r\n x='category:O',\r\n y='value:Q',\r\n tooltip=['category', 'value']\r\n).properties(\r\n title='Bar Chart Example'\r\n)\r\n```\r\nWith [vega-lite](https://vega.github.io/vega-lite/)\r\n```python\r\nchart_spec = {\r\n \"data\": {\"name\": \"table\"},\r\n \"mark\": \"bar\",\r\n \"encoding\": {\r\n \"x\": {\"field\": \"category\", \"type\": \"nominal\"},\r\n \"y\": {\"field\": \"value\", \"type\": \"quantitative\"}\r\n }\r\n}\r\n\r\nchart_data = {\r\n \"table\": [\r\n {\"category\": \"A\", \"value\": 28},\r\n {\"category\": \"B\", \"value\": 55},\r\n {\"category\": \"C\", \"value\": 43}\r\n ]\r\n}\r\n```\r\n```python\r\n# Create the altair component\r\naltair_component = altair_chart(\r\n spec=chart_spec,\r\n data=chart_data,\r\n actions={\"export\": {\"svg\": False}, \"compiled\": False},\r\n download_file_name=\"filename\",\r\n)\r\n```\r\n\r\nYou can run [reflex demo](./altair_demo) also\r\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Reflex custom component to render altair/vega",
"version": "0.1.1",
"project_urls": {
"homepage": "https://github.com/LeoGrosjean/reflex-graphing/tree/main/altair",
"source": "https://github.com/LeoGrosjean/reflex-graphing/tree/main/altair"
},
"split_keywords": [
"reflex",
" reflex-custom-components",
" altair",
" vega"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "fd5d7c5e5a75f61ee3cc511572bf51ab7db56fde9833b9e80b0fa8ba90d7b6e5",
"md5": "6af5529aa3fb41a6c2b6e43b7cd52417",
"sha256": "b842ac0c568793b5bc51fe9a052617846315d1fce0ab77c3bbe5d020867b2bf2"
},
"downloads": -1,
"filename": "reflex_altair-0.1.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "6af5529aa3fb41a6c2b6e43b7cd52417",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 5424,
"upload_time": "2024-11-28T11:09:39",
"upload_time_iso_8601": "2024-11-28T11:09:39.456325Z",
"url": "https://files.pythonhosted.org/packages/fd/5d/7c5e5a75f61ee3cc511572bf51ab7db56fde9833b9e80b0fa8ba90d7b6e5/reflex_altair-0.1.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "53bd099902c752f54d7e344efddaad7ddde26f7c06634753ca9ed51f4187481f",
"md5": "c7568c46ca23c2c20a027d52df89bf56",
"sha256": "02f8d5ee1ada5fe9dd2bd32b42a29713a3448697f97e7b750f5cc430284492b4"
},
"downloads": -1,
"filename": "reflex_altair-0.1.1.tar.gz",
"has_sig": false,
"md5_digest": "c7568c46ca23c2c20a027d52df89bf56",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 4883,
"upload_time": "2024-11-28T11:09:40",
"upload_time_iso_8601": "2024-11-28T11:09:40.958579Z",
"url": "https://files.pythonhosted.org/packages/53/bd/099902c752f54d7e344efddaad7ddde26f7c06634753ca9ed51f4187481f/reflex_altair-0.1.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-11-28 11:09:40",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "LeoGrosjean",
"github_project": "reflex-graphing",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "reflex-altair"
}
JSON
