【亲测免费】 Home Assistant Mini Graph Card 使用与安装指南

1. 项目目录结构及介绍

Mini Graph Card 是一个专为 Home Assistant 的 Lovelace 界面设计的简洁且可定制化的图表卡片。以下是该项目的主要目录结构及其简要说明：

.
├── babelrc          # Babel 配置文件，用于编译源代码。
├── changelog.md     # 版本更新日志。
├── CONTRIBUTING.md  # 贡献者指南。
├── dist             # 编译后的产出文件夹，包含可直接在 Home Assistant 中使用的 bundle 文件。
│   └── mini-graph-card-bundle.js
├── eslintrc.yaml    # ESLint 配置文件，确保代码质量。
├── gitignore        # Git 忽略文件列表。
├── hacs.json        # 用于HACS（Home Assistant Community Store）的配置文件。
├── package-lock.json
├── package.json     # Node.js 项目配置，列出了依赖项和脚本命令。
├── release-config.js # 可能用于版本发布的配置文件。
├── rollup.config.js  # Rollup 打包配置文件，用于构建过程。
├── scripts          # 可能包含自定义脚本的文件夹。
├── src              # 源码文件夹，包含主要的 JavaScript 和 HTML 模板。
│   ├── main.js       # 主入口文件，定义 Mini Graph Card 的核心逻辑。
│   └── ...
└── README.md         # 项目介绍和快速使用指南。

2. 项目的启动文件介绍

该项目的核心在于 src/main.js 文件。这个文件是 Mini Graph Card 的业务逻辑起点，它定义了如何将传感器数据可视化为图表。虽然直接运行此文件不适合最终用户操作，开发者会通过这个文件以及相关的配置（如 rollup.config.js）进行开发和打包。普通用户通过更新或添加到 Home Assistant 的资源来间接“启动”这个卡片。

对于用户来说，重要的是添加到 Home Assistant 的 /local/mini-graph-card-bundle.js 文件，这是经过编译和打包后的前端代码，直接在用户的 UI 配置中引用即可使用。

3. 项目的配置文件介绍

用户界面配置 (ui-lovelace.yaml)

在 Home Assistant 中，用户可以通过编辑 ui-lovelace.yaml 来集成 Mini Graph Card。下面是一个示例配置片段，展示了如何将卡片添加到资源并使用它：

resources:
- url: /local/mini-graph-card-bundle.js?v=0.12.1
  type: module

views:
- title: My Dashboard
  path: my-dashboard
  icon: 'mdi:home'
  cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.example_temperature
    ...

在这个配置里，“url”指定了 Mini Graph Card 的资源位置和版本控制参数（防止浏览器缓存），而“type”指定它是作为一个 ES6 模块加载的。接下来在视图中的卡片部分，用户通过定义卡片类型为 custom:mini-graph-card 并指定相关实体等选项来使用该卡。

开发环境配置

对于贡献者和希望自建的用户，需要关注 package.json 文件，因为它包含了npm脚本命令，比如用于开发时自动重建的 npm run watch 命令。此外，hacs.json 为那些通过Home Assistant Community Store安装提供配置信息。

请注意，以上操作需在Node.js环境下进行，并理解基本的Web开发概念，以正确地配置和利用Mini Graph Card的功能。