Add color settings for entity in distribution card (#29436)

* Add color settings for entity in distribution card

* Fix name

* Fix name again...

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

@@ -7,6 +7,7 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { getGraphColorByIndex } from "../../../common/color/colors";
+import { computeCssColor } from "../../../common/color/compute-color";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { MobileAwareMixin } from "../../../mixins/mobile-aware-mixin";
 import type { EntityNameItem } from "../../../common/entity/compute_entity_name_display";
@@ -33,6 +34,7 @@ const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 interface ProcessedEntity {
   entity: string;
   name?: string | EntityNameItem | EntityNameItem[];
+  color?: string;
 }
 
 interface LegendItem {
@@ -147,6 +149,7 @@ export class HuiDistributionCard
     this._configEntities = entities.map((entity) => ({
       entity: entity.entity,
       name: entity.name,
+      color: entity.color,
     }));
   }
 
@@ -230,7 +233,9 @@ export class HuiDistributionCard
       const value = Number(stateObj.state);
       if (value <= 0 || isNaN(value)) return;
 
-      const color = getGraphColorByIndex(entity.originalIndex, computedStyles);
+      const color = entity.color
+        ? computeCssColor(entity.color)
+        : getGraphColorByIndex(entity.originalIndex, computedStyles);
       const name = computeLovelaceEntityName(this.hass!, stateObj, entity.name);
       const formattedValue = this.hass!.formatEntityState(stateObj);
 
@@ -279,7 +284,9 @@ export class HuiDistributionCard
         name: name,
         value: value,
         formattedValue: formattedValue,
-        color: getGraphColorByIndex(index, computedStyles),
+        color: entity.color
+          ? computeCssColor(entity.color)
+          : getGraphColorByIndex(index, computedStyles),
         isHidden: isHidden,
         isDisabled: isZeroOrNegative,
       };

src/panels/lovelace/cards/types.ts

@@ -664,7 +664,9 @@ export interface HomeSummaryCard extends LovelaceCardConfig {
   double_tap_action?: ActionConfig;
 }
 
-export interface DistributionEntityConfig extends EntityConfig {}
+export interface DistributionEntityConfig extends EntityConfig {
+  color?: string;
+}
 
 export interface DistributionCardConfig extends LovelaceCardConfig {
   type: "distribution";

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

@@ -18,20 +18,26 @@ import type { SchemaUnion } from "../../../../components/ha-form/types";
 import type { HaEntityPickerEntityFilterFunc } from "../../../../data/entity/entity";
 import type { HomeAssistant } from "../../../../types";
 import type { DistributionCardConfig } from "../../cards/types";
-import type { EntityConfig } from "../../entity-rows/types";
 import "../../components/hui-entity-editor";
+import type { EntityConfig } from "../../entity-rows/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { processEditorEntities } from "../process-editor-entities";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import { entitiesConfigStruct } from "../structs/entities-struct";
+import { entityNameStruct } from "../structs/entity-name-struct";
 import type { EditDetailElementEvent, SubElementEditorConfig } from "../types";
 
+const distributionEntityConfigStruct = object({
+  entity: string(),
+  name: optional(entityNameStruct),
+  color: optional(string()),
+});
+
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     title: optional(string()),
-    entities: array(union([string(), entitiesConfigStruct])),
+    entities: array(union([string(), distributionEntityConfigStruct])),
   })
 );
 
@@ -44,6 +50,10 @@ const SUB_SCHEMA = [
       entity: "entity",
     },
   },
+  {
+    name: "color",
+    selector: { ui_color: {} },
+  },
 ] as const;
 
 const SCHEMA = [{ name: "title", selector: { text: {} } }] as const;

src/panels/profile/ha-profile-section-general.ts

@@ -6,6 +6,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { nextRender } from "../../common/util/render-status";
 import "../../components/ha-button";
 import "../../components/ha-card";
+import "../../components/ha-divider";
 import "../../components/ha-md-list";
 import "../../components/ha-md-list-item";
 import { isExternal } from "../../data/external";
@@ -127,11 +128,11 @@ class HaProfileSectionGeneral extends LitElement {
           </ha-card>
           <ha-card
             .header=${this.hass.localize(
-              "ui.panel.profile.user_preferences_header"
+              "ui.panel.profile.user_settings_header"
             )}
           >
             <div class="card-content">
-              ${this.hass.localize("ui.panel.profile.user_preferences_detail")}
+              ${this.hass.localize("ui.panel.profile.user_settings_detail")}
             </div>
             <ha-pick-theme-row
               .narrow=${this.narrow}
@@ -181,19 +182,11 @@ class HaProfileSectionGeneral extends LitElement {
                   `
                 : ""}
             </ha-md-list>
-          </ha-card>
-          <ha-card
-            .header=${this.hass.localize(
-              "ui.panel.profile.localization_header"
-            )}
-          >
-            <div class="card-content">
-              ${this.hass.localize("ui.panel.profile.localization_detail")}
-            </div>
-            <ha-pick-time-zone-row
+            <ha-divider></ha-divider>
+            <ha-pick-language-row
               .narrow=${this.narrow}
               .hass=${this.hass}
-            ></ha-pick-time-zone-row>
+            ></ha-pick-language-row>
             <ha-pick-number-format-row
               .narrow=${this.narrow}
               .hass=${this.hass}
@@ -206,6 +199,10 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-date-format-row>
+            <ha-pick-time-zone-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-time-zone-row>
             <ha-pick-first-weekday-row
               .narrow=${this.narrow}
               .hass=${this.hass}

src/state-summary/state-card-input_number.ts

@@ -109,6 +109,11 @@ class StateCardInputNumber extends LitElement {
       width: 100%;
       max-width: 200px;
     }
+    @media (max-width: 450px) {
+      state-info {
+        flex-basis: 60%;
+      }
+    }
   `;
 
   private async _initialLoad(): Promise<void> {

src/translations/en.json

@@ -9522,10 +9522,8 @@
         },
         "current_user": "You are currently logged in as {fullName}.",
         "is_owner": "You are an owner.",
-        "user_preferences_header": "User preferences",
-        "user_preferences_detail": "The following settings are tied to your account and will persist across all sessions and devices.",
-        "localization_header": "Localization",
-        "localization_detail": "These settings are tied to your account and control how dates, times, and numbers are displayed.",
+        "user_settings_header": "User settings",
+        "user_settings_detail": "The following settings are tied to your account and will persist across all sessions and devices.",
         "mobile_app_settings": "Mobile app settings",
         "browser_settings": "Browser settings",
         "client_settings_detail": "The following settings are local to this client only, and may reset to defaults on logout or when local data is cleared.",