Skip to content

README.md

Latest commit

 

History

History
239 lines (150 loc) · 2.88 KB

README.md

File metadata and controls

239 lines (150 loc) · 2.88 KB
Raw

Sales Data Analysis Dashboard

A modern, production-ready Sales Analytics Dashboard built using pure HTML, CSS, JavaScript, and Chart.js.

Designed for:

  • GitHub Pages
  • Vercel
  • Portfolio projects
  • SaaS admin panels
  • Analytics showcases
  • Business intelligence demos

Features

Feature Included
Dark Analytics UI ✅
Fully Responsive ✅
Animated KPI Cards ✅
Dynamic Period Toggles ✅
Revenue Trends Chart ✅
Revenue by Channel ✅
Conversion Funnel ✅
Polar Area Chart ✅
Regional Performance ✅
Customer Segments ✅
Top Products Table ✅
CSS Variables Theme System ✅
Zero Build Tools ✅
GitHub Pages Ready ✅
Vercel Ready ✅

Tech Stack

  • HTML5
  • CSS3
  • Vanilla JavaScript
  • Chart.js (CDN)
  • Google Fonts

Folder Structure

project-folder/ │ ├── index.html └── README.md

Local Development

Simply open:

index.html

in your browser.

No installation required.

Deploy to GitHub Pages

Step 1 — Create GitHub Repository

Go to: https://github.com/new

Create a new repository.

Example: sales-dashboard

Step 2 — Upload Files

Upload:

  • index.html
  • README.md

Commit changes.

Step 3 — Enable GitHub Pages

Go to:

Settings → Pages

Under: Build and deployment

Choose:

  • Source → Deploy from branch
  • Branch → main
  • Folder → /root

Save.

Step 4 — Live URL

GitHub will generate:

https://YOUR-USERNAME.github.io/REPOSITORY-NAME/

Example:

https://johnsmith.github.io/sales-dashboard/

Deploy to Vercel

Step 1 — Create Account

https://vercel.com

Login with GitHub.

Step 2 — Import Repository

Click: Add New → Project

Import your GitHub repository.

Step 3 — Deploy

Vercel automatically detects static HTML.

Click: Deploy

Done.

Step 4 — Live URL

Example:

https://sales-dashboard.vercel.app

Customization Guide

Change KPI Data

Inside:

<script> Edit: const periodData = { ... } --- ## Change Chart Data Find chart sections: new Chart(...) Update: - labels - datasets - colors --- ## Change Theme Colors Inside CSS: :root { --primary --secondary --bg ... } --- ## Replace Dummy Data With Real API Data You can replace static values using: fetch() Example: fetch('/api/data') .then(res => res.json()) .then(data => { console.log(data) }) --- # Performance - Lightweight - No frameworks - No build tools - Fast load times - Optimized for static hosting --- # Browser Support - Chrome - Edge - Firefox - Safari --- # License Free to use for personal and commercial projects.