Report

Prev Next

Reports allow users to create reports as representations of data inside Web Vision.

  • It is composed of sub-elements called Report components.

  • The main functionality of Report is to allow users to create PDF files with an easily printable layout.

  • Report size selection differs from other components, as it’s limited to a collection of standard paper sheet sizes. Whilst multiple pages are permitted in pdf mode, when in designer mode it is displayed as a continuous element with a viewport equal to the selected size.

  • The internal components in Report are ordered inside layouts, which are organized into rows and columns, similar to a Layout container.

  • It contains three sections, a header and footer that are repeated at the end and start of each page (when in pdf mode) and the body, which will occupy as many pages as necessary in order to display all components included in the report.

  • In designer mode, all data displayed is mock data and is only used as a placeholder to allow users to design the report’s appearance and distribution. PDF mode displays real data.

  • It also offers two related actions for generating and downloading PDFs from outside the report element.

  • PDFs can only be generated in report instances. Report templates cannot be generated in this case.

  • PDFs are displayed in a pdf viewer, which allows page navigation, pdf generation and pdf download.

Report properties

Style properties

Property

Description

Report background

Contains the properties used to configure the background colors of the report sections.

Header color

Sets the background color of the report header.

Body color

Sets the background color of the report body.

Footer color

Sets the background color of the report footer.

Format properties

Property

Description

Page

Sets the report paper sheet size by selecting one of the supported paper formats from the dropdown list.

Time zone

Sets the time zone used by report components that display timestamps.

Fonts

Contains the properties used to embed custom font files for report styling and international character support.

Margins

Contains the properties used to configure the margins of the report body, header, and footer.

Font properties

Property

Description

Normal

Sets the font file used to render regular text in the PDF. The default font is Helvetica.

Bold

Sets the font file used to render bold text in the PDF. The default font is Helvetica-Bold.

Italics

Sets the font file used to render italic text in the PDF. The default font is Helvetica-Oblique.

Bold Italics

Sets the font file used to render bold italic text in the PDF. The default font is Helvetica-BoldOblique.

Note:

Font properties are available from N3uron version 1.21.13.

Margin properties

Property

Description

Report

Sets the top, right, bottom, and left margins of the report body. The top and bottom margins also determine the available height of the header and footer.

Header

Sets the top, right, bottom, and left margins within the report header.

Footer

Sets the top, right, bottom, and left margins within the report footer.

Report properties

Property

Description

Visualization

Contains the properties used to switch between report design and PDF viewing modes and configure the PDF viewer.

Mode

Sets the report visualization mode to Designer or PDF.

Designer

Displays the report design workspace. It behaves similarly to the Layout component but only allows report components as children.

PDF

Displays a PDF viewer containing the report generated from the components configured in Designer mode.

Generate on show

When enabled, generates the report when the component is first shown. For example, a report inside a container is generated when that container becomes visible.

PDF header

Contains the properties used to configure the controls displayed in the PDF viewer header.

Hide reload

Determines whether the button used to generate or reload the PDF is hidden.

Hide download

Determines whether the PDF download button is hidden.

PDF style

Contains the appearance properties of the PDF viewer.

Header text color

Sets the text and icon color used in the PDF viewer header.

Header background color

Sets the background color of the PDF viewer header.

Header

Defines the instance list in which the report header elements are created.

Report components

There are three instance lists within the Report, which behave similarly to the components instance list inside containers, although they do not accept the same elements. Instead, they support a specific set of elements known as report components.

Common properties

All report components share some properties.

Width

Defines element width. If null, the entire available width will be occupied. If the sum of all widths in the row is larger than the page width, the elements will overflow. Only width is available as a general property, as height is a free element, meaning that it can occupy as much height as necessary.

Format

Much like the General Report, Format defines the element margins, allowing spaces to be set between the different elements to define the layout. Margins will be displayed graphically in designer mode using this selection.

Style

Default styles for all report components.

Property

Description

Background color

Defines the element's background color. Even when the margin appears inside the element selection, it’s not considered element space, so the background will not be extended to it.

Border

Border width

Width of the border line, in pixels.

Border color

Border color.

Report layout

All report elements must be included as components in the report layout. The Report layout is very similar to that of a layout container. Although only the width can be controlled, the height will grow along with the component’s height. The report layout includes the following properties.

Property

Description

Page break

Defines when the page break should be relative to the element. Fit page break will only break the page if the element does not fit inside the page.

Direction

Defines whether elements are shown as elements of the same row or elements of the same column.

Report chart

Report chart graphically presents Datasets. The general procedure for configuring the chart is as follows: 

  • Create Datasets and populate them with data in a format that the report chart supports. Series should be added to the report chart and associated to a dataset.

  • When no series has been added, mock series will be added as placeholders. These series will not show on the pdf.

Chart has the following configuration properties:

Property

Description

Height

Unlike layout, table, and label, chart has a defined height.

xAxis format

Datetime

X axis values are timestamps and labels are formatted timestamps.

Categories

A category will be defined for every series, which will show the total cumulative value of the entire series.

xAxis/yAxis text alias

Text alias allows users to display labels instead of values. The first label corresponds to 0 and increments by one for every label in the list. There are 3 ways to define the label list:

  • Comma separated list. Example: Jan,Feb,Mar,Apr alias to values 0,1,2,3

  • Array in an expression. Example =[“Jan”,“Feb”,“Mar”,“Apr”]; alias to values 0,1,2,3.

  • Array in an expression with value-label pairs. Example: =[[10, “Jan”],[20, “Feb”],[30, “Mar”],[40, “Apr”]; alias to values 10,20,30,40.

Series

Instance list where the series sub-elements will be instantiated.

Report chart series

Report chart series are Report chart sub-elements that define the properties of a series. Each series is shown as a succession of time points or as a category depending on the chart mode. It has the following properties.

Property

Description

Label

Series label.

Color

Series color.

Chart type

Series type; can be Line, Area, Bar or Column, as seen in the following images:

Stacked

When enabled, values of this series will be stacked with other stacked series.

Dataset

Series data in dataset format.


Report image

This report component inserts images onto the screen. Supported Image formats are .jpg, .png, .svg and gif. Unlike layout, table, and label, Report image has a defined height.

Report label

Report label allows labels to be added to the report. Labels are just static text that can be added like any other report component. As per the label component, different font styles can be set.

Report pie chart

Report pie chart displays data as a circular chart divided into sections, each representing a different series, much like the Report chart series. The value of these sections is the sum of the total value of the Datasets configured in the corresponding series dataset field.

  • As per the Report chart, if no series have been added to the Report pie chart, mock series will be displayed as placeholders.

The Report pie chart includes the following properties:

Property

Description

Height

Report pie chart height.

Percentage

If true, displays data labels as percentages. If not, data labels are shown as absolute values.

Label decimals

Number of decimals shown in data labels.

Series

Instance list where the series sub-elements will be instantiated.

Report pie chart series

Report pie chart series are Report pie chart sub-elements that define the properties of a series. Each series is shown as a sector of the chart. It has the following properties:

Property

Description

Label

Series label.

Color

Series color.

Dataset

Series data in dataset format.

Report table

Report table allows the Datasets data to be displayed in a table format.

  • As per the Report chart and Report pie chart, Report table uses series to show data.

  • When no series exists, a placeholder will be shown. Placeholders will not be shown in pdfs.

  • Each series is either a column or row of the table, depending on its configuration.

  • In PDF mode, the table will occupy as much height as necessary.

Report table includes the following properties:

Property

Description

Expressions as rows

When true, instead of showing as columns in the table, series will be displayed as rows, with the leftmost column set as the series name.

Timestamp format

Timestamp format, as seen in the timestamp formatting appendix.

Style

Font

Body text color

Color for text on body within the table.

Header text color

Color for text on header row.

Table background

Header color

Color for background of header row.

Series

Instance list where the series sub-elements will be instantiated.

Report table series

Report table series are Report table sub-elements that define the properties of a series. Each series is displayed as a row or column of the table. It includes the following properties.

Property

Description

Label

Series label.

Value format

Value format based on the sprintf format specification.

Dataset

Series data in dataset format.


Web Vision Full Product Details