number-editors

Chart style

The number input box is an advanced widget that supports custom background colors, text styles, border styles, and button styles in various states. You can use it as an input form in a data dashboard to submit user input to the backend for processing.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter a configuration item name to locate it. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: Rotates the widget around its center. Unit: degrees.

    • Enter the rotation angle directly or click the plus sign (+) or minus sign (-) to adjust the value.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget. A value of 1 fully displays the widget. Default value: 1.

• Number

  • Input Setting

    Metric	description
    Minimum Runtime Duration	The minimum value of the number.
    Maximum Runtime Duration	The maximum value of the number.
    stride	The increment or decrement step for the number.
    Prefix	The prefix of the number.
    Extension	The suffix (unit) of the number. Default value: px.

  • Feature settings

    Metric	description
    thousands separator	When enabled, numbers are formatted with thousands separators. When disabled, numbers are displayed without thousands separators.
    Disable	If you turn on the switch, the number input box is in the read-only state. If you turn off the switch, the number input box is in the editable state.

  • Background Color: the background color of the input box. For more information, see color picker description.

  • Border Style

    Metric	description
    Linetype	The border line type. Valid values: Solid Line, Dashed Line, Dotted Line, Double Solid Line, Carved Effect, Embossed Effect, Sunken Effect, or Protrude Effect.
    Fillet	The border radius. Valid values: 0 to 360. A value of 0 makes the input box square. A value of 360 makes it circular.
    Line Width	The width of the border line.
    Color	The border color.

  • Content Left Spacing: the distance between the content and the left edge of the input box. Unit: pixels.

  • Text Style: the style of the text in the number input box.

    Metric	description
    Font	The font family of text in the input box.
    Text weight	The font weight of text in the input box.
    Font size	The font size of text in the input box.
    Color	The text color of the input box.

• Key: the button style of the number input box.

  • Button Width: the width of the button. Unit: pixels.

    Important

    If the button width is too small, the text cannot be displayed completely.

  • Default Style

    Metric	description
    Arrow size	The size of the arrow on the button.
    Arrow Color	The color of the arrow on the button.
    Background Color	The background color of the button.
    Border Color	The color of the button border.
    Border thickness	The thickness of the button border. Unit: pixels.

  • Hover Style: the style when you hover over a button in the number input box. The parameters are the same as those in Default style.

Data Sources panel

value: The value displayed in the number input box. This value overrides the prompt text configured in the style. If left empty, the value in the style configuration is used.

Advanced Panel

Enable the global variable feature to let the number input box trigger data requests, emit temporary variables, and interact with other components. By default, the value configured in the data panel is emitted. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	Triggered after a data interface request is completed and processed by a filter, with the processed JSON data. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     When the current value changes	Triggered when the current value changes, along with the corresponding data item. { "value": 0.002 }

   • Action

     Action	Description
     Import data	Imports pre-processed data in the widget's drawing format for redrawing, without requesting server data again. [ { "value": 0.2 } ]
     Request Data Interface	Requests server data again, using the data from an upstream processing node or layer node as parameters. For example, if the API data source is https://api.test and the data passed to request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Obtain the value of the current input box	Gets the current value of the input box. No parameters are required.
     Clear a component to its default value	Resets the component to its default value. No parameters are required.
     Move	Moves the widget to a specified location. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data, then modify the style field in the data processing node in Blueprint Editor.