Create data reports using javascript function

Assume you have a sporting event or competition. Most likely the results will be stored in a database and have to be listed on a website. You can use the Fetch Api to fetch the data from the backend. This will not be explained in this document. I assume the data has already been retrieved and is an array of records. This array of records has to be in the correct order, but the source function can filter and sort the array on the fly within the report engine.

This document decribes how to define headers and footers very easily and how to arrange record grouping by compare function as well.

Each header function returns html based on static text and parameters currentRecord, objWork and splitPosition. Each footer function returns html based on static text and parameters previousRecord, objWork and splitPosition.

It is very flexible, but you have to make the html yourself! Don't expect a WYSIWYG editor.

General structure of a report

• Report has a report header and footer. Can be text or just html or both.
• Report has one or more section levels. Section level N starts with header level N and ends with footer level N.
• Section level N contains one or more times section level N+1, except the highest section level.
• Highest section level contains the data created based on the records in the array.

In most cases highest section level is just a html table or html flex item.

Example of report structure

Structure of report definition object called reportDefinition

Examples of headers and footers array elements

Example of compare function

Running counter

In case you want to implement a running counter, you have to initialize/reset it in the right place. It can be achieved by putting some code in the relevant header:

If you only want to initialize objWork.runningCounter at the beginning of the report you can achieve that by putting the right code in reportDefinition.headers[0]. I call it property runningCounter, but you can give it any name you want.

You have to increase the running counter somewhere in your code because... otherwise it is not running ;-) for example:

Most of the time you don't need to manage a running counter in javascript! Most likely data comes from a database which can be queried by SQL. Use the SQL WINDOW function ROW_NUMBER or RANK to do the hard work.

How to create totals for multiple section levels, a running total and even a numbered header

How to preprocess the source array on the fly (for example in click event)

How to generate the report

Source code

Below source code I created to make this all work. It is kind of wrapper function for all headers and footers. Feel free to copy paste it and use it in your own module.

What is objWork

objWork is a javascript object that is passed as the second argument to createOutput function (optional argument, default {}). It is passed on as shallow copy to headers functions, footers functions, compare function, init function, source function and display function. All these functions share this object. You can use it for example for configuration information or color scheme. objWork is automagically extended with { rawData: thisData }. For example createOutput(reportDefinition, { font: 'Arial', font_color: 'blue' })(thisData).

Examples