Open Source · Vanilla JS · AI-Powered

Business Intelligence Reimagined

Vedra BI is a full-featured, open-source Business Intelligence platform built with pure Vanilla JavaScript, Firebase, and cutting-edge charting libraries — no heavy framework required.

0+ Chart Types
0M Rows Supported
0 Export Formats
0% Open Source
Vedra BI Dashboard
📊 Dashboard
📂 Data
📈 Charts
🤖 AI Chat
⚙️ Settings
📈
$2.4M
Revenue
👥
18.2K
Users
94.7%
Uptime
Sales Trend
Distribution

What is Vedra BI?

A powerful, open-source Business Intelligence platform that turns raw data into actionable insights — with zero framework overhead, built entirely on modern web standards.

🚀

Zero Framework

Built with pure ES Modules + HTML5 + CSS3 — no React, no Angular, no Vue. Just the web, at its best.

🔥

Firebase Powered

Cloud sync via Firebase Firestore with automatic localStorage fallback for offline resilience.

🤖

AI-Integrated

Google Gemini API powers an in-app chat assistant that understands your data and guides operations.

High Performance

Handles up to 1 million rows with virtual scrolling, lazy loading, and optional Python backend offloading.

🎨

Fully Customizable

Drag-and-drop dashboards, dark/light themes, animated backgrounds, chart effects, and more.

📱

Responsive Design

Mobile-first, touch-optimized UI that adapts beautifully across all screen sizes and devices.

Everything You Need

A complete BI suite — from data ingestion to AI-powered insights and beautiful exports.

🔐

Secure Authentication

Multi-method login system with enterprise-grade security to protect your sensitive business data.

Email / Password Google OAuth Guest Demo Mode Password Reset
🗄️

Powerful Data Management

Import data from multiple sources, edit it with a full spreadsheet editor, and sync it to the cloud in real-time.

CSV / Excel Upload Google Sheets Sync Luckysheet Editor 1M Row Support Auto Header Detection
📊

15+ Interactive Chart Types

From simple bar charts to 3D scatter plots — all powered by ECharts, ECharts-GL, and Plotly.js with real-time updates.

Bar / 3D Bar Line / 3D Line Pie / Doughnut Radar Scatter Gauge Funnel Tree Map
🎨

Customizable Dashboards

Create multiple dashboards, drag and resize charts freely, apply backgrounds and visual effects with zero-code customization.

Multi-Dashboard Drag & Drop Layout Background Themes Chart Effects (Glow, Shadow, 3D) Lock Mode Dark / Light Theme
🔍

Advanced Filtering System

Multi-dimensional data filtering that updates all charts instantly, with filter state persisted across sessions.

Global Column Filters Date Range Multi-Select Numeric Range Persistent State
🤖

AI Chat Assistant

Powered by Google Gemini, the built-in AI assistant understands your uploaded data and can guide chart creation, filtering, and insights.

Google Gemini API Contextual Insights Agent Mode Audio Narration Smart Prompts History Persistence
📤

Multi-Format Export & Reports

Share your insights with professional-quality exports in any format your stakeholders need.

PDF Reports PNG Screenshot CSV Export Excel (.xlsx) Individual Chart Export (SVG/PNG)

Performance Optimizations

Engineered for speed — handles massive datasets without compromising the user experience.

Lazy Loading Virtual Scrolling Debounced Operations (300ms) Batch Processing Python Backend (50MB+ datasets)

Built With the Best

A carefully curated stack of proven, best-in-class tools — lightweight, fast, and open.

🌐
Frontend
Vanilla JavaScript (ES Modules), HTML5, CSS3
🎨
UI Framework
Bootstrap 5 + Bootstrap Icons
📊
Charting Engines
ECharts, ECharts-GL, Plotly.js, Chart.js
🔥
Database
Firebase Firestore (+ localStorage fallback)
🤖
AI Integration
Google Gemini API (@google/genai)
🔐
Authentication
Firebase Auth (Email, Google OAuth)
📝
Spreadsheet Editor
Luckysheet (Excel-like editor)
🐍
Backend
Express.js (Node) + Python filter engine
⚙️
Build Tool
Vite + esbuild (fast bundling)
🎬
Animations
Motion.js (v12) for smooth transitions

15+ Chart Types

From simple comparisons to complex 3D visualizations — Vedra BI has the right chart for every dataset.

Project Structure

A clean, modular codebase organized by responsibility — easy to navigate, easy to extend.

vedra-bi/
📄 index.html — Main dashboard
🔑 login.html — Auth page
✏️ edit_data.html — Spreadsheet editor
📦 package.json — Node dependencies
📁 backend/
🟩 server.ts — Express API server
🐍 server.py — Python filter engine
🐍 filter_engine.py — Large data filtering
📁 src/
📊 chart/ — Chart renderers (bar, line, pie…)
🎨 css/ — Core styles, themes, dark mode
🗄️ data/ — JSON config & templates
📁 store/
💾 DataHandler.js — Core data operations
📡 DataTracker.js — Performance monitoring
📁 js/
🚀 main.js — Entry point & orchestrator
📊 charts.js — Chart lifecycle manager
🤖 chat.js — AI chat interface
🔍 filter.js — Data filtering engine
📤 reportExporter.js — PDF/PNG/CSV export
🎨 dynamicTemplates.js — Background & themes
🎭 presentationMode.js — Presentation features
⌨️ commandPalette.js — Quick command center

Get Started in Minutes

Clone, configure, and run — Vedra BI is designed to be up and running fast.

01

Prerequisites

Make sure you have the following installed:

Node.js v18 or higher
npm v9 or higher
Firebase Account (free tier works)
Gemini API Key (optional, for AI chat)
02

Clone & Install

bash
git clone https://github.com/dhaval-vedra/vedra--bi.git
cd vedra--bi
npm install
03

Environment Setup

Create a .env.local file in the root directory:

.env.local
# Firebase Config
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

# AI Integration
GEMINI_API_KEY=your_gemini_api_key
PORT=3000
04

Firebase Setup

In your Firebase console:

  1. Create a new project at console.firebase.google.com
  2. Enable Email/Password and Google in Authentication
  3. Enable Firestore Database in production mode
  4. Copy your Firebase config values to .env.local
05

Run the App

bash
# Development mode
npm run dev

# Build for production
npm run build

# Start production server
npm start

App opens at http://localhost:3000

06

Firestore Security Rules

firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId}/{document=**} {
      allow read, write: if request.auth != null
        && request.auth.uid == userId;
    }
  }
}

How to Use It

From first login to exporting your first report — a step-by-step walkthrough.

🔑

First Login

  1. Open the app in your browser
  2. Sign up using Email/Password or Google
  3. Or try the Guest Demo for instant access
📂

Upload Your Data

  1. Click the Data menu in the sidebar
  2. Upload a CSV or Excel file
  3. Or paste a Google Sheets URL for live sync
  4. Data auto-loads into the dashboard
📊

Create Charts

  1. Click the Chart menu item
  2. Select a chart type from the gallery
  3. Choose X and Y axis columns
  4. Click "Add Chart" — it appears on the dashboard
✏️

Edit Data

  1. Click the ✏️ Edit Data button
  2. The spreadsheet editor (Luckysheet) opens
  3. Edit cells, add formulas, modify values
  4. Changes save to Firebase automatically
🤖

Use AI Assistant

  1. Click the AI Chat icon
  2. Ask questions about your data in plain English
  3. Use Agent Mode to auto-create charts
  4. Try built-in Smart Prompts for quick insights
📤

Export Reports

  1. Click the 📥 Export dropdown
  2. Choose your format:
PDF Report PNG Image CSV Export Excel .xlsx

Backend Endpoints

The Express.js server exposes a clean REST API for large-dataset operations.

Endpoint Method Description
/api/upload-large-data POST Upload large datasets (>50MB) for Python backend processing
/api/filter-large-data POST Filter large datasets using the Python filter engine

Core JavaScript Modules

DataHandler.js
initData() — Initialize data from Firebase
rawData — Full dataset
filteredData — Currently filtered data
saveUserDataToFirebase() — Cloud sync
applyFiltersAndSort() — Apply filters
resetFiltersAndShowAllData() — Reset all filters
exportToCSV() — Export filtered data
clearAllData() — Clear all data
getDataStats() — Data statistics
charts.js
addChart(type, xCol, yCol) — Add chart to dashboard
removeChart(id) — Remove a chart
updateAllCharts() — Refresh all charts with filtered data
exportChart(id, format) — Export individual chart
filter.js
setGlobalFilter(col, val) — Apply column filter
setDateRange(start, end) — Apply date range filter
setNumericRange(col, min, max) — Numeric range
clearAllFilters() — Reset filters
getFilterState() — Current filter state
reportExporter.js
exportToPDF() — Full dashboard PDF
exportToPNG() — Dashboard screenshot
exportToExcel(data) — Native .xlsx export
exportToCSV(data) — CSV filtered export

Enterprise-Grade Security

Your data is protected at every layer with modern security practices.

🔐

Firebase Authentication

Industry-standard OAuth 2.0 & JWT tokens managed entirely by Firebase — no custom session handling.

🛡️

Firestore Security Rules

Per-user data isolation enforced at the database level — users can only read/write their own data.

🔒

Environment Variables

All API keys and credentials stored in .env.local — never committed to version control.

📡

HTTPS Only

All Firebase communication and API calls use secure HTTPS/TLS encryption by default.

Get Help

Found a bug? Have a question? We're here to help.