TimeSeries CSV Viewer

A single-page JavaScript application for visualizing large semicolon-delimited CSV files with multiple interactive Plotly charts.

Usage

Double-click viewer.html to open in your browser. No install, no build step, no web server required. Works on Windows, macOS, and Linux.

• Chrome/Edge: Use "Pick Folder" to list all CSV files in a directory (folder is remembered across sessions). Or use "Upload CSV" for a single file.
• Firefox/Safari: Use "Upload CSV" to load a single file (no folder memory support).

viewer.html is a single self-contained file with all CSS and JavaScript inlined. It only needs an internet connection on first use to load Plotly, PapaParse, and LZString from CDN (see "Offline Use" below for fully offline operation).

Note: index.html (with separate src/*.js files) is for development only — it requires an HTTP server because modern browsers block ES module imports from file://. End users should always use viewer.html.

Working with Charts

1. Load a CSV file — the column list appears in the left sidebar
2. Click "+ New Chart" to create a chart card
3. Click on any column name to add it to the focused chart
4. Change chart type (Line / Scatter / Box) via the dropdown on each chart card
5. Multiple Y-axes are assigned automatically by value magnitude; use the axis dropdown per series for manual control

Offline Use

If you need to work completely offline (no internet at all, not even first visit), download the three library files and manually edit viewer.html to point at local copies:

1. Download these files into a folder next to viewer.html:

   vendor/plotly.min.js       ← https://cdn.plot.ly/plotly-2.35.2.min.js
   vendor/papaparse.min.js    ← https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js
   vendor/lz-string.min.js    ← https://cdn.jsdelivr.net/npm/lz-string@1.5.0/libs/lz-string.min.js
   

2. Open viewer.html in a text editor and replace the three https://cdn... URLs with ./vendor/plotly.min.js, ./vendor/papaparse.min.js, ./vendor/lz-string.min.js.

Automatic vendor fallback was intentionally removed because Safari's strict file:// security model blocks dynamic <script> injection.

Browser Support

Browser	Support Level
Chrome / Edge	✅ Full (folder picker, memory, all features)
Firefox	⚠️ Degraded (manual file picker only)
Safari	⚠️ Degraded (manual file picker only)
Mobile	❌ Not supported (desktop only)

Developer Setup

Source modules live in src/*.js. Unit tests are in dev/tests/, integration tests in dev/e2e/scenarios/.

cd dev
npm install                   # Install dev dependencies (Node.js 18+ required)

npm test                      # Run unit tests (vitest)
npm run build                 # Build viewer.html single-file bundle
npx playwright install chromium
npm run e2e                   # Run Playwright integration tests

After editing any src/*.js or styles.css file, run npm run build to regenerate viewer.html.

File Tree

viewer.html             ← end-user entry point (double-click to open, single file)
index.html              ← development entry point (requires HTTP server)
styles.css              ← development CSS (inlined into viewer.html by build)
README.md               ← this file
src/                    ← development source modules
  app.js                ← bootstrap & file loading
  csv-parser.js         ← CSV parsing & normalization
  stats.js              ← per-column statistics
  axis-assign.js        ← Y-axis magnitude bucketing
  chart-config.js       ← dashboard serialization & URL hash
  storage.js            ← localStorage & IndexedDB wrappers
  persistence.js        ← sync state to localStorage, URL hash, JSON
  column-list.js        ← sidebar column list component
  chart-card.js         ← chart card component
  dashboard.js          ← orchestrator
  renderers/
    line.js             ← Plotly line chart renderer
    scatter.js          ← Plotly scatter chart renderer
    box.js              ← Plotly box plot renderer
    state-strip.js      ← state strip subplot helper
dev/                    ← developer tools (not needed to use the app)
  build.js              ← bundler: creates viewer.html from src/
  package.json
  vitest.config.js
  tests/                ← vitest unit tests
  e2e/                  ← Playwright integration tests

Known Limitations

• CSV must use ; (semicolon) as separator
• Timestamps must be in German format DD.MM.YY HH:MM or ISO format YYYY-MM-DD HH:MM:SS
• Very large files (>100 MB) may be slow on first load (subsequent loads use IndexedDB cache)
• Folder picker requires Chrome or Edge