Fix getWeatherExtrema when either is 0° (#55687)

* Fix getWeatherExtrema when either is 0°

* Update src/data/weather.ts

Co-authored-by: Petar Petrov <[email protected]>

* Simplify tempLow assignment conditions

Refactor temperature low assignment logic in weather.ts

* Prettier

* Apply suggestion from @MindFreeze

Co-authored-by: Petar Petrov <[email protected]>

---------

Co-authored-by: Petar Petrov <[email protected]>

src/components/chart/timeline-color.ts

@@ -35,29 +35,26 @@ function computeTimelineStateColor(
 
   const domain = computeDomain(stateObj.entity_id);
 
-  // Zone states would all share --state-person-active-color, so only an
-  // exact state variable may color them, like states of uncolored domains.
-  const isZoneState =
+  // Zone states for person/device_tracker don't have specific CSS color variables,
+  // so they all fall back to the same --state-person-active-color.
+  // Only use a custom CSS variable if explicitly defined (e.g. --state-person-kitchen-color),
+  // otherwise return undefined to get unique colors from the generic color handler.
+  if (
     (domain === "person" || domain === "device_tracker") &&
-    !((FIXED_DOMAIN_STATES[domain] || []) as readonly string[]).includes(state);
-  const properties = isZoneState
-    ? undefined
-    : stateColorProperties(stateObj, state);
-
-  if (!properties) {
-    const stateKey = slugify(state, "_");
-    const deviceClass = stateObj.attributes.device_class;
+    !((FIXED_DOMAIN_STATES[domain] || []) as readonly string[]).includes(state)
+  ) {
     return computeCssValue(
-      [
-        ...(deviceClass
-          ? [`--state-${domain}-${deviceClass}-${stateKey}-color`]
-          : []),
-        `--state-${domain}-${stateKey}-color`,
-      ],
+      `--state-${domain}-${slugify(state, "_")}-color`,
       computedStyles
     );
   }
 
+  const properties = stateColorProperties(stateObj, state);
+
+  if (!properties) {
+    return undefined;
+  }
+
   const rgb = computeCssValue(properties, computedStyles);
 
   if (!rgb) return undefined;

src/data/weather.ts

@@ -364,19 +364,25 @@ const getWeatherExtrema = (
     if (new Date(fc.datetime).getDate() !== today) {
       break;
     }
-    if (!tempHigh || fc.temperature > tempHigh) {
+    if (fc.temperature == null) {
+      continue;
+    }
+    if (tempHigh === undefined || fc.temperature > tempHigh) {
       tempHigh =
         temperatureFractionDigits === undefined
           ? fc.temperature
           : round(fc.temperature, temperatureFractionDigits);
     }
-    if (fc.templow !== undefined && (!tempLow || fc.templow < tempLow)) {
+    if (fc.templow != null && (tempLow === undefined || fc.templow < tempLow)) {
       tempLow =
         temperatureFractionDigits === undefined
           ? fc.templow
           : round(fc.templow, temperatureFractionDigits);
     }
-    if (!fc.templow && (!tempLow || fc.temperature < tempLow)) {
+    if (
+      fc.templow == null &&
+      (tempLow === undefined || fc.temperature < tempLow)
+    ) {
       tempLow =
         temperatureFractionDigits === undefined
           ? fc.temperature
@@ -384,19 +390,19 @@ const getWeatherExtrema = (
     }
   }
 
-  if (!tempLow && !tempHigh) {
+  if (tempLow === undefined && tempHigh === undefined) {
     return undefined;
   }
 
   return html`
     ${
-      tempHigh
+      tempHigh !== undefined
         ? formatEntityAttributeValue(stateObj, "temperature", tempHigh)
         : ""
     }
-    ${tempLow && tempHigh ? " / " : ""}
+    ${tempLow !== undefined && tempHigh !== undefined ? " / " : ""}
     ${
-      tempLow
+      tempLow !== undefined
         ? formatEntityAttributeValue(stateObj, "temperature", tempLow)
         : ""
     }

test/components/chart/timeline-color.test.ts

@@ -1,48 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import { describe, expect, it } from "vitest";
-import { computeTimelineColor } from "../../../src/components/chart/timeline-color";
-import { createMockComputedStyle } from "../../fixtures/computed-style";
-
-const entity = (
-  entity_id: string,
-  attributes: Record<string, unknown> = {}
-): HassEntity =>
-  ({
-    entity_id,
-    state: "",
-    attributes,
-    last_changed: "",
-    last_updated: "",
-    context: { id: "", parent_id: null, user_id: null },
-  }) as HassEntity;
-
-describe("computeTimelineColor", () => {
-  it("uses a themed color for a custom state of an uncolored domain", () => {
-    const styles = createMockComputedStyle({
-      "--state-sensor-heating-color": "#ff0000",
-      "--state-sensor-power-heating-color": "#00ff00",
-    });
-
-    expect(
-      computeTimelineColor("Heating", styles, entity("sensor.heat_pump"))
-    ).toBe("#ff0000");
-    expect(
-      computeTimelineColor(
-        "Heating",
-        styles,
-        entity("sensor.heat_pump", { device_class: "power" })
-      )
-    ).toBe("#00ff00");
-  });
-
-  it("keeps active/inactive fallbacks away from uncolored domains", () => {
-    const styles = createMockComputedStyle({
-      "--state-active-color": "#123456",
-      "--state-sensor-active-color": "#654321",
-    });
-
-    expect(
-      computeTimelineColor("Heating", styles, entity("sensor.heat_pump"))
-    ).not.toMatch(/^#(123456|654321)$/);
-  });
-});