https://github.com/kameronbrooks/datalys2-reporting
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.
https://github.com/kameronbrooks/datalys2-reporting
data data-visualization html react
Last synced: 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/kameronbrooks/datalys2-reporting
- Owner: kameronbrooks
- Created: 2025-12-07T14:39:06.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-02-11T19:46:23.000Z (4 months ago)
- Last Synced: 2026-02-12T03:49:45.369Z (4 months ago)
- Topics: data, data-visualization, html, react
- Language: TypeScript
- Homepage: https://www.creation-wasteland.com/
- Size: 651 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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**: Includes built-in components like KPIs, Pie Charts, Stacked Bar Charts, Clustered Bar Charts, and Cards.
* **Layout System**: Flexible row/column layout system.
* **Data Handling**: Supports multiple datasets in 'records' or 'table' formats.
* **Theming**: Customizable via CSS.
## Usage
You can use the library directly from a CDN without installing anything.
1. **Include the assets**: Add the CSS and JavaScript from jsDelivr.
2. **Add the container**: Create a `
` element.
3. **Define the data**: Add a `` tag containing your report configuration.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Report</title>
<!-- Include styles from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kameronbrooks/datalys2-reporting@latest/dist/dl2-style.css">
</head>
<body>
<div id="root"></div>
<script id="report-data" type="application/json">
{
"pages": [ ... ],
"datasets": { ... }
}