From 6690a0e4b1c0ded0d33fa28324825b0cdb528312 Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Fri, 2 Feb 2024 05:40:31 -0500 Subject: [PATCH] Add names to map path tooltip (#19565) * Add names to map path tooltip * Apply suggestions from code review Co-authored-by: Bram Kragten * prettier --------- Co-authored-by: Bram Kragten --- src/components/map/ha-map.ts | 45 +++++++++++++++++++++-- src/panels/lovelace/cards/hui-map-card.ts | 38 +++++++------------ 2 files changed, 56 insertions(+), 27 deletions(-) diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index 42834dbe69..1fcbceace4 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -8,12 +8,18 @@ import type { Marker, Polyline, } from "leaflet"; +import { isToday } from "date-fns"; import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { LeafletModuleType, setupLeafletMap, } from "../../common/dom/setup-leaflet-map"; +import { + formatTimeWithSeconds, + formatTimeWeekday, +} from "../../common/datetime/format_time"; +import { formatDateTime } from "../../common/datetime/format_date_time"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; import { loadPolyfillIfNeeded } from "../../resources/resize-observer.polyfill"; @@ -27,12 +33,14 @@ const getEntityId = (entity: string | HaMapEntity): string => export interface HaMapPathPoint { point: LatLngTuple; - tooltip: string; + timestamp: Date; } export interface HaMapPaths { points: HaMapPathPoint[]; color?: string; + name?: string; gradualOpacity?: number; + fullDatetime?: boolean; } export interface HaMapEntity { @@ -242,6 +250,30 @@ export class HaMap extends ReactiveElement { }); } + private _computePathTooltip(path: HaMapPaths, point: HaMapPathPoint): string { + let formattedTime: string; + if (path.fullDatetime) { + formattedTime = formatDateTime( + point.timestamp, + this.hass.locale, + this.hass.config + ); + } else if (isToday(point.timestamp)) { + formattedTime = formatTimeWithSeconds( + point.timestamp, + this.hass.locale, + this.hass.config + ); + } else { + formattedTime = formatTimeWeekday( + point.timestamp, + this.hass.locale, + this.hass.config + ); + } + return `${path.name}
${formattedTime}`; + } + private _drawPaths(): void { const hass = this.hass; const map = this.leafletMap; @@ -289,7 +321,10 @@ export class HaMap extends ReactiveElement { fillOpacity: opacity, interactive: true, }) - .bindTooltip(path.points[pointIndex].tooltip, { direction: "top" }) + .bindTooltip( + this._computePathTooltip(path, path.points[pointIndex]), + { direction: "top" } + ) ); // DRAW line between this and next point @@ -319,7 +354,10 @@ export class HaMap extends ReactiveElement { fillOpacity: opacity, interactive: true, }) - .bindTooltip(path.points[pointIndex].tooltip, { direction: "top" }) + .bindTooltip( + this._computePathTooltip(path, path.points[pointIndex]), + { direction: "top" } + ) ); } this._mapPaths.forEach((marker) => map.addLayer(marker)); @@ -556,6 +594,7 @@ export class HaMap extends ReactiveElement { color: white !important; border-radius: 4px; box-shadow: none !important; + text-align: center; } `; } diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index f5ea4f1a10..6d3d49b401 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -1,5 +1,4 @@ import { mdiImageFilterCenterFocus } from "@mdi/js"; -import { isToday } from "date-fns"; import { HassEntities } from "home-assistant-js-websocket"; import { LatLngTuple } from "leaflet"; import { @@ -14,12 +13,8 @@ import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { getColorByIndex } from "../../../common/color/colors"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; -import { formatDateTime } from "../../../common/datetime/format_date_time"; -import { - formatTimeWithSeconds, - formatTimeWeekday, -} from "../../../common/datetime/format_time"; import { computeDomain } from "../../../common/entity/compute_domain"; +import { computeStateName } from "../../../common/entity/compute_state_name"; import { deepEqual } from "../../../common/util/deep-equal"; import parseAspectRatio from "../../../common/util/parse-aspect-ratio"; import "../../../components/ha-card"; @@ -391,28 +386,23 @@ class HuiMapCard extends LitElement implements LovelaceCard { } const p = {} as HaMapPathPoint; p.point = [latitude, longitude] as LatLngTuple; - const t = new Date(entityState.lu * 1000); - if ((config.hours_to_show! ?? DEFAULT_HOURS_TO_SHOW) > 144) { - // if showing > 6 days in the history trail, show the full - // date and time - p.tooltip = formatDateTime(t, this.hass.locale, this.hass.config); - } else if (isToday(t)) { - p.tooltip = formatTimeWithSeconds( - t, - this.hass.locale, - this.hass.config - ); - } else { - p.tooltip = formatTimeWeekday( - t, - this.hass.locale, - this.hass.config - ); - } + p.timestamp = new Date(entityState.lu * 1000); points.push(p); } + + const entityConfig = this._configEntities?.find( + (e) => e.entity === entityId + ); + const name = + entityConfig?.name ?? + (entityId in this.hass.states + ? computeStateName(this.hass.states[entityId]) + : entityId); + paths.push({ points, + name, + fullDatetime: (config.hours_to_show ?? DEFAULT_HOURS_TO_SHOW) > 144, color: this._getColor(entityId), gradualOpacity: 0.8, });