Datalys2 Reports

A configuration-driven React framework for generating dynamic dashboards and reports.

Overview

Datalys2 Reports allows you to create rich, interactive reports by simply defining a JSON configuration embedded in your HTML. It handles the layout, data visualization, and interactivity, so you don't need to write custom React code for every report.

Features

• JSON Configuration: Define your report structure, pages, and data in a simple JSON format.
• Multiple Visuals: Tables, checklists, calendars, KPIs, cards, and charts — line, area, stacked/clustered bars, pie, scatter, histogram, heatmap, box plot, and gauge.
• Layout System: Flexible row/column/grid layouts, tab containers, and modals.
• Data Handling: Datasets in four formats, inline or gzip-compressed, fetched from a URL (JSON/CSV, with optional auto-refresh), or derived from another dataset with filters and aggregations.
• Interactivity: Sorting, search, grouping, column hiding, row detail modals, in-report navigation, and per-visual view state remembered across reloads.
• Export & Print: CSV export for tables, PNG/SVG export for charts, and a print/PDF mode that expands the whole report onto paper.
• Theming: Customizable via CSS variables, with automatic light and dark modes.

Usage

A report is a single HTML file: two asset tags, a <div id="root">, and a JSON config. React and D3 are bundled into the script — there is nothing else to install and no build step.

1. Include the assets: the CSS and JavaScript from a CDN.
2. Add the container: a <div id="root"></div> element.
3. Define the data: a <script id="report-data" type="application/json"> tag containing your report configuration.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Report</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/dl2-style.css">
</head>
<body>
    <div id="root"></div>

    <script id="report-data" type="application/json">
    {
        "pages": [ ... ],
        "datasets": { ... }
    }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/datalys2-reports.min.js"></script>
</body>
</html>

Pin the version as above so a published report keeps rendering the way you built it. Swap @0.5.0 for @latest to always track the newest release.

Installing from npm

To host the assets yourself (or vendor them into another build):

npm install datalys2-reports

The files are then at node_modules/datalys2-reports/dist/datalys2-reports.min.js and .../dist/dl2-style.css. Copy or serve them, and reference them the same way as the CDN example.

This package ships a self-contained UMD bundle intended for a <script> tag — it mounts itself into #root on load and reads the report-data script. It does not export a React component API, so there is nothing to import.

For detailed documentation on the configuration schema and available components, see the docs folder.

Development

This section is only if you are building the package yourself!

Prerequisites

• Node.js
• npm

Setup

# Install dependencies
npm install

Build

To build the production bundle:

npm run build

Watch Mode

To watch for changes during development:

npm run dev

License

ISC