| Name | reflex-gaugechart JSON |
| Version |
0.1.1
JSON |
| download |
| home_page | None |
| Summary | The Gaugechart custom component is a Reflex wrapper for the popular react-gauge-chart React library. It provides a visually appealing and highly customizable gauge chart component, ideal for displaying percentage values or progress in a sleek, modern format. |
| upload_time | 2025-01-17 06:16:07 |
| maintainer | None |
| docs_url | None |
| author | None |
| requires_python | >=3.9 |
| license | Apache-2.0 |
| keywords |
reflex
reflex-custom-components
gauge
chart
gaugechart
iot
dashboard
visualisation
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# Reflex Gaugechart
The Reflex Gaugechart custom component is a Reflex wrapper for the popular [react-gauge-chart](https://www.npmjs.com/package/react-gauge-chart) React library.
It provides a visually appealing and highly customisable gauge chart component, ideal for displaying percentage values or progress in a sleek, modern format.
## Features
- Intuitive Design: Displays data in an easy-to-understand gauge format.
- Customisable Appearance: Allows control over colours, needle size, arc width, and more.
- Responsive Layout: Automatically adjusts to fit the parent container.
- Dynamic Updates: Smoothly animates value changes for real-time data visualisation.
- Integration Ready: Seamlessly integrates into Reflex applications, inheriting the framework's reactive capabilities.
## Installation
```bash
pip install reflex-gaugechart
```
## Properties
The `Gaugechart` component supports the following customisable props:
- `id`: A unique identifier for the component.
- `value`: The current value to display on the gauge (e.g., 0.5 for 50%).
- `colors`: An array of colors for the gauge segments (e.g., `["#FF0000", "#FFFF00", "#00FF00"]`).
- `arcWidth`: Adjusts the width of the gauge arc.
- `needleColor`: Sets the color of the needle.
- `textColor`: Defines the color of the percentage text.
- `hideText`: Boolean to toggle visibility of the percentage text.
- `animate`: Boolean to enable or disable animation during value changes.
- `animationDuration`: Specifies the duration of animations (in seconds).
- `animationEasing`: Defines the easing function for animations.
## Use Case Scenarios
1. **IoT Dashboards**: Display sensor readings, such as temperature or humidity levels.
2. **Business Metrics**: Show KPIs like sales targets or project progress.
3. **Health Monitoring**: Visualise fitness or health-related metrics.
4. **Gaming**: Represent player stats or game progress.
The `Gaugechart` component brings together the power of `react-gauge-chart` with Reflex's reactive framework, making it a great choice for developers looking to add polished data visualisations to their applications.
Raw data
{
"_id": null,
"home_page": null,
"name": "reflex-gaugechart",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "reflex, reflex-custom-components, gauge, chart, gaugechart, iot, dashboard, visualisation",
"author": null,
"author_email": "Leo Gaggl <leo@gaggl.com>",
"download_url": "https://files.pythonhosted.org/packages/fe/23/4d79371a9fe66435da75a6e3fa8792ae045b521df97270a8fd4281a4d3d1/reflex_gaugechart-0.1.1.tar.gz",
"platform": null,
"description": "# Reflex Gaugechart\n\nThe Reflex Gaugechart custom component is a Reflex wrapper for the popular [react-gauge-chart](https://www.npmjs.com/package/react-gauge-chart) React library.\n\nIt provides a visually appealing and highly customisable gauge chart component, ideal for displaying percentage values or progress in a sleek, modern format.\n\n## Features\n\n- Intuitive Design: Displays data in an easy-to-understand gauge format.\n- Customisable Appearance: Allows control over colours, needle size, arc width, and more.\n- Responsive Layout: Automatically adjusts to fit the parent container.\n- Dynamic Updates: Smoothly animates value changes for real-time data visualisation.\n- Integration Ready: Seamlessly integrates into Reflex applications, inheriting the framework's reactive capabilities.\n\n## Installation\n\n```bash\npip install reflex-gaugechart\n```\n\n## Properties\n\nThe `Gaugechart` component supports the following customisable props:\n\n- `id`: A unique identifier for the component.\n- `value`: The current value to display on the gauge (e.g., 0.5 for 50%).\n- `colors`: An array of colors for the gauge segments (e.g., `[\"#FF0000\", \"#FFFF00\", \"#00FF00\"]`).\n- `arcWidth`: Adjusts the width of the gauge arc.\n- `needleColor`: Sets the color of the needle.\n- `textColor`: Defines the color of the percentage text.\n- `hideText`: Boolean to toggle visibility of the percentage text.\n- `animate`: Boolean to enable or disable animation during value changes.\n- `animationDuration`: Specifies the duration of animations (in seconds).\n- `animationEasing`: Defines the easing function for animations.\n\n## Use Case Scenarios\n\n1. **IoT Dashboards**: Display sensor readings, such as temperature or humidity levels.\n2. **Business Metrics**: Show KPIs like sales targets or project progress.\n3. **Health Monitoring**: Visualise fitness or health-related metrics.\n4. **Gaming**: Represent player stats or game progress.\n\nThe `Gaugechart` component brings together the power of `react-gauge-chart` with Reflex's reactive framework, making it a great choice for developers looking to add polished data visualisations to their applications.\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "The Gaugechart custom component is a Reflex wrapper for the popular react-gauge-chart React library. It provides a visually appealing and highly customizable gauge chart component, ideal for displaying percentage values or progress in a sleek, modern format.",
"version": "0.1.1",
"project_urls": {
"repository": "https://github.com/leogaggl/reflex_gaugechart"
},
"split_keywords": [
"reflex",
" reflex-custom-components",
" gauge",
" chart",
" gaugechart",
" iot",
" dashboard",
" visualisation"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "f34714935571e8a989ba4268ad34559f29cf288150f452445a4272c90e8fb2ce",
"md5": "a1532f42c6b252371f9df9ff430bb07e",
"sha256": "eabaa4dbe5d2b44a712d7bd33b57c45d0ce7afd3f7a60e04e722c6413639ad79"
},
"downloads": -1,
"filename": "reflex_gaugechart-0.1.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "a1532f42c6b252371f9df9ff430bb07e",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 8026,
"upload_time": "2025-01-17T06:16:04",
"upload_time_iso_8601": "2025-01-17T06:16:04.005281Z",
"url": "https://files.pythonhosted.org/packages/f3/47/14935571e8a989ba4268ad34559f29cf288150f452445a4272c90e8fb2ce/reflex_gaugechart-0.1.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "fe234d79371a9fe66435da75a6e3fa8792ae045b521df97270a8fd4281a4d3d1",
"md5": "f9a53d65ff4818a93995b6fa765fba6f",
"sha256": "17b628c3b78cd46c6429665f6dc6624ab3c050af3e7bb0df86f2c6f09a6e33d1"
},
"downloads": -1,
"filename": "reflex_gaugechart-0.1.1.tar.gz",
"has_sig": false,
"md5_digest": "f9a53d65ff4818a93995b6fa765fba6f",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 7625,
"upload_time": "2025-01-17T06:16:07",
"upload_time_iso_8601": "2025-01-17T06:16:07.256987Z",
"url": "https://files.pythonhosted.org/packages/fe/23/4d79371a9fe66435da75a6e3fa8792ae045b521df97270a8fd4281a4d3d1/reflex_gaugechart-0.1.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-01-17 06:16:07",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "leogaggl",
"github_project": "reflex_gaugechart",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "reflex-gaugechart"
}
