NovaSPC

A modern, browser-based Statistical Process Control (SPC) web application. Upload CSV data, generate control charts, compute process capability indices, and visualize distributions -- all in your browser with zero backend required.

Features

• 7 SPC Control Charts
  • Attribute Charts: c Chart, u Chart, np Chart, p Chart
  • Variable Charts: X-mR, X-bar-R, X-bar-s
• Process Capability Analysis -- Cp, Cpk, Pp, Ppk with color-coded ratings
• Distribution Visualization -- Histogram with normal curve overlay and specification limits
• CSV Data Upload -- Drag-and-drop or file picker with auto-detection
• 5 Built-in Example Datasets -- Instantly explore each chart type
• Dark / Light Theme -- Toggle with localStorage persistence
• Export -- Charts as PNG, data and statistics as CSV
• Responsive Design -- Sidebar on desktop, bottom tab bar on mobile
• No Backend -- Runs entirely in the browser, ready for GitHub Pages

Quick Start

1. Clone the repository:

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

2. Open index.html in your browser, or serve locally:

   python3 -m http.server 8080
   # Open http://localhost:8080

3. Load an example dataset or upload your own CSV, then navigate to any chart type.

Project Structure

novaspc/
  index.html                 # Main application shell
  css/
    variables.css            # Theme variables (dark/light)
    base.css                 # Reset, typography
    layout.css               # Header, sidebar, main content
    components.css           # Cards, buttons, forms, badges
    charts.css               # SPC chart-specific styles
  js/
    app.js                   # Navigation, init
    theme.js                 # Dark/light toggle
    csv.js                   # CSV parsing, drag-drop, examples
    stats.js                 # SPC constants table, statistics
    charts-common.js         # Chart.js wrapper
    c-chart.js               # c chart module
    u-chart.js               # u chart module
    np-chart.js              # np chart module
    p-chart.js               # p chart module
    xmr-chart.js             # X-mR chart module
    xbar-r-chart.js          # X-bar-R chart module
    xbar-s-chart.js          # X-bar-s chart module
    distribution.js          # Histogram & normal overlay
    capability.js            # Cp, Cpk, Pp, Ppk
    export.js                # PNG & CSV export
  assets/
    screenshot.png           # App screenshot

SPC Charts Reference

Chart	Use Case	Distribution
c	Number of defects (constant sample size)	Poisson
u	Defects per unit (variable sample size)	Poisson
np	Number defective (constant sample size)	Binomial
p	Fraction defective (variable sample size)	Binomial
X-mR	Individual measurements	Normal
X-bar-R	Subgroup averages & range (n=2-10)	Normal
X-bar-s	Subgroup averages & std dev (n>10)	Normal

Tech Stack

• Vanilla HTML, CSS, JavaScript -- no frameworks, no build step
• Chart.js -- charting library (CDN)
• chartjs-plugin-annotation -- control limit lines (CDN)

License

MIT