Embed Analytics Everywhere
Static BI is the easiest way to embed Interactive Dashboards in your website.
To create a dashboard, you only need to:
To follow the evolution of stocks value of some companies over time, create an html file with this content:
<source-table
name="stocks"
url="https://idl.uw.edu/mosaic/data/stocks.parquet"
columns="*, Symbol as company, Close as stock_value, date_trunc('month', Date) as month">
</source-table>
<bar-chart
table="stocks"
measure="avg(stock_value)"
by="company">
</bar-chart>
<line-chart
table="stocks"
measure="avg(stock_value)"
by="month"
order_by="month">
</line-chart>
<script type="module" src="https://unytics.io/static_bi/src/connectors/duckdb.js"></script>
<script type="module" src="https://unytics.io/static_bi/src/components/source_tables.js"></script>
<script type="module" src="https://unytics.io/static_bi/src/components/echarts.js"></script>Open the file in Google Chrome (or any browser) and you'll get this simple dashboard:
The dashboard is interactive! Click on AMZN bar in the bar chart to filter the data in other charts:
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
- Declarative UI
- Define data sources and charts using simple custom HTML tags (e.g.,
<bar-chart>,<score-card>,<source-table>). - Includes Rich & Customizable Component Library.
- Define data sources and charts using simple custom HTML tags (e.g.,
- 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/Cmdkey.
- 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, ECharts and Web Components.
- Data Management: The
<source-table>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. - Component Initialization: Custom elements like
<bar-chart>,<score-card>, etc., are defined in JavaScript modules and used directly in the HTML/Markdown content. - 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 toDuckDB. - Rendering: The component receives query results from DuckDB and renders the visualization using ECharts or by generating appropriate HTML (for tables/scorecards).
- Interactivity: Click events on chart elements trigger a filter update. The
base_chart.jslogic updates the global filter state and dispatches an event, causing relevant components to re-query data and re-render.
Static BI is fully open-source (MIT License). Any contribution is more than welcome 🤗!
- Add a ⭐ on the repo to show your support
- Join our Slack and talk with us
- Raise an issue
- 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
<style> .md-typeset h1 { font-size: 0px; } </style>