We used two libraries for quick parsing data on the client-side. Papa Parse - powerful CSV parser for JavaScript allows configuring header row options, specify/auto-detect delimiters, identify character for commented rows, and convert numbers and booleans to their types. The xlsx library was used to parse binary input data to XLS entities — workbooks and worksheets. On the next step, the worksheet gets converted to JSON. Input data is taken from the native FileReader object (onload event is used to emit a parsed workbook).

We had to make sure that the app analytics will include complex graphs and benchmarks to provide the visual statistics. We used the Microsoft Power BI service to display data charts. Data (reports, data sources, transaction impacts) gets uploaded to the Power BI from the server app. The client app uses powerbi-client library to perform requests to the Power BI API and renders the charts in the iFrame. We ensured the intuitive and composite visual elements for better understanding and comparison of the sustainability index.

As part of the authorization solution, we used the Auth0 service. It provides a web interface to configure API, database connection, authorization rules, and email templates. The implemented functionality allows users to sign in via email/password credentials, use the passwordless sign in (via email or SMS confirmation) or use OAuth2 flow.

For content translation, we used @ngx-translate library. Since translation tokens get stored in JSON files on the client-side, provided by the library TranslateService implements methods for both sync and async translations. Also, there is a useful translate pipe which allows us to translate content directly in the component’s template.

Since the app allows getting an overview of the company’s sustainability index, organization management is an essential feature. So, organizations can be created and managed by the app-admin only. Organizations have different access to application modules. Each organization has its own dataset on the Power BI service, which is based on the actual organization’s data sources and reports.

Convenient reporting process depends on top-level tables. We used ag-grid library for table rendering. It provides a highly configurable solution to get tables with customized elements. It allows creating separate Angular components for header and data cells rendering, implement sorting, filtering, pagination, and rows drag’n’droping. The table’s functionality can be expanded by a custom context menu, sidebars, and rows grouping.

The requirement for this app was far beyond the scope of a basic user management system. The application does not have a sign-up functionality, so users can be created directly by the app admin or invited to the organization by the organization admin. Each user can be a member of multiple organizations. The user access is managed via application and organization roles.

All uploaded data should have a format that is specified in JSON-schemas. To validate this data, we used Ajv library. This library is known as the fastest JSON Schema validator and is currently maintained and developed, so it was a perfect choice for this solution.