mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 17:56:46 +00:00
Convert History Graph Card to Typescript (#4882)
* Converting History Graph to Typescript * Conversion to TS * Reviews * Review Updates
This commit is contained in:
parent
68baeb83cb
commit
4be1040a14
@ -9,7 +9,7 @@ import { HomeAssistant } from "../types";
|
|||||||
import { HassEntity } from "home-assistant-js-websocket";
|
import { HassEntity } from "home-assistant-js-websocket";
|
||||||
import { LocalizeFunc } from "../common/translations/localize";
|
import { LocalizeFunc } from "../common/translations/localize";
|
||||||
|
|
||||||
interface CacheConfig {
|
export interface CacheConfig {
|
||||||
refresh: number;
|
refresh: number;
|
||||||
cacheKey: string;
|
cacheKey: string;
|
||||||
hoursToShow: number;
|
hoursToShow: number;
|
||||||
|
@ -1,99 +0,0 @@
|
|||||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
|
||||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
|
||||||
|
|
||||||
import "../../../components/ha-card";
|
|
||||||
import "../../../components/state-history-charts";
|
|
||||||
import "../../../data/ha-state-history-data";
|
|
||||||
|
|
||||||
import { processConfigEntities } from "../common/process-config-entities";
|
|
||||||
|
|
||||||
class HuiHistoryGraphCard extends PolymerElement {
|
|
||||||
static async getConfigElement() {
|
|
||||||
await import(
|
|
||||||
/* webpackChunkName: "hui-history-graph-card-editor" */ "../editor/config-elements/hui-history-graph-card-editor"
|
|
||||||
);
|
|
||||||
return document.createElement("hui-history-graph-card-editor");
|
|
||||||
}
|
|
||||||
|
|
||||||
static getStubConfig() {
|
|
||||||
return { entities: [] };
|
|
||||||
}
|
|
||||||
|
|
||||||
static get template() {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
.content {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
[header] .content {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<ha-card header$="[[_config.title]]">
|
|
||||||
<div class="content">
|
|
||||||
<ha-state-history-data
|
|
||||||
hass="[[hass]]"
|
|
||||||
filter-type="recent-entity"
|
|
||||||
entity-id="[[_entities]]"
|
|
||||||
data="{{_stateHistory}}"
|
|
||||||
is-loading="{{_stateHistoryLoading}}"
|
|
||||||
cache-config="[[_cacheConfig]]"
|
|
||||||
></ha-state-history-data>
|
|
||||||
<state-history-charts
|
|
||||||
hass="[[hass]]"
|
|
||||||
history-data="[[_stateHistory]]"
|
|
||||||
is-loading-data="[[_stateHistoryLoading]]"
|
|
||||||
names="[[_names]]"
|
|
||||||
up-to-now
|
|
||||||
no-single
|
|
||||||
></state-history-charts>
|
|
||||||
</div>
|
|
||||||
</ha-card>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
hass: Object,
|
|
||||||
_config: Object,
|
|
||||||
_names: Object,
|
|
||||||
_entities: Array,
|
|
||||||
|
|
||||||
_stateHistory: Object,
|
|
||||||
_stateHistoryLoading: Boolean,
|
|
||||||
_cacheConfig: Object,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
getCardSize() {
|
|
||||||
return 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
setConfig(config) {
|
|
||||||
const entities = processConfigEntities(config.entities);
|
|
||||||
|
|
||||||
this._config = config;
|
|
||||||
|
|
||||||
const _entities = [];
|
|
||||||
const _names = {};
|
|
||||||
entities.forEach((entity) => {
|
|
||||||
_entities.push(entity.entity);
|
|
||||||
if (entity.name) {
|
|
||||||
_names[entity.entity] = entity.name;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setProperties({
|
|
||||||
_cacheConfig: {
|
|
||||||
cacheKey: _entities.join(),
|
|
||||||
hoursToShow: config.hours_to_show || 24,
|
|
||||||
refresh: config.refresh_interval || 0,
|
|
||||||
},
|
|
||||||
_entities,
|
|
||||||
_names,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("hui-history-graph-card", HuiHistoryGraphCard);
|
|
168
src/panels/lovelace/cards/hui-history-graph-card.ts
Normal file
168
src/panels/lovelace/cards/hui-history-graph-card.ts
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
import {
|
||||||
|
html,
|
||||||
|
LitElement,
|
||||||
|
TemplateResult,
|
||||||
|
customElement,
|
||||||
|
property,
|
||||||
|
css,
|
||||||
|
CSSResult,
|
||||||
|
PropertyValues,
|
||||||
|
} from "lit-element";
|
||||||
|
import { classMap } from "lit-html/directives/class-map";
|
||||||
|
|
||||||
|
import "../../../components/ha-card";
|
||||||
|
import "../../../components/state-history-charts";
|
||||||
|
import "../../../data/ha-state-history-data";
|
||||||
|
|
||||||
|
import { getRecentWithCache, CacheConfig } from "../../../data/cached-history";
|
||||||
|
import { processConfigEntities } from "../common/process-config-entities";
|
||||||
|
import { HomeAssistant } from "../../../types";
|
||||||
|
import { HistoryGraphCardConfig } from "./types";
|
||||||
|
import { LovelaceCard } from "../types";
|
||||||
|
import { EntityConfig } from "../entity-rows/types";
|
||||||
|
|
||||||
|
@customElement("hui-history-graph-card")
|
||||||
|
export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
|
||||||
|
public static async getConfigElement() {
|
||||||
|
await import(
|
||||||
|
/* webpackChunkName: "hui-history-graph-card-editor" */ "../editor/config-elements/hui-history-graph-card-editor"
|
||||||
|
);
|
||||||
|
return document.createElement("hui-history-graph-card-editor");
|
||||||
|
}
|
||||||
|
|
||||||
|
public static getStubConfig() {
|
||||||
|
return { entities: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
@property() public hass?: HomeAssistant;
|
||||||
|
@property() private _stateHistory?: any;
|
||||||
|
@property() private _config?: HistoryGraphCardConfig;
|
||||||
|
private _configEntities?: EntityConfig[];
|
||||||
|
private _names: { [key: string]: string } = {};
|
||||||
|
private _cacheConfig?: CacheConfig;
|
||||||
|
private _interval?: number;
|
||||||
|
|
||||||
|
public getCardSize(): number {
|
||||||
|
return 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
public setConfig(config: HistoryGraphCardConfig): void {
|
||||||
|
if (!config.entities) {
|
||||||
|
throw new Error("Entities must be defined");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (config.entities && !Array.isArray(config.entities)) {
|
||||||
|
throw new Error("Entities need to be an array");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._config = { theme: "default", ...config };
|
||||||
|
this._configEntities = config.entities
|
||||||
|
? processConfigEntities(config.entities)
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const _entities: string[] = [];
|
||||||
|
|
||||||
|
this._configEntities.forEach((entity) => {
|
||||||
|
_entities.push(entity.entity);
|
||||||
|
if (entity.name) {
|
||||||
|
this._names[entity.entity] = entity.name;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this._cacheConfig = {
|
||||||
|
cacheKey: _entities.join(),
|
||||||
|
hoursToShow: config.hours_to_show || 24,
|
||||||
|
refresh: config.refresh_interval || 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public disconnectedCallback(): void {
|
||||||
|
super.disconnectedCallback();
|
||||||
|
this._clearInterval();
|
||||||
|
}
|
||||||
|
|
||||||
|
protected updated(changedProps: PropertyValues) {
|
||||||
|
super.updated(changedProps);
|
||||||
|
if (!this._config || !this.hass || !this._cacheConfig) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const oldConfig = changedProps.get("_config") as
|
||||||
|
| HistoryGraphCardConfig
|
||||||
|
| undefined;
|
||||||
|
|
||||||
|
if (oldConfig !== this._config) {
|
||||||
|
this._getStateHistory();
|
||||||
|
this._clearInterval();
|
||||||
|
|
||||||
|
if (!this._interval && this._cacheConfig.refresh) {
|
||||||
|
this._interval = window.setInterval(() => {
|
||||||
|
this._getStateHistory();
|
||||||
|
}, this._cacheConfig.refresh * 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
if (!this.hass || !this._config) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<ha-card .header="${this._config.title}">
|
||||||
|
<div
|
||||||
|
class="content ${classMap({
|
||||||
|
"has-header": !!this._config.title,
|
||||||
|
})}"
|
||||||
|
>
|
||||||
|
<state-history-charts
|
||||||
|
.hass=${this.hass}
|
||||||
|
.historyData=${this._stateHistory}
|
||||||
|
.names=${this._names}
|
||||||
|
.upToNow=${true}
|
||||||
|
.noSingle=${true}
|
||||||
|
></state-history-charts>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _getStateHistory(): void {
|
||||||
|
getRecentWithCache(
|
||||||
|
this.hass!,
|
||||||
|
this._cacheConfig!.cacheKey,
|
||||||
|
this._cacheConfig!,
|
||||||
|
this.hass!.localize,
|
||||||
|
this.hass!.language
|
||||||
|
).then((stateHistory) => {
|
||||||
|
this._stateHistory = {
|
||||||
|
...this._stateHistory,
|
||||||
|
...stateHistory,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _clearInterval(): void {
|
||||||
|
if (this._interval) {
|
||||||
|
window.clearInterval(this._interval);
|
||||||
|
this._interval = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static get styles(): CSSResult {
|
||||||
|
return css`
|
||||||
|
.content {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.has-header {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"hui-history-graph-card": HuiHistoryGraphCard;
|
||||||
|
}
|
||||||
|
}
|
@ -153,6 +153,13 @@ export interface MediaControlCardConfig extends LovelaceCardConfig {
|
|||||||
entity: string;
|
entity: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface HistoryGraphCardConfig extends LovelaceCardConfig {
|
||||||
|
entities: Array<EntityConfig | string>;
|
||||||
|
hours_to_show?: number;
|
||||||
|
refresh_interval?: number;
|
||||||
|
title?: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface PictureCardConfig extends LovelaceCardConfig {
|
export interface PictureCardConfig extends LovelaceCardConfig {
|
||||||
image?: string;
|
image?: string;
|
||||||
tap_action?: ActionConfig;
|
tap_action?: ActionConfig;
|
||||||
|
@ -14,10 +14,10 @@ import { EntitiesEditorEvent, EditorTarget } from "../types";
|
|||||||
import { HomeAssistant } from "../../../../types";
|
import { HomeAssistant } from "../../../../types";
|
||||||
import { LovelaceCardEditor } from "../../types";
|
import { LovelaceCardEditor } from "../../types";
|
||||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||||
import { HistoryGraphCardConfig } from "../../cards/hui-history-graph-card";
|
|
||||||
import { EntityConfig } from "../../entity-rows/types";
|
import { EntityConfig } from "../../entity-rows/types";
|
||||||
import { processEditorEntities } from "../process-editor-entities";
|
import { processEditorEntities } from "../process-editor-entities";
|
||||||
import { configElementStyle } from "./config-elements-style";
|
import { configElementStyle } from "./config-elements-style";
|
||||||
|
import { HistoryGraphCardConfig } from "../../cards/types";
|
||||||
|
|
||||||
const entitiesConfigStruct = struct.union([
|
const entitiesConfigStruct = struct.union([
|
||||||
{
|
{
|
||||||
|
Loading…
x
Reference in New Issue
Block a user