跳到主要内容

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

PropertiesDescription
LabelThe name of the field displayed to the user
Primary valuethe primary value or rating displayed by the component.
Secondary valuean additional rating or value associated with the primary value, providing additional information or context.
Primary
Decimal placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta 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 texta 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 placespecify the number of decimal places that can be entered in the component
Show trend signEnabling this property displays an arrow or sign indicating the trend or change in the rating value.
Show thousand separatorWhen enabled, this property adds a thousand separators (comma or period) to the primary and secondary values for better readability.
Enable trend colorchange color based on the trend or change in the rating value.
Prefix texta 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 texta 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 handlerdefine custom actions or logic that trigger when the component is interacted with or the rating is changed.
TooltipUsers can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported.
HiddenDynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value.
Alignmentalignment of the component, such as left, center, or right.
Theme ColorAllows users to specify the button's background color and opacity
Positive colordetermines the color used for positive or high ratings
Negative colordefines 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"}}

PropertiesDescription
Primary ValueInput 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

EventDescription
ClickWhen 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 nameDescription
colorSchemebackground color of the button
displayNamethe name of this component (ie button1)
eventsgenerated or triggered when certain actions or events occur within the number input component.
hiddenhidden status (true or false)
labellabel value
negativeColorSchemedetermines the color scheme used for displaying negative values
positiveColorSchemesets the color scheme for positive values
primaryValuethe primary numerical value to be displayed in the statistics component.
decimalPlacedefines the number of decimal places to be shown for both the primary and secondary values.
showTrendSigndisplays a positive or negative trend sign (+ or -) next to the values, indicating the direction of the trend.
textAlignthe alignment of the statistics component
positiveSignsets the symbol to be displayed for positive values
negativeSigndefines the symbol to be shown for negative values.
showSeparatorwhether displays a thousand separator (such as a comma) to improve readability of large numbers.
prefixTextvalue of the prefix
suffixTextvalue of the suffix
setPrimaryValueenables you to programmatically set or update the primary value of the statistics component.
secondaryValuea secondary numerical value that can be displayed alongside the primary value.
secondaryDecimalPlacespecifies the number of decimal places to be shown for the secondary value.
secondaryEnableTrendColorwhether applies a color scheme to the secondary value based on its trend
secondaryPositiveSignSets the symbol to be displayed for positive secondary values
secondaryNegativeSignDefines the symbol to be shown for negative secondary values
secondaryPrefixTextadd custom text or symbols to appear before the secondary values.
secondaryShowSeparatordisplays a thousand separator for the secondary value.
secondaryShowTrendSigndisplays a trend sign (+ or -) for the secondary value.
secondarySuffixTextadd custom text or symbols to appear after the secondary values.
tooltipTextvalue 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.

s3data

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.

stat_data

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

stat_layout

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}}

stat_button_config

Step 4 Test

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

stat_test