20250205.0 (#24088)

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20250129.0"
+version      = "20250205.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

src/common/color/colors.ts

@@ -1,3 +1,4 @@
+import memoizeOne from "memoize-one";
 import { theme2hex } from "./convert-color";
 
 export const COLORS = [
@@ -74,3 +75,12 @@ export function getGraphColorByIndex(
     getColorByIndex(index);
   return theme2hex(themeColor);
 }
+
+export const getAllGraphColors = memoizeOne(
+  (style: CSSStyleDeclaration) =>
+    COLORS.map((_color, index) => getGraphColorByIndex(index, style)),
+  (newArgs: [CSSStyleDeclaration], lastArgs: [CSSStyleDeclaration]) =>
+    // this is not ideal, but we need to memoize the colors
+    newArgs[0].getPropertyValue("--graph-color-1") ===
+    lastArgs[0].getPropertyValue("--graph-color-1")
+);

src/components/chart/axis-label.ts

@@ -1,62 +1,51 @@
 import type { HassConfig } from "home-assistant-js-websocket";
-import type { XAXisOption } from "echarts/types/dist/shared";
 import type { FrontendLocaleData } from "../../data/translation";
 import {
   formatDateMonth,
   formatDateMonthYear,
   formatDateVeryShort,
   formatDateWeekdayShort,
 } from "../../common/datetime/format_date";
-import { formatTime } from "../../common/datetime/format_time";
+import {
+  formatTime,
+  formatTimeWithSeconds,
+} from "../../common/datetime/format_time";
 
-export function getLabelFormatter(
+export function formatTimeLabel(
+  value: number | Date,
   locale: FrontendLocaleData,
   config: HassConfig,
-  dayDifference = 0
+  minutesDifference: number
 ) {
-  return (value: number | Date) => {
-    const date = new Date(value);
-    if (dayDifference > 88) {
-      return date.getMonth() === 0
-        ? `{bold|${formatDateMonthYear(date, locale, config)}}`
-        : formatDateMonth(date, locale, config);
-    }
-    if (dayDifference > 35) {
-      return date.getDate() === 1
-        ? `{bold|${formatDateVeryShort(date, locale, config)}}`
-        : formatDateVeryShort(date, locale, config);
-    }
-    if (dayDifference > 7) {
-      const label = formatDateVeryShort(date, locale, config);
-      return date.getDate() === 1 ? `{bold|${label}}` : label;
-    }
-    if (dayDifference > 2) {
-      return formatDateWeekdayShort(date, locale, config);
-    }
+  const dayDifference = minutesDifference / 60 / 24;
+  const date = new Date(value);
+  if (dayDifference > 88) {
+    return date.getMonth() === 0
+      ? `{bold|${formatDateMonthYear(date, locale, config)}}`
+      : formatDateMonth(date, locale, config);
+  }
+  if (dayDifference > 35) {
+    return date.getDate() === 1
+      ? `{bold|${formatDateVeryShort(date, locale, config)}}`
+      : formatDateVeryShort(date, locale, config);
+  }
+  if (dayDifference > 7) {
+    const label = formatDateVeryShort(date, locale, config);
+    return date.getDate() === 1 ? `{bold|${label}}` : label;
+  }
+  if (dayDifference > 2) {
+    return formatDateWeekdayShort(date, locale, config);
+  }
+  if (minutesDifference && minutesDifference < 5) {
+    return formatTimeWithSeconds(date, locale, config);
+  }
+  if (
+    date.getHours() === 0 &&
+    date.getMinutes() === 0 &&
+    date.getSeconds() === 0
+  ) {
     // show only date for the beginning of the day
-    if (
-      date.getHours() === 0 &&
-      date.getMinutes() === 0 &&
-      date.getSeconds() === 0
-    ) {
-      return `{bold|${formatDateVeryShort(date, locale, config)}}`;
-    }
-    return formatTime(date, locale, config);
-  };
-}
-
-export function getTimeAxisLabelConfig(
-  locale: FrontendLocaleData,
-  config: HassConfig,
-  dayDifference?: number
-): XAXisOption["axisLabel"] {
-  return {
-    formatter: getLabelFormatter(locale, config, dayDifference),
-    rich: {
-      bold: {
-        fontWeight: "bold",
-      },
-    },
-    hideOverlap: true,
-  };
+    return `{bold|${formatDateVeryShort(date, locale, config)}}`;
+  }
+  return formatTime(date, locale, config);
 }