ITADN
alexarch21/history-explorer-card
alexarch21/history-explorer-card · 文件 下载 ZIP
文件最后提交记录最后更新时间
README.md
以下内容由 AI 翻译,如有问题请点此提交 issue 反馈

此自定义卡片已声明停止支持,不再维护。


hacs_badge   bymecoffee

历史记录浏览器卡片

这是 Home Assistant 的自定义历史记录卡片。此卡片提供了一种高度交互且可配置的方式,用于在 HA 中查看实体的历史记录。该卡片使用异步流缓存和自适应数据抽稀来隐藏 HA 历史记录数据库访问的高延迟,并力求将其转化为流畅的交互体验。

history-panel-sample

用法

历史记录浏览器卡片可以通过 UI 交互式配置,也可以通过 YAML 手动配置。该卡片可以包含一个或多个图表,每个图表可以显示一个或多个实体的历史记录。目前,该卡片支持数值型实体的折线图和非数值型实体的时间线图表。图表在历史记录中的显示顺序,以及用于图表和时间线状态的颜色,均可完全配置。

https://user-images.githubusercontent.com/60828821/147440026-13a5ba52-dc43-4ff7-a944-9c2784e4a2f7.mp4

当卡片打开时,它会显示自当前日期和时间起过去 24 小时内已配置实体的历史记录。在左上角,您会找到日期选择器的上一项和下一项按钮,使用它们可以快速浏览日期。您可以使用右侧的时间范围选择器(下拉菜单或加/减按钮)来放大或缩小历史视图。您还可以使用交互式缩放模式(放大镜图标)在图表上选择一个区域进行放大。另一种方便地放大和缩小图表的方法是在按住 CTRL 键的同时使用鼠标滚轮。

点击或轻点图表,然后向左或向右拖动以在时间轴上滑动。当您移动时,卡片会从数据库流式加载数据。如果您的数据库速度较慢(例如在 SD 卡上),您可能会看到图表中的空白部分,随着数据的传入会逐渐填充。显示的时间范围越大,这种效果越明显。因此,滚动浏览整周比每次滚动浏览几天或几小时会产生更多的数据库访问,尤其是在较慢的 CPU 上,如手机。

在拖动后释放鼠标按钮(或从图表上移开手指)后,卡片会自动重新调整所有图表的 y 轴,以更好地反映新数据。卡片还会将历史中的所有其他图表同步到相同的时间点。这样,您始终可以在所有数据上看到相同的时间范围,并且所有内容都会对齐。

点击日期选择器将返回当前日期和时间,同时不改变您的缩放级别。双击日期选择器将返回并同时将缩放重置为配置的默认范围。

与原生 HA 历史面板一样,您可以将鼠标悬停在图表线或状态时间线上,以获取所选值或状态的提示框。

覆盖 HA 更多信息历史

该卡片能够替换 HA 更多信息弹出窗口中的历史图表,该窗口在您点击仪表板上的任何实体时出现。

请参阅 HA 论坛上的此帖子],以获取有关如何启用和配置该选项的更多信息。

安装和配置

HACS

历史探索器卡片现在是默认 HACS Home Assistant Community Store] 的一部分。这是安装此卡片的推荐方式。

手动安装

  1. 下载 history-explorer-card.js 文件并将其复制到您的 config/www 文件夹
  2. 添加一个资源引用。在 HA UI 中,导航到 Configuration -> Dashboards -> Resources。访问 Home Assistant 支持网站上的 Registering resources 页面以获取更多信息。
  3. 点击 + Add Resource 按钮
  4. 在 URL 字段中输入 /local/history-explorer-card.js,并确保资源类型字段显示为 Javascript Module
  5. 点击创建

现在您可以像往常一样将卡片添加到您的仪表板。在添加卡片后,您可能需要在浏览器中刷新一次页面以正确初始化它。

交互式配置

历史浏览器卡片上可见的实体可以在卡片配置中定义,也可以通过卡片 UI 动态添加或移除,而无需更改配置。这两种模式可以结合使用。在 YAML 中定义的实体会首先显示,并且在打开仪表盘时始终可见。动态添加的实体将显示在其后。您通过 UI 添加或移除的实体会被保存在浏览器的本地存储中,因此您无需每次重新打开 HA 页面时都重新添加它们。

您可以按以下方式管理动态配置的实体:

history-panel-otf-entities

如果您希望动态管理所有实体,您需要提供一个空的 YAML。您仍然可以添加全局配置设置。

type: custom:history-explorer-card
graphs:

默认情况下,UI 实体下拉列表将列出 HA 已知的所有实体。如果您拥有大量实体,这可能会让人有些不知所措。或者,卡片可以仅列出实际已记录并在数据库中可用的实体。执行此操作需要访问数据库,在较大的安装环境中可能需要几秒钟。您可以在列表在后台加载时正常使用卡片。一旦数据加载完成,添加实体列表即可使用。要启用此模式,请在您的 YAML 中使用以下配置:

type: custom:history-explorer-card
recordedEntitiesOnly: true

实体输入字段接受 * 通配符,并可以自动添加多个匹配所提供模式的实体。一些示例:

person.*      - Add all entities from the person domain
*door*        - Add all entities that contain the term ‘door’ in the name, regardless of domain
sensor.*door* - Add all entities that contain the term ‘door’ in the name, but only from the sensor domain
*             - Add all available entities in the list

列表中显示的实体可以使用 filterEntities 选项进行进一步筛选。这里同样适用相同的通配符语法。例如:

type: custom:history-explorer-card
filterEntities: 'binary_sensor.*'   # Show only binary sensors in the selector dropdown list
filterEntities:                     # Or use multiple filters, entities matching any of the filters will be added
  - '*power*'
  - 'sensor.*energy*'

动态添加的实体可以通过点击它们旁边的 x 关闭按钮单独移除,或者使用实体操作下拉菜单中的选项一起移除:

image

默认视图与时间范围

打开仪表盘时,卡片默认显示最近 24 小时的数据。您可以在 YAML 中选择不同的默认时间范围。分别使用 m、h、d 和 w 来表示分钟、小时、天和周。对于更长的时间尺度,o 和 y 分别表示月和年。目前最大范围为一年。如果未提供后缀,则默认为小时。

type: custom:history-explorer-card
defaultTimeRange: 4h     # show the last 4 hours when opening the card
defaultTimeRange: 2d     # or 2 days...
defaultTimeRange: 15m    # or 15 minutes...
defaultTimeRange: 3w     # or 3 weeks
defaultTimeRange: 6o     # or 6 months
defaultTimeRange: 1y     # or 1 year

默认情况下,卡片打开图表时,当前日期和时间会对齐到图表的右侧。您可以使用 defaultTimeOffset 设置定义自定义时间偏移量,该偏移量将在您打开卡片或点击日期按钮时应用。支持相对时间偏移量(由小写时间标识符表示,例如 h,d,w,o,y)以及对齐到当前小时、天、月或年的偏移量。后者将使用大写时间标识符 H,D,O,Y。例如:

type: custom:history-explorer-card
defaultTimeOffset: 1h       # Add 1 hour of empty space after the current time
defaultTimeOffset: -1d      # Show the previous days' data
defaultTimeOffset: 1D       # Show the current day from midnight to midnight
defaultTimeOffset: 1O       # Show the entire current month, starting at the 1st

自动刷新

默认情况下,当传感器值发生变化时,卡片不会自行刷新。可以通过重新加载页面来手动刷新。如果您希望卡片能够实时自动反映变化的值,可以启用两种策略。如有需要,这两种策略可以组合使用。

自动刷新将监控显示在图表中的实体变化,并在需要时刷新图表。该策略通常能覆盖大多数常见用例,如果您的历史浏览器卡片中仅显示少量实体,且这些实体变化不频繁,则推荐使用此策略。

type: custom:history-explorer-card
refresh:
  automatic: true

如果您的图表中显示了许多快速变化的实体,那么自动刷新可能会因持续不断的请求而占用您的数据库带宽。在这种情况下,最好使用固定的更新间隔,而不受传感器变化的影响。以下示例将以固定速率刷新卡片,每 30 秒一次。更改刷新间隔后,您需要重新加载页面。

type: custom:history-explorer-card
refresh:
  interval: 30

将多个实体分组到单个图表中

对于折线图,默认情况下,每个动态添加的实体都会显示在各自的图表中。如果您希望将具有兼容计量单位的实体分组到单个图表中,则可以使用以下 YAML 设置来覆盖此默认行为:

type: custom:history-explorer-card
combineSameUnits: true

时间线图表在可能的情况下始终会自动分组。在 YAML 中手动定义的图表永远不会自动分组,其分组可以在 YAML 中控制。

image

图例 / 实体标签

您可以通过点击顶部的标签来隐藏图中的实体。再次点击可使实体重新可见。您可以使用 hidden 属性在 entityOptions 或手动 YAML 中默认隐藏实体(请参阅本 readme 末尾的高级 YAML 示例)。

如果您希望完全从 UI 中移除标签,请使用 legendVisible 标志:

type: custom:history-explorer-card
legendVisible: false

线条插值模式

折线图有三种可用模式:三次样条、线段和阶梯。三次样条是默认模式,最为平滑,但在陡峭梯度后接较长恒定区段时,有时会出现过冲。线段模式使用直线连接数据点。其平滑度较低,但不会过冲。阶梯模式将显示原始量化数据。

image

您可以在 YAML 全局设置中指定行模式。可选值为 curveslinesstepped。如果未设置该选项,默认值为 curves。

type: custom:history-explorer-card
lineMode: lines

行模式也可以为 YAML 中定义的固定实体以及动态实体或设备类(见下文)进行设置。

折线图顶部和底部会添加少量边距,以便在曲线超出范围时留出一些空间,使其在视觉上更美观。如果您不想要额外的空间,可以关闭这些边距。如果移除两个边距,建议使用折线或阶梯模式,以避免曲线超出图表区域:

type: custom:history-explorer-card
axisAddMarginMin: false
axisAddMarginMax: false

Y 轴缩放

默认情况下,Y 轴的最小值/最大值缩放会根据您当前查看的数据自动调整。

按下轴锁定图标将暂时禁用自动缩放,并将 Y 轴锁定到当前活动范围。再次按下将恢复为图表的默认设置:

image

Y 轴也可以进行交互式修改。按住 SHIFT 键将解锁图表在垂直方向上的交互式缩放和平移。在图表上按住 SHIFT 并点击鼠标按钮,允许您沿水平和垂直方向拖动图表。按住 SHIFT 并使用鼠标滚轮将更改 Y 轴比例。当与 Y 轴交互时,轴锁定图标将自动启用。随时点击该图标即可返回默认比例。

您可以使用自己的值覆盖固定图表(在 YAML 中定义)以及动态添加的实体或设备类的自动 Y 轴范围。Y 值的最小值和最大值,以及刻度步长大小都可以手动覆盖。每个设置独立工作。例如,您可以仅覆盖步长大小,但保持范围处于自动状态。

graphs:
  - type: line
    options:
      ymin: 0       # Minimum Y locked to 0
      ymax: 40      # Maximum Y locked to 40
      ystepSize: 5  # Step size is fixed at 5

请参阅自定义动态折线图部分以及下方的高级 YAML 示例,以获取更多示例。

舍入

折线图中用于在工具提示上显示数据点值的舍入精度,可以通过 rounding 键后跟小数位数来全局定义。默认为 2 位。

type: custom:history-explorer-card
rounding: 4

折线图与不可用数据

如果您的历史数据包含不可用状态,例如某个传感器曾离线一段时间,那么卡片默认会在折线图中对缺失数据进行插值,以避免出现间隙。如果您希望保留不可用状态的可见性,以便轻松查看传感器何时断开连接或变得不可用以及发生的频率,则可以使用以下 YAML 禁用插值。时间线图表始终会显示不可用或未知状态,无论此参数如何设置。

type: custom:history-explorer-card
showUnavailable: true

显示当前传感器值

当前传感器值可选择性地显示在线图或条形图中其标签名称旁边:

type: custom:history-explorer-card
showCurrentValues: true

image

数据抽稀

卡片会自动减少图表中显示的数据,并移除在特定时间范围内不可见或无用的细节。例如,如果您查看按小时划分的历史记录,则不会移除任何数据,您可以逐点探索原始数据。如果您一次性查看整整一周的数据,则无需显示每几秒变化一次的数据,您甚至无法看到这些变化。卡片会简化曲线,从而大幅提升体验速度。

如果您愿意,可以在选项中关闭此功能,可以全局关闭,也可以按实体关闭。提供两种不同的抽稀算法。默认情况下,使用一种快速近似算法,在较低缩放级别下提供最高的渲染性能和相对良好的图形形状近似。可选地,可以启用精确抽稀模式。它在所有缩放范围内都能准确表示局部最小值和最大值。但渲染速度会变慢。抽稀模式可以在卡片级别全局选择,也可以按实体选择。

type: custom:history-explorer-card
decimation: false       # Disable decimation, the raw sensor data will be used at all scales (very slow).
decimation: fast        # Fast approximate decimation, good balance between speed and accuracy. The default.
decimation: accurate    # Accurate minmax preserving at all scales.

image

Decimation 通过合并状态时间线上极小的状态变化来工作,当这些变化无法单独被观察时,它们会被合并到“多个”部分中。放大时间线后,细节将会显示。用于“多个”部分的颜色可以按图表进行调整。

history-panel-timeline-multiple

显示单个样本

在悬停于图表上方时按住 Alt 键(在 Mac 上为 Option 键),将显示构成折线图的所有单个样本:

image

如果您希望永久显示某些图表的单个样本,可以使用 showSamples 选项按图表进行配置:

type: custom:history-explorer-card
entityOptions:
  humidity:
    showSamples: true      # always show samples for humidity graphs
graphs:
  - type: line
    options:
      showSamples: true    # explicitly show samples for this manually defined graph
    entities:
      - entity: sensor.outside_temperature

用于总量递增实体的条形图

表示总量(单调递增或净计量)的实体可以可视化为自适应条形图。这适用于例如消耗的能量、水或燃气、降雨量或网络数据使用量等实体。数据在时间间隔(10 分钟、每小时、每日或每月)上进行可视化,该间隔可针对每个图表即时切换且相互独立。

image

条形图使用 bar 图表类型,可以通过相应地设置类型,在动态添加和静态添加的实体中使用。当动态添加具有 total_increasing 状态类的实体时,将自动使用条形图类型。如果实体没有此状态类,则必须将其类型显式设置为 bar

使用图表右上角的选择器来选择显示数据的时间间隔。您可以在不同的图表中以不同的间隔多次添加同一实体。选择 as line 将以折线图形式显示实体的原始数据。默认间隔为每小时。可以使用 interval 选项进行覆盖。可能的值为 10mhourlydailymonthly

动态添加实体 sensor.rain_amount 时条形图显示的示例配置。默认间隔为 10 分钟,类型显式设置为 bar。如果实体具有 total_increasing 状态类,则后者不需要。

entityOptions:
  sensor.rain_amount:
    type: bar
    color: '#3e95cd'
    interval: 10m     # Default interval for this entity can be 10m, hourly, daily or monthly

柱状图也可以在 YAML 中手动添加。多个实体可以合并到单个图表中。每个实体的柱状图将并排显示:

image

graphs:
  - type: bar
    title: Rainfall
    options:
      interval: daily
      stacked: false
    entities:
      - entity: sensor.rain_amount
        scale: 0.5
      - entity: sensor.rain_amount

stacked 选项设置为 true,以将条形图上下堆叠显示,而不是并排显示:

image

颜色范围

条形图可以根据其显示的数值进行颜色编码,而不是使用单一颜色。颜色范围阈值以值对的形式在 color 键下提供。您可以提供任意数量的阈值。同时支持动态定义和 YAML 定义的图表。

entityOptions:
  energy:           # apply this color coding to all sensors of the energy device class (also works for domains or individual entities)
    type: bar
    color:
      '0.0': blue   # Bar is blue between below and up to 1.0 kWh
      '1.0': green  # Bar is green between 1.0 - 1.5 kWh
      '1.5': red    # Bar is red at 1.5 kWh and above

image

净计量

默认情况下,条形图将遵循 HA 为 total_increasing 状态类定义的标准,这意味着数据值的减少将被解释为电表重置。这阻止了其在净计量传感器中的使用,因为净计量传感器在运行过程中可能出现总量减少的情况。如果您希望可视化可能减少的累计总量传感器(净计量),请使用 netBars 设置(在 entityOptions 和手动预定义 YAML 中均可用)。您可以在同一图表中混合使用净计量和非净计量(总量递增)传感器。

graphs:
  - type: bar
    entities:
      - entity: sensor.net_meter
        netBars: true
        color:
          '-1000': red   # Red for negative bars
          '0.0': green   # Green for positive bars

注意:这与 HA 实现 total 状态类的方式非常相似,您可以使用此选项可视化 total 净计量传感器。但是,last_reset 属性未在此卡片中实现,因此在电表重置后,条形图将显示错误。

时间线图表

时间线图表通常用于可视化具有非数值数据的实体。当您动态添加一个没有计量单位的实体时,卡片将自动使用时间线图表来可视化其状态。

image

默认情况下,时间线图表中显示的状态文本代表 Home Assistant 内部使用的原始底层状态。例如,二进制传感器将显示其状态为 onoff,无论其设备类别如何。如果您希望看到依赖于设备类别的状态(例如,门为 Opened/Closed,运动传感器为 Detected/Clear),您可以按照以下 YAML 所示更改状态文本显示模式:

type: custom:history-explorer-card
stateTextMode: raw    # Show the raw untranslated state names, this is the default
stateTextMode: auto   # Show the automatically translated device class dependent state names
stateTextMode: hide   # Hide all state text labels

自定义状态颜色

时间线图表中显示的状态所使用的默认颜色可以通过多种不同的方式进行自定义。自定义是通过在卡片 YAML 中添加 statesColor 键来实现的。颜色作用于单个实体、整个设备类、域或全局状态。例如,即使它们都是二进制传感器,您也可为运动传感器和门传感器的开(on)和关(off)状态设置不同的颜色。

该卡片接受所有标准的 HTML 颜色定义字符串以及 CSS 变量。后者需按原样提供(例如 --primary-color,无需使用 CSS var 函数)。

以下示例将所有门传感器的 on 状态设为蓝色,并将所有运动传感器的 on 状态设为黄色。其他传感器设备类的 on 状态不受影响。它们将按照以下顺序继承颜色:实体特定规则、设备类或域范围规则,或全局颜色规则(详见下文)。您需指定设备类,后跟一个点,以及您想要自定义的状态:

type: custom:history-explorer-card
stateColors:
  door.on: blue
  motion.on: yellow

您还可以为整个域指定状态颜色。以下示例会将所有未为其设备类定义颜色的二进制传感器的 off 状态设置为紫色,并将 person 域的 home 状态设置为绿色:

type: custom:history-explorer-card
stateColors:
  binary_sensor.off: purple
  person.home: 'rgb(0,255,0)'

最后,您可以全局地为所有设备类和域中的特定状态着色。这可以用作通用回退方案。以下示例将所有传感器的 off 状态着色为红色,前提是他们没有针对其设备类或域的特定规则:

type: custom:history-explorer-card
stateColors:
  off: '#ff0000'

可自定义的状态不仅限于 onoff 值。可以使用任何原始状态值,例如由模板或 MQTT 传感器分配的值。例如:

type: custom:history-explorer-card
stateColors:
  sensor.Dry: tan
  sensor.Wet: green

可以为每个域、设备类别或实体设置一个通用默认颜色。如果存在,它将作为该域、设备类别或实体中所有未明确定义的状态的回退值。在以下示例中,定义了 input_text.air_quality 实体的状态。bad 状态将为红色,good 状态将为绿色。该实体的所有其他状态,无论其为何值,由于通配键的存在,都将为黄色。

type: custom:history-explorer-card
stateColors:
  input_text.air_quality.bad: red
  input_text.air_quality.good: green
  input_text.air_quality: yellow        # Fallback, catches all states from this entity that are not 'good' or 'bad'

存在一种添加到所有实体的特殊虚拟状态,即 multiple 状态。当多个状态因数据减量而在时间线上合并时,此状态会替代这些状态的聚合。与常规状态一样,您可以为单个实体、设备类别、域或全局指定此特殊状态的颜色。

罗盘箭头图表

表示方向角度值的实体,如方位或方向,可以使用罗盘箭头时间线进行显示。这对于可视化风向特别有用:

image

Compass 箭头图使用 arrowline 类型,可用于动态添加和静态添加的实体。请参阅 Customizing dynamically added graphs 部分查看前者的示例,以及高级 YAML 示例查看后者的示例。

Customizing dynamically added graphs

当您使用 add entity 下拉菜单添加新的折线图时,该图将使用默认设置和自动选择的颜色。您可以针对特定实体、设备类别或整个域覆盖这些设置。例如,您可以为所有湿度传感器设置固定的 Y 轴范围,或为您的功率图设置特定颜色或线条插值模式。

type: custom:history-explorer-card
entityOptions:
  humidity:                 # Apply these settings to all humidity sensors 
    color: blue
    fill: rgba(0,0,255,0.2)
    ymin: 20
    ymax: 100
    lineMode: lines
  sensor.outside_pressure:  # Apply these settings specifically to this entity if added
    color: green
    fill: rgba(0,255,0,0.2)
    ymin: 900
    ymax: 1100
    width: 2
  sensor:                   # Apply these settings to all other entities in the sensor domain
    color: red
    fill: rgba(0,0,0,0)

您还可以更改特定实体、设备类别或领域的图表类型。例如,您可以使用时间线显示一个数值实体,该实体通常显示为线图。或者,您可以将风向传感器的默认图表模式设置为方向箭头图表模式:

type: custom:history-explorer-card
entityOptions:
  sensor.wind_bearing:      # This sensor should be shown as compass arrows instead of a line graph
    type: arrowline
    color: black            # Optional color for the arrows, remove for auto selection based on the theme
    fill: rgba(0,0,0,0.2)   # Optional background color for the arrows

长期统计数据

启用此设置后,当历史数据达到上限时,卡片将尝试获取实体的长期统计数据。两种历史数据源的集成完全无缝。您可以像往常一样继续滚动并放大或缩小数据。在所有时间范围内,统计数据和历史数据都会实时合并。此功能仅适用于具有长期统计数据的实体。对于所有其他实体,一旦达到历史数据上限,其图表将变为空白。

image

在上面的截图中,蓝色曲线是室外温度,红色曲线是谷仓的温度。室外温度有统计数据可用,而谷仓温度没有。因此,您会看到红色曲线在历史数据库保留期结束时停止(10 月 11 日)。室外温度在此点之后继续延伸,因为卡片会切换到长期统计数据。请注意,如果可用,卡片始终优先使用历史数据而非长期统计数据,因为前者更精确。

长期统计支持默认启用,并配置为使用平均值和每小时间隔。您可以选择配置该功能(或将其关闭),甚至强制仅使用统计数据,从而实际上关闭短期历史状态 DB 的使用,方法是在卡片 YAML 中添加以下内容:

type: custom:history-explorer-card
statistics:
  enabled: true    # true is the default, use false to turn LTS support off.
  mode: mean
  period: hour     # reporting period. hour, day or month. Default is hour.
  force: false     # set to true if you want to use long term statistics only

(可选的)mode 参数控制统计数据在集成到历史流之前如何处理。mean = 使用平均值,min = 最小值,max = 最大值。如果未提供该选项,默认值为 mean。此设置不适用于 total_increasing 值(如能量传感器),这些值采用不同的计算方式。

自定义数据处理函数

该卡片支持通过 process 选项使用用户定义的 Javascript 表达式,在显示前直接修改数据。这可用于过滤或整形数据、应用非线性缩放,或将数据从一种图表类型转换为另一种。提供的 JS 表达式会接收原始的输入 state 值(根据图表和数据源的不同,可以是字符串或数字)。该表达式必须求值为所需的新状态。复杂的自定义处理函数可能会降低渲染性能。

自定义处理函数适用于动态添加的实体、手动定义的 YAML 图表以及更多信息面板中的图表。

示例:将湿度数值实体显示为时间线图表,其中低于 30% 的湿度显示为状态 dry,高于 70% 显示为 wet,介于两者之间显示为 normal

type: custom:history-explorer-card
graphs:
  - type: timeline
    entities:
      - entity: sensor.room_humidity
        process: '( state < 30 ) ? "dry" : ( state > 70 ) ? "wet" : "normal"'

动态温度实体的尖峰拒绝过滤器示例,移除无效的正向或负向温度尖峰,将其标记为无效,并让图表对其插值:

type: custom:history-explorer-card
entityOptions:
  temperature:  
    process: '( Math.abs(state) < 100 ) ? state : "unavailable"'

将数据导出为 CSV

当前显示的实体和时间范围的原始数据可以通过打开实体选项并选择“导出为 CSV”来导出为 CSV 文件。请注意,CSV 导出功能在 HA Companion 应用中不可用。历史数据和长期统计数据均可导出。

image

导出的 CSV 文件可以进行自定义。以下设置是可选的。如果未提供这些设置,将使用默认值。

type: custom:history-explorer-card
csv:
  separator: ';'            # Use a semicolon as a separator, the default is a comma
  timeFormat: 'DD/MM/YYYY'  # Customize the date/time format used in the CSV. The default is 'YYYY-MM-DD HH:mm:ss'.
  statisticsPeriod: hour    # Period used for statistics export. Hour, day or month is supported. Default is hour.
  exportAttributes: true    # Export all entity attributes along with their state, in separate columns. Default if off (no attrbutes).
  numberLocale: 'en-US'     # Format numbers using the given locale. If this settings is not defined, the raw DB values will be written (no formatting).

配置 UI

标题文本

可以使用 YAML 中的标题设置更改或移除默认的 History Explorer 标题:

type: custom:history-explorer-card
header: 'My sample history'
header: ' '   # Using a single space will remove the header and leave some padding space
header: hide  # The hide option will remove the header entirely

深色模式

该卡片会尝试将其 UI 颜色适配到当前激活的主题。但为了获得最佳效果,它需要知道您正在运行深色主题还是浅色主题。默认情况下,该卡片会向 HA 请求此信息。如果您使用的是默认的 Lovelace 主题,或另一个正确设置了深色模式标志的现代主题,那么使用默认设置即可。如果您使用的是使用旧格式且未正确设置深色模式标志的旧主题,该卡片可能会进入错误的模式。您可以通过在全局卡片设置(见下文)中添加此 YAML 来覆盖模式,以强制使用深色或浅色模式:

type: custom:history-explorer-card
uimode: dark

将 dark 替换为 light 以强制使用浅色模式。

自定义 UI 元素的颜色

可以进一步自定义 UI 中各种元素的颜色:

type: custom:history-explorer-card
uiColors:
  gridlines: '#ff000040'
  labels: green
  buttons: '#80f00050'
  selector: 'rgba(255,255,255,255)'
  closeButton: '#0000001f'

更改 UI 布局

时间控制工具栏和实体选择器的位置可以通过 YAML 设置进行自定义:

type: custom:history-explorer-card
uiLayout:
  toolbar: top
  selector: bottom

可选选项为 topbottombothhide。当选择 both 时,UI 元素将被复制并同时显示在顶部和底部。这在需要大量垂直滚动的大型历史记录中非常有用。当选择 hide 时,相应的 UI 元素将不显示。你还可以使用 interval: hide 隐藏总递增实体的区间选择器。

工具栏可以设置为粘性,始终悬浮在图表上方或下方。在浏览长图表列表时,这有助于保持工具栏控件在触手可及的范围内。使用以下 YAML 使 topbottomboth 变为粘性。在移动设备上,不建议将包含实体选择器的底部工具栏设置为粘性,因为实体下拉列表可能难以触及。

type: custom:history-explorer-card
uiLayout:
  sticky: top   # Make the top toolbar controls sticky, so they always stay on top.

如果您希望时间范围控件中的 +- 缩放图标以相反的方式工作,您可以使用以下 YAML 进行反转:

type: custom:history-explorer-card
uiLayout:
  invertZoom: true

图表左侧标签区域的宽度可以自定义,并且可以使用以下 YAML 选项隐藏标签:

type: custom:history-explorer-card
labelsVisible: false   # this will hide the unit of measure labels and the entity names left of the graphs or timelines
labelAreaWidth: 10     # the width of the label area in pixels, default is 65

图表的高度可以通过以下选项设置:

type: custom:history-explorer-card
lineGraphHeight: 100     # default line graph height is 250
barGraphHeight: 100      # default bar graph height is 150
timelineBarHeight: 18    # timeline bar height (default is 24)
timelineBarSpacing: 30   # spacing from the top of one timeline bar to the next (default is 40)

或者,你可以为单个折线图或柱状图(包括动态图表和手动定义的图表)设置自定义高度。单个图表的高度将覆盖全局高度选项:

type: custom:history-explorer-card
entityOptions:
  humidity:
    height: 150        # set the height of all humidity graphs to 150
graphs:
  - type: line
    options:
      height: 200      # explicitly set the height of this manually defined graph
    entities:
      - entity: sensor.outside_temperature

配置工具提示弹窗

时间线和箭头线中使用的工具提示弹窗支持三种不同的尺寸:full、compact 和 slim。默认情况下,尺寸会根据图表周围可用的空间自动选择。可以手动覆盖尺寸:

type: custom:history-explorer-card
tooltip:
  size: slim       # Supported sizes are full, compact, slim. Use auto for automatic size (this is the default).

工具提示中的状态颜色框可以选择性地在线图或时间线(或两者)中隐藏:

tooltip:
  showColorsLine: false       # hide the color boxes in the tooltip popups for line graphs
  showColorsTimeline: false   # hide the color boxes in the tooltip popups for timeline graphs

工具提示可选择性地显示所选状态的持续时间,位于开始和结束时间旁边:

tooltip:
  showDuration: true

image

您可以隐藏折线图和条形图工具提示中的实体名称标签,使其更加紧凑:

tooltip:
  showLabel: false

工具提示中状态名称的显示方式(原始值或翻译值 / 取决于设备类)通常遵循卡片级别上为时间线图表设置的 stateTextMode 模式。如果您希望工具提示使用其他模式,则可以覆盖该设置。例如:

tooltip:
  stateTextMode: raw      # Show raw state names in the tooltip even if timelines show translated states

更改水平时间刻度密度

默认情况下,时间刻度密度为自动模式,并根据屏幕宽度进行调整。这始终是在外观良好(无截断)、在从移动设备到墙挂式 8k 电视的所有屏幕尺寸上均可读,以及对刻度密度的主观偏好之间做出的折中。在大多数情况下,默认的自动选择将产生良好的效果。但如有需要,可以使用 timeTicks 设置来自定义密度。

timeTicks:

  # If present, this will skip the auto-density and force the use of your selected density.
  densityOverride: 'highest'  # Options are: low, medium, high, higher, highest.

  # optional, this can be used to shorten the date representation on the time ticks, to make more space if you want high tick densities.
  dateFormat: 'short'         # Options are normal and short. Default is normal.

一个没有 timeTicks 且所有设置均为自动默认值的示例:

image

higher 使用 densityOverride,将日期格式保持为正常:

image

与上述相同,但将 dateFormat 设置为 short:

image

覆盖密度将禁用根据卡片或屏幕宽度进行的自动密度计算。因此,您很容易陷入标签重叠的情况。

多张卡片

您可以在同一视图或跨多个视图和仪表板中使用多张历史记录浏览器卡片。每张卡片都有独立的配置。为了使卡片能够管理各自的配置,每张卡片都需要一个唯一的名称。通过 UI 添加卡片时,默认会分配一个随机名称。如有需要,您可以调整该名称。如果您通过 YAML 手动添加卡片,则必须为每张卡片提供自己的唯一名称。

如果您在 Lovelace 中仅使用一张历史记录浏览器卡片,则名称是可选的。

type: custom:history-explorer-card
cardName: history-card-5

预配置图的 YAML 配置

YAML 配置是可选的。虽然交互式配置更受推荐,但有时保留一组预定义实体也会很有用。

以下是一个基本的配置示例:

type: custom:history-explorer-card
graphs:
  - type: line
    entities:
      - entity: sensor.outside_temperature
        color: '#3e95cd'
        fill: rgba(151,187,205,0.15)
      - entity: sensor.annexe_temperature
        color: '#ee3452'
        fill: rgba(0,0,0,0)
  - type: line
    entities:
      - entity: sensor.outside_pressure
        color: '#3ecd95'
        fill: rgba(151,205,187,0.15)
  - type: timeline
    title: Non-numerical sensors
    entities:
      - entity: binary_sensor.pir_yard
        name: Yard PIR
      - entity: binary_sensor.door_barn
        name: Barn door
      - entity: input_select.qubino2_3
        name: Heater
      - entity: person.alex

使用通配符自动添加多个实体。以下代码片段会将名称中包含 temperature 的所有传感器添加到折线图中,但名称中包含 fridge 的实体以及 cpu_temperature 传感器除外:

type: custom:history-explorer-card
graphs:
  - type: line
    entities:
      - entity: sensor.*temperature*
        exclude:
          - entity: '*fridge*'
          - entity: sensor.cpu_temperature
        fill: rgba(0,0,0,0)

一个更高级的示例:

type: custom:history-explorer-card
cardName: advanced-history
uimode: dark
stateColors:
  person.home: blue
  person.not_home: yellow
decimation: false
header: 'My sample history'
graphs:
  - type: line
    options:
      ymin: -10
      ymax: 30
      showTimeLabels: true   # false will hide the time ticks on this graph
    entities:
      - entity: sensor.outside_temperature
        color: '#3e95cd'
        fill: rgba(151,187,205,0.15)
        width: 4
        lineMode: stepped
      - entity: sensor.annexe_temperature
        color: '#ee3452'
        fill: rgba(0,0,0,0)
        lineMode: lines
        hidden: true         # This entity is hidden by default !
  - type: line
    entities:
      - entity: sensor.outside_pressure
        color: --my-special-green
        fill: rgba(151,205,187,0.15)
  - type: timeline
    title: Non-numerical sensors
    entities:
      - entity: binary_sensor.pir_yard
        name: Yard PIR
      - entity: binary_sensor.door_barn
        name: Barn door
      - entity: input_select.qubino2_3
        name: Heater
  - type: arrowline
    title: Wind bearing
    entities:
      - entity: sensor.wind_bearing
        color: black
        fill: rgba(0,0,0,0.2)

Replace the entities and structure as needed.

在侧边栏中作为面板运行

历史浏览器可以作为侧边栏面板运行。添加一个新的空仪表盘,并勾选 Show in sidebar 复选框。将视图类型设置为 Panel (1 card),并将历史浏览器卡片添加到该视图中。

image


Buy Me A Coffee