ParetoChart

Collaborative real-time Pareto analysis for root cause prioritization

Demo · Report Bug · Request Feature

Screenshot

About

ParetoChart is a real-time collaborative web app that helps teams perform Pareto analysis on root causes during problem-solving workshops. Participants brainstorm possible causes, vote on the most impactful ones, and instantly see results visualized as a live Pareto chart — highlighting the "vital few" that contribute most to the problem.

Designed for classrooms, workshops, and team retrospectives. No installation required — just open in a browser.

Key Features

Feature	Description
Session-Based Collaboration	Create rooms and share via QR code or 6-character session code
Real-Time Voting	Participants vote on root causes with instant live updates across all devices
Pareto Chart	Auto-generated SVG chart with descending bars, cumulative line, and 80% threshold
Ranked Table	View with rank, votes, percentage of total, and cumulative percentage
Vote Deduplication	One vote per cause per user, with configurable max votes per participant
Host Controls	Phase management (Collecting → Voting → Results → End), reset votes, export
Export	Download chart as PNG or results as CSV
Dark Mode	Toggle with system preference detection
Mobile-Friendly	Responsive layout for phones, tablets, and projectors
Zero Build Step	Pure HTML, CSS, and JavaScript — no frameworks needed

Tech Stack

Category	Technology
Frontend	HTML5, CSS3, Vanilla JavaScript
Backend	Firebase Firestore (real-time database)
Authentication	Firebase Anonymous Auth
Charts	SVG rendered with JavaScript (no chart libraries)
QR Code	qrcode-generator via CDN
Deployment	GitHub Pages / Firebase Hosting

Architecture

┌─────────────────────────────────────────────────────────┐
│                      Browser (Client)                    │
│                                                          │
│  ┌──────────┐  ┌──────────────┐  ┌───────────────────┐  │
│  │  Landing  │  │     Host     │  │   Participant     │  │
│  │  Page     │  │  Dashboard   │  │   View            │  │
│  │          │  │              │  │                   │  │
│  │ Create / │  │ Add Causes  │  │ Vote on Causes   │  │
│  │ Join     │  │ Manage Phase │  │ View Results     │  │
│  └──────────┘  │ View Chart  │  └───────────────────┘  │
│                 │ Export       │                          │
│                 └──────────────┘                          │
│                                                          │
│  ┌──────────────────────────────────────────────────┐   │
│  │              Pareto Chart Engine (SVG)            │   │
│  │  Bars + Cumulative Line + 80% Threshold          │   │
│  └──────────────────────────────────────────────────┘   │
└──────────────────────┬──────────────────────────────────┘
                       │ Real-time sync (onSnapshot)
                       ▼
┌──────────────────────────────────────────────────────────┐
│                    Firebase Firestore                     │
│                                                          │
│  sessions/{id}                                           │
│  ├── title, code, hostId, status, maxVotesPerUser        │
│  └── causes/{id}                                         │
│      ├── text, voteCount                                 │
│      └── votes/{uid} ← prevents duplicate votes          │
└──────────────────────────────────────────────────────────┘

Project Structure

paretochart/
├── index.html              # Landing page (create / join session)
├── host.html               # Host dashboard with controls & chart
├── participant.html        # Participant voting view
├── css/
│   └── style.css           # All styles (light/dark theme, responsive)
├── js/
│   ├── firebase-config.js  # Firebase config (placeholder tokens)
│   ├── utils.js            # Shared utilities (QR, toast, dark mode)
│   ├── app.js              # Landing page logic
│   ├── host.js             # Host session management
│   ├── participant.js      # Participant voting logic
│   └── chart.js            # Pareto chart SVG rendering engine
├── firestore.rules         # Firestore security rules
├── firestore.indexes.json  # Firestore indexes
├── firebase.json           # Firebase hosting config
└── .github/workflows/
    └── deploy.yml          # GitHub Pages auto-deployment

Getting Started

Prerequisites

• A Firebase project (free tier works)
• Git installed
• A modern web browser

1. Clone the Repository

git clone https://github.com/alfredang/paretochart.git
cd paretochart

2. Set Up Firebase

1. Go to Firebase Console → Add project
2. Enable Firestore Database (Build → Firestore → Create database → Start in test mode)
3. Enable Anonymous Authentication (Build → Authentication → Sign-in method → Anonymous → Enable)
4. Register a web app (Project Settings → General → Add app → Web) and copy the config

3. Add Your Firebase Config

Open js/firebase-config.js and replace the placeholder values:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

4. Deploy Firestore Security Rules

npm install -g firebase-tools
firebase login
firebase init firestore
firebase deploy --only firestore:rules

5. Run Locally

# Python
python3 -m http.server 8000

# Or Node.js
npx serve .

Open http://localhost:8000 in your browser.

Deployment

GitHub Pages

1. Add Firebase config values as GitHub Secrets (Settings → Secrets → Actions):
   • FIREBASE_API_KEY, FIREBASE_AUTH_DOMAIN, FIREBASE_PROJECT_ID
   • FIREBASE_STORAGE_BUCKET, FIREBASE_MESSAGING_SENDER_ID
   • FIREBASE_APP_ID, FIREBASE_MEASUREMENT_ID
2. Enable GitHub Pages (Settings → Pages → Source → GitHub Actions)
3. Push to main — the workflow deploys automatically

Firebase Hosting

firebase init hosting    # public dir = "."
firebase deploy

How It Works

1. Host creates a session — enters a problem statement, gets a room code and QR
2. Participants join — scan QR code or enter the 6-character code on their device
3. Collecting phase — Host and participants add possible root causes
4. Voting phase — Participants vote on causes (configurable max votes per user)
5. Results phase — Live Pareto chart and ranked table shown to everyone
6. Export — Host downloads the chart as PNG or results as CSV

Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

For questions or ideas, start a Discussion.

---

Developed By

Tertiary Infotech Academy Pte Ltd

Acknowledgements

• Firebase — Real-time database and authentication
• qrcode-generator — QR code generation
• Inter — Typography

---

If you found this useful, please give it a star!