Statistics

What is Statistics?

The Statistics component in ILLA Cloud is a powerful tool for displaying and analyzing numerical data. It provides a visually appealing and customizable way to showcase key metrics and statistics.

Properties

Properties	Description
Label	The name of the field displayed to the user
Primary value	the primary value or rating displayed by the component.
Secondary value	an additional rating or value associated with the primary value, providing additional information or context.
Primary
Decimal place	specify the number of decimal places that can be entered in the component
Show trend sign	Enabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separator	When enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend color	change color based on the trend or change in the rating value.
Prefix text	a short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix text	a short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Secondary
Decimal place	specify the number of decimal places that can be entered in the component
Show trend sign	Enabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separator	When enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend color	change color based on the trend or change in the rating value.
Prefix text	a short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user
Suffix text	a short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user
Event handler	define custom actions or logic that trigger when the component is interacted with or the rating is changed.
Tooltip	Users can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
Hidden	Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Alignment	alignment of the component, such as left, center, or right.
Theme Color	Allows users to specify the button's background color and opacity
Positive color	determines the color used for positive or high ratings
Negative color	defines the color used for negative or low ratings.

Method

You can use other components to control the component. We support the following two methods:

• setPrimaryValue

To set the primary value, for example, {{"value1"}}

Properties	Description
Primary Value	Input primary value

• resetPrimaryValue

To reset the value to the default value of the selected component. If the default value is not specified, clear value.

Event handler

Event	Description
Click	When a user clicks this button, perform specific action customized by users.

Data

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property name	Description
colorScheme	background color of the button
displayName	the name of this component (ie button1)
events	generated or triggered when certain actions or events occur within the number input component.
hidden	hidden status (true or false)
label	label value
negativeColorScheme	determines the color scheme used for displaying negative values
positiveColorScheme	sets the color scheme for positive values
primaryValue	the primary numerical value to be displayed in the statistics component.
decimalPlace	defines the number of decimal places to be shown for both the primary and secondary values.
showTrendSign	displays a positive or negative trend sign (+ or -) next to the values, indicating the direction of the trend.
textAlign	the alignment of the statistics component
positiveSign	sets the symbol to be displayed for positive values
negativeSign	defines the symbol to be shown for negative values.
showSeparator	whether displays a thousand separator (such as a comma) to improve readability of large numbers.
prefixText	value of the prefix
suffixText	value of the suffix
setPrimaryValue	enables you to programmatically set or update the primary value of the statistics component.
secondaryValue	a secondary numerical value that can be displayed alongside the primary value.
secondaryDecimalPlace	specifies the number of decimal places to be shown for the secondary value.
secondaryEnableTrendColor	whether applies a color scheme to the secondary value based on its trend
secondaryPositiveSign	Sets the symbol to be displayed for positive secondary values
secondaryNegativeSign	Defines the symbol to be shown for negative secondary values
secondaryPrefixText	add custom text or symbols to appear before the secondary values.
secondaryShowSeparator	displays a thousand separator for the secondary value.
secondaryShowTrendSign	displays a trend sign (+ or -) for the secondary value.
secondarySuffixText	add custom text or symbols to appear after the secondary values.
tooltipText	value of tooltip text

Example: {{statistics1.secondaryValue}}

Use case

Next, we will demonstrate how to map the data from the data source to statistics with a button.

Step 1 Add an action

Let us create a table in Amazon S3. One of the documents is called

'1.txt' with the decimal '1.1111' as its data. This is the value we want to show in number input.

Then we can create a new action for Amazon S3 from the action list, listing all the data in the bucket and named s31.

Select Read an object for **Action Type**. Put 1.txt for **Object Key.**

Click Save and Run to activate this action.

Step 2 Add Components

Next, we can add a statistics component and a button component to the canvas.

We set the default primary value of statistics to 0 and labeled the button as "Set value" as shown below

Step 3 Configure the component

For the button component, we can configure it to set the value in statistics component to the data of the document we read from s31 api.

1. In the Edit event handler, select Control component in action, and select the statistics component that you want to update as the target of the event.
2. Choose the setValue action and set the value as {{s31.data}}

Step 4 Test

Now that when you click the "Set value" button, the value should change to 1.1111.