i4designer Knowledgebase

Tiles

Abstract

Here are the i4designer Tiles components for your new project created on the i4connected platform.

The i4designer Tiles category features the i4connected platform specific charts. More details can be found in the upcoming article.

Tiles
Abstract

Check out this article in order to learn more details about the i4designer Tiles component and the properties it features.

The i4designer Tiles component provides the user with possibility to display a set of tiles presented as detailed cards providing information about certain recorded values, specified by the component predefined filter. The filter of the Tiles component is based on a set of specific parameters. More details about the configuration properties, can be found in the table below:

Tiles.jpg

The Tiles component

Category

Property

Description

Configuration

Aggregate totals

If the toggle button is set to true all the measurements of the respective media and KPIs will be summed up.

Aggregate_totals.jpg

Area ids

Allows the user with possibility to add one or multiple Area identification numbers, by clicking the Add item button.

By clicking the Expand array list button, all the added array items are displayed.

Further on, the user can add an Area for each Array item.

The following actions are available for each array item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

Area_ids.jpg

Auto update

Allows the user to specify whether the updating should happen automatically or not. When this option is enabled the component pulls interval for data and updates it automatically. The Filter object property must be also filled, when enabling the Auto update property.

Auto_update.jpg

Date range

Allows the user to set the date range span specifying when it starts and ends. The user can chose from the following drop-down options:

  • Specific (specific periods of time)

  • Offset (runs the current filter on a specified date in the past)

  • Current day

  • Current week

  • Current month

  • Current year

  • Last day

  • Last week

  • Last month

  • Last year

date_range.jpg

Device ids

Allows the user with possibility to add one or multiple Device identification numbers, by clicking the Add item button.

By clicking the Expand array list button, all the added array items are displayed.

Further on, the user can add a Device for each Array item.

The following actions are available for each array item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

Device_ids.jpg

Direction

Sets the chart label direction measured in pixels. The value can be increased or decreased using the up / down arrows or manually added.

Direction.jpg

End date

Sets the end date of the chart measurement. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/ docs/.

End_date.jpg

Filter object

Allows the user to manually insert the i4connected chart parameters.When adding the Filter object, the Auto update property should be also enabled.

Filter_object.jpg

Kpi ids

Allows the user with possibility to add one or multiple KPI identification numbers, by clicking the Add item button.

By clicking the Expand array list button, all the added array items are displayed.

Further on, the user can add a KPI for each Array item.

The following actions are available for each array item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

KPI_Ids.jpg

Org Unit ids

Allows the user with possibility to add one or multiple Organizational Unit identification numbers, by clicking the Add item button.

By clicking the Expand array list button, all the added array items are displayed.

Further on, the user can add a Organizational Unit for each Array item.

The following actions are available for each array item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

OrgUnit_IDs.jpg

Resolution

Allows the user to select the resolution of the data rendered in the chart (the time interval between two consecutive measurements displayed on the time axis). The user can choose between five predefined resolutions (15 minutes, one hour, one day, one month and one year) or can set the option on Auto. When the Resolution is set to Auto, the system automatically adjusts the resolution based on the active Time range setting and the current zoom level.

Resolution.jpg

Site ids

Allows the user with possibility to add one or multiple Site identification numbers, by clicking the Add item button.

By clicking the Expand array list button, all the added array items are displayed.

Further on, the user can add a Site for each Array item.

The following actions are available for each array item:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Remove item remove_state.jpg

Site_ids.jpg

Start date

Sets the start date of the chart measurement. Available tokens are - YYYY, YY, Y, Q, MM, MMM, MMMM, D, DD. Further information are available in the "Year, month, and day tokens" chapter under https://momentjs.com/ docs/.

Start_date.jpg

Palette

Tiles background

Sets the background color of the tiles. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Tiles_background.jpg

Tiles border color

Sets the border color of the tiles. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Tiles_border_color.jpg

Tiles foreground

Sets the foreground color of the tiles. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Tiles_foreground.jpg

Tiles header background

Sets the background color of the tiles header. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Tiles_header_background.jpg

Tiles header foreground

Sets the foreground color of the tiles header. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Tiles_header_foreground.jpg

Tiles icon color

Sets the icon color of the tiles. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Tiles_icon_color.jpg

Background color

Sets the background color of the component. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Background_color.jpg

Border color

Sets the border color of the component. The user can either manually type in the HEX color code or use the color picker tool. As the color palette is injected to this component by means of the default CSS class, applying this property the CSS class settings will be overwritten.

Border_color.jpg

Layout

Display header icon

Enables display of the header icon if property is set to True.

Icon_display.jpg

Display mode

Sets the display mode of the tiles, selecting from the drop-down list options: tiles or list.

Display_mode.jpg

Typography

Header font size

Sets the font size of the chart title, displayed in the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Header_font_family.jpg

Font size

Sets the font size of the chart title, displayed in the component header, using the up and down arrows to increase and decrease, or by manually typing the desired value.

header_font_size.jpg

Font family

Sets the font thickness of the chart title, displayed in the component header, selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

header_font_weight.jpg

Transform

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Left.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Top.jpg

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg