@@ -3751,12 +5431,12 @@
const escapedIcon = ecfg.icon && ecfg.icon !== false ? escapeHtml(ecfg.icon) : "";
const mainIcon = escapedIcon && lp !== "hero" ? `
+
${aboveLabel}
${heroHeader}
${topRightValue}
-
+
${mainIcon}
${leftLabel}
@@ -3764,47 +5444,67 @@
${paintLayers}
+ ${baselineIndicator}
${innerLabel}
${peakMarker}
${targetMarker}
+ ${floorMarker}
+ ${genericMarkers}
${needleMarker}
+ ${peakValueLabel}
${targetValueLabel}
+ ${floorValueLabel}
+ ${genericValueLabels}
${rightValue}
`;
}
- _patchRow(row, entityCfg, stateObj) {
- var _a;
+ _patchRow(row, entityCfg, stateObj, previousHass = null) {
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
if (!row || !stateObj) return;
const ecfg = this._resolve(entityCfg);
- const rowViewModel = buildRowViewModel({
- hass: this._hass,
- cardConfig: this._config,
- entityConfig: ecfg,
- entityState: stateObj,
- peaks: this._peaks
- });
- const rawVal = rowViewModel.numericValue;
+ this._updateExtrema(entityCfg, ecfg, stateObj);
+ const previousScale = this._rowScales.get(entityCfg);
+ const rowViewModel = this._buildRowViewModel(entityCfg, ecfg, stateObj);
const safeMin = rowViewModel.min;
const safeMax = rowViewModel.max;
- const targetVal = rowViewModel.target;
const pct = rowViewModel.percent;
const color = this._getColor(pct, ecfg, safeMin, safeMax);
- const display = rowViewModel.displayValue;
- const displayUnit = rowViewModel.displayUnit;
+ const display = rowViewModel.primaryPresentation.number;
+ const displayUnit = rowViewModel.primaryPresentation.unit;
const fillReveal = row.querySelector(".bar-fill-reveal");
+ const baselineIndicator = row.querySelector(".baseline-indicator");
const paintLayer = row.querySelector('.bar-paint-layer[data-layer="base"]');
const liveTargetPct = rowViewModel.targetPercent;
const liveBaselinePct = rowViewModel.baselinePercent;
const needleState = rowViewModel.needle;
const fillState = this._getFillRenderState(pct, "var(--sbcp-row-height)", ecfg, color, liveTargetPct, liveBaselinePct, safeMin, safeMax, needleState.show);
+ const previousStateObj = (_b = (_a = previousHass == null ? void 0 : previousHass.states) == null ? void 0 : _a[entityCfg.entity]) != null ? _b : null;
+ const previousViewModel = previousStateObj ? buildRowViewModel({
+ hass: previousHass,
+ cardConfig: this._config,
+ entityConfig: ecfg,
+ entityState: previousStateObj,
+ extrema: (_c = this._extrema.get(entityCfg)) != null ? _c : null,
+ previousScale
+ }) : null;
+ const revealDuration = this._getRevealTransitionDuration(
+ previousViewModel && Number.isFinite(previousViewModel.numericValue) ? { valuePercent: previousViewModel.percent, baselinePercent: previousViewModel.baselinePercent } : null,
+ Number.isFinite(rowViewModel.numericValue) ? { valuePercent: pct, baselinePercent: liveBaselinePct } : null
+ );
if (fillReveal) {
- this._setStyleTextIfChanged(fillReveal, fillState.revealStyle);
+ this._setStyleTextIfChanged(fillReveal, `${fillState.revealStyle};--sbcp-reveal-duration:${revealDuration}ms`);
this._setClassNameIfChanged(fillReveal, `bar-fill-reveal${ecfg.bar.animated ? "" : " no-anim"}`);
}
+ if (baselineIndicator) {
+ this._setStyleIfChanged(baselineIndicator, "display", Number.isFinite(liveBaselinePct) ? "block" : "none");
+ if (Number.isFinite(liveBaselinePct)) {
+ this._setStyleIfChanged(baselineIndicator, "left", `${liveBaselinePct}%`);
+ }
+ }
if (paintLayer) {
const baseLayerState = fillState.paintLayers.find((layer) => layer.id === "base");
if (baseLayerState) {
@@ -3821,7 +5521,7 @@ ${paintLayers}
const needleEl = row.querySelector(".needle-marker");
if (needleEl) {
this._setStyleIfChanged(needleEl, "display", needleState.show ? "block" : "none");
- this._setStyleIfChanged(needleEl, "left", `${(_a = needleState.pct) != null ? _a : 0}%`);
+ this._setStyleIfChanged(needleEl, "left", `${(_d = needleState.pct) != null ? _d : 0}%`);
this._setStyleIfChanged(needleEl, "--needle-color", needleState.color);
this._setStyleIfChanged(needleEl, "--needle-border-color", needleState.borderColor);
this._setDatasetIfChanged(needleEl, "edge", needleState.edge);
@@ -3868,88 +5568,96 @@ ${paintLayers}
if (aboveLabel) {
aboveLabel.innerHTML = `
${escapeHtml(rowViewModel.name)} ${this._formatAboveValueMarkup(display, displayUnit, false)}`;
}
- if (ecfg.peak_marker.show && Number.isFinite(rawVal)) {
- const key = entityCfg.entity;
- if (this._peaks[key] === void 0 || rawVal > this._peaks[key]) {
- this._peaks[key] = rawVal;
- }
- const peakVal = this._peaks[key];
- const peakPct = this._toScalePct(peakVal, safeMin, safeMax);
- const peakEl = row.querySelector(".peak-marker");
- if (peakEl) {
- if (Number.isFinite(peakPct)) {
- this._setStyleIfChanged(peakEl, "left", `${peakPct}%`);
- }
- this._setStyleIfChanged(peakEl, "--marker-color", ecfg.peak_marker.color);
- this._setStyleIfChanged(peakEl, "--marker-contrast-color", this._getMarkerContrastColor(ecfg.peak_marker.color));
- }
- }
const targetEl = row.querySelector(".target-marker");
const targetLabelEl = row.querySelector(".target-value-label");
- if (targetVal !== null) {
- const targetPct = rowViewModel.targetPercent;
- if (targetEl) {
- this._setStyleIfChanged(targetEl, "display", "");
- this._setStyleIfChanged(targetEl, "left", `${targetPct}%`);
- this._setStyleIfChanged(targetEl, "--marker-color", ecfg.target_marker.color);
- this._setStyleIfChanged(targetEl, "--marker-contrast-color", this._getMarkerContrastColor(ecfg.target_marker.color));
+ const peakLabelEl = row.querySelector(".peak-value-label");
+ const floorLabelEl = row.querySelector(".floor-value-label");
+ const markerModels = (_e = rowViewModel.markers) != null ? _e : [];
+ this._patchMarker(targetEl, this._getMarkerModel(markerModels, "target"));
+ this._patchMarker(row.querySelector(".peak-marker"), this._getMarkerModel(markerModels, "peak"));
+ this._patchMarker(row.querySelector(".floor-marker"), this._getMarkerModel(markerModels, "floor"));
+ ((_g = (_f = row.querySelectorAll) == null ? void 0 : _f.call(row, ".generic-marker[data-marker-id]")) != null ? _g : []).forEach((markerEl) => {
+ var _a2, _b2, _c2, _d2, _e2;
+ const markerId = markerEl.dataset.markerId;
+ const marker = this._getMarkerModel(markerModels, markerId);
+ this._patchMarker(markerEl, marker);
+ const labelEl = [...(_b2 = (_a2 = row.querySelectorAll) == null ? void 0 : _a2.call(row, ".generic-value-label[data-marker-id]")) != null ? _b2 : []].find((label) => label.dataset.markerId === markerId);
+ if (!labelEl) return;
+ this._setDatasetIfChanged(labelEl, "showMarker", (marker == null ? void 0 : marker.showMarker) === false ? "false" : "true");
+ this._patchMarkerLabelAppearance(labelEl, marker);
+ if ((marker == null ? void 0 : marker.labelVisible) && marker.visible && ((_c2 = marker.label) == null ? void 0 : _c2.text)) {
+ this._setTextIfChanged(labelEl, (_e2 = (_d2 = marker.label) == null ? void 0 : _d2.text) != null ? _e2 : null);
+ this._setStyleIfChanged(labelEl, "visibility", "visible");
+ this._setStyleIfChanged(labelEl, "left", `${Number.isFinite(marker.position) ? marker.position : 0}%`);
+ } else {
+ this._setStyleIfChanged(labelEl, "visibility", "hidden");
}
- if (targetLabelEl) {
- this._setTextIfChanged(targetLabelEl, rowViewModel.targetDisplay);
+ });
+ const targetMarkerModel = this._getMarkerModel(markerModels, "target");
+ this._patchMarkerLabelAppearance(targetLabelEl, targetMarkerModel);
+ if (targetLabelEl) {
+ if ((targetMarkerModel == null ? void 0 : targetMarkerModel.labelVisible) && targetMarkerModel.visible && ((_h = targetMarkerModel.label) == null ? void 0 : _h.text)) {
+ this._setTextIfChanged(targetLabelEl, (_j = (_i = targetMarkerModel.label) == null ? void 0 : _i.text) != null ? _j : null);
+ } else {
+ this._setStyleIfChanged(targetLabelEl, "visibility", "hidden");
}
- } else {
- if (targetEl) this._setStyleIfChanged(targetEl, "display", "none");
- if (targetLabelEl) this._setStyleIfChanged(targetLabelEl, "visibility", "hidden");
}
+ const patchValueLabel = (labelEl, markerType) => {
+ var _a2, _b2, _c2;
+ if (!labelEl) return;
+ const marker = this._getMarkerModel(markerModels, markerType);
+ this._patchMarkerLabelAppearance(labelEl, marker);
+ if ((marker == null ? void 0 : marker.labelVisible) && marker.visible && ((_a2 = marker.label) == null ? void 0 : _a2.text)) {
+ this._setTextIfChanged(labelEl, (_c2 = (_b2 = marker.label) == null ? void 0 : _b2.text) != null ? _c2 : null);
+ this._setStyleIfChanged(labelEl, "visibility", "visible");
+ this._setStyleIfChanged(labelEl, "left", `${Number.isFinite(marker.position) ? marker.position : 0}%`);
+ } else {
+ this._setStyleIfChanged(labelEl, "visibility", "hidden");
+ }
+ };
+ patchValueLabel(peakLabelEl, "peak");
+ patchValueLabel(floorLabelEl, "floor");
}
- _update() {
+ _update(previousHass = null) {
+ var _a, _b, _c, _d;
if (!this._hass || !this._config) return;
const rowsEl = this.shadowRoot.querySelector(".rows");
if (!rowsEl) return;
const entities = this._config.entities;
- if (!this._rendered) {
+ const presence = entities.map((entityCfg) => !!this._hass.states[entityCfg.entity]);
+ const presenceChanged = presence.some((present, index) => present !== this._rowPresence[index]);
+ if (!this._rendered || presenceChanged) {
+ this._rowGeneration += 1;
+ this._rowPresence = presence;
let html = "";
for (let entityIndex = 0; entityIndex < entities.length; entityIndex++) {
const entityCfg = entities[entityIndex];
const stateObj = this._hass.states[entityCfg.entity];
if (!stateObj) {
- html += `
Entity not found: ${escapeHtml(entityCfg.entity)}
`;
+ html += `
Entity not found: ${escapeHtml(entityCfg.entity)}
`;
continue;
}
const ecfg = this._resolve(entityCfg);
- const rowViewModel = buildRowViewModel({
- hass: this._hass,
- cardConfig: this._config,
- entityConfig: ecfg,
- entityState: stateObj,
- peaks: this._peaks
- });
- const rawVal = rowViewModel.numericValue;
+ this._updateExtrema(entityCfg, ecfg, stateObj);
+ const rowViewModel = this._buildRowViewModel(entityCfg, ecfg, stateObj);
const safeMin = rowViewModel.min;
const safeMax = rowViewModel.max;
- const targetVal = rowViewModel.target;
const pct = rowViewModel.percent;
const color = this._getColor(pct, ecfg, safeMin, safeMax);
- const display = rowViewModel.displayValue;
- const displayUnit = rowViewModel.displayUnit;
+ const display = rowViewModel.primaryPresentation.number;
+ const displayUnit = rowViewModel.primaryPresentation.unit;
const targetPct = rowViewModel.targetPercent;
- const targetDisplay = rowViewModel.targetDisplay;
- let peakPct = null, peakDisplay = null;
- if (ecfg.peak_marker.show && Number.isFinite(rawVal)) {
- if (this._peaks[entityCfg.entity] === void 0 || rawVal > this._peaks[entityCfg.entity]) {
- this._peaks[entityCfg.entity] = rawVal;
- }
- const peakVal = this._peaks[entityCfg.entity];
- peakPct = this._toScalePct(peakVal, safeMin, safeMax);
- peakDisplay = this._formatNumericDisplay(peakVal, ecfg.formatting.decimal);
- }
- html += this._buildRow(entityCfg, display, displayUnit, pct, color, peakPct, peakDisplay, targetPct, targetDisplay, ecfg.peak_marker.color, ecfg.target_marker.color, safeMin, safeMax);
+ const targetDisplay = (_b = (_a = rowViewModel.targetPresentation) == null ? void 0 : _a.text) != null ? _b : null;
+ const peakPct = rowViewModel.peakPercent;
+ const peakDisplay = (_d = (_c = rowViewModel.peakPresentation) == null ? void 0 : _c.number) != null ? _d : null;
+ html += this._buildRow(entityCfg, display, displayUnit, pct, color, peakPct, peakDisplay, targetPct, targetDisplay, ecfg.peak_marker.color, ecfg.target_marker.color, safeMin, safeMax, entityIndex);
}
+ this._clearMarkerHover();
rowsEl.innerHTML = html;
this._rendered = true;
const builtRows = rowsEl.querySelectorAll(".row[data-entity]");
- builtRows.forEach((row, idx) => {
- const entityCfg = entities[idx];
+ builtRows.forEach((row) => {
+ const entityCfg = entities[Number(row.dataset.rowIndex)];
const stateObj = entityCfg ? this._hass.states[entityCfg.entity] : null;
if (entityCfg && stateObj) {
this._patchRow(row, entityCfg, stateObj);
@@ -3966,20 +5674,12 @@ ${paintLayers}
return;
}
const rows = rowsEl.querySelectorAll(".row[data-entity]");
- let rowIdx = 0;
- for (const entityCfg of entities) {
+ for (const row of rows) {
+ const entityCfg = entities[Number(row.dataset.rowIndex)];
+ if (!entityCfg) continue;
const stateObj = this._hass.states[entityCfg.entity];
- if (!stateObj) {
- rowIdx++;
- continue;
- }
- const row = rows[rowIdx];
- if (!row) {
- rowIdx++;
- continue;
- }
- this._patchRow(row, entityCfg, stateObj);
- rowIdx++;
+ if (!stateObj) continue;
+ this._patchRow(row, entityCfg, stateObj, previousHass);
}
this._runPostLayoutPasses(rows);
}
@@ -3991,6 +5691,8 @@ ${paintLayers}
var SensorBarCardPlusEditor;
var init_SensorBarCardPlusEditor = __esm({
"src/editor/SensorBarCardPlusEditor.js"() {
+ init_normalize();
+ init_resolve();
SensorBarCardPlusEditor = class extends HTMLElement {
constructor() {
super();
@@ -4006,6 +5708,9 @@ ${paintLayers}
this._expandedEntityOverrides = /* @__PURE__ */ new Set();
this._expandedOverrideGroups = /* @__PURE__ */ new Set();
this._expandedCardGroups = /* @__PURE__ */ new Set();
+ this._genericMarkerUiIds = /* @__PURE__ */ new Map();
+ this._expandedGenericMarkerUiIds = /* @__PURE__ */ new Set();
+ this._nextGenericMarkerUiId = 0;
this._gradientStopsDrafts = /* @__PURE__ */ new Map();
this._gradientStopsUiRows = /* @__PURE__ */ new Map();
this._gradientStopPosTexts = /* @__PURE__ */ new Map();
@@ -4035,7 +5740,16 @@ ${paintLayers}
this._config = nextConfig;
return;
}
+ if (nextConfigJson === this._lastEmittedConfigJson) {
+ this._config = nextConfig;
+ return;
+ }
+ if (this._getEmittedConfigJson(nextConfig) === this._getEmittedConfigJson(this._draftConfig)) {
+ this._config = nextConfig;
+ return;
+ }
const shouldRender = !((_a = this.shadowRoot) == null ? void 0 : _a.innerHTML) || nextConfigJson !== this._lastRenderedConfigJson;
+ this._lastEmittedConfigJson = null;
this._config = nextConfig;
this._draftConfig = this._cloneDeep(nextConfig);
this._gradientStopsDrafts = /* @__PURE__ */ new Map();
@@ -4047,6 +5761,8 @@ ${paintLayers}
this._segmentBoundaryTexts = /* @__PURE__ */ new Map();
this._targetAboveFillDrafts = /* @__PURE__ */ new Map();
this._baselineColorDrafts = /* @__PURE__ */ new Map();
+ this._genericMarkerUiIds.clear();
+ this._expandedGenericMarkerUiIds.clear();
if (shouldRender) {
this._render();
}
@@ -4091,6 +5807,9 @@ ${paintLayers}
};
return JSON.stringify(normalize(value != null ? value : null));
}
+ _getEmittedConfigJson(config) {
+ return this._serializeConfig(config);
+ }
_isObject(value) {
return !!value && typeof value === "object" && !Array.isArray(value);
}
@@ -4350,6 +6069,11 @@ ${paintLayers}
this._refreshEntityDerivedUi();
}
_refreshCardDerivedUi() {
+ this._setElementText("card-group-marker-target-summary", this._getCardTargetMarkerSummary());
+ this._setElementText("card-group-marker-peak-summary", this._getMarkerResetSummary("peak"));
+ this._setElementText("card-group-marker-floor-summary", this._getMarkerResetSummary("floor"));
+ this._setElementText("card-group-baseline-summary", this._getCardBaselineSummary());
+ this._setElementText("card-group-generic-markers-summary", this._getGenericMarkersSummary({ type: "card" }));
this._setElementText("card-group-segments-summary", this._getSegmentsSummary({ type: "card" }));
this._setElementText("card-group-gradient-stops-summary", this._getGradientStopsSummary({ type: "card" }));
this._setElementChecked("target-above-fill-enabled", this._isTargetAboveFillEnabled({ type: "card" }));
@@ -4366,6 +6090,8 @@ ${paintLayers}
this._setElementChecked(`entity-${index}-baseline-inherit`, !this._hasBaselineOverride(scope));
this._setElementChecked(`entity-${index}-needle-inherit`, !this._hasNeedleOverride(scope));
this._setElementChecked(`entity-${index}-peak-inherit`, !this._hasPeakOverride(scope));
+ this._setElementChecked(`entity-${index}-floor-inherit`, !this._hasExtremumOverride(scope, "floor"));
+ this._setElementChecked(`entity-${index}-markers-inherit`, !this._hasMarkersOverride(scope));
this._setElementChecked(`entity-${index}-bar-inherit`, !this._hasEntityBarAppearanceOverride(scope));
this._setElementChecked(`entity-${index}-segments-inherit`, !this._hasSegmentsOverride(scope));
this._setElementChecked(`entity-${index}-gradient-stops-inherit`, !this._hasGradientStopsOverride(scope));
@@ -4379,6 +6105,8 @@ ${paintLayers}
this._setElementText(`entity-${index}-group-baseline-summary`, this._getBaselineOverrideSummary(scope));
this._setElementText(`entity-${index}-group-needle-summary`, this._getNeedleSummary(scope));
this._setElementText(`entity-${index}-group-peak-summary`, this._getPeakSummary(scope));
+ this._setElementText(`entity-${index}-group-floor-summary`, this._getFloorSummary(scope));
+ this._setElementText(`entity-${index}-group-markers-summary`, this._getGenericMarkersSummary(scope));
this._setElementText(`entity-${index}-group-bar-summary`, this._getBarAppearanceSummary(scope));
this._setElementText(`entity-${index}-group-segments-summary`, this._getSegmentsSummary(scope));
this._setElementText(`entity-${index}-group-gradient-stops-summary`, this._getGradientStopsSummary(scope));
@@ -4502,23 +6230,11 @@ ${paintLayers}
return nextTarget;
}
_cleanupResolvableValueForEmit(value) {
- const nextValue = {};
- if (this._isObject(value)) {
- const fixed = this._normalizeNumberValue(value.fixed);
- const entity = this._normalizeTextValue(value.entity).trim();
- if (fixed !== null) {
- nextValue.fixed = fixed;
- }
- if (entity) {
- nextValue.entity = entity;
- }
- } else {
- const fixed = this._normalizeNumberValue(value);
- if (fixed !== null) {
- nextValue.fixed = fixed;
- }
+ if (this._isObject(value) || value === null || typeof value === "string" && this._normalizeNumberValue(value) === null) {
+ return this._cloneDeep(value);
}
- return Object.keys(nextValue).length ? nextValue : null;
+ const fixed = this._normalizeNumberValue(value);
+ return fixed === null ? null : { fixed };
}
_cleanupScaleForEmit(target) {
if (!this._isObject(target) || !this._isObject(target.scale)) {
@@ -4531,7 +6247,7 @@ ${paintLayers}
return;
}
const cleanedValue = this._cleanupResolvableValueForEmit(nextScale[key]);
- if (cleanedValue) {
+ if (cleanedValue || nextScale[key] === null) {
nextScale[key] = cleanedValue;
delete nextTarget[key];
delete nextTarget[`${key}_entity`];
@@ -4629,8 +6345,8 @@ ${paintLayers}
}
return nextTarget;
}
- _cleanupTargetForEmit(target) {
- var _a, _b;
+ _cleanupTargetForEmit(target, scope = { type: "card" }) {
+ var _a;
if (!this._isObject(target) || !this._isObject(target.target)) {
return target;
}
@@ -4638,12 +6354,15 @@ ${paintLayers}
const nextMarker = this._cloneDeep(nextTarget.target);
const cleanedAt = this._cleanupResolvableValueForEmit(nextMarker.at);
const color = this._normalizeTextValue(nextMarker.color).trim();
- const labelShow = ((_a = nextMarker.label) == null ? void 0 : _a.show) === true;
- const fillColor = this._normalizeTextValue((_b = nextMarker.when_exceeded) == null ? void 0 : _b.fill_color).trim();
+ const label = this._cleanBuiltinMarkerLabelForEmit(nextMarker.label, scope, "target");
+ const fillColor = this._normalizeTextValue((_a = nextMarker.when_exceeded) == null ? void 0 : _a.fill_color).trim();
+ const hasShape = Object.prototype.hasOwnProperty.call(nextMarker, "shape");
+ const shape = hasShape ? normalizeTargetMarkerShape(nextMarker.shape) : null;
+ const direction = Object.prototype.hasOwnProperty.call(nextMarker, "direction") ? normalizeMarkerDirection(nextMarker.direction) : null;
if (typeof nextMarker.enabled !== "boolean") {
delete nextMarker.enabled;
}
- if (cleanedAt) {
+ if (cleanedAt || nextMarker.at === null) {
nextMarker.at = cleanedAt;
delete nextTarget.target_entity;
} else {
@@ -4655,11 +6374,12 @@ ${paintLayers}
} else {
delete nextMarker.color;
}
- if (labelShow) {
- nextMarker.label = { ...this._isObject(nextMarker.label) ? nextMarker.label : {}, show: true };
- delete nextTarget.show_target_label;
+ if (Object.keys(label).length) {
+ nextMarker.label = label;
+ if (label.show === true) delete nextTarget.show_target_label;
} else {
delete nextMarker.label;
+ delete nextTarget.show_target_label;
}
if (fillColor) {
nextMarker.when_exceeded = {
@@ -4670,6 +6390,18 @@ ${paintLayers}
} else {
delete nextMarker.when_exceeded;
}
+ if ((scope == null ? void 0 : scope.type) === "card" && shape === "diamond") {
+ delete nextMarker.shape;
+ } else if (shape) {
+ nextMarker.shape = shape;
+ } else {
+ delete nextMarker.shape;
+ }
+ if (direction === "inward" && ((scope == null ? void 0 : scope.type) !== "entity" || direction === this._getEffectiveMarkerDirection({ type: "card" }, "target"))) {
+ delete nextMarker.direction;
+ } else if (direction) {
+ nextMarker.direction = direction;
+ }
if (Object.keys(nextMarker).length) {
nextTarget.target = nextMarker;
} else {
@@ -4687,7 +6419,7 @@ ${paintLayers}
if (typeof nextBaseline.enabled !== "boolean") {
delete nextBaseline.enabled;
}
- if (cleanedAt) {
+ if (cleanedAt || nextBaseline.at === null) {
nextBaseline.at = cleanedAt;
} else {
delete nextBaseline.at;
@@ -4711,22 +6443,33 @@ ${paintLayers}
}
return nextTarget;
}
- _cleanupPeakForEmit(target) {
+ _cleanupPeakForEmit(target, scope = { type: "card" }) {
if (!this._isObject(target) || !this._isObject(target.peak)) {
return target;
}
const nextTarget = this._cloneDeep(target);
const nextPeak = this._cloneDeep(nextTarget.peak);
const color = this._normalizeTextValue(nextPeak.color).trim();
+ const direction = Object.prototype.hasOwnProperty.call(nextPeak, "direction") ? normalizeMarkerDirection(nextPeak.direction) : null;
if (typeof nextPeak.enabled !== "boolean") {
delete nextPeak.enabled;
}
+ if ((scope == null ? void 0 : scope.type) !== "entity" && nextPeak.reset === "never") {
+ delete nextPeak.reset;
+ }
+ if (direction === "inward" && ((scope == null ? void 0 : scope.type) !== "entity" || direction === this._getEffectiveMarkerDirection({ type: "card" }, "peak"))) {
+ delete nextPeak.direction;
+ } else if (direction) {
+ nextPeak.direction = direction;
+ }
if (color && this._normalizeColorComparisonValue(color) !== this._normalizeColorComparisonValue("#888")) {
nextPeak.color = color;
delete nextTarget.peak_color;
} else {
delete nextPeak.color;
}
+ nextPeak.label = this._cleanBuiltinMarkerLabelForEmit(nextPeak.label, scope, "peak");
+ if (!Object.keys(nextPeak.label).length) delete nextPeak.label;
if (Object.keys(nextPeak).length) {
nextTarget.peak = nextPeak;
} else {
@@ -4734,18 +6477,92 @@ ${paintLayers}
}
return nextTarget;
}
- _cleanupBarForEmit(target) {
+ _cleanupFloorForEmit(target, scope = { type: "card" }) {
+ if (!this._isObject(target) || !this._isObject(target.floor)) {
+ return target;
+ }
+ const nextTarget = this._cloneDeep(target);
+ const nextFloor = this._cloneDeep(nextTarget.floor);
+ const color = this._normalizeTextValue(nextFloor.color).trim();
+ const direction = Object.prototype.hasOwnProperty.call(nextFloor, "direction") ? normalizeMarkerDirection(nextFloor.direction) : null;
+ if (typeof nextFloor.enabled !== "boolean") delete nextFloor.enabled;
+ if (color && this._normalizeColorComparisonValue(color) !== this._normalizeColorComparisonValue("#888888")) {
+ nextFloor.color = color;
+ } else {
+ delete nextFloor.color;
+ }
+ if (this._isObject(nextFloor.label)) {
+ nextFloor.label = this._cleanBuiltinMarkerLabelForEmit(nextFloor.label, scope, "floor");
+ if (!Object.keys(nextFloor.label).length) delete nextFloor.label;
+ }
+ if ((scope == null ? void 0 : scope.type) !== "entity" && nextFloor.reset === "never" || nextFloor.reset === void 0 || nextFloor.reset === null || nextFloor.reset === "") {
+ delete nextFloor.reset;
+ }
+ if (direction === "inward" && ((scope == null ? void 0 : scope.type) !== "entity" || direction === this._getEffectiveMarkerDirection({ type: "card" }, "floor"))) {
+ delete nextFloor.direction;
+ } else if (direction) {
+ nextFloor.direction = direction;
+ }
+ if (Object.keys(nextFloor).length) nextTarget.floor = nextFloor;
+ else delete nextTarget.floor;
+ return nextTarget;
+ }
+ _cleanBuiltinMarkerLabelForEmit(rawLabel, scope, key) {
+ var _a, _b, _c;
+ const label = this._isObject(rawLabel) ? this._cloneDeep(rawLabel) : {};
+ const cardLabel = (scope == null ? void 0 : scope.type) === "entity" ? (_a = this._getScopedValue({ type: "card" }, [key, "label"])) != null ? _a : {} : {};
+ if (label.show === false && (scope == null ? void 0 : scope.type) !== "entity") delete label.show;
+ if (label.show === false && (scope == null ? void 0 : scope.type) === "entity" && cardLabel.show !== true) delete label.show;
+ if (label.show_value === true && ((scope == null ? void 0 : scope.type) !== "entity" || cardLabel.show_value !== false)) delete label.show_value;
+ if (label.show_unit === true && ((scope == null ? void 0 : scope.type) !== "entity" || cardLabel.show_unit !== false)) delete label.show_unit;
+ if (typeof label.text === "string") {
+ label.text = label.text.replace(/\s+/g, " ").trim();
+ if (!label.text && (scope == null ? void 0 : scope.type) !== "entity") delete label.text;
+ }
+ const precision = this._normalizeDecimalValue((_b = label.precision) != null ? _b : label.decimal);
+ delete label.decimal;
+ if (precision === null) delete label.precision;
+ else if ((scope == null ? void 0 : scope.type) === "entity" && precision === ((_c = cardLabel.precision) != null ? _c : cardLabel.decimal)) delete label.precision;
+ else label.precision = precision;
+ return label;
+ }
+ _cleanupBarForEmit(target, scope = { type: "card" }, cardConfig = null, inheritedSegmentSpace = null) {
if (!this._isObject(target) || !this._isObject(target.bar)) {
return target;
}
const nextTarget = this._cloneDeep(target);
const nextBar = this._cloneDeep(nextTarget.bar);
+ const scopedSegmentSpace = ["percent", "scale"].includes(nextBar.segment_space) ? nextBar.segment_space : (scope == null ? void 0 : scope.type) === "entity" && ["percent", "scale"].includes(inheritedSegmentSpace) ? inheritedSegmentSpace : null;
+ const legacySegmentSpace = scopedSegmentSpace;
+ if (legacySegmentSpace === "percent" && Array.isArray(nextBar.segments)) {
+ const asLegacyPercent = (boundary) => {
+ if (typeof boundary === "number" && Number.isFinite(boundary)) return `${boundary}%`;
+ if (typeof boundary === "string" && boundary.trim() !== "" && !boundary.includes("%") && Number.isFinite(Number(boundary.trim()))) {
+ return `${Number(boundary.trim())}%`;
+ }
+ return boundary;
+ };
+ nextBar.segments = nextBar.segments.map((segment) => ({
+ ...segment,
+ from: asLegacyPercent(segment == null ? void 0 : segment.from),
+ ...Object.prototype.hasOwnProperty.call(segment != null ? segment : {}, "to") ? { to: asLegacyPercent(segment.to) } : {}
+ }));
+ }
+ delete nextBar.segment_space;
const fillStyle = this._normalizeTextValue(nextBar.fill_style).trim();
const color = this._normalizeTextValue(nextBar.color).trim();
const segments = Array.isArray(nextBar.segments) ? nextBar.segments : null;
const gradientStops = Array.isArray(nextBar.gradient_stops) ? nextBar.gradient_stops : null;
- if (fillStyle && fillStyle !== "bands") {
- nextBar.fill_style = fillStyle;
+ if (fillStyle) {
+ const withoutLocalFillStyle = this._cloneDeep(nextTarget);
+ delete withoutLocalFillStyle.bar.fill_style;
+ const inheritedStyle = normalizeBarConfig(
+ withoutLocalFillStyle,
+ (scope == null ? void 0 : scope.type) === "entity" ? cardConfig : null,
+ { isCardScope: (scope == null ? void 0 : scope.type) !== "entity" }
+ ).fill_style;
+ if (fillStyle === "bands" && inheritedStyle === "bands") delete nextBar.fill_style;
+ else nextBar.fill_style = fillStyle;
delete nextTarget.color_mode;
} else {
delete nextBar.fill_style;
@@ -4761,14 +6578,14 @@ ${paintLayers}
} else {
delete nextBar.solid_fill;
}
- if (segments && segments.length && !this._segmentsEqualForEditor(segments, this._getDefaultSegments())) {
+ if (segments && (!segments.length || legacySegmentSpace || !this._segmentsEqualForEditor(segments, this._getDefaultSegments()))) {
nextBar.segments = segments;
delete nextTarget.segments;
delete nextTarget.severity;
} else {
delete nextBar.segments;
}
- if (gradientStops && gradientStops.length >= 2 && !this._isDefaultGradientStops(gradientStops)) {
+ if (gradientStops && (!gradientStops.length || gradientStops.length >= 2 && !this._isDefaultGradientStops(gradientStops))) {
nextBar.gradient_stops = this._sanitizeGradientStopsForEmit(gradientStops);
delete nextTarget.gradient_stops;
} else {
@@ -4785,9 +6602,9 @@ ${paintLayers}
const pathKey = path.join(".");
switch (pathKey) {
case "":
- return ["type", "title", "entities", "scale", "target", "baseline", "peak", "layout", "formatting", "bar"];
+ return ["type", "title", "entities", "scale", "target", "baseline", "peak", "floor", "layout", "formatting", "bar"];
case "entities.*":
- return ["entity", "name", "icon", "scale", "target", "baseline", "peak", "layout", "formatting", "bar"];
+ return ["entity", "name", "icon", "scale", "target", "baseline", "peak", "floor", "layout", "formatting", "bar"];
case "scale":
return ["min", "max"];
case "scale.min":
@@ -4796,9 +6613,9 @@ ${paintLayers}
case "baseline.at":
return ["fixed", "entity"];
case "target":
- return ["enabled", "at", "color", "label", "when_exceeded"];
+ return ["enabled", "at", "shape", "color", "label", "when_exceeded"];
case "target.label":
- return ["show"];
+ return ["show", "decimal"];
case "target.when_exceeded":
return ["fill_color"];
case "baseline":
@@ -4807,7 +6624,12 @@ ${paintLayers}
case "baseline.below":
return ["color"];
case "peak":
- return ["enabled", "color"];
+ return ["enabled", "color", "reset", "label"];
+ case "floor":
+ return ["enabled", "color", "reset", "label"];
+ case "peak.label":
+ case "floor.label":
+ return ["show", "decimal"];
case "layout":
return ["height", "label", "hero"];
case "layout.label":
@@ -4852,35 +6674,70 @@ ${paintLayers}
return orderedValue;
}
_cleanupEditorEmittedConfig(config) {
+ var _a;
if (!this._isObject(config)) {
return config;
}
+ const inheritedSegmentSpace = (_a = config.bar) == null ? void 0 : _a.segment_space;
let nextConfig = this._cleanupEntityIdentityForEmit(config);
nextConfig = this._cleanupScaleForEmit(nextConfig);
- nextConfig = this._cleanupTargetForEmit(nextConfig);
+ nextConfig = this._cleanupTargetForEmit(nextConfig, { type: "card" });
nextConfig = this._cleanupBaselineForEmit(nextConfig);
- nextConfig = this._cleanupPeakForEmit(nextConfig);
+ nextConfig = this._cleanupPeakForEmit(nextConfig, { type: "card" });
+ nextConfig = this._cleanupFloorForEmit(nextConfig, { type: "card" });
+ nextConfig = this._cleanupGenericMarkersForEmit(nextConfig);
nextConfig = this._cleanupLayoutForEmit(nextConfig);
nextConfig = this._cleanupFormattingForEmit(nextConfig);
nextConfig = this._cleanupNeedleForEmit(nextConfig, { type: "card" });
- nextConfig = this._cleanupBarForEmit(nextConfig);
+ nextConfig = this._cleanupBarForEmit(nextConfig, { type: "card" });
if (Array.isArray(nextConfig.entities)) {
- nextConfig.entities = nextConfig.entities.map((entry) => {
+ nextConfig.entities = nextConfig.entities.map((entry, index) => {
if (!this._isObject(entry)) {
return entry;
}
let cleanedEntry = this._cleanupEntityIdentityForEmit(entry);
cleanedEntry = this._cleanupScaleForEmit(cleanedEntry);
- cleanedEntry = this._cleanupTargetForEmit(cleanedEntry);
+ cleanedEntry = this._cleanupTargetForEmit(cleanedEntry, { type: "entity", index });
cleanedEntry = this._cleanupBaselineForEmit(cleanedEntry);
- cleanedEntry = this._cleanupPeakForEmit(cleanedEntry);
+ cleanedEntry = this._cleanupPeakForEmit(cleanedEntry, { type: "entity", index });
+ cleanedEntry = this._cleanupFloorForEmit(cleanedEntry, { type: "entity", index });
+ cleanedEntry = this._cleanupGenericMarkersForEmit(cleanedEntry);
cleanedEntry = this._cleanupLayoutForEmit(cleanedEntry);
cleanedEntry = this._cleanupFormattingForEmit(cleanedEntry);
cleanedEntry = this._cleanupNeedleForEmit(cleanedEntry, { type: "entity" });
- cleanedEntry = this._cleanupBarForEmit(cleanedEntry);
+ cleanedEntry = this._cleanupBarForEmit(cleanedEntry, { type: "entity", index }, nextConfig, inheritedSegmentSpace);
return cleanedEntry;
});
}
+ const meaning = (raw) => {
+ const normalized = normalizeCardConfig({ ...raw, ...!raw.entities && !raw.entity ? { entities: [] } : {} });
+ const featureKeys = ["layout", "scale", "bar", "baseline", "formatting", "target_marker", "peak_marker", "floor_marker", "generic_markers"];
+ const scope = (value) => ({
+ ...Object.fromEntries(featureKeys.map((key) => [key, value[key]])),
+ scale: Object.fromEntries(["min", "max"].map((key) => [key, {
+ ...value.scale[key],
+ fixed_explicit: value.scale[key].fixed_explicit !== false
+ }]))
+ });
+ const canonical = (value, key = "") => {
+ if (Array.isArray(value)) return value.map((entry) => canonical(entry));
+ if (this._isObject(value)) return Object.fromEntries(Object.entries(value).filter(([name]) => !["severity", "segment_space", "label_precision_key"].includes(name) && !/invalid/i.test(name)).map(([name, entry]) => [name, canonical(entry, name)]));
+ if (key === "fixed") return getNumericValue(null, value);
+ if (/color/i.test(key) && typeof value === "string") return this._normalizeColorComparisonValue(value);
+ return value;
+ };
+ return this._serializeConfig(canonical({ card: scope(normalized), entities: normalized.entities.map((row) => ({
+ entity: row.entity,
+ name: row.name,
+ icon: row.icon,
+ ...scope(row)
+ })) }));
+ };
+ try {
+ if (meaning(config) !== meaning(nextConfig)) nextConfig = this._cloneDeep(config);
+ } catch (_error) {
+ nextConfig = this._cloneDeep(config);
+ }
return this._orderEditorConfigKeys(nextConfig);
}
_getScopedPath(scope, keyPath) {
@@ -5100,18 +6957,26 @@ ${paintLayers}
return this._setCanonicalScopedValue(scope, canonicalPath, normalizedValue, options);
}
_getResolvablePartsFromTarget(target, field, options = {}) {
- var _a, _b, _c, _d;
+ var _a, _b, _c, _d, _e, _f;
const canonicalBasePath = (_a = options.canonicalBasePath) != null ? _a : ["scale", field];
const legacyFixedPath = (_b = options.legacyFixedPath) != null ? _b : [field];
const legacyEntityPath = (_c = options.legacyEntityPath) != null ? _c : [`${field}_entity`];
const structuredValue = this._getPathValue(target, canonicalBasePath);
const legacyFixedValue = this._getPathValue(target, legacyFixedPath);
const legacyEntityValue = this._getPathValue(target, legacyEntityPath);
- const structuredFixedValue = this._isObject(structuredValue) ? structuredValue == null ? void 0 : structuredValue.fixed : structuredValue;
- const structuredEntityValue = this._isObject(structuredValue) ? structuredValue == null ? void 0 : structuredValue.entity : void 0;
+ if (structuredValue !== void 0) {
+ const source = normalizeStructuredResolvableValue(structuredValue, (_d = options.inheritedSource) != null ? _d : null, null, {
+ allowPercent: ["target", "baseline"].includes(canonicalBasePath[0])
+ });
+ return {
+ fixed: (_e = source.fixed) != null ? _e : "",
+ entity: (_f = source.entity) != null ? _f : "",
+ ...Number.isFinite(source.percent) ? { percent: source.percent } : {}
+ };
+ }
return {
- fixed: structuredFixedValue != null ? structuredFixedValue : !this._isObject(legacyFixedValue) && legacyFixedValue !== void 0 ? legacyFixedValue : "",
- entity: (_d = structuredEntityValue != null ? structuredEntityValue : legacyEntityValue) != null ? _d : ""
+ fixed: !this._isObject(legacyFixedValue) && legacyFixedValue !== void 0 ? legacyFixedValue : "",
+ entity: legacyEntityValue != null ? legacyEntityValue : ""
};
}
_getResolvableScopedValue(scope, field, options = {}) {
@@ -5119,11 +6984,19 @@ ${paintLayers}
return this._getResolvablePartsFromTarget(target != null ? target : {}, field, options);
}
_getEffectiveResolvableScopedValue(scope, field, options = {}) {
+ var _a, _b;
const localValue = this._getResolvableScopedValue(scope, field, options);
if ((scope == null ? void 0 : scope.type) !== "entity") {
return localValue;
}
const inheritedValue = this._getResolvableScopedValue({ type: "card" }, field, options);
+ const target = this._getEntityRawEntries()[scope.index];
+ if (this._getPathValue(target, (_a = options.canonicalBasePath) != null ? _a : ["scale", field]) !== void 0) {
+ return this._getResolvablePartsFromTarget(target, field, {
+ ...options,
+ inheritedSource: { fixed: inheritedValue.fixed === "" ? null : inheritedValue.fixed, entity: inheritedValue.entity || null, percent: (_b = inheritedValue.percent) != null ? _b : null }
+ });
+ }
return {
fixed: this._hasExplicitOverrideValue(localValue.fixed) ? localValue.fixed : inheritedValue.fixed,
entity: this._hasExplicitOverrideValue(localValue.entity) ? localValue.entity : inheritedValue.entity
@@ -5163,10 +7036,12 @@ ${paintLayers}
nextTarget = this._deletePathValue(nextTarget, canonicalBasePath);
const hasFixed = nextParts.fixed !== void 0 && nextParts.fixed !== null && nextParts.fixed !== "";
const hasEntity = nextParts.entity !== void 0 && nextParts.entity !== null && nextParts.entity !== "";
- if (hasFixed || hasEntity) {
+ const hasPercent = Number.isFinite(nextParts.percent);
+ if (hasFixed || hasEntity || hasPercent) {
const nextValue = {};
if (hasFixed) nextValue.fixed = nextParts.fixed;
if (hasEntity) nextValue.entity = nextParts.entity;
+ if (hasPercent) nextValue.percent = nextParts.percent;
nextTarget = this._setPathValue(nextTarget, canonicalBasePath, nextValue);
}
prunePaths.forEach((path) => {
@@ -5469,7 +7344,8 @@ ${paintLayers}
];
}
_normalizeGradientStopPosValue(rawValue) {
- const numericValue = this._normalizeNumberValue(rawValue);
+ const percent = parsePercentLiteral(rawValue);
+ const numericValue = Number.isFinite(percent) ? percent : this._normalizeNumberValue(rawValue);
if (numericValue === null || !Number.isFinite(numericValue)) {
return null;
}
@@ -5804,11 +7680,11 @@ ${paintLayers}
_hasPeakOverride(scope) {
var _a, _b;
const peakValue = (_a = this._getScopedValue(scope, ["peak"])) != null ? _a : {};
- if (this._isObject(peakValue) && (Object.prototype.hasOwnProperty.call(peakValue, "enabled") || Object.prototype.hasOwnProperty.call(peakValue, "color"))) {
+ if (this._isObject(peakValue) && (Object.prototype.hasOwnProperty.call(peakValue, "enabled") || Object.prototype.hasOwnProperty.call(peakValue, "color") || Object.prototype.hasOwnProperty.call(peakValue, "reset") || Object.prototype.hasOwnProperty.call(peakValue, "label") || Object.prototype.hasOwnProperty.call(peakValue, "direction"))) {
return true;
}
const peakMarkerValue = (_b = this._getScopedValue(scope, ["peak_marker"])) != null ? _b : {};
- if (this._isObject(peakMarkerValue) && (Object.prototype.hasOwnProperty.call(peakMarkerValue, "show") || Object.prototype.hasOwnProperty.call(peakMarkerValue, "color"))) {
+ if (this._isObject(peakMarkerValue) && (Object.prototype.hasOwnProperty.call(peakMarkerValue, "show") || Object.prototype.hasOwnProperty.call(peakMarkerValue, "color") || Object.prototype.hasOwnProperty.call(peakMarkerValue, "direction"))) {
return true;
}
return this._getScopedValue(scope, ["show_peak"]) !== void 0 || this._getScopedValue(scope, ["peak_color"]) !== void 0;
@@ -5825,6 +7701,9 @@ ${paintLayers}
return this._applyScopedMutation(scope, (target) => {
let nextTarget = this._deletePathValue(target, ["peak", "enabled"]);
nextTarget = this._deletePathValue(nextTarget, ["peak", "color"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak", "reset"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak", "label"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak", "direction"]);
nextTarget = this._deletePathValue(nextTarget, ["show_peak"]);
nextTarget = this._deletePathValue(nextTarget, ["peak_color"]);
nextTarget = this._deletePathValue(nextTarget, ["peak_marker"]);
@@ -5891,6 +7770,295 @@ ${paintLayers}
return nextTarget;
});
}
+ _getScopedMarkerExtras(scope, key) {
+ var _a, _b, _c, _d;
+ const raw = this._getScopedValue(scope, [key]);
+ const marker = this._isObject(raw) ? raw : {};
+ const label = this._isObject(marker.label) ? marker.label : {};
+ return {
+ reset: Object.prototype.hasOwnProperty.call(marker, "reset") ? this._normalizeTextValue(marker.reset).trim().toLowerCase() : null,
+ labelShow: typeof label.show === "boolean" ? label.show : null,
+ labelText: typeof label.text === "string" ? label.text.replace(/\s+/g, " ").trim() : null,
+ labelShowValue: typeof label.show_value === "boolean" ? label.show_value : null,
+ labelShowUnit: typeof label.show_unit === "boolean" ? label.show_unit : null,
+ labelPrecision: ((_a = label.precision) != null ? _a : label.decimal) === void 0 || ((_b = label.precision) != null ? _b : label.decimal) === null || ((_c = label.precision) != null ? _c : label.decimal) === "" ? null : this._normalizeNumberValue((_d = label.precision) != null ? _d : label.decimal)
+ };
+ }
+ _hasExtremumOverride(scope, key) {
+ const marker = this._getScopedValue(scope, [key]);
+ if (!this._isObject(marker)) return false;
+ return ["enabled", "color", "reset", "label", "direction"].some((field) => Object.prototype.hasOwnProperty.call(marker, field));
+ }
+ _getEffectiveMarkerExtras(scope, key) {
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+ const local = this._getScopedMarkerExtras(scope, key);
+ if ((scope == null ? void 0 : scope.type) !== "entity") {
+ return {
+ reset: (_a = local.reset) != null ? _a : "never",
+ labelShow: (_b = local.labelShow) != null ? _b : false,
+ labelText: local.labelText,
+ labelShowValue: (_c = local.labelShowValue) != null ? _c : true,
+ labelShowUnit: (_d = local.labelShowUnit) != null ? _d : true,
+ labelPrecision: local.labelPrecision
+ };
+ }
+ const card = this._getScopedMarkerExtras({ type: "card" }, key);
+ if (!this._hasExtremumOverride(scope, key)) {
+ return {
+ reset: (_e = card.reset) != null ? _e : "never",
+ labelShow: (_f = card.labelShow) != null ? _f : false,
+ labelText: card.labelText,
+ labelShowValue: (_g = card.labelShowValue) != null ? _g : true,
+ labelShowUnit: (_h = card.labelShowUnit) != null ? _h : true,
+ labelPrecision: card.labelPrecision
+ };
+ }
+ return {
+ reset: (_j = (_i = local.reset) != null ? _i : card.reset) != null ? _j : "never",
+ labelShow: (_l = (_k = local.labelShow) != null ? _k : card.labelShow) != null ? _l : false,
+ labelText: Object.prototype.hasOwnProperty.call((_m = this._getScopedValue(scope, [key, "label"])) != null ? _m : {}, "text") ? local.labelText : card.labelText,
+ labelShowValue: (_o = (_n = local.labelShowValue) != null ? _n : card.labelShowValue) != null ? _o : true,
+ labelShowUnit: (_q = (_p = local.labelShowUnit) != null ? _p : card.labelShowUnit) != null ? _q : true,
+ labelPrecision: (_r = local.labelPrecision) != null ? _r : card.labelPrecision
+ };
+ }
+ _getScopedFloorConfig(scope) {
+ const raw = this._getScopedValue(scope, ["floor"]);
+ const marker = this._isObject(raw) ? raw : {};
+ let mode = (scope == null ? void 0 : scope.type) === "entity" ? "inherit" : "disabled";
+ if (marker.enabled === true) mode = "enabled";
+ if (marker.enabled === false) mode = "disabled";
+ const color = marker.color && this._normalizeColorComparisonValue(marker.color) !== this._normalizeColorComparisonValue("#888888") ? marker.color : "";
+ return { mode, color };
+ }
+ _getEffectiveScopedFloorConfig(scope) {
+ const local = this._getScopedFloorConfig(scope);
+ const extras = this._getEffectiveMarkerExtras(scope, "floor");
+ if ((scope == null ? void 0 : scope.type) !== "entity") return { ...local, ...extras };
+ if (!this._hasExtremumOverride(scope, "floor")) {
+ return { ...this._getScopedFloorConfig({ type: "card" }), ...extras };
+ }
+ const card = this._getEffectiveScopedFloorConfig({ type: "card" });
+ return {
+ mode: local.mode === "inherit" ? card.mode : local.mode,
+ color: local.color || card.color,
+ ...extras
+ };
+ }
+ _getFloorSummary(scope) {
+ if ((scope == null ? void 0 : scope.type) === "entity" && !this._hasExtremumOverride(scope, "floor")) return "Inherited";
+ const floor = this._getEffectiveScopedFloorConfig(scope);
+ if (floor.mode === "enabled") return floor.color ? "Enabled \u2022 Custom color" : "Enabled";
+ if (floor.color) return "Disabled \u2022 Custom color";
+ return "Disabled";
+ }
+ _getMarkerResetSummary(key) {
+ var _a;
+ const scope = { type: "card" };
+ const marker = key === "peak" ? this._getScopedPeakConfig(scope) : this._getEffectiveScopedFloorConfig(scope);
+ const enabled = marker.mode === "enabled";
+ const reset = (_a = this._getEffectiveMarkerExtras(scope, key).reset) != null ? _a : "never";
+ return `${enabled ? "Enabled" : "Disabled"} \xB7 ${reset === "never" ? "no reset" : `${reset} reset`}`;
+ }
+ _getCardTargetMarkerSummary() {
+ const mode = this._getTargetMode({ type: "card" });
+ if (mode === "disabled") return "Disabled";
+ const target = this._getTargetResolvableValue({ type: "card" });
+ const parts = [];
+ if (mode === "enabled") parts.push("Enabled");
+ const hasTargetValue = target.fixed !== "" && target.fixed !== void 0 || !!target.entity;
+ if (target.fixed !== "" && target.fixed !== void 0) parts.push(String(target.fixed));
+ if (target.entity) parts.push(target.entity);
+ if (hasTargetValue || this._hasTargetShape({ type: "card" })) {
+ parts.push(this._getEffectiveTargetShapeValue({ type: "card" }) === "triangle" ? "Triangle" : "Diamond");
+ }
+ return parts.length ? parts.join(" \xB7 ") : "Automatic";
+ }
+ _setScopedExtremumEnabled(scope, key, value) {
+ const boolValue = !!value;
+ const defaultColor = "#888888";
+ return this._applyScopedMutation(scope, (target) => {
+ var _a;
+ let nextTarget = this._cloneDeep(target);
+ const current = this._isObject(this._getPathValue(nextTarget, [key])) ? this._cloneDeep(this._getPathValue(nextTarget, [key])) : {};
+ const currentColor = (_a = current.color) != null ? _a : defaultColor;
+ if ((scope == null ? void 0 : scope.type) === "entity" || boolValue) current.enabled = boolValue;
+ else delete current.enabled;
+ if (currentColor && this._normalizeColorComparisonValue(currentColor) !== this._normalizeColorComparisonValue(defaultColor)) {
+ current.color = currentColor;
+ } else delete current.color;
+ if (Object.keys(current).length) nextTarget = this._setPathValue(nextTarget, [key], current);
+ else nextTarget = this._deletePathValue(nextTarget, [key]);
+ return nextTarget;
+ });
+ }
+ _setScopedExtremumColor(scope, key, rawValue) {
+ const normalizedValue = this._normalizeTextValue(rawValue).trim();
+ const defaultColor = "#888888";
+ return this._applyScopedMutation(scope, (target) => {
+ let nextTarget = this._cloneDeep(target);
+ const current = this._isObject(this._getPathValue(nextTarget, [key])) ? this._cloneDeep(this._getPathValue(nextTarget, [key])) : {};
+ delete current.color;
+ if (normalizedValue && this._normalizeColorComparisonValue(normalizedValue) !== this._normalizeColorComparisonValue(defaultColor)) {
+ current.color = normalizedValue;
+ }
+ const mode = this._getScopedFloorConfig(scope).mode;
+ if (key === "floor" && ((scope == null ? void 0 : scope.type) === "entity" && mode !== "inherit" || (scope == null ? void 0 : scope.type) !== "entity" && mode === "enabled")) {
+ current.enabled = mode === "enabled";
+ }
+ if (Object.keys(current).length) nextTarget = this._setPathValue(nextTarget, [key], current);
+ else nextTarget = this._deletePathValue(nextTarget, [key]);
+ if (key === "peak") {
+ nextTarget = this._deletePathValue(nextTarget, ["show_peak"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak_color"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak_marker"]);
+ }
+ return nextTarget;
+ });
+ }
+ _setScopedExtremumReset(scope, key, value) {
+ const normalized = this._normalizeTextValue(value).trim().toLowerCase();
+ return this._applyScopedMutation(scope, (target) => {
+ let nextTarget = this._cloneDeep(target);
+ const current = this._isObject(this._getPathValue(nextTarget, [key])) ? this._cloneDeep(this._getPathValue(nextTarget, [key])) : {};
+ if (normalized && ((scope == null ? void 0 : scope.type) === "entity" || normalized !== "never")) current.reset = normalized;
+ else delete current.reset;
+ if (Object.keys(current).length) nextTarget = this._setPathValue(nextTarget, [key], current);
+ else nextTarget = this._deletePathValue(nextTarget, [key]);
+ if (key === "peak") {
+ nextTarget = this._deletePathValue(nextTarget, ["show_peak"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak_color"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak_marker"]);
+ }
+ return nextTarget;
+ });
+ }
+ _setScopedExtremumLabelShow(scope, key, value) {
+ const enabled = !!value;
+ return this._applyScopedMutation(scope, (target) => {
+ let nextTarget = this._cloneDeep(target);
+ const current = this._isObject(this._getPathValue(nextTarget, [key])) ? this._cloneDeep(this._getPathValue(nextTarget, [key])) : {};
+ const label = this._isObject(current.label) ? this._cloneDeep(current.label) : {};
+ if ((scope == null ? void 0 : scope.type) === "entity" || enabled) label.show = enabled;
+ else delete label.show;
+ if (Object.keys(label).length) current.label = label;
+ else delete current.label;
+ if (Object.keys(current).length) nextTarget = this._setPathValue(nextTarget, [key], current);
+ else nextTarget = this._deletePathValue(nextTarget, [key]);
+ if (key === "peak") {
+ nextTarget = this._deletePathValue(nextTarget, ["show_peak"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak_color"]);
+ nextTarget = this._deletePathValue(nextTarget, ["peak_marker"]);
+ }
+ return nextTarget;
+ });
+ }
+ _setScopedExtremumLabelDecimal(scope, key, value) {
+ const decimal = this._normalizeNumberValue(value);
+ return this._applyScopedMutation(scope, (target) => {
+ let nextTarget = this._cloneDeep(target);
+ const current = this._isObject(this._getPathValue(nextTarget, [key])) ? this._cloneDeep(this._getPathValue(nextTarget, [key])) : {};
+ const label = this._isObject(current.label) ? this._cloneDeep(current.label) : {};
+ if (decimal !== null) label.decimal = decimal;
+ else delete label.decimal;
+ if (Object.keys(label).length) current.label = label;
+ else delete current.label;
+ if (Object.keys(current).length) nextTarget = this._setPathValue(nextTarget, [key], current);
+ else nextTarget = this._deletePathValue(nextTarget, [key]);
+ return nextTarget;
+ });
+ }
+ _getBuiltinMarkerLabelOptions(scope, key) {
+ var _a;
+ const marker = this._getScopedValue(scope, [key]);
+ const label = this._isObject(marker == null ? void 0 : marker.label) ? marker.label : {};
+ const cardLabel = (scope == null ? void 0 : scope.type) === "entity" ? (_a = this._getScopedValue({ type: "card" }, [key, "label"])) != null ? _a : {} : {};
+ const own = (name) => Object.prototype.hasOwnProperty.call(label, name);
+ const inheritedValue = (name, fallback) => {
+ var _a2;
+ return own(name) ? label[name] : (_a2 = cardLabel[name]) != null ? _a2 : fallback;
+ };
+ const precision = inheritedValue("precision", inheritedValue("decimal", ""));
+ return {
+ show: key === "target" ? this._getEffectiveTargetLabelShowValue(scope) : this._getEffectiveMarkerExtras(scope, key).labelShow,
+ text: inheritedValue("text", ""),
+ showValue: inheritedValue("show_value", true) !== false,
+ showUnit: inheritedValue("show_unit", true) !== false,
+ precision: precision === null ? "" : precision
+ };
+ }
+ _renderBuiltinMarkerLabelControls(scope, key, title) {
+ var _a;
+ const options = this._getBuiltinMarkerLabelOptions(scope, key);
+ const isEntity = (scope == null ? void 0 : scope.type) === "entity";
+ const prefix = isEntity ? `entity-${scope.index}-${key}` : key;
+ const attr = isEntity ? `data-kind="entity-${key}-label-` : `data-field="${key}-label-`;
+ const suffix = isEntity ? `" data-index="${scope.index}"` : '"';
+ return `
+
+
${title} label text
+
+
+
+
${title} label precision
+
`;
+ }
+ _setBuiltinMarkerLabelField(scope, key, field, value) {
+ const publicField = field === "showValue" ? "show_value" : field === "showUnit" ? "show_unit" : field === "precision" ? "precision" : field;
+ const isText = field === "text";
+ const normalized = isText ? this._normalizeTextValue(value).replace(/\s+/g, " ").trim() : field === "show" || field === "showValue" || field === "showUnit" ? value === true : this._normalizeDecimalValue(value);
+ if (field === "precision" && value !== "" && normalized === null) return false;
+ return this._applyScopedMutation(scope, (target) => {
+ var _a, _b, _c, _d;
+ let next = this._cloneDeep(target);
+ if (key === "target" && field === "show") next = this._deletePathValue(next, ["show_target_label"]);
+ const marker = this._isObject(this._getPathValue(next, [key])) ? this._cloneDeep(this._getPathValue(next, [key])) : {};
+ const label = this._isObject(marker.label) ? this._cloneDeep(marker.label) : {};
+ const inheritedLabel = (scope == null ? void 0 : scope.type) === "entity" ? (_a = this._getScopedValue({ type: "card" }, [key, "label"])) != null ? _a : {} : {};
+ const inheritedValue = field === "precision" ? (_c = (_b = inheritedLabel.precision) != null ? _b : inheritedLabel.decimal) != null ? _c : null : (_d = inheritedLabel[publicField]) != null ? _d : field === "show" ? false : field === "showValue" || field === "showUnit" ? true : void 0;
+ if (normalized === null || isText && !normalized) {
+ if (isText && (scope == null ? void 0 : scope.type) === "entity" && typeof inheritedLabel.text === "string" && inheritedLabel.text.trim()) {
+ label[publicField] = "";
+ } else {
+ delete label[publicField];
+ }
+ } else if ((scope == null ? void 0 : scope.type) === "entity" && normalized === inheritedValue) {
+ delete label[publicField];
+ } else if ((field === "show" || field === "showValue" || field === "showUnit") && (scope == null ? void 0 : scope.type) !== "entity" && normalized === (field === "show" ? false : true)) {
+ delete label[publicField];
+ } else {
+ label[publicField] = normalized;
+ }
+ if (field === "precision") delete label.decimal;
+ if (Object.keys(label).length) marker.label = label;
+ else delete marker.label;
+ if (Object.keys(marker).length) next = this._setPathValue(next, [key], marker);
+ else next = this._deletePathValue(next, [key]);
+ return next;
+ });
+ }
+ _clearFloorOverride(scope) {
+ return this._applyScopedMutation(scope, (target) => {
+ let nextTarget = this._cloneDeep(target);
+ const floor = this._isObject(this._getPathValue(nextTarget, ["floor"])) ? this._cloneDeep(this._getPathValue(nextTarget, ["floor"])) : {};
+ ["enabled", "color", "reset", "label", "direction"].forEach((key) => delete floor[key]);
+ if (Object.keys(floor).length) nextTarget = this._setPathValue(nextTarget, ["floor"], floor);
+ else nextTarget = this._deletePathValue(nextTarget, ["floor"]);
+ nextTarget = this._deletePathValue(nextTarget, ["floor_marker"]);
+ return nextTarget;
+ }, { rerender: true });
+ }
_setFixedMarkerValue(rootKey, enabled, value) {
const numericValue = this._normalizeNumberValue(value);
if (!enabled || numericValue === null) {
@@ -6561,7 +8729,7 @@ ${paintLayers}
return this._setScopedGradientStops(scope, nextStops, { rerender: true });
}
_getFillStyleValue() {
- return this._getScopedFillStyleValue({ type: "card" });
+ return this._getEffectiveFillStyleValue({ type: "card" });
}
_getFillStyleFromColorMode(colorMode) {
switch (colorMode) {
@@ -6585,14 +8753,11 @@ ${paintLayers}
return this._getFillStyleFromColorMode(colorMode);
}
_getEffectiveScopedFillStyleValue(scope) {
- if ((scope == null ? void 0 : scope.type) !== "entity") {
- return this._getScopedFillStyleValue(scope);
- }
return this._getEffectiveFillStyleValue(scope);
}
_setScopedBarFillStyle(scope, rawValue) {
const normalizedValue = this._normalizeTextValue(rawValue).trim();
- if (!normalizedValue || normalizedValue === "bands") {
+ if (!normalizedValue) {
return this._removeCanonicalScopedValue(scope, ["bar", "fill_style"], {
deprecatedKeys: [["color_mode"]],
prunePaths: [["bar"]]
@@ -6809,6 +8974,51 @@ ${paintLayers}
if (enabled === false) return "disabled";
return "auto";
}
+ _getTargetShapeValue(scope) {
+ var _a;
+ return (_a = this._getScopedValue(scope, ["target", "shape"])) != null ? _a : "";
+ }
+ _getEffectiveMarkerDirection(scope, key) {
+ const canonical = this._getScopedValue(scope, [key, "direction"]);
+ const local = canonical !== void 0 ? canonical : this._getScopedValue(scope, [`${key}_marker`, "direction"]);
+ if ((scope == null ? void 0 : scope.type) === "entity" && local === void 0) {
+ return this._getEffectiveMarkerDirection({ type: "card" }, key);
+ }
+ return normalizeMarkerDirection(local);
+ }
+ _setMarkerDirection(scope, key, rawValue) {
+ const direction = normalizeMarkerDirection(rawValue);
+ const cardDirection = this._getEffectiveMarkerDirection({ type: "card" }, key);
+ if ((scope == null ? void 0 : scope.type) !== "entity" && direction === "inward" || (scope == null ? void 0 : scope.type) === "entity" && direction === cardDirection) {
+ return this._removeCanonicalScopedValue(scope, [key, "direction"], {
+ prunePaths: [[key]]
+ });
+ }
+ return this._setCanonicalScopedTextOverride(scope, [key, "direction"], direction, {
+ prunePaths: [[key]]
+ });
+ }
+ _hasTargetShape(scope) {
+ const target = this._getScopedValue(scope, ["target"]);
+ return this._isObject(target) && Object.prototype.hasOwnProperty.call(target, "shape");
+ }
+ _getEffectiveTargetShapeValue(scope) {
+ if ((scope == null ? void 0 : scope.type) === "entity" && !this._hasTargetShape(scope)) {
+ return this._getEffectiveTargetShapeValue({ type: "card" });
+ }
+ return normalizeTargetMarkerShape(this._getTargetShapeValue(scope));
+ }
+ _setTargetShape(scope, rawValue) {
+ const normalizedShape = normalizeTargetMarkerShape(rawValue);
+ if ((scope == null ? void 0 : scope.type) !== "entity" && normalizedShape === "diamond") {
+ return this._removeCanonicalScopedValue(scope, ["target", "shape"], {
+ prunePaths: [["target"]]
+ });
+ }
+ return this._setCanonicalScopedTextOverride(scope, ["target", "shape"], normalizedShape, {
+ prunePaths: [["target"]]
+ });
+ }
_getEffectiveTargetMode(scope) {
const mode = this._getTargetMode(scope);
if ((scope == null ? void 0 : scope.type) !== "entity" || mode !== "inherit") {
@@ -6849,7 +9059,10 @@ ${paintLayers}
nextTarget = this._deletePathValue(nextTarget, ["target", "enabled"]);
nextTarget = this._deletePathValue(nextTarget, ["target", "at"]);
nextTarget = this._deletePathValue(nextTarget, ["target", "color"]);
+ nextTarget = this._deletePathValue(nextTarget, ["target", "shape"]);
+ nextTarget = this._deletePathValue(nextTarget, ["target", "direction"]);
nextTarget = this._deletePathValue(nextTarget, ["target", "label", "show"]);
+ nextTarget = this._deletePathValue(nextTarget, ["target", "label", "decimal"]);
nextTarget = this._deletePathValue(nextTarget, ["target", "when_exceeded", "fill_color"]);
} else {
nextTarget = this._deletePathValue(nextTarget, ["target"]);
@@ -6921,6 +9134,28 @@ ${paintLayers}
prunePaths: [["target", "label"], ["target"]]
});
}
+ _getTargetLabelDecimalValue(scope) {
+ var _a, _b;
+ return (_b = (_a = this._getScopedValue(scope, ["target", "label", "precision"])) != null ? _a : this._getScopedValue(scope, ["target", "label", "decimal"])) != null ? _b : "";
+ }
+ _getEffectiveTargetLabelDecimalValue(scope) {
+ const local = this._getTargetLabelDecimalValue(scope);
+ return local !== "" && local !== null && local !== void 0 ? local : (scope == null ? void 0 : scope.type) === "entity" ? this._getTargetLabelDecimalValue({ type: "card" }) : "";
+ }
+ _setTargetLabelDecimal(scope, rawValue) {
+ const normalizedValue = this._normalizeDecimalValue(rawValue);
+ if (rawValue === "" || rawValue === null || rawValue === void 0) {
+ return this._removeCanonicalScopedValue(scope, ["target", "label", "decimal"], {
+ prunePaths: [["target", "label"], ["target"]]
+ });
+ }
+ if (normalizedValue === null) {
+ return false;
+ }
+ return this._setCanonicalScopedValue(scope, ["target", "label", "decimal"], normalizedValue, {
+ prunePaths: [["target", "label"], ["target"]]
+ });
+ }
_getTargetAboveFillColorValue(scope) {
var _a, _b;
return (_b = (_a = this._getScopedValue(scope, ["target", "when_exceeded", "fill_color"])) != null ? _a : this._getScopedValue(scope, ["above_target_color"])) != null ? _b : "";
@@ -7027,7 +9262,7 @@ ${paintLayers}
return ["target_entity", "target_color", "show_target_label", "above_target_color"].some((key) => {
const value = this._getScopedValue(scope, [key]);
return value !== void 0 && value !== null && value !== "" && value !== false;
- });
+ }) || this._getTargetLabelDecimalValue(scope) !== "";
}
_getBaselineResolvableValue(scope) {
return this._getResolvableScopedValue(scope, "baseline", {
@@ -7163,6 +9398,9 @@ ${paintLayers}
return nextTarget;
}, { rerender: true });
}
+ _removeBaseline(scope) {
+ return this._removeScopedValue(scope, ["baseline"], { rerender: true });
+ }
_hasBaselineOverride(scope) {
const baselineValue = this._getScopedValue(scope, ["baseline"]);
if (this._isObject(baselineValue) && Object.keys(baselineValue).length) {
@@ -7208,6 +9446,14 @@ ${paintLayers}
}
this._render();
}
+ _toggleGenericMarkerExpanded(markerUiId) {
+ if (this._expandedGenericMarkerUiIds.has(markerUiId)) {
+ this._expandedGenericMarkerUiIds.delete(markerUiId);
+ } else {
+ this._expandedGenericMarkerUiIds.add(markerUiId);
+ }
+ this._render();
+ }
_getOverrideGroupKey(index, group) {
return `${index}:${group}`;
}
@@ -7256,8 +9502,13 @@ ${paintLayers}
const target = this._getTargetResolvableValue(scope);
if (target.fixed !== "" && target.fixed !== void 0) parts.push(`Target ${target.fixed}`);
if (target.entity) parts.push("Entity");
+ if (this._hasTargetShape(scope)) {
+ parts.push(this._getEffectiveTargetShapeValue(scope) === "triangle" ? "Triangle" : "Diamond");
+ }
if (this._hasCustomTargetColor(scope)) parts.push("Custom color");
if (this._getTargetLabelShowValue(scope)) parts.push("Label");
+ const labelDecimal = this._getTargetLabelDecimalValue(scope);
+ if (labelDecimal !== "") parts.push(`Label ${labelDecimal} ${Number(labelDecimal) === 1 ? "decimal" : "decimals"}`);
if (this._getTargetAboveFillColorValue(scope)) parts.push("Above");
return parts.length ? parts.join(" \u2022 ") : "Inherited";
}
@@ -7272,6 +9523,14 @@ ${paintLayers}
if (this._getBaselineDirectionalColorValue(scope, "below")) parts.push("Below");
return parts.length ? parts.join(" \u2022 ") : "Inherited";
}
+ _getCardBaselineSummary() {
+ const mode = this._getBaselineMode({ type: "card" });
+ if (mode === "disabled") return "Disabled";
+ const baseline = this._getBaselineResolvableValue({ type: "card" });
+ const origin = baseline.entity || (baseline.fixed !== "" && baseline.fixed !== void 0 ? baseline.fixed : "");
+ const modeLabel = mode === "enabled" ? "Enabled" : "Auto";
+ return origin !== "" ? `${modeLabel} \xB7 ${origin}` : modeLabel;
+ }
_getBarAppearanceSummary(scope) {
var _a;
const parts = [];
@@ -7309,13 +9568,13 @@ ${paintLayers}
}
_getEffectiveFillStyleValue(scope) {
if ((scope == null ? void 0 : scope.type) === "entity") {
- const hasEntityFillStyle = this._getScopedValue(scope, ["bar", "fill_style"]) !== void 0 || this._getScopedValue(scope, ["bar", "color_mode"]) !== void 0 || this._getScopedValue(scope, ["color_mode"]) !== void 0;
- if (hasEntityFillStyle) {
- return this._getScopedFillStyleValue(scope);
- }
- return this._getFillStyleValue();
+ return normalizeBarConfig(
+ this._getEntityRawEntries()[scope.index],
+ this._draftConfig,
+ { isCardScope: false }
+ ).fill_style;
}
- return this._getScopedFillStyleValue(scope);
+ return normalizeBarConfig(this._draftConfig, null, { isCardScope: true }).fill_style;
}
_getScopedGradientStopsValue(scope) {
const localRows = this._getGradientStopsUiRows(scope);
@@ -7484,11 +9743,424 @@ ${paintLayers}
}
return `
`;
}
- _renderEntitySourceInput(kind, index, value, placeholder = "sensor.example") {
+ _renderEntitySourceInput(kind, index, value, placeholder = "sensor.example", extraDataset = {}) {
+ const extraAttrs = Object.entries(extraDataset).map(([key, entry]) => `data-${key}="${this._escapeAttribute(entry)}"`).join(" ");
if (customElements.get("ha-entity-picker")) {
- return `
`;
+ return `
`;
}
- return `
`;
+ return `
`;
+ }
+ _hasMarkersOverride(scope) {
+ return (scope == null ? void 0 : scope.type) === "entity" && this._getScopedValue(scope, ["markers"]) !== void 0;
+ }
+ _getGenericMarkers(scope, effective = true) {
+ const local = this._getScopedValue(scope, ["markers"]);
+ if ((scope == null ? void 0 : scope.type) === "entity" && local === void 0 && effective) {
+ const cardMarkers = this._getScopedValue({ type: "card" }, ["markers"]);
+ return Array.isArray(cardMarkers) ? this._cloneDeep(cardMarkers) : [];
+ }
+ return Array.isArray(local) ? this._cloneDeep(local) : [];
+ }
+ _getGenericMarkersSummary(scope) {
+ if ((scope == null ? void 0 : scope.type) === "entity" && !this._hasMarkersOverride(scope)) return "Inherited";
+ const count = this._getGenericMarkers(scope, false).length;
+ return count === 0 ? "No reference markers" : `${count} reference marker${count === 1 ? "" : "s"}`;
+ }
+ _getGenericMarkerScopeKey(scope) {
+ return (scope == null ? void 0 : scope.type) === "entity" ? `entity:${scope.index}` : "card";
+ }
+ _getGenericMarkerUiIds(scope, count) {
+ var _a;
+ const key = this._getGenericMarkerScopeKey(scope);
+ const ids = (_a = this._genericMarkerUiIds.get(key)) != null ? _a : [];
+ while (ids.length < count) {
+ ids.push(`marker-${++this._nextGenericMarkerUiId}`);
+ }
+ ids.length = count;
+ this._genericMarkerUiIds.set(key, ids);
+ return ids;
+ }
+ _resetGenericMarkerUiScope(scope) {
+ var _a;
+ const key = this._getGenericMarkerScopeKey(scope);
+ const ids = (_a = this._genericMarkerUiIds.get(key)) != null ? _a : [];
+ ids.forEach((id) => this._expandedGenericMarkerUiIds.delete(id));
+ this._genericMarkerUiIds.delete(key);
+ }
+ _getGenericMarkerSummary(marker) {
+ var _a;
+ const source = this._getGenericMarkerSource(marker);
+ const lane = (marker == null ? void 0 : marker.lane) === "above" ? "Above" : "Below";
+ const shape = (_a = marker == null ? void 0 : marker.shape) != null ? _a : "circle";
+ let sourceSummary;
+ if (source.mode === "percent") {
+ sourceSummary = source.percent === "" ? "Percentage" : `${source.percent}%`;
+ } else if (source.mode === "entity" || source.mode === "entity-fallback") {
+ sourceSummary = source.entity || "Entity";
+ } else {
+ sourceSummary = source.fixed === "" ? "Fixed value" : String(source.fixed);
+ }
+ return `${lane} \xB7 ${shape.charAt(0).toUpperCase()}${shape.slice(1)} \xB7 ${sourceSummary}`;
+ }
+ _refreshGenericMarkerSummary(scope, markerIndex) {
+ const markers = this._getGenericMarkers(scope);
+ const marker = markers[markerIndex];
+ const uiId = this._getGenericMarkerUiIds(scope, markers.length)[markerIndex];
+ const summary = this._getShadowElementById(`generic-${uiId}-summary`);
+ if (marker && summary) {
+ const text = this._getGenericMarkerSummary(marker);
+ summary.textContent = text;
+ summary.setAttribute("title", text);
+ }
+ }
+ _getGenericMarkerSource(marker) {
+ var _a, _b, _c;
+ const at = marker == null ? void 0 : marker.at;
+ if (typeof at === "string" && /^\s*[+-]?(?:\d+(?:\.\d+)?|\.\d+)\s*%\s*$/.test(at)) {
+ return { mode: "percent", percent: at.replace(/%/g, "").trim() };
+ }
+ if (typeof at === "string" && /^[a-z0-9_]+\.[a-z0-9_]+$/i.test(at.trim())) {
+ return { mode: "entity", entity: at.trim(), fixed: "" };
+ }
+ const source = this._isObject(at) ? at : {};
+ if (Object.prototype.hasOwnProperty.call(source, "entity")) {
+ return {
+ mode: source.fixed !== void 0 && source.fixed !== null && source.fixed !== "" ? "entity-fallback" : "entity",
+ entity: (_a = source.entity) != null ? _a : "",
+ fixed: (_b = source.fixed) != null ? _b : ""
+ };
+ }
+ return { mode: "fixed", fixed: (_c = source.fixed) != null ? _c : "" };
+ }
+ _renderGenericMarkersEditor(scope) {
+ const scopeType = scope.type;
+ const scopeIndex = scopeType === "entity" ? scope.index : "card";
+ const markers = this._getGenericMarkers(scope);
+ const markerUiIds = this._getGenericMarkerUiIds(scope, markers.length);
+ const override = this._hasMarkersOverride(scope);
+ const rows = markers.map((marker, markerIndex) => {
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+ const source = this._getGenericMarkerSource(marker);
+ const markerUiId = markerUiIds[markerIndex];
+ const rowId = `${scopeType}-${scopeIndex}-generic-${markerUiId}`;
+ const expanded = this._expandedGenericMarkerUiIds.has(markerUiId);
+ const entitySource = source.mode === "entity" || source.mode === "entity-fallback" ? this._renderEntitySourceInput("generic-marker-entity", scopeIndex, source.entity, "sensor.reference", {
+ "scope-type": scopeType,
+ "marker-index": markerIndex
+ }) : "";
+ const labelEntitySource = this._renderEntitySourceInput(
+ "generic-marker-label-entity",
+ scopeIndex,
+ (_b = (_a = marker == null ? void 0 : marker.label) == null ? void 0 : _a.entity) != null ? _b : "",
+ "sensor.information",
+ {
+ "scope-type": scopeType,
+ "marker-index": markerIndex
+ }
+ );
+ return `
+
+
+
+
+ Source
+
+ Fixed
+ Entity
+ Entity with fixed fallback
+ Percentage
+
+
+ ${source.mode === "fixed" ? `
+
+ Fixed value
+
` : ""}
+ ${source.mode === "entity" || source.mode === "entity-fallback" ? `
+
+ Reference marker entity
+ ${entitySource}
+
` : ""}
+ ${source.mode === "entity-fallback" ? `
+
+ Fixed fallback
+
` : ""}
+ ${source.mode === "percent" ? `
+
+ Scale percentage
+
` : ""}
+
+
+ Lane
+
+ Above
+ Below
+
+
+
+ Direction
+
+ Inward
+ Outward
+
+
+
+
+ Shape
+
+ ${["circle", "diamond", "triangle", "chevron", "arrow", "pin"].map((shape) => {
+ var _a2;
+ return `${shape} `;
+ }).join("")}
+
+
+
+ Color
+ ${this._renderColorInput({
+ id: `${rowId}-color`,
+ kind: "generic-marker-color",
+ index: scopeIndex,
+ value: (_e = marker == null ? void 0 : marker.color) != null ? _e : "#888888",
+ fallbackHex: "#888888",
+ placeholder: "#888888",
+ extraDataset: { "scope-type": scopeType, "marker-index": markerIndex }
+ })}
+
+
+
+
Label text
+
+
+ Label content entity
+ ${labelEntitySource}
+
+
+
+
+
Label precision
+
+
+
+
`;
+ }).join("");
+ const inheritControl = scopeType === "entity" ? `
+
+
+ Inherit card markers
+
+
` : "";
+ const overrideNote = scopeType === "entity" && !override ? '
Enable the override to replace the card marker list. An empty override clears all card markers.
' : "";
+ return `
+ ${inheritControl}
+ ${overrideNote}
+ ${scopeType === "card" || override ? `
+
Up to four markers render in each lane, including Peak, Floor, and Target. Excess generic markers remain editable and show a warning. Unresolved markers still reserve a slot and lane.
+
${rows}
+
Add reference marker ` : ""}
+ `;
+ }
+ _getGenericMarkerScope(target) {
+ var _a;
+ return ((_a = target == null ? void 0 : target.dataset) == null ? void 0 : _a.scopeType) === "entity" ? { type: "entity", index: Number(target.dataset.index) } : { type: "card" };
+ }
+ _setGenericMarkerList(scope, markers, options = {}) {
+ return this._setScopedValue(scope, ["markers"], markers, { rerender: false, ...options });
+ }
+ _updateGenericMarker(scope, markerIndex, update, options = {}) {
+ var _a;
+ const markers = this._getGenericMarkers(scope);
+ if (!markers[markerIndex]) return false;
+ const marker = this._isObject(markers[markerIndex]) ? this._cloneDeep(markers[markerIndex]) : {};
+ const nextMarker = (_a = update(marker)) != null ? _a : marker;
+ markers[markerIndex] = nextMarker;
+ const changed = this._setGenericMarkerList(scope, markers, options);
+ if (changed) this._refreshGenericMarkerSummary(scope, markerIndex);
+ return changed;
+ }
+ _setGenericMarkerSourceMode(scope, markerIndex, mode) {
+ return this._updateGenericMarker(scope, markerIndex, (marker) => {
+ if (mode === "percent") {
+ marker.at = "50%";
+ return marker;
+ }
+ const oldAt = this._isObject(marker.at) ? this._cloneDeep(marker.at) : {};
+ if (mode === "fixed") {
+ delete oldAt.entity;
+ delete oldAt.percent;
+ if (oldAt.fixed === void 0) oldAt.fixed = 50;
+ } else {
+ delete oldAt.percent;
+ if (!oldAt.entity) oldAt.entity = "";
+ if (mode === "entity") delete oldAt.fixed;
+ if (mode === "entity-fallback" && oldAt.fixed === void 0) oldAt.fixed = 50;
+ }
+ marker.at = oldAt;
+ return marker;
+ }, { rerender: true });
+ }
+ _setGenericMarkerField(scope, markerIndex, kind, value) {
+ var _a, _b;
+ const atLeaf = (key, nextValue) => this._updateGenericMarker(scope, markerIndex, (marker) => {
+ const at = this._isObject(marker.at) ? this._cloneDeep(marker.at) : {};
+ if (nextValue === void 0) delete at[key];
+ else at[key] = nextValue;
+ marker.at = Object.keys(at).length ? at : null;
+ return marker;
+ });
+ if (kind === "generic-marker-source-mode") return this._setGenericMarkerSourceMode(scope, markerIndex, value);
+ if (kind === "generic-marker-show-marker") {
+ return this._updateGenericMarker(scope, markerIndex, (marker) => {
+ if (value === false) marker.show_marker = false;
+ else delete marker.show_marker;
+ return marker;
+ });
+ }
+ if (kind === "generic-marker-fixed") {
+ return atLeaf("fixed", (_a = this._normalizeNumberValue(value)) != null ? _a : void 0);
+ }
+ if (kind === "generic-marker-fallback") {
+ return atLeaf("fixed", (_b = this._normalizeNumberValue(value)) != null ? _b : void 0);
+ }
+ if (kind === "generic-marker-entity") {
+ return atLeaf("entity", this._normalizeTextValue(value).trim() || void 0);
+ }
+ if (kind === "generic-marker-percent") {
+ const percent = this._normalizeNumberValue(value);
+ return this._updateGenericMarker(scope, markerIndex, (marker) => {
+ marker.at = percent === null ? null : `${percent}%`;
+ return marker;
+ });
+ }
+ if (kind === "generic-marker-lane" || kind === "generic-marker-shape" || kind === "generic-marker-direction") {
+ return this._updateGenericMarker(scope, markerIndex, (marker) => {
+ const key = kind === "generic-marker-lane" ? "lane" : kind === "generic-marker-shape" ? "shape" : "direction";
+ marker[key] = key === "direction" ? normalizeMarkerDirection(value) : value;
+ return marker;
+ });
+ }
+ if (kind === "generic-marker-color") {
+ return this._updateGenericMarker(scope, markerIndex, (marker) => {
+ marker.color = this._normalizeTextValue(value).trim();
+ return marker;
+ });
+ }
+ if (kind.startsWith("generic-marker-label-")) {
+ return this._updateGenericMarker(scope, markerIndex, (marker) => {
+ const label = this._isObject(marker.label) ? this._cloneDeep(marker.label) : {};
+ if (kind === "generic-marker-label-show") label.show = value === true;
+ if (kind === "generic-marker-label-text") {
+ const text = this._normalizeTextValue(value).replace(/\s+/g, " ").trim();
+ if (text) label.text = text;
+ else delete label.text;
+ }
+ if (kind === "generic-marker-label-entity") {
+ const entity = this._normalizeTextValue(value).trim();
+ if (entity) label.entity = entity;
+ else delete label.entity;
+ }
+ if (kind === "generic-marker-label-show-value") label.show_value = value === true;
+ if (kind === "generic-marker-label-show-unit") label.show_unit = value === true;
+ if (kind === "generic-marker-label-precision") {
+ const precision = this._normalizeDecimalValue(value);
+ if (precision === null) {
+ delete label.precision;
+ delete label.decimal;
+ } else {
+ label.precision = precision;
+ delete label.decimal;
+ }
+ }
+ marker.label = label;
+ return marker;
+ });
+ }
+ return false;
+ }
+ _cleanupGenericMarkersForEmit(target) {
+ if (!this._isObject(target) || !Array.isArray(target.markers)) return target;
+ const nextTarget = this._cloneDeep(target);
+ nextTarget.markers = nextTarget.markers.map((rawMarker) => {
+ var _a;
+ if (!this._isObject(rawMarker)) return rawMarker;
+ const marker = this._cloneDeep(rawMarker);
+ if (marker.show_marker === true) delete marker.show_marker;
+ if (this._isObject(marker.at)) {
+ const at = this._cloneDeep(marker.at);
+ const fixed = this._normalizeNumberValue(at.fixed);
+ const entity = this._normalizeTextValue(at.entity).trim();
+ if (fixed !== null) at.fixed = fixed;
+ else delete at.fixed;
+ if (entity) at.entity = entity;
+ else delete at.entity;
+ if (Object.keys(at).length) marker.at = at;
+ else delete marker.at;
+ }
+ if (marker.lane === "below") delete marker.lane;
+ if (marker.shape === "circle") delete marker.shape;
+ if (marker.direction === "inward") delete marker.direction;
+ if (this._normalizeColorComparisonValue(marker.color) === this._normalizeColorComparisonValue("#888888")) delete marker.color;
+ if (this._isObject(marker.label)) {
+ const label = this._cloneDeep(marker.label);
+ if (label.show === false) delete label.show;
+ if (label.show_value === true) delete label.show_value;
+ if (label.show_unit === true) delete label.show_unit;
+ if (typeof label.text === "string") {
+ label.text = label.text.replace(/\s+/g, " ").trim();
+ if (!label.text) delete label.text;
+ }
+ const precision = this._normalizeDecimalValue((_a = label.precision) != null ? _a : label.decimal);
+ delete label.decimal;
+ if (precision === null) delete label.precision;
+ else label.precision = precision;
+ delete label.unit;
+ if (Object.keys(label).length) marker.label = label;
+ else delete marker.label;
+ }
+ return marker;
+ });
+ return nextTarget;
+ }
+ _renderResetOptions(value) {
+ const selected = this._normalizeTextValue(value).trim().toLowerCase() || "never";
+ const options = [
+ "never",
+ "quarterly",
+ "hourly",
+ "daily",
+ "weekly",
+ "monthly",
+ "yearly",
+ ...Array.from({ length: 59 }, (_, index) => `${index + 1}m`),
+ ...Array.from({ length: 23 }, (_, index) => `${index + 1}h`)
+ ];
+ return options.map((option) => `
${option} `).join("");
}
_escapeAttribute(value) {
return this._normalizeTextValue(value).replace(/&/g, "&").replace(/"/g, """).replace(//g, ">");
@@ -7559,12 +10231,17 @@ ${paintLayers}
const baselineBelowColor = this._getBaselineDirectionalColorValue({ type: "card" }, "below");
const target = this._getTargetResolvableValue({ type: "card" });
const targetMode = this._getTargetMode({ type: "card" });
+ const targetShape = this._getEffectiveTargetShapeValue({ type: "card" });
+ const targetDirection = this._getEffectiveMarkerDirection({ type: "card" }, "target");
const targetColor = this._getTargetColorValue({ type: "card" });
const targetLabelShow = this._getTargetLabelShowValue({ type: "card" });
+ const targetLabelDecimal = this._getTargetLabelDecimalValue({ type: "card" });
const targetAboveFillColor = this._getTargetAboveFillColorValue({ type: "card" });
const formattingUnit = this._getScopedFormattingValue({ type: "card" }, "unit");
const formattingDecimal = this._getScopedFormattingValue({ type: "card" }, "decimal");
const cardPeak = this._getScopedPeakConfig({ type: "card" });
+ const cardPeakExtras = this._getEffectiveMarkerExtras({ type: "card" }, "peak");
+ const cardFloor = this._getEffectiveScopedFloorConfig({ type: "card" });
const scaleMin = this._getScaleFixedValue("min", "min");
const scaleMax = this._getScaleFixedValue("max", "max");
const scaleMinEntity = this._getScaleEntityValue("min");
@@ -7680,6 +10357,79 @@ ${paintLayers}
align-items: end;
min-width: 0;
}
+ .generic-marker-list {
+ gap: 8px;
+ }
+ .generic-marker-item {
+ min-width: 0;
+ overflow: hidden;
+ border: 1px solid color-mix(in srgb, var(--divider-color, #888) 32%, transparent);
+ border-radius: 10px;
+ background: color-mix(in srgb, var(--card-background-color, #fff) 82%, transparent);
+ }
+ .generic-marker-item[data-expanded="true"] {
+ border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #03a9f4)) 38%, var(--divider-color, #888));
+ }
+ .generic-marker-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+ padding: 6px 8px;
+ }
+ .generic-marker-toggle {
+ display: grid;
+ grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+ align-items: center;
+ gap: 4px 10px;
+ flex: 1 1 auto;
+ min-width: 0;
+ min-height: 40px;
+ padding: 4px 6px;
+ border: 0;
+ background: transparent;
+ text-align: left;
+ }
+ .generic-marker-toggle:hover,
+ .generic-marker-toggle:focus {
+ background: color-mix(in srgb, var(--secondary-background-color, var(--card-background-color, #fff)) 72%, transparent);
+ }
+ .generic-marker-title {
+ font-weight: 700;
+ white-space: nowrap;
+ }
+ .generic-marker-summary {
+ min-width: 0;
+ overflow: hidden;
+ color: var(--secondary-text-color, #666);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .generic-marker-actions {
+ display: flex;
+ flex: 0 0 auto;
+ gap: 4px;
+ align-items: center;
+ }
+ .generic-marker-actions button {
+ min-width: 38px;
+ min-height: 38px;
+ padding: 6px;
+ }
+ .generic-marker-body {
+ gap: 12px;
+ padding: 12px;
+ border-top: 1px solid color-mix(in srgb, var(--divider-color, #888) 25%, transparent);
+ background: color-mix(in srgb, var(--secondary-background-color, var(--card-background-color, #fff)) 78%, transparent);
+ }
+ .generic-marker-pair,
+ .generic-marker-options {
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ align-items: end;
+ }
+ .generic-marker-precision {
+ max-width: 220px;
+ }
.list-row.triple {
grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
}
@@ -8042,6 +10792,22 @@ ${paintLayers}
.list-row {
grid-template-columns: minmax(0, 1fr);
}
+ .generic-marker-header {
+ flex-wrap: wrap;
+ }
+ .generic-marker-toggle {
+ flex-basis: 100%;
+ }
+ .generic-marker-actions {
+ width: 100%;
+ }
+ .generic-marker-actions button {
+ flex: 1 1 auto;
+ }
+ .generic-marker-pair,
+ .generic-marker-options {
+ grid-template-columns: minmax(0, 1fr);
+ }
.list-row.triple,
.list-row.gradient-stop-row {
grid-template-columns: minmax(0, 1fr);
@@ -8109,6 +10875,7 @@ ${paintLayers}
Overrides replace card defaults only for this entity.
${(() => {
+ var _a3, _b2;
const scope = { type: "entity", index };
const minParts = this._getEffectiveResolvableScopedValue(scope, "min");
const maxParts = this._getEffectiveResolvableScopedValue(scope, "max");
@@ -8121,6 +10888,8 @@ ${paintLayers}
const targetInherited = !this._hasTargetOverride(scope);
const targetParts = this._getEffectiveTargetResolvableValue(scope);
const targetMode2 = this._getEffectiveTargetMode(scope);
+ const targetShape2 = this._getEffectiveTargetShapeValue(scope);
+ const targetDirection2 = this._getEffectiveMarkerDirection(scope, "target");
const formattingInherited = !this._hasFormattingOverride(scope);
const layoutInherited = !this._hasLayoutOverride(scope);
const peakInherited = !this._hasPeakOverride(scope);
@@ -8128,6 +10897,9 @@ ${paintLayers}
const segmentsInherited = !this._hasSegmentsOverride(scope);
const scaleInherited = !this._hasResolvableOverride(this._getResolvableScopedValue(scope, "min")) && !this._hasResolvableOverride(this._getResolvableScopedValue(scope, "max"));
const entityPeak = this._getEffectiveScopedPeakConfig(scope);
+ const entityPeakExtras = this._getEffectiveMarkerExtras(scope, "peak");
+ const floorInherited = !this._hasExtremumOverride(scope, "floor");
+ const entityFloor = this._getEffectiveScopedFloorConfig(scope);
const entityGradientStops = this._getScopedGradientStopsValue(scope);
const entityGradientDraft = this._getGradientStopsDraftState(scope);
const entityGradientDraftMessage = this._getGradientDraftValidationMessage(scope);
@@ -8335,8 +11107,74 @@ ${paintLayers}
placeholder: "inherit card default"
})}
+
+ Peak reset
+
+ ${this._renderResetOptions((_b2 = entityPeakExtras.reset) != null ? _b2 : "never")}
+
+
+
+ Direction
+
+ Inward
+ Outward
+
+
+ ${this._renderBuiltinMarkerLabelControls(scope, "peak", "Peak")}
`
});
+ const floorGroup = this._renderOverrideGroup({
+ index,
+ group: "floor",
+ title: "Floor",
+ summary: this._getFloorSummary(scope),
+ content: `
+
+
+ Inherit card settings
+
+
+
+
+ Floor color
+ ${this._renderColorInput({
+ id: `entity-${index}-floor-color`,
+ kind: "entity-floor-color",
+ index,
+ value: entityFloor.color,
+ fallbackHex: "#888888",
+ placeholder: "inherit card default"
+ })}
+
+
+ Floor reset
+
+ ${this._renderResetOptions(entityFloor.reset)}
+
+
+
+ Direction
+
+ Inward
+ Outward
+
+
+ ${this._renderBuiltinMarkerLabelControls(scope, "floor", "Floor")}
+ `
+ });
+ const markersGroup = this._renderOverrideGroup({
+ index,
+ group: "markers",
+ title: "Reference markers",
+ summary: this._getGenericMarkersSummary(scope),
+ content: this._renderGenericMarkersEditor(scope)
+ });
const segmentsGroup = this._renderOverrideGroup({
index,
group: "segments",
@@ -8355,13 +11193,13 @@ ${paintLayers}
Segments
${this._renderListRows(entitySegments, (segment, segmentIndex) => {
- var _a3;
+ var _a4;
return `
\u{1F5D1}
${this._escapeAttribute(this._getSegmentRowValidationMessage(scope, segmentIndex))}
@@ -8402,15 +11240,15 @@ ${paintLayers}
Gradient stops
${this._renderListRows(entityGradientStops, (stop, stopIndex) => {
- var _a3, _b2;
+ var _a4, _b3;
return `
-
+
${this._renderColorInput({
id: `entity-${index}-gradient-color-${stopIndex}`,
kind: "entity-gradient-color",
index,
- value: (_b2 = stop == null ? void 0 : stop.color) != null ? _b2 : "#4a9eff",
+ value: (_b3 = stop == null ? void 0 : stop.color) != null ? _b3 : "#4a9eff",
fallbackHex: "#4CAF50",
placeholder: "CSS color value",
extraDataset: { "stop-index": stopIndex }
@@ -8447,9 +11285,12 @@ ${paintLayers}
+
+ \u{1F5D1}
+
Baseline mode
@@ -8524,6 +11365,20 @@ ${paintLayers}
Target fallback
+
+ Target shape
+
+ diamond
+ triangle
+
+
+
+ Direction
+
+ Inward
+ Outward
+
+
Target entity
${this._renderEntitySourceInput("entity-target-entity-source", index, targetParts.entity, "inherit card default")}
@@ -8539,12 +11394,7 @@ ${paintLayers}
placeholder: "inherit card default"
})}
-
-
- Show target label
-
-
+ ${this._renderBuiltinMarkerLabelControls(scope, "target", "Target")}
-
+
Markers
-
Target, baseline, and peak markers help compare the current value against reference points.
+
Configure Target, Peak, Floor, and custom reference markers.
+ ${this._renderCardGroup({
+ group: "marker-target",
+ title: "Target",
+ summary: this._getCardTargetMarkerSummary(),
+ content: `
+
Target mode
@@ -8629,6 +11487,20 @@ ${paintLayers}
Target fallback
+
+ Target shape
+
+ diamond
+ triangle
+
+
+
+ Direction
+
+ Inward
+ Outward
+
+
Target entity
${this._renderEntitySourceInput("target-entity-source", "card", target.entity)}
@@ -8636,19 +11508,14 @@ ${paintLayers}
Target color
${this._renderColorInput({
- id: "target-color",
- field: "target-color",
- value: targetColor,
- fallbackHex: "#888",
- placeholder: "#888"
- })}
-
-
-
- Show target label
-
+ id: "target-color",
+ field: "target-color",
+ value: targetColor,
+ fallbackHex: "#888",
+ placeholder: "#888"
+ })}
+ ${this._renderBuiltinMarkerLabelControls({ type: "card" }, "target", "Target")}
@@ -8658,11 +11525,140 @@ ${paintLayers}
Above-target color
${this._renderColorInput({
- id: "target-above-fill-color",
- field: "target-above-fill-color",
- value: targetAboveFillColor,
- fallbackHex: "#000000"
+ id: "target-above-fill-color",
+ field: "target-above-fill-color",
+ value: targetAboveFillColor,
+ fallbackHex: "#000000"
+ })}
+
+
`
})}
+ ${this._renderCardGroup({
+ group: "marker-peak",
+ title: "Peak",
+ summary: this._getMarkerResetSummary("peak"),
+ content: `
+
+
+
+ Peak color
+ ${this._renderColorInput({
+ id: "peak-color",
+ field: "peak-color",
+ value: cardPeak.color,
+ fallbackHex: "#888",
+ placeholder: "#888"
+ })}
+
+
+ Peak reset
+
+ ${this._renderResetOptions(cardPeakExtras.reset)}
+
+
+
+ Direction
+
+ Inward
+ Outward
+
+
+ ${this._renderBuiltinMarkerLabelControls({ type: "card" }, "peak", "Peak")}
+
`
+ })}
+ ${this._renderCardGroup({
+ group: "marker-floor",
+ title: "Floor",
+ summary: this._getMarkerResetSummary("floor"),
+ content: `
+
+
+
+ Floor color
+ ${this._renderColorInput({
+ id: "floor-color",
+ field: "floor-color",
+ value: cardFloor.color,
+ fallbackHex: "#888888",
+ placeholder: "#888888"
+ })}
+
+
+ Floor reset
+
+ ${this._renderResetOptions(cardFloor.reset)}
+
+
+
+ Direction
+
+ Inward
+ Outward
+
+
+ ${this._renderBuiltinMarkerLabelControls({ type: "card" }, "floor", "Floor")}
+
`
+ })}
+ ${this._renderCardGroup({
+ group: "generic-markers",
+ title: "Generic Reference Markers",
+ summary: this._getGenericMarkersSummary({ type: "card" }),
+ content: this._renderGenericMarkersEditor({ type: "card" })
+ })}
+
+
+
+
+
+
Bar Appearance
+
Choose the bar rendering mode and base bar colors.
+
+
+
+ Fill style
+
+ solid
+ gradient
+ bands
+ band_gradient
+ soft_bands
+
+
+
+
+ Bar color
+ ${this._renderColorInput({
+ id: "bar-color",
+ field: "bar-color",
+ value: barColor,
+ fallbackHex: "#4a9eff",
+ placeholder: "#4a9eff"
+ })}
+
+
+ ${this._renderCardGroup({
+ group: "baseline",
+ title: "Baseline",
+ summary: this._getCardBaselineSummary(),
+ content: `
+
+
+ \u{1F5D1}
Baseline mode
@@ -8692,11 +11688,11 @@ ${paintLayers}
Above-baseline color
${this._renderColorInput({
- id: "baseline-above-color",
- field: "baseline-above-color",
- value: baselineAboveColor,
- fallbackHex: "#000000"
- })}
+ id: "baseline-above-color",
+ field: "baseline-above-color",
+ value: baselineAboveColor,
+ fallbackHex: "#000000"
+ })}
@@ -8707,63 +11703,15 @@ ${paintLayers}
Below-baseline color
${this._renderColorInput({
- id: "baseline-below-color",
- field: "baseline-below-color",
- value: baselineBelowColor,
- fallbackHex: "#000000"
+ id: "baseline-below-color",
+ field: "baseline-below-color",
+ value: baselineBelowColor,
+ fallbackHex: "#000000"
+ })}
+
+
`
})}
-
-
-
- Peak color
- ${this._renderColorInput({
- id: "peak-color",
- field: "peak-color",
- value: cardPeak.color,
- fallbackHex: "#888",
- placeholder: "#888"
- })}
-
-
-
-
-
-
-
Bar Appearance
-
Choose the bar rendering mode and base bar colors.
-
-
-
- Fill style
-
- solid
- gradient
- bands
- band_gradient
- soft_bands
-
-
-
-
- Bar color
- ${this._renderColorInput({
- id: "bar-color",
- field: "bar-color",
- value: barColor,
- fallbackHex: "#4a9eff",
- placeholder: "#4a9eff"
- })}
-
+
Needle enabled
@@ -8966,7 +11914,7 @@ ${paintLayers}
if (!this.shadowRoot) return;
const entities = this._getEntitiesValue();
const syncPicker = (picker) => {
- var _a;
+ var _a, _b, _c, _d;
const kind = picker.dataset.kind;
const indexValue = picker.dataset.index;
const index = Number(indexValue);
@@ -9016,6 +11964,19 @@ ${paintLayers}
if (kind === "entity-target-entity-source") {
picker.value = this._getEffectiveTargetResolvableValue({ type: "entity", index }).entity;
picker.label = `Entity ${index + 1} target entity`;
+ return;
+ }
+ if (kind === "generic-marker-entity") {
+ const scope = this._getGenericMarkerScope(picker);
+ const marker = this._getGenericMarkers(scope)[Number(picker.dataset.markerIndex)];
+ picker.value = (_b = this._getGenericMarkerSource(marker).entity) != null ? _b : "";
+ picker.label = "Reference marker entity";
+ }
+ if (kind === "generic-marker-label-entity") {
+ const scope = this._getGenericMarkerScope(picker);
+ const marker = this._getGenericMarkers(scope)[Number(picker.dataset.markerIndex)];
+ picker.value = (_d = (_c = marker == null ? void 0 : marker.label) == null ? void 0 : _c.entity) != null ? _d : "";
+ picker.label = "Label content entity";
}
};
[
@@ -9027,7 +11988,9 @@ ${paintLayers}
'ha-entity-picker[data-kind="entity-override-min-entity-source"]',
'ha-entity-picker[data-kind="entity-override-max-entity-source"]',
'ha-entity-picker[data-kind="entity-baseline-entity-source"]',
- 'ha-entity-picker[data-kind="entity-target-entity-source"]'
+ 'ha-entity-picker[data-kind="entity-target-entity-source"]',
+ 'ha-entity-picker[data-kind="generic-marker-entity"]',
+ 'ha-entity-picker[data-kind="generic-marker-label-entity"]'
].forEach((selector) => {
this.shadowRoot.querySelectorAll(selector).forEach(syncPicker);
});
@@ -9042,7 +12005,9 @@ ${paintLayers}
'ha-entity-picker[data-kind="entity-override-min-entity-source"]',
'ha-entity-picker[data-kind="entity-override-max-entity-source"]',
'ha-entity-picker[data-kind="entity-baseline-entity-source"]',
- 'ha-entity-picker[data-kind="entity-target-entity-source"]'
+ 'ha-entity-picker[data-kind="entity-target-entity-source"]',
+ 'ha-entity-picker[data-kind="generic-marker-entity"]',
+ 'ha-entity-picker[data-kind="generic-marker-label-entity"]'
].forEach((selector) => {
var _a;
(_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(selector).forEach(syncPicker);
@@ -9104,10 +12069,48 @@ ${paintLayers}
this._toggleCardGroupExpanded(target.dataset.group);
return;
}
+ if (action === "toggle-generic-marker") {
+ this._toggleGenericMarkerExpanded(target.dataset.markerUiId);
+ return;
+ }
if (action === "remove-entity") {
this._removeEntityRow(Number(target.dataset.index));
return;
}
+ if (action === "remove-baseline") {
+ const scope = target.dataset.scopeType === "entity" ? { type: "entity", index: Number(target.dataset.index) } : { type: "card" };
+ this._removeBaseline(scope);
+ return;
+ }
+ if (action === "add-generic-marker") {
+ const scope = this._getGenericMarkerScope(target);
+ const markers = this._getGenericMarkers(scope);
+ const markerUiIds = this._getGenericMarkerUiIds(scope, markers.length);
+ markers.push({ at: { fixed: 50 } });
+ const markerUiId = `marker-${++this._nextGenericMarkerUiId}`;
+ markerUiIds.push(markerUiId);
+ this._expandedGenericMarkerUiIds.add(markerUiId);
+ this._setGenericMarkerList(scope, markers, { rerender: true });
+ return;
+ }
+ if (action === "remove-generic-marker" || action === "move-generic-marker-up" || action === "move-generic-marker-down") {
+ const scope = this._getGenericMarkerScope(target);
+ const markerIndex = Number(target.dataset.markerIndex);
+ const markers = this._getGenericMarkers(scope);
+ const markerUiIds = this._getGenericMarkerUiIds(scope, markers.length);
+ if (action === "remove-generic-marker") {
+ markers.splice(markerIndex, 1);
+ this._expandedGenericMarkerUiIds.delete(markerUiIds[markerIndex]);
+ markerUiIds.splice(markerIndex, 1);
+ } else {
+ const nextIndex = markerIndex + (action === "move-generic-marker-up" ? -1 : 1);
+ if (nextIndex < 0 || nextIndex >= markers.length) return;
+ [markers[markerIndex], markers[nextIndex]] = [markers[nextIndex], markers[markerIndex]];
+ [markerUiIds[markerIndex], markerUiIds[nextIndex]] = [markerUiIds[nextIndex], markerUiIds[markerIndex]];
+ }
+ this._setGenericMarkerList(scope, markers, { rerender: true });
+ return;
+ }
if (action === "add-gradient-stop") {
this._queuePostRenderFocus("#gradient-draft-pos");
this._commitGradientStopDraft({ type: "card" });
@@ -9307,6 +12310,22 @@ ${paintLayers}
const kind = (rawKind == null ? void 0 : rawKind.endsWith("-text-fallback")) ? rawKind.slice(0, -14) : rawKind;
const detailValue = (_c = event.detail) == null ? void 0 : _c.value;
const value = detailValue != null ? detailValue : (target == null ? void 0 : target.type) === "checkbox" ? target.checked : target == null ? void 0 : target.value;
+ if (kind === "entity-markers-inherit") {
+ const scope = { type: "entity", index: Number(target.dataset.index) };
+ this._resetGenericMarkerUiScope(scope);
+ if (value) this._removeScopedValue(scope, ["markers"], { rerender: true });
+ else this._setGenericMarkerList(scope, this._getGenericMarkers(scope), { rerender: true });
+ return;
+ }
+ if (kind == null ? void 0 : kind.startsWith("generic-marker-")) {
+ this._setGenericMarkerField(
+ this._getGenericMarkerScope(target),
+ Number(target.dataset.markerIndex),
+ kind,
+ value
+ );
+ return;
+ }
if (field === "title") return void this._setTitle(value);
if (field === "formatting-unit") return void this._setScopedFormattingUnit({ type: "card" }, value);
if (field === "formatting-decimal") return void this._setScopedFormattingDecimal({ type: "card" }, value);
@@ -9334,12 +12353,31 @@ ${paintLayers}
if (field === "target-value") {
return void this._setTargetResolvablePart({ type: "card" }, "fixed", value);
}
+ if (field === "target-shape") return void this._setTargetShape({ type: "card" }, value);
+ if (field === "target-direction") return void this._setMarkerDirection({ type: "card" }, "target", value);
if (field === "target-color") return void this._setTargetColor({ type: "card" }, value);
- if (field === "target-label-show") return void this._setTargetLabelShow({ type: "card" }, value);
+ if ((field == null ? void 0 : field.startsWith("target-label-")) || (field == null ? void 0 : field.startsWith("peak-label-")) || (field == null ? void 0 : field.startsWith("floor-label-"))) {
+ const key = field.startsWith("target-") ? "target" : field.startsWith("peak-") ? "peak" : "floor";
+ const option = field.slice(`${key}-label-`.length);
+ const scope = { type: "card" };
+ if (option === "show") {
+ this._setBuiltinMarkerLabelField(scope, key, "show", value);
+ } else {
+ const labelField = option === "show-value" ? "showValue" : option === "show-unit" ? "showUnit" : option;
+ this._setBuiltinMarkerLabelField(scope, key, labelField, value);
+ }
+ return;
+ }
if (field === "target-above-fill-enabled") return void this._setTargetAboveFillEnabled({ type: "card" }, value);
if (field === "target-above-fill-color") return void this._setTargetAboveFillColor({ type: "card" }, value);
if (field === "peak-show") return void this._setPeakShow(value);
if (field === "peak-color") return void this._setScopedPeakColor({ type: "card" }, value);
+ if (field === "peak-direction") return void this._setMarkerDirection({ type: "card" }, "peak", value);
+ if (field === "peak-reset") return void this._setScopedExtremumReset({ type: "card" }, "peak", value);
+ if (field === "floor-show") return void this._setScopedExtremumEnabled({ type: "card" }, "floor", value);
+ if (field === "floor-color") return void this._setScopedExtremumColor({ type: "card" }, "floor", value);
+ if (field === "floor-direction") return void this._setMarkerDirection({ type: "card" }, "floor", value);
+ if (field === "floor-reset") return void this._setScopedExtremumReset({ type: "card" }, "floor", value);
if (kind === "entity-picker" || kind === "entity-input") {
const index = Number(target.dataset.index);
const nextEntities = this._getEntitiesValue().map((entry, entryIndex) => entryIndex === index ? { ...entry, entity: this._normalizeTextValue(value) } : entry);
@@ -9432,6 +12470,39 @@ ${paintLayers}
if (kind === "entity-peak-color") {
return void this._setScopedPeakColor({ type: "entity", index: Number(target.dataset.index) }, value);
}
+ if (kind === "entity-peak-direction") {
+ return void this._setMarkerDirection({ type: "entity", index: Number(target.dataset.index) }, "peak", value);
+ }
+ if (kind === "entity-peak-reset") {
+ return void this._setScopedExtremumReset({ type: "entity", index: Number(target.dataset.index) }, "peak", value);
+ }
+ const entityLabelMatch = kind == null ? void 0 : kind.match(/^entity-(target|peak|floor)-label-(show|text|show-value|show-unit|precision)$/);
+ if (entityLabelMatch) {
+ const [, key, option] = entityLabelMatch;
+ const scope = { type: "entity", index: Number(target.dataset.index) };
+ if (option === "show") {
+ this._setBuiltinMarkerLabelField(scope, key, "show", value);
+ } else {
+ this._setBuiltinMarkerLabelField(scope, key, option === "show-value" ? "showValue" : option === "show-unit" ? "showUnit" : option, value);
+ }
+ return;
+ }
+ if (kind === "entity-floor-inherit") {
+ if (value) return void this._clearFloorOverride({ type: "entity", index: Number(target.dataset.index) });
+ return;
+ }
+ if (kind === "entity-floor-enabled") {
+ return void this._setScopedExtremumEnabled({ type: "entity", index: Number(target.dataset.index) }, "floor", value);
+ }
+ if (kind === "entity-floor-color") {
+ return void this._setScopedExtremumColor({ type: "entity", index: Number(target.dataset.index) }, "floor", value);
+ }
+ if (kind === "entity-floor-direction") {
+ return void this._setMarkerDirection({ type: "entity", index: Number(target.dataset.index) }, "floor", value);
+ }
+ if (kind === "entity-floor-reset") {
+ return void this._setScopedExtremumReset({ type: "entity", index: Number(target.dataset.index) }, "floor", value);
+ }
if (kind === "entity-segments-inherit") {
if (value) {
return void this._clearSegmentsOverride({ type: "entity", index: Number(target.dataset.index) });
@@ -9510,15 +12581,18 @@ ${paintLayers}
if (kind === "entity-target-value") {
return void this._setTargetResolvablePart({ type: "entity", index: Number(target.dataset.index) }, "fixed", value);
}
+ if (kind === "entity-target-shape") {
+ return void this._setTargetShape({ type: "entity", index: Number(target.dataset.index) }, value);
+ }
+ if (kind === "entity-target-direction") {
+ return void this._setMarkerDirection({ type: "entity", index: Number(target.dataset.index) }, "target", value);
+ }
if (kind === "entity-target-entity-source") {
return void this._setTargetResolvablePart({ type: "entity", index: Number(target.dataset.index) }, "entity", value);
}
if (kind === "entity-target-color") {
return void this._setTargetColor({ type: "entity", index: Number(target.dataset.index) }, value);
}
- if (kind === "entity-target-label-show") {
- return void this._setTargetLabelShow({ type: "entity", index: Number(target.dataset.index) }, value);
- }
if (kind === "entity-target-above-fill-enabled") {
return void this._setTargetAboveFillEnabled({ type: "entity", index: Number(target.dataset.index) }, value);
}
diff --git a/www/community/sensor-bar-card-plus/sensor-bar-card-plus.js.gz b/www/community/sensor-bar-card-plus/sensor-bar-card-plus.js.gz
index 7b18d241..44aa27ca 100644
Binary files a/www/community/sensor-bar-card-plus/sensor-bar-card-plus.js.gz and b/www/community/sensor-bar-card-plus/sensor-bar-card-plus.js.gz differ
diff --git a/zigbee2mqtt/state.json b/zigbee2mqtt/state.json
index 57b8abaa..4c59661e 100644
--- a/zigbee2mqtt/state.json
+++ b/zigbee2mqtt/state.json
@@ -4,10 +4,10 @@
"state": "ON",
"led_brightness": 100,
"countdown_to_turn_off": 0,
- "voltage": 120.7,
+ "voltage": 121,
"countdown_to_turn_on": 0,
"ac_frequency": 60,
- "power_factor": 0.13,
+ "power_factor": 0.11,
"update": {
"state": "idle",
"installed_version": 268513381,
@@ -17,7 +17,7 @@
},
"power": 0.4,
"linkquality": 149,
- "current": 0.07,
+ "current": 0.03,
"power_on_behavior": "on"
},
"0xffffb40e0607af27": {
@@ -27,7 +27,7 @@
"led_brightness": 100,
"countdown_to_turn_off": 0,
"countdown_to_turn_on": 0,
- "power": 2,
+ "power": 2.2,
"current": 0.1,
"energy": 53.23,
"power_factor": 0.17,
@@ -45,10 +45,10 @@
"state": "ON",
"led_brightness": 100,
"countdown_to_turn_off": 0,
- "voltage": 120,
+ "voltage": 120.6,
"countdown_to_turn_on": 0,
"energy": 102.22,
- "power_factor": 0.31,
+ "power_factor": 0.2,
"ac_frequency": 60,
"update": {
"state": "idle",
@@ -74,12 +74,12 @@
"led_brightness": 100,
"countdown_to_turn_off": 0,
"countdown_to_turn_on": 0,
- "voltage": 118.8,
+ "voltage": 119.9,
"state": "ON",
"ac_frequency": 60,
- "energy": 207.68,
- "power": 99.8,
- "current": 0.9,
+ "energy": 207.71,
+ "power": 102,
+ "current": 0.92,
"power_factor": 0.93,
"update": {
"state": "idle",
@@ -95,13 +95,13 @@
"led_brightness": 100,
"countdown_to_turn_off": 0,
"countdown_to_turn_on": 0,
- "voltage": 120.3,
- "energy": 99.92,
+ "voltage": 120.8,
+ "energy": 99.93,
"state": "ON",
- "power": 42.2,
+ "power": 42.7,
"current": 0.4,
"ac_frequency": 60,
- "power_factor": 0.85,
+ "power_factor": 0.86,
"update": {
"state": "idle",
"installed_version": 268513381,
@@ -114,11 +114,11 @@
},
"0xffffb40e060895b3": {
"state": "ON",
- "voltage": 120.5,
+ "voltage": 120.8,
"ac_frequency": 60,
- "energy": 14.05,
- "current": 0.01,
- "power": 0.2,
+ "energy": 14.07,
+ "current": 0.02,
+ "power": 0.1,
"power_factor": 0.11,
"linkquality": 116,
"update": {
@@ -136,7 +136,7 @@
"0xffffb40e0608864e": {
"led_brightness": 100,
"countdown_to_turn_off": 0,
- "voltage": 120.8,
+ "voltage": 121.3,
"energy": 33.49,
"countdown_to_turn_on": 0,
"state": "ON",
@@ -171,7 +171,7 @@
},
"0xa4c1380d0679ffff": {
"battery": 100,
- "temperature": 21,
+ "temperature": 20.9,
"temperature_units": "celsius",
"temperature_calibration": 0,
"update": {
@@ -223,12 +223,12 @@
"linkquality": 54
},
"0xb40e060fffe717c5": {
- "battery": 92,
+ "battery": 100,
"occupancy": false,
"tamper": false,
"battery_low": false,
"linkquality": 145,
- "voltage": 2900,
+ "voltage": 3000,
"update": {
"state": "idle",
"installed_version": 79,