@xuda.io/xuda-ui-plugin-gaugejs

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

1. Log in to your project on Xuda.io.
2. Navigate to the Plugins tab in the project node.
3. Locate the Xuda Gauge.js Plugin.
4. Install the plugin by toggling the activation button.

---

Usage in Xuda Studio

1. Open Xuda Studio on Xuda.io.
2. Select a UI component where the gauge should be displayed.
3. Scroll down in the Properties Pane to locate the plugin options.
4. 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

---