Number Showcase
revisit perhaps after conditions/function part
Component Documentation
Component Name
Number
Builder Function Name
create_number_manager
Description
Displays and formats a numeric value with options for rounding, shorthand notation, separators, dynamic coloring based on value, and an optional progress bar.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| val | number or null | Initial numeric value to display. If null, displays as empty or default. | |
| round | string | Determines the rounding method applied to the value. | |
| round_by | number | Value to round to when `round` is 'nearest', 'floor', or 'ceil'. | |
| precision | number | Number of significant digits when `round` is 'precision'. | |
| shorthand | string | Applies shorthand notation to the number, adding suffixes like K, M, B, etc. | |
| separators | string | Formats the number with thousands and decimal separators based on locale. | |
| is_percentage | boolean | false | If true, appends a '%' sign to the displayed number. |
| is_dynamic_color | boolean | false | If true, changes the color of the number based on its value relative to start and end values. |
| start_value | number | Starting value for dynamic color calculations. | |
| end_value | number | Ending value for dynamic color calculations. | |
| start_color | object | Starting color in Hue-Chroma format for dynamic color calculations (e.g., { h: 10, c: 10 }). | |
| end_color | object | Ending color in Hue-Chroma format for dynamic color calculations (e.g., { h: 350, c: 10 }). | |
| base_color | object | Base color used when dynamic color is not enabled (e.g., { h: 10, c: 10 }). | |
| is_progress_bar | boolean | false | If true, displays the number as part of a progress bar. |
| is_hide_number | boolean | false | If true, hides the numeric text display. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | Initializes the number formatting based on configuration, including rounding, shorthand, separators, dynamic color, and progress bar calculations. | No Params | |
| round_value | Rounds the numeric value based on the specified method and parameters. | No Params | |
| apply_shorthand | Applies shorthand notation to the number, converting large numbers into K, M, B, etc. | No Params | |
| format_separators | Formats the number with thousands and decimal separators based on the specified locale. | No Params | |
| set_val | Sets a new value for the number and updates its formatting accordingly. | No Params | |
| set_loading_i | Sets the thumb index to display a loading state. | No Params | |
| set_hovered_i | Sets the thumb index that is currently hovered. | No Params | |
| set_error_i | Sets the thumb index that has an error. | No Params | |
| set_min | Updates the slider's minimum bound. | No Params | |
| set_max | Updates the slider's maximum bound. | No Params | |
| set_step | Updates the slider's step increment value. | No Params | |
| set_thumbs | Updates the positions of the thumbs based on the current values. | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| val | object | Formatted value with properties including val, val_text, suffix, font_weight, font_color, hue, chroma, and percentage_fill. |
