https://github.com/unytics/static_bi

Embed Analytics Everywhere!
https://github.com/unytics/static_bi

chartjs dashboards duckdb static-bi static-site web-components

Last synced: 26 days ago
JSON representation

Embed Analytics Everywhere!

• Host: GitHub
• URL: https://github.com/unytics/static_bi
• Owner: unytics
• License: mit
• Created: 2025-03-14T10:13:54.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-07-04T08:15:30.000Z (11 months ago)
• Last Synced: 2025-12-19T20:43:38.381Z (6 months ago)
• Topics: chartjs, dashboards, duckdb, static-bi, static-site, web-components
• Language: JavaScript
• Homepage:
• Size: 14 MB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          

![logo](docs/assets/static_bi_logo_and_name.svg)



    Embed Analytics Everywhere



---




## Static BI?

Static BI is **the easiest way to embed Interactive Dashboards in your website**.




## Your first dashboard

To create a dashboard, you only need to:

> 1. [Add BI components in a html file](#1-add-bi-components-in-a-html-file)

> 2. [Open the file in a browser](#2-open-the-file-in-a-browser)

> 3. [Play with your dashboard](#3-play-with-your-dashboard)

> 4. [Deploy Anywhere](#4-deploy-anywhere)




#### 1. Add BI components in a html file

To follow the evolution of stocks value of some companies over time, create an html file with this content:

``` html title="my_first_dashboard.html"

```




#### 2. Open the file in a browser

Open the file in Google Chrome (or any browser) and you'll get this simple dashboard:

![simple_dashboard](docs/assets/simple_dashboard.png)




#### 3. Play with your dashboard

The dashboard is interactive! Click on `AMZN` bar in the bar chart to filter the data in other charts:

![simple_dashboard_filtered](docs/assets/simple_dashboard_filtered.png)




#### 4. Deploy Anywhere

You can deploy a website with Static BI components anywhere:

- in your own website, web app

- in static websites hosting services: github pages, gitlab pages, s3, google cloud storage, netlify, vercel, etc




## Key Features

1. **Declarative UI**

    - *Define data sources and charts using simple custom HTML tags (e.g., ``, ``, ``).*

    - *Includes Rich & Customizable Component Library.*

2. **Interactive Filtering**

    - *Click on chart elements (bars, lines, pie slices) to filter the data across other components on the page.*

    - *Supports multi-select with `Ctrl`/`Cmd` key.*

3. **Serverless Analytics**

    - *Runs entirely in the browser after loading static assets (HTML, JS, CSS, data files).*

    - *Can be deployed anywhere*

How it works

Static BI is Powered by [DuckDB-WASM](https://duckdb.org/docs/api/wasm/overview), [ECharts](https://echarts.apache.org/) and [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components).

1.  **Data Management:** The `` components initializes DuckDB-WASM and instruct it to load data (e.g., fetch a Parquet file or fetch data from an API) within the in-browser database.

2.  **Component Initialization:** Custom elements like ``, ``, etc., are defined in JavaScript modules and used directly in the HTML/Markdown content.

3.  **Data Querying:** When the page loads or filters change, each component constructs a SQL query based on its attributes (e.g., `table`, `measure`, `by`, `breakdown_by`) and the current global filters. It sends this query to `DuckDB`.

4.  **Rendering:** The component receives query results from DuckDB and renders the visualization using ECharts or by generating appropriate HTML (for tables/scorecards).

5.  **Interactivity:** Click events on chart elements trigger a filter update. The `base_chart.js` logic updates the global filter state and dispatches an event, causing relevant components to re-query data and re-render.

Inspiration

- [Evidence](https://evidence.dev/)

- [Rill Data](https://www.rilldata.com/)

- [Mosaic](https://idl.uw.edu/mosaic/)

- [Lightdash](http://lightdash.com/)




## Contribute!

Static BI is fully open-source (MIT License). Any contribution is more than welcome 🤗!

- Add a ⭐ on the [repo](https://github.com/unytics/static_bi) to show your support

- [Join our Slack](https://join.slack.com/t/unytics/shared_invite/zt-1gbv491mu-cs03EJbQ1fsHdQMcFN7E1Q) and talk with us

- [Raise an issue](https://github.com/unytics/static_bi/issues/new/choose)

- Open a Pull-Request!

  Todo Ideas

- Add Examples

- Add Documentation

- Add controls such as date-range or dimension selection.

- Create a playground to edit dashboard code online and see result in realtime

- Add connectors to:

    - cubejs

    - supabase

    - Postgrest: `docker run --rm -p 3000:3000 -e PGRST_DB_URI="postgres://cube:12345@demo-db.cube.dev/ecom" -e PGRST_DB_ANON_ROLE=cube -e PGRST_DB_AGGREGATES_ENABLED=true postgrest/postgrest`

    - buckets

    - data-warehouses...

    - unytics

  - Add layout components?

    - tabs

    - grid / columns




.md-typeset h1 {

  font-size: 0px;

}