20221208.0 (#14644)

gallery/src/pages/components/ha-alert.markdown

@@ -1,5 +1,5 @@
 ---
-title: Alerts
+title: Alert
 subtitle: An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 ---
 

gallery/src/pages/components/ha-bar.markdown

@@ -1,3 +1,4 @@
 ---
-title: Progress Bars
+title: Bar
+subtitle: Can be used to communicate progress of a task.
 ---

gallery/src/pages/components/ha-selector.markdown

@@ -1,5 +1,5 @@
 ---
-title: Selectors
+title: Selector
 ---
 
 See the website for [list of available selectors](https://www.home-assistant.io/docs/blueprint/selectors/).

gallery/src/pages/lovelace/entities-card.ts

@@ -142,6 +142,25 @@ const CONFIGS = [
     heading: "Basic",
     config: `
 - type: entities
+  entities:
+    - scene.romantic_lights
+    - device_tracker.demo_paulus
+    - cover.kitchen_window
+    - group.kitchen
+    - lock.kitchen_door
+    - light.bed_light
+    - light.non_existing
+    - climate.ecobee
+    - input_number.number
+    - sensor.humidity
+    - text.message
+    `,
+  },
+  {
+    heading: "With enabled state color",
+    config: `
+- type: entities
+  state_color: true
   entities:
     - scene.romantic_lights
     - device_tracker.demo_paulus

gallery/src/pages/lovelace/entity-button-card.ts

@@ -35,11 +35,11 @@ const CONFIGS = [
     `,
   },
   {
-    heading: "Without State",
+    heading: "With State",
     config: `
 - type: button
   entity: light.bed_light
-  show_state: false
+  show_state: true
     `,
   },
   {

gallery/src/pages/lovelace/glance-card.ts

@@ -62,6 +62,21 @@ const CONFIGS = [
     heading: "Basic example",
     config: `
 - type: glance
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `,
+  },
+  {
+    heading: "No state colors",
+    config: `
+- type: glance
+  state_color: false
   entities:
     - device_tracker.demo_paulus
     - media_player.living_room

gallery/src/pages/lovelace/grid-and-stack-card.markdown

@@ -1,3 +1,3 @@
 ---
-title: Grid And Stack Card
+title: Grid and Stack Card
 ---

pyproject.toml

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

src/common/entity/color/battery_color.ts

@@ -1,7 +1,5 @@
-import { HassEntity } from "home-assistant-js-websocket";
-
-export const batteryStateColor = (stateObj: HassEntity) => {
-  const value = Number(stateObj.state);
+export const batteryStateColor = (state: string) => {
+  const value = Number(state);
   if (isNaN(value)) {
     return "sensor-battery-unknown";
   }

src/common/entity/color/person_color.ts

@@ -1,7 +1,5 @@
-import { HassEntity } from "home-assistant-js-websocket";
-
-export const personColor = (stateObj: HassEntity): string | undefined => {
-  switch (stateObj.state) {
+export const personColor = (state: string): string | undefined => {
+  switch (state) {
     case "home":
       return "person-home";
     default:

src/common/entity/color/sensor_color.ts

@@ -1,11 +1,14 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { batteryStateColor } from "./battery_color";
 
-export const sensorColor = (stateObj: HassEntity): string | undefined => {
+export const sensorColor = (
+  stateObj: HassEntity,
+  compareState: string
+): string | undefined => {
   const deviceClass = stateObj?.attributes.device_class;
 
   if (deviceClass === "battery") {
-    return batteryStateColor(stateObj);
+    return batteryStateColor(compareState);
   }
 
   return undefined;

src/common/entity/state_color.ts

@@ -67,10 +67,10 @@ export const stateColor = (stateObj: HassEntity, state?: string) => {
 
     case "person":
     case "device_tracker":
-      return personColor(stateObj);
+      return personColor(compareState);
 
     case "sensor":
-      return sensorColor(stateObj);
+      return sensorColor(stateObj, compareState);
 
     case "sun":
       return compareState === "above_horizon" ? "sun-day" : "sun-night";

src/components/chart/state-history-chart-line.ts

@@ -47,7 +47,7 @@ class StateHistoryChartLine extends LitElement {
   }
 
   public willUpdate(changedProps: PropertyValues) {
-    if (!this.hasUpdated) {
+    if (!this.hasUpdated || changedProps.has("showNames")) {
       this._chartOptions = {
         parsing: false,
         animation: false,

src/components/chart/state-history-chart-timeline.ts

@@ -64,7 +64,11 @@ export class StateHistoryChartTimeline extends LitElement {
       this._generateData();
     }
 
-    if (changedProps.has("startTime") || changedProps.has("endTime")) {
+    if (
+      changedProps.has("startTime") ||
+      changedProps.has("endTime") ||
+      changedProps.has("showNames")
+    ) {
       this._createOptions();
     }
   }

src/components/chart/statistics-chart.ts

@@ -32,14 +32,26 @@ import {
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 
-export type ExtendedStatisticType = StatisticType | "state" | "change";
+export type ExtendedStatisticType = StatisticType | "change";
+
+export const supportedStatTypeMap: Record<
+  ExtendedStatisticType,
+  StatisticType
+> = {
+  mean: "mean",
+  min: "min",
+  max: "max",
+  sum: "sum",
+  state: "sum",
+  change: "sum",
+};
 
 export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
   mean: "mean",
   min: "min",
   max: "max",
   sum: "sum",
-  state: "sum",
+  state: "state",
   change: "sum",
 };
 

src/components/ha-date-input.ts

@@ -57,7 +57,10 @@ export class HaDateInput extends LitElement {
       readonly
       @click=${this._openDialog}
       .value=${this.value
-        ? formatDateNumeric(new Date(`${this.value}T00:00:00`), this.locale)
+        ? formatDateNumeric(
+            new Date(`${this.value.split("T")[0]}T00:00:00`),
+            this.locale
+          )
         : ""}
       .required=${this.required}
     >

src/data/vacuum.ts

@@ -53,7 +53,7 @@ export function canStart(stateObj: VacuumEntity): boolean {
 }
 
 export function canStop(stateObj: VacuumEntity): boolean {
-  return !["docked", "off"].includes(stateObj.state);
+  return !["docked", "off", "idle"].includes(stateObj.state);
 }
 
 export function canReturnHome(stateObj: VacuumEntity): boolean {

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -11,6 +11,7 @@ import {
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
 import { isDate } from "../../common/string/is_date";
 import "../../components/ha-date-input";
 import "../../components/ha-textarea";
@@ -94,6 +95,21 @@ class DialogCalendarEventEditor extends LitElement {
     }
   }
 
+  public closeDialog(): void {
+    if (!this._params) {
+      return;
+    }
+    this._calendars = [];
+    this._calendarId = undefined;
+    this._params = undefined;
+    this._dtstart = undefined;
+    this._dtend = undefined;
+    this._summary = "";
+    this._description = "";
+    this._rrule = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected render(): TemplateResult {
     if (!this._params) {
       return html``;
@@ -108,7 +124,7 @@ class DialogCalendarEventEditor extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed=${this._close}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${html`
@@ -432,11 +448,12 @@ class DialogCalendarEventEditor extends LitElement {
       );
     } catch (err: any) {
       this._error = err ? err.message : "Unknown error";
+      return;
     } finally {
       this._submitting = false;
     }
     await this._params!.updated();
-    this._params = undefined;
+    this.closeDialog();
   }
 
   private async _saveEvent() {
@@ -490,18 +507,7 @@ class DialogCalendarEventEditor extends LitElement {
       this._submitting = false;
     }
     await this._params!.updated();
-    this._close();
-  }
-
-  private _close(): void {
-    this._calendars = [];
-    this._calendarId = undefined;
-    this._params = undefined;
-    this._dtstart = undefined;
-    this._dtend = undefined;
-    this._summary = "";
-    this._description = "";
-    this._rrule = undefined;
+    this.closeDialog();
   }
 
   static get styles(): CSSResultGroup {

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -144,7 +144,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
             .historyData=${this._stateHistory}
             .names=${this._names}
             up-to-now
-            .showNames=${this._config.show_names}
+            .showNames=${this._config.show_names !== undefined
+              ? this._config.show_names
+              : true}
           ></state-history-charts>
         </div>
       </ha-card>

src/panels/lovelace/cards/hui-statistics-graph-card.ts

@@ -9,7 +9,10 @@ import {
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import "../../../components/chart/statistics-chart";
+import {
+  ExtendedStatisticType,
+  statTypeMap,
+} from "../../../components/chart/statistics-chart";
 import "../../../components/ha-card";
 import {
   fetchStatistics,
@@ -17,7 +20,6 @@ import {
   getStatisticMetadata,
   Statistics,
   StatisticsMetaData,
-  StatisticsTypes,
 } from "../../../data/recorder";
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entities";
@@ -70,7 +72,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
 
   private _interval?: number;
 
-  private _statTypes?: StatisticsTypes;
+  private _statTypes?: Array<ExtendedStatisticType>;
 
   public disconnectedCallback() {
     super.disconnectedCallback();
@@ -152,7 +154,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
 
     if (
       changedProps.has("_config") &&
-      (oldConfig?.entities !== this._config.entities ||
+      (oldConfig?.stat_types !== this._config.stat_types ||
         oldConfig?.days_to_show !== this._config.days_to_show ||
         oldConfig?.period !== this._config.period ||
         oldConfig?.unit !== this._config.unit)
@@ -249,7 +251,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
         this._entities,
         this._config!.period,
         unitconfig,
-        this._statTypes
+        this._statTypes?.map((stat_type) => statTypeMap[stat_type])
       );
     } catch (err) {
       this._statistics = undefined;

src/panels/lovelace/cards/hui-tile-card.ts

@@ -12,6 +12,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
 import { stateActive } from "../../../common/entity/state_active";
 import { stateColorCss } from "../../../common/entity/state_color";
 import { stateIconPath } from "../../../common/entity/state_icon_path";
+import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 import "../../../components/ha-card";
 import "../../../components/tile/ha-tile-badge";
 import "../../../components/tile/ha-tile-icon";
@@ -192,30 +193,35 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
     if (domain === "light" && stateObj.state === ON) {
       const brightness = (stateObj as LightEntity).attributes.brightness;
       if (brightness) {
-        return `${Math.round((brightness * 100) / 255)}%`;
-      }
-    }
-
-    if (domain === "cover" && stateObj.state === "open") {
-      const position = (stateObj as CoverEntity).attributes.current_position;
-      if (position) {
-        return `${Math.round(position)}%`;
+        return `${Math.round((brightness * 100) / 255)}${blankBeforePercent(
+          this.hass!.locale
+        )}%`;
       }
     }
 
     if (domain === "fan" && stateObj.state === ON) {
       const speed = (stateObj as FanEntity).attributes.percentage;
       if (speed) {
-        return `${Math.round(speed)}%`;
+        return `${Math.round(speed)}${blankBeforePercent(this.hass!.locale)}%`;
       }
     }
 
-    return computeStateDisplay(
+    const stateDisplay = computeStateDisplay(
       this.hass!.localize,
       stateObj,
       this.hass!.locale,
       this.hass!.entities
     );
+
+    if (domain === "cover" && stateObj.state === "open") {
+      const position = (stateObj as CoverEntity).attributes.current_position;
+      if (position && position !== 100) {
+        return `${stateDisplay} - ${Math.round(position)}${blankBeforePercent(
+          this.hass!.locale
+        )}%`;
+      }
+    }
+    return stateDisplay;
   }
 
   protected render(): TemplateResult {

src/panels/lovelace/cards/types.ts

@@ -1,4 +1,4 @@
-import { Statistic, StatisticType } from "../../../data/recorder";
+import { Statistic } from "../../../data/recorder";
 import { ActionConfig, LovelaceCardConfig } from "../../../data/lovelace";
 import { FullCalendarView, TranslationDict } from "../../../types";
 import { Condition } from "../common/validate-condition";
@@ -10,6 +10,7 @@ import {
   LovelaceRowConfig,
 } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
+import { ExtendedStatisticType } from "../../../components/chart/statistics-chart";
 import { HaDurationData } from "../../../components/ha-duration-input";
 import { LovelaceTileFeatureConfig } from "../tile-features/types";
 
@@ -309,7 +310,7 @@ export interface StatisticsGraphCardConfig extends LovelaceCardConfig {
   unit?: string;
   days_to_show?: number;
   period?: "5minute" | "hour" | "day" | "month";
-  stat_types?: StatisticType | StatisticType[];
+  stat_types?: ExtendedStatisticType | ExtendedStatisticType[];
   chart_type?: "line" | "bar";
 }
 

src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts

@@ -26,6 +26,7 @@ import { deepEqual } from "../../../../common/util/deep-equal";
 import {
   ExtendedStatisticType,
   statTypeMap,
+  supportedStatTypeMap,
 } from "../../../../components/chart/statistics-chart";
 import "../../../../components/entity/ha-statistics-picker";
 import "../../../../components/ha-form/ha-form";
@@ -185,7 +186,10 @@ export class HuiStatisticsGraphCardEditor
                     disabled:
                       !metaDatas ||
                       !metaDatas.every((metaData) =>
-                        statisticsMetaHasType(metaData, statTypeMap[stat_type])
+                        statisticsMetaHasType(
+                          metaData,
+                          supportedStatTypeMap[stat_type]
+                        )
                       ),
                   })),
                 },

src/panels/lovelace/tile-features/hui-vacuum-commands-tile-feature.ts

@@ -85,7 +85,7 @@ export const VACUUM_COMMANDS_BUTTONS: Record<
           translationKey: "start",
           icon: mdiPlay,
           serviceName: "start",
-          disabled: canStart(stateObj),
+          disabled: !canStart(stateObj),
         };
   },
   stop: (stateObj) => ({