Skip to content

Browser-only tracker for meter readings with yearly overlay charts, monthly bars, CSV import/export, and PNG chart export.

License

Notifications You must be signed in to change notification settings

KaMeLoTmArMoT/ReadingsTracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tracker

A minimal, browser-only, single-page tracker for meter/consumption readings.
Add categories → enter dated readings → see yearly overlays + monthly bar breakdowns.

View Demo » · Report Bug · Request Feature

About The Project

Tracker is a tiny browser-only dashboard for tracking consumption-like counters (gas, electricity, water, etc.) over time. It’s designed to stay simple: CSV in/out, quick edits, and clear charts per category.

Main UI

Key Features

  • Multiple categories (each category has its own table + charts).
  • Date/value readings with row reorder, delete, and quick add.
  • Line chart: yearly overlay (normalized to compare years).
  • Bar charts: monthly totals per year (always months 01–12, zeros if missing).
  • PNG export for charts (line chart + per-year bar charts).
  • CSV import/export.
  • Backward-compatible CSV import (old “category,date,value” still loads).

Built With

  • Vanilla JavaScript (no build step).
  • HTML + CSS.
  • Chart.js (via CDN).

Getting Started

Prerequisites

  • A modern browser (Chrome/Firefox/Safari).
  • CSV exported as UTF‑8 (recommended).

Installation

  1. Clone the repo:

    git clone https://github.com/KaMeLoTmArMoT/ReadingsTracker.git
    cd ReadingsTracker
  2. Run a local static server (recommended):

    python3 -m http.server 8000 --bind 0.0.0.0
  3. Open in browser:

Usage

  1. Open the app (local).
  2. Add a category (e.g., “Gas”).
  3. Add rows and enter readings (date + value).

Readings Input

  1. Use Export CSV / Import CSV to save/restore.
  2. Use “Export Line Chart” / “Export YYYY” to download PNG images.

CSV Format

New format (recommended):

category,date,value,cost_per_unit,currency,unit
gas,2025-01-01,100,0.20,EUR,m3
gas,2025-02-01,120,0.20,EUR,m3

Legacy format (supported for import):

category,date,value
gas,2025-01-01,100
gas,2025-02-01,120

Sample CSV

Headers: category | date | value

Roadmap

  • Auto-save/load to localStorage.
  • Average daily/monthly consumption stats.
  • Rate periods (time ranges) + correct cost splitting across rate changes.
  • Better import UX (drag & drop zone, preview).

See the open issues.

Contributing

Contributions are welcome:

  1. Fork the repo
  2. Create a feature branch
  3. Open a PR

For bug reports, please include:

  • Device + browser
  • Steps to reproduce
  • A small CSV sample (or screenshot)

License

This project is licensed under the MIT License — see LICENSE.

Acknowledgments

  • README structure inspired by Best-README-Template.
  • Built with assistance from generative AI tools for ideation and code suggestions; all changes were reviewed and tested by the author.

About

Browser-only tracker for meter readings with yearly overlay charts, monthly bars, CSV import/export, and PNG chart export.

Topics

Resources

License

Stars

Watchers

Forks