Pageless layout

ActiveReportsJS now supports the creation of Pageless Reports. This new layout type provides an alternative to traditional page-by-page report formats by presenting report content across separate tabs. The Pageless layout also enables the use of scrollable containers for a streamlined user interaction. This feature enhances the flexibility of report design with ActiveReportsJS, offering a user-friendly approach to structuring and navigating your reports. For a step-by-step tutorial on creating your first pageless report, please refer to the Get Started with the Pageless Report walkthrough.

Custom Code

ActiveReportsJS now supports the use of custom functions within your report expressions. This feature enhances flexibility in your report design, offering an efficient way to manage complex calculations, reuse code, and facilitate advanced conditional formatting. Here are some ways you can benefit from this feature:

• Complex Calculations: While ActiveReportsJS expressions efficiently handle simple to moderately complex calculations, you may encounter business requirements that necessitate more intricate computations. Custom code can simplify these scenarios, providing an elegant solution for complex mathematical manipulations that go beyond the capabilities of standard expressions.

• Code Reusability: If you find yourself using similar code snippets across multiple expressions within your report, custom code can provide a more efficient approach. By defining the function once, you can then call it from various locations in your report. This practice not only enhances code maintainability, but also contributes to a cleaner report design.

• Advanced Conditional Formatting: Although basic conditional formatting can be managed with expressions, custom code takes it a step further, accommodating more intricate scenarios that demand dynamic styling based on specific conditions.

For instance, in our Runtime Filtering demo, we leverage a custom function to format currency values in relation to their magnitude. This function is defined as follows:

function formatCurrencyValue(value) {
    let currencySymbol = '$';
    if (value >= 1000000000) {
        return currencySymbol + (value / 1000000000).toFixed(1) + 'B';
    } else if (value >= 1000000) {
        return currencySymbol + (value / 1000000).toFixed(1) + 'M';
    } else if (value >= 1000) {
        return currencySymbol + (value / 1000).toFixed(1) + 'K';
    } else {
        return currencySymbol + value.toFixed(1);
    }
}

In the report, textboxes that display numeric values call this function through expressions, like:

{Code.formatCurrencyValue(Sum(SalesAmount))}

This elegant approach allows for dynamic formatting of currency values, based on their size, improving the readability and interpretation of your data.

To learn more about incorporating custom code into your ActiveReportsJS projects, refer to our in-depth guide. Here, you will discover detailed information and practical examples to help you make the most of this powerful feature.

Parameters View

We have now integrated a new feature that allows for the creation of a custom parameters view using advanced editors. This enhancement accommodates various parameters such as Date Range, Slider, ListBox, and more, allowing for more versatile control over your data.

Additionally, we updated the Parameters Documentation to include a comprehensive guide. This guide provides detailed instructions on how to effectively design and utilize parameters in your reports, and also outlines the steps to build a custom view.

You can check the sample of custom parameters view on the demo web-site.

Chart report item

New Plot Types

We added four new plot types to our data visualization toolbox: Range Column, Range Bar, Range Area and Gauge plots.

Range Column and Bar Plots

Range Column and Bar and plots are ideal for displaying the difference between the minimum and maximum values for each category, represented by vertical or horizontal bars. This chart type is useful for visualizing data such as temperature ranges, price fluctuations, or other scenarios where the focus is on the range between two values.

Range Area Plot

Range Area plots are designed to display the range or difference between two sets of values across a continuous variable, such as time. This chart type consists of two lines representing the upper and lower bounds, with the area between the lines filled in to emphasize the range. Range Area plots are often used to display data such as sales forecasts with confidence intervals, temperature ranges over time, or stock price fluctuations.

Gauge Plot

Gauge plots, also known as speedometer or dial plots, are suitable for visualizing a single data point within a specified range, often in relation to a target or goal. These plots are particularly useful when you want to communicate progress or performance in a visually appealing manner.

Enhanced Plot Tooltip and Label Customization

The recently added Text Encoding feature provides the capability to implement advanced configurations for your plot's labels and tooltips. For further information, please refer to the Customizing Tooltips and Labels subsection under the specific plot type. As an instance, you can look at Column and Bar plots.

Configurable Bar Lines for Column and Bar Plots

You now can customize the color, width, and style of the lines connecting bars or columns in your plots.

Interactive legend

A Color, Shape, or Size legends of a chart can now be interactive, providing a report reader the ability to click on a legend item to jump to another report, open a dynamic URL or apply parameters.

Miscellaneous

Data Processing improvements

We've improved data processing in ActiveReportsJS to primarily use the asynchronous fetch API for obtaining report data. This enhancement not only improves user experience, but it also allows developers to employ service workers to intercept data requests. As a result, developers can manage these requests directly in the application's code, giving them full control over data handling. Please note, while the synchronous XHR API is still employed in some scenarios, these instances are now quite rare.

GroupIndex function

You can now leverage the GroupIndex function to retrieve the index of a grouping instance. This functionality is particularly beneficial when customizing the style of grouping items at runtime. In particular, it can be employed to set alternating background colors for a more visually organized and appealing display. For instance, in the Simple Table demo the background color of the textboxes in the detail rows is determined by the expression {IIF(GroupIndex() Mod 2 = 0, "White", "#f8f8f8")}. This expression uses the GroupIndex function, which retrieves the index of the Details group, to alternate the background color between white and a light grey (#f8f8f8). The Details group of the table is set to the value of a unique field in the dataset, which in this case is StartTime. As StartTime is unique for each taxi drive, it effectively groups each drive as a distinct entity. As a result, when previewing the report, the detail rows display an alternating background color for enhanced readability, with each taxi drive visually separated by color.

Customizing Date parameters format

You can now set the Format for the Date and DateTime parameters to customize the appearance of the parameter's value in the date input box of the parameters panel.