企业官网建设流程全解析

TeslaMate用户界面定制：修改Grafana主题与布局

【免费下载链接】teslamateA self-hosted data logger for your Tesla 🚘 [main maintainer=@JakobLichterfeld]项目地址: https://gitcode.com/GitHub_Trending/te/teslamate

你是否觉得TeslaMate默认的Grafana仪表盘不够个性化？本文将详细介绍如何通过修改配置文件和自定义样式，打造专属于你的特斯拉数据监控界面。完成后，你将能够调整主题颜色、重新排列面板布局，并添加自定义数据展示组件。

准备工作

在开始定制前，请确保你已通过Docker Compose部署TeslaMate，典型的部署配置可参考docker-compose.yml。Grafana相关配置文件位于项目的grafana/目录下，核心配置包括：

• 数据源配置：grafana/datasource.yml
• 仪表盘定义：grafana/dashboards/
• Docker构建配置：grafana/Dockerfile

目录结构

关键目录结构如下：

grafana/ ├── Dockerfile # Grafana容器构建配置 ├── datasource.yml # 数据库连接配置 ├── dashboards.yml # 仪表盘自动加载配置 ├── dashboards/ # 所有仪表盘JSON文件 │ ├── overview.json # 总览仪表盘(本文示例修改此文件) │ ├── battery-health.json # 电池健康仪表盘 │ └── internal/home.json # 首页仪表盘

修改Grafana主题

1. 基础主题切换

Grafana提供明暗两种内置主题，可通过Web界面直接切换：

1. 登录Grafana（默认地址：http://localhost:3000）
2. 点击右上角头像 →Preferences→Theme
3. 选择Light或Dark主题

2. 自定义CSS样式

要深度定制主题颜色，需修改Grafana的CSS文件。通过Docker volume挂载自定义样式：

1. 创建本地CSS文件custom.css：

/* 自定义仪表盘标题颜色 */ .grafana-container h2.panel-title { color: #e50914 !important; /* 特斯拉红色 */ } /* 修改图表线条颜色 */ .grafana-chart-panel .graph-line { stroke: #0066b2 !important; /* 特斯拉蓝色 */ }

2. 修改docker-compose.yml，添加Grafana卷挂载：

services: grafana: image: teslamate/grafana:latest volumes: - ./custom.css:/usr/share/grafana/public/css/custom.css # 保留其他原有挂载...

3. 重启服务使配置生效：

docker compose down && docker compose up -d

调整仪表盘布局

1. 理解仪表盘JSON结构

每个仪表盘由JSON文件定义，以overview.json为例，关键结构包括：

• panels: 包含所有数据面板定义
• gridPos: 定义面板位置(x,y坐标和宽高w,h)
• title: 面板标题
• type: 面板类型(如graph, gauge, stat)

2. 面板位置调整示例

以总览仪表盘的电池电量面板为例，原始配置为：

{ "id": 4, "title": "Battery Level", "type": "gauge", "gridPos": { "h": 4, "w": 3, "x": 0, "y": 1 } }

修改gridPos参数调整位置和大小：

{ "gridPos": { "h": 6, // 高度增加(原4) "w": 4, // 宽度增加(原3) "x": 3, // 向右移动3格 "y": 1 // 保持y坐标不变 } }

3. 添加自定义面板

1. 在overview.json的panels数组中添加新面板：

{ "id": 99, // 确保ID唯一 "title": "自定义能耗统计", "type": "stat", "datasource": { "type": "grafana-postgresql-datasource", "uid": "TeslaMate" }, "gridPos": { "h": 3, "w": 6, "x": 0, "y": 15 }, "targets": [ { "rawSql": "SELECT AVG(consumption_kwh) FROM drives WHERE car_id = $car_id", "refId": "A" } ] }

2. 导入修改后的JSON文件：

# 复制修改后的文件到容器 docker cp overview.json teslamate_grafana_1:/var/lib/grafana/dashboards/

3. 在Grafana界面刷新仪表盘查看效果

高级定制：添加新仪表盘

1. 创建自定义仪表盘

1. 在Grafana界面点击**+** →Dashboard→ 添加所需面板
2. 配置完成后点击Save→ 输入名称(如custom-dashboard)
3. 导出JSON：点击Share→Export→Save to file

2. 自动加载自定义仪表盘

修改dashboards.yml，添加新仪表盘目录：

apiVersion: 1 providers: - name: "teslamate" folder: TeslaMate options: path: /dashboards - name: "custom" # 新增自定义仪表盘提供商 folder: Custom options: path: /dashboards_custom # 自定义仪表盘存放路径

在Dockerfile中添加复制指令：

# 在现有COPY指令后添加 COPY dashboards_custom/*.json /dashboards_custom/

应用示例：优化电池健康仪表盘

以下是修改前后的对比效果（使用项目内置截图参考）：

修改前

修改后效果

通过调整grafana/dashboards/battery-health.json实现：

• 增大图表尺寸（gridPos: {w: 18, h: 10}）
• 添加温度趋势线（新增target查询电池温度数据）
• 修改阈值颜色（绿色>90%，黄色70-90%，红色<70%）

注意事项

1. 配置备份：修改前请备份原文件，例如：

cp grafana/dashboards/overview.json grafana/dashboards/overview.json.bak

2. 版本兼容性：本文基于Grafana 11.6.1（定义于grafana/Dockerfile第3行），不同版本配置可能差异。

3. Docker部署注意：通过Docker部署时，需确保修改后的文件被正确挂载或重新构建镜像：

# 重新构建Grafana镜像 docker compose build grafana docker compose up -d

总结

通过修改JSON配置文件和自定义CSS，你可以完全掌控TeslaMate的可视化效果。关键步骤包括：

1. 主题定制：通过CSS覆盖默认样式
2. 布局调整：修改gridPos参数重新排列面板
3. 功能扩展：添加新面板和自定义查询
4. 持久化配置：通过Docker volume或自定义Dockerfile保存修改

所有配置文件和代码均位于项目仓库中，你可以根据需求进一步探索grafana/dashboards目录下的其他仪表盘文件，创建更符合个人习惯的数据监控界面。

【免费下载链接】teslamateA self-hosted data logger for your Tesla 🚘 [main maintainer=@JakobLichterfeld]项目地址: https://gitcode.com/GitHub_Trending/te/teslamate