Skip to content
woosal1337Public

About

Self-hosted, read-only web dashboard for TeslaMate data. Next.js, TypeScript, and Bun.

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

6 stars

Watchers

0 watching

Forks

Latest commit

 

History

138 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

My Tesla logo

My Tesla

Your car data from TeslaMate, in the style of the Tesla app.

Live demo · Install · Docs

The My Tesla Overview page with a Model Y, its battery level, and its range

A self-hosted, read-only web dashboard for the car data that TeslaMate records. It runs next to your TeslaMate stack, reads its PostgreSQL database with a read-only role, and shows the data in a clean, fast interface that follows the Tesla visual style.

This project is an unofficial community tool and is not affiliated with, endorsed by, or supported by the official TeslaMate project.

"Tesla" and related marks are trademarks of Tesla, Inc. This project is not affiliated with Tesla, Inc.

Features

Page Content
Overview Battery and range, odometer, temperatures, software version, tire pressure with a slow-leak warning, last position on a map, today's activity strip, last drive and charge. With the optional MQTT feed: a Live card with locks, Sentry Mode, open doors and windows, charging with the end time, climate, software updates, driving, and navigation.
Drives Trips by day. A trip joins the drives of one journey across short stops and charging stops, and a row shows its distance, duration, stops, and consumption. Each trip has its own page with the legs, the stops, and the charges on the way. Each drive has a route map, speed, power, elevation, and battery charts, the energy recovered, the climb, and a GPX export. All drives export as CSV. The Report page sums any date range on one map.
Charging All charging sessions, with energy, levels, power, and cost. A price per kWh in Settings gives a cost to each charge that TeslaMate has no cost for. Each session has a cost breakdown and power, voltage, and current charts. All sessions export as CSV. An insights page shows the cost per kWh for AC and DC, the cost per 100 km, the DC curves, the charging time from one battery level to another, when the car charges, and the top places.
Timeline One day at a time: driving, charging, parked, asleep, and offline time on a 24-hour strip
Battery Estimated health, capacity from the first long charge, range at 100 %, charge cycles, AC and DC energy, the charge level over time, time at each level, time online, asleep, and offline, the projected range by outside temperature and by battery level, idle drain
Stats Distance, the odometer over time, energy, cost, efficiency against temperature and speed, charging cost for each week or month, drive times, longest drives, tire pressure trend with a slow-leak warning, software updates. A year in review page shows the totals, the distance per month, the records, and the top places of one calendar year.
Places A map of visited and charging places, the most visited places, charging cost by place, the frequent routes with their typical, fastest, and slowest drive, the countries, states, and cities visited, a map of every road driven, geofences
Settings Units, date and time formats, number style, currency, charging prices, place names, maps, theme, tabs, and Overview cards. Saved on the server for each user.

Other properties:

  • Read-only. The app connects with a separate role that can only read. It refuses the TeslaMate superuser.
  • Server-rendered. Every value is read and formatted on the server. No database value reaches the browser without a server module.
  • Light and dark. The theme follows the system, or you choose one in Settings.
  • Value colors. Consumption, charging efficiency, battery health, parked drain, and tire pressure show green when better than usual and red when worse. A tooltip gives the expected value. Read Value colors.
  • Phone ready. Every page works at 390 px wide, with a bottom tab bar.
  • Mobile app. An Expo app for iOS and Android in mobile/ shows the Overview, and the server can send push alerts for a finished charge, a car left unlocked, a software update, or a tire warning. Read Mobile app.

Screenshots

All screenshots show the synthetic data of the live demo.

A drive with its route on the map, distance, duration, consumption, and battery use A Supercharger session with energy added, peak power, efficiency, cost, and the power curve
Drive: the route map and the drive totals Charge: energy, power curve, cost, and efficiency
Battery health, capacity, range at 100 percent, and charge cycles Distance, energy, and temperature charts for each week
Battery: health, capacity, and idle drain Stats: distance, energy, efficiency, and tire pressure
A map of visited places and charging places One day as a 24-hour strip of driving, charging, and parked time
Places: where the car goes and charges Timeline: one day, hour by hour
The Live card with the lock, the openings, charging, climate, and a software update The Settings page with units, date and time, and display options
Live status: locks, charging, and updates over MQTT Settings: units, formats, theme, and tabs

The Overview page on a phone    The Charging page on a phone

Quick start

You need a running TeslaMate stack with Docker Compose.

  1. Create the read-only database role. Read Connect to the TeslaMate database.

  2. Add the dashboard service to your TeslaMate Compose file:

    dashboard:
      image: ghcr.io/woosal1337/my-tesla:latest
      restart: unless-stopped
      environment:
        DATABASE_URL: postgresql://teslamate_ro:${TESLAMATE_RO_PASSWORD}@database:5432/teslamate
        DISPLAY_TIME_ZONE: Europe/Berlin
      volumes:
        - dashboard-data:/data
      ports:
        - "127.0.0.1:3000:3000"

    Add dashboard-data: under the volumes: key at the end of the file.

  3. Start it with docker compose up -d dashboard.

  4. Serve port 3000 over HTTPS through your reverse proxy or tunnel. Read Accounts and sign-in.

  5. Open the setup link from docker logs, and create the admin account.

The full guide is Installation.

Documentation

Topic Document
Install with Docker, Docker Compose, Coolify, or from source Installation
Create the read-only role and reach the database Connect to the TeslaMate database
Accounts, sign-in, phones, and script tokens Accounts and sign-in
Environment variables and user settings Configuration
Show live locks, charging, and navigation from MQTT Live status
Get the car status as JSON, and the CSV and GPX exports API
Run the iOS and Android app, and set up push alerts Mobile app
Which outside services the browser contacts Privacy
Run or deploy the public demo Demo site
Update the app and TeslaMate Upgrading
What the green and red values mean Value colors
Fix common problems Troubleshooting
How the app is built Architecture and decisions
Run the app from source and contribute Development, demo data, quality gates, and CONTRIBUTING.md

Requirements

Part Version
TeslaMate 4.3.0 is tested. The app reads the TeslaMate schema directly, so check Upgrading after a TeslaMate upgrade.
PostgreSQL The database that TeslaMate uses
Docker Any version with Compose v2, for the container image
Node.js and Bun Node.js 24 and Bun 1.4.3, only to run from source

Status

The pages work against TeslaMate 4.3.0 and against the demo data. The changelog lists each release.

License

GNU Affero General Public License v3.0 or later. Some SQL in this project follows the logic of the TeslaMate Grafana dashboards, which use the same license.

Thanks

About

Self-hosted, read-only web dashboard for TeslaMate data. Next.js, TypeScript, and Bun.

Topics

Resources

Code of conduct

Contributing

Security policy

Stars

6 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages