1.0.4 • Published 5 months ago
@xuda.io/xuda-ui-plugin-gaugejs v1.0.4
Xuda Gauge.js Plugin
The Xuda Gauge.js Plugin integrates the versatile Gauge.js library into Xuda.io, providing customizable and animated gauges for data visualization. Perfect for displaying performance metrics, progress tracking, or any data that requires a sleek, visual representation.
Features
- Customizable Gauges: Adjust arc angles, colors, pointer settings, and more.
- Dynamic Values: Update gauge values in real-time.
- Animated Transitions: Smooth animations for value changes.
- Xuda Compatibility: Fully integrates with Xuda.io properties and UI components.
Installation in Xuda Platform
- Log in to your project on Xuda.io.
- Navigate to the Plugins tab in the project node.
- Locate the Xuda Gauge.js Plugin.
- Install the plugin by toggling the activation button.
Usage in Xuda Studio
- Open Xuda Studio on Xuda.io.
- Select a UI component where the gauge should be displayed.
- Scroll down in the Properties Pane to locate the plugin options.
- Activate the Xuda Gauge.js Plugin and configure its settings.
Example Configuration in Xuda Studio
| Property | Value |
|---|---|
gauge_angle | 0.15 |
gauge_line_width | 0.44 |
gauge_color_start | #6FADCF |
gauge_color_stop | #8FC0DA |
gauge_max_value | 100 |
gauge_value | 75 |
Plugin Properties
| Property | Type | Description | Default Value |
|---|---|---|---|
gauge_angle | number | The span of the gauge arc (e.g., 0.15 for a partial arc). | 0.15 |
gauge_line_width | number | The thickness of the gauge line. | 0.44 |
gauge_pointer_length | number | The length of the pointer relative to the gauge radius. | 0.9 |
gauge_pointer_stroke_width | number | The thickness of the pointer stroke. | 0.035 |
gauge_color_start | string | The starting color of the gauge arc. | #6FADCF |
gauge_color_stop | string | The ending color of the gauge arc. | #8FC0DA |
gauge_stroke_color | string | The color of the background arc. | #E0E0E0 |
gauge_max_value | number | The maximum value of the gauge. | 100 |
gauge_min_value | number | The minimum value of the gauge. | 0 |
gauge_value | number | The initial value displayed by the gauge. | 0 |
1.0.4
5 months ago