414 lines
12 KiB
YAML
414 lines
12 KiB
YAML
unique_bubble_graph:
|
|
name: Unique Bubble History Background Graph
|
|
version: 1.3.1
|
|
creator: Torsten
|
|
supported:
|
|
- button
|
|
description: Shows a Home Assistant sensor history graph as Bubble Card background.
|
|
code: |
|
|
ha-card {
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
border-radius: var(--bubble-history-border-radius, 28px) !important;
|
|
background: var(--ha-card-background, var(--card-background-color)) !important;
|
|
clip-path: inset(0 round var(--bubble-history-border-radius, 28px)) !important;
|
|
contain: paint !important;
|
|
}
|
|
|
|
.bubble-button-card-container,
|
|
.bubble-button-card,
|
|
.bubble-card-background {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.bubble-history-background {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
z-index: 0 !important;
|
|
pointer-events: none !important;
|
|
opacity: 1 !important;
|
|
border-radius: var(--bubble-history-border-radius, 28px) !important;
|
|
overflow: hidden !important;
|
|
clip-path: inset(0 round var(--bubble-history-border-radius, 28px)) !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.bubble-history-background svg {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.bubble-history-background path.area {
|
|
fill: var(--bubble-history-fill-color, var(--primary-color)) !important;
|
|
opacity: var(--bubble-history-fill-opacity, 0.10) !important;
|
|
}
|
|
|
|
.bubble-history-background path.line {
|
|
fill: none !important;
|
|
stroke: var(--bubble-history-line-color, var(--primary-color)) !important;
|
|
stroke-width: var(--bubble-history-line-width, 2.5) !important;
|
|
stroke-linecap: round !important;
|
|
stroke-linejoin: round !important;
|
|
opacity: var(--bubble-history-line-opacity, 0.75) !important;
|
|
}
|
|
|
|
.bubble-history-background path.loading-line {
|
|
opacity: 0.35 !important;
|
|
stroke-dasharray: 6 6 !important;
|
|
}
|
|
|
|
.bubble-history-tooltip {
|
|
position: absolute !important;
|
|
z-index: 10 !important;
|
|
display: none;
|
|
padding: 6px 8px;
|
|
border-radius: 10px;
|
|
background: rgba(20, 20, 20, 0.82);
|
|
color: white;
|
|
font-size: 11px;
|
|
line-height: 1.25;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
transform: translate(-50%, 0);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.bubble-history-marker {
|
|
position: absolute !important;
|
|
z-index: 8 !important;
|
|
display: none;
|
|
top: 10%;
|
|
bottom: 10%;
|
|
width: 1px;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bubble-button-card-container,
|
|
.bubble-button-card,
|
|
.bubble-name-container,
|
|
.bubble-sub-button-container,
|
|
.bubble-icon-container,
|
|
.bubble-sub-button,
|
|
.bubble-icon,
|
|
.bubble-state,
|
|
.bubble-name {
|
|
position: relative !important;
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
${(() => {
|
|
const cfg =
|
|
this.config.unique_bubble_graph ||
|
|
this.config.history_background_graph ||
|
|
{};
|
|
|
|
const entity = cfg.entity || this.config.entity || "sensor.sma_tripower_x_pv_power";
|
|
|
|
const entityLabel =
|
|
cfg.label ||
|
|
hass.states?.[entity]?.attributes?.friendly_name ||
|
|
entity ||
|
|
"Sensor";
|
|
|
|
const unit = hass.states?.[entity]?.attributes?.unit_of_measurement || "";
|
|
|
|
const hoursToShow = Number(cfg.hours_to_show ?? 24);
|
|
const lineWidth = Number(cfg.line_width ?? 2.5);
|
|
const refreshMinutes = Number(cfg.refresh_minutes ?? 0);
|
|
const maxPoints = Number(cfg.max_points ?? 160);
|
|
const lineOpacity = Number(cfg.line_opacity ?? 0.75);
|
|
const fillOpacity = Number(cfg.fill_opacity ?? 0.10);
|
|
const borderRadius = Number(cfg.border_radius ?? 28);
|
|
const tooltipTop = Number(cfg.tooltip_top ?? 52);
|
|
const paddingY = Number(cfg.padding_y ?? 12);
|
|
|
|
const lineColor = cfg.line_color || "var(--primary-color)";
|
|
const fillColor = cfg.fill_color || lineColor;
|
|
|
|
const host = this.shadowRoot?.querySelector("ha-card")
|
|
|| this.querySelector?.("ha-card")
|
|
|| card?.querySelector?.("ha-card")
|
|
|| card;
|
|
|
|
if (!host || !entity) return "";
|
|
|
|
host.style.setProperty("--bubble-history-line-width", `${lineWidth}`);
|
|
host.style.setProperty("--bubble-history-line-opacity", `${lineOpacity}`);
|
|
host.style.setProperty("--bubble-history-fill-opacity", `${fillOpacity}`);
|
|
host.style.setProperty("--bubble-history-border-radius", `${borderRadius}px`);
|
|
host.style.setProperty("--bubble-history-line-color", lineColor);
|
|
host.style.setProperty("--bubble-history-fill-color", fillColor);
|
|
|
|
let bg = host.querySelector(".bubble-history-background");
|
|
let tooltip = host.querySelector(".bubble-history-tooltip");
|
|
let marker = host.querySelector(".bubble-history-marker");
|
|
|
|
if (!bg) {
|
|
bg = document.createElement("div");
|
|
bg.className = "bubble-history-background";
|
|
host.prepend(bg);
|
|
|
|
bg.innerHTML = `
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
|
|
<path class="line loading-line" d="M 0 70 L 20 55 L 40 65 L 60 45 L 80 58 L 100 38"></path>
|
|
</svg>
|
|
`;
|
|
}
|
|
|
|
if (!tooltip) {
|
|
tooltip = document.createElement("div");
|
|
tooltip.className = "bubble-history-tooltip";
|
|
host.appendChild(tooltip);
|
|
}
|
|
|
|
if (!marker) {
|
|
marker = document.createElement("div");
|
|
marker.className = "bubble-history-marker";
|
|
host.appendChild(marker);
|
|
}
|
|
|
|
const formatValue = (value) => {
|
|
if (unit === "W" && Math.abs(value) >= 1000) {
|
|
return `${(value / 1000).toFixed(2)} kW`;
|
|
}
|
|
|
|
if (Number.isInteger(value)) {
|
|
return `${value} ${unit}`.trim();
|
|
}
|
|
|
|
return `${value.toFixed(1)} ${unit}`.trim();
|
|
};
|
|
|
|
const formatTime = (timestamp) => {
|
|
return new Date(timestamp).toLocaleString("de-DE", {
|
|
day: "2-digit",
|
|
month: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit"
|
|
});
|
|
};
|
|
|
|
const attachTooltip = (points) => {
|
|
if (cfg.tooltip === false) return;
|
|
|
|
host.onmousemove = (event) => {
|
|
if (!points?.length) return;
|
|
|
|
const rect = host.getBoundingClientRect();
|
|
const xRatio = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
|
|
|
|
const minTime = points[0].t;
|
|
const maxTime = points[points.length - 1].t;
|
|
const targetTime = minTime + xRatio * (maxTime - minTime);
|
|
|
|
let nearest = points[0];
|
|
let nearestDiff = Math.abs(points[0].t - targetTime);
|
|
|
|
for (const point of points) {
|
|
const diff = Math.abs(point.t - targetTime);
|
|
if (diff < nearestDiff) {
|
|
nearest = point;
|
|
nearestDiff = diff;
|
|
}
|
|
}
|
|
|
|
const x = ((nearest.t - minTime) / (maxTime - minTime || 1)) * rect.width;
|
|
const safeX = Math.min(rect.width - 55, Math.max(55, x));
|
|
|
|
tooltip.innerHTML = `
|
|
<strong>${entityLabel}: ${formatValue(nearest.v)}</strong><br>
|
|
${formatTime(nearest.t)}
|
|
`;
|
|
|
|
tooltip.style.display = "block";
|
|
marker.style.display = "block";
|
|
|
|
tooltip.style.left = `${safeX}px`;
|
|
tooltip.style.top = `${tooltipTop}px`;
|
|
marker.style.left = `${x}px`;
|
|
};
|
|
|
|
host.onmouseleave = () => {
|
|
tooltip.style.display = "none";
|
|
marker.style.display = "none";
|
|
};
|
|
};
|
|
|
|
if (!hass?.states?.[entity]) {
|
|
console.warn(`Bubble history graph: entity not found: ${entity}`);
|
|
return "";
|
|
}
|
|
|
|
if (!hass?.fetchWithAuth) {
|
|
console.warn("Bubble history graph: hass.fetchWithAuth not available");
|
|
return "";
|
|
}
|
|
|
|
if (bg.dataset.loading === "true") return "";
|
|
bg.dataset.loading = "true";
|
|
|
|
const end = new Date();
|
|
const start = new Date(end.getTime() - hoursToShow * 60 * 60 * 1000);
|
|
|
|
const url =
|
|
`/api/history/period/${encodeURIComponent(start.toISOString())}` +
|
|
`?filter_entity_id=${encodeURIComponent(entity)}` +
|
|
`&end_time=${encodeURIComponent(end.toISOString())}` +
|
|
`&minimal_response`;
|
|
|
|
hass.fetchWithAuth(url)
|
|
.then((response) => response.json())
|
|
.then((history) => {
|
|
bg.dataset.loading = "false";
|
|
|
|
const states = Array.isArray(history) ? history.flat() : [];
|
|
|
|
let points = states
|
|
.map((state) => ({
|
|
t: new Date(state.lu || state.lc || state.last_updated || state.last_changed).getTime(),
|
|
v: Number(state.s ?? state.state)
|
|
}))
|
|
.filter((point) => Number.isFinite(point.t) && Number.isFinite(point.v))
|
|
.sort((a, b) => a.t - b.t);
|
|
|
|
if (points.length < 2) {
|
|
console.warn(`Bubble history graph: not enough points: ${points.length}`);
|
|
return;
|
|
}
|
|
|
|
if (points.length > maxPoints) {
|
|
const step = Math.ceil(points.length / maxPoints);
|
|
points = points.filter((_, index) => index % step === 0);
|
|
}
|
|
|
|
const width = 100;
|
|
const height = 100;
|
|
|
|
const minTime = Math.min(...points.map((point) => point.t));
|
|
const maxTime = Math.max(...points.map((point) => point.t));
|
|
const minValue = Math.min(...points.map((point) => point.v));
|
|
const maxValue = Math.max(...points.map((point) => point.v));
|
|
|
|
const timeRange = maxTime - minTime || 1;
|
|
const valueRange = maxValue - minValue || 1;
|
|
|
|
const xy = points.map((point) => {
|
|
const x = ((point.t - minTime) / timeRange) * width;
|
|
const y =
|
|
height -
|
|
paddingY -
|
|
((point.v - minValue) / valueRange) *
|
|
(height - paddingY * 2);
|
|
|
|
return [x, y];
|
|
});
|
|
|
|
const linePath = xy
|
|
.map(([x, y], index) =>
|
|
`${index === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`
|
|
)
|
|
.join(" ");
|
|
|
|
const areaPath = `${linePath} L ${width} ${height} L 0 ${height} Z`;
|
|
|
|
const svg = `
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
|
|
<path class="area" d="${areaPath}"></path>
|
|
<path class="line" d="${linePath}"></path>
|
|
</svg>
|
|
`;
|
|
|
|
bg.innerHTML = svg;
|
|
attachTooltip(points);
|
|
})
|
|
.catch((error) => {
|
|
bg.dataset.loading = "false";
|
|
console.warn("Bubble history graph error:", error);
|
|
});
|
|
|
|
return "";
|
|
})()}
|
|
editor:
|
|
- name: entity
|
|
label: Graph Sensor
|
|
selector:
|
|
entity:
|
|
domain: sensor
|
|
- name: label
|
|
label: Tooltip Label
|
|
selector:
|
|
text: null
|
|
- name: hours_to_show
|
|
label: Stunden anzeigen
|
|
selector:
|
|
number:
|
|
min: 1
|
|
max: 168
|
|
step: 1
|
|
mode: box
|
|
- name: line_width
|
|
label: Linien Dicke
|
|
selector:
|
|
number:
|
|
min: 0.5
|
|
max: 10
|
|
step: 0.1
|
|
mode: box
|
|
- name: line_opacity
|
|
label: Linien Sichtbarkeit
|
|
selector:
|
|
number:
|
|
min: 0
|
|
max: 1
|
|
step: 0.05
|
|
mode: slider
|
|
- name: fill_opacity
|
|
label: Flächen Sichtbarkeit
|
|
selector:
|
|
number:
|
|
min: 0
|
|
max: 1
|
|
step: 0.05
|
|
mode: slider
|
|
- name: max_points
|
|
label: Max. Datenpunkte
|
|
selector:
|
|
number:
|
|
min: 20
|
|
max: 500
|
|
step: 10
|
|
mode: box
|
|
- name: tooltip
|
|
label: Tooltip anzeigen
|
|
selector:
|
|
boolean: null
|
|
- name: tooltip_top
|
|
label: Tooltip Position oben
|
|
selector:
|
|
number:
|
|
min: 0
|
|
max: 200
|
|
step: 1
|
|
mode: box
|
|
- name: padding_y
|
|
label: Graph Abstand oben/unten
|
|
selector:
|
|
number:
|
|
min: 0
|
|
max: 40
|
|
step: 1
|
|
mode: box
|
|
- name: border_radius
|
|
label: Eckenradius
|
|
selector:
|
|
number:
|
|
min: 0
|
|
max: 60
|
|
step: 1
|
|
mode: box
|