diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index c8c4609515..1a218e9a24 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -102,7 +102,7 @@ class PanelDeveloperTools extends LitElement {
}
developer-tools-router {
display: block;
- height: calc(100vh - 112px);
+ height: calc(100vh - 104px);
}
ha-tabs {
margin-left: max(env(safe-area-inset-left), 24px);
diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
index ca06e42441..a8121343c4 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/data-table/ha-data-table";
@@ -32,63 +33,70 @@ class HaPanelDevStatistics extends LitElement {
this._validateStatistics();
}
- private _columns: DataTableColumnContainer = {
- state: {
- title: "Entity",
- sortable: true,
- filterable: true,
- grows: true,
- template: (entityState, data: any) =>
- html`${entityState
- ? computeStateName(entityState)
- : data.statistic_id}`,
- },
- statistic_id: {
- title: "Statistic id",
- sortable: true,
- filterable: true,
- hidden: this.narrow,
- width: "30%",
- },
- unit_of_measurement: {
- title: "Unit",
- sortable: true,
- filterable: true,
- width: "10%",
- },
- issues: {
- title: "Issue",
- sortable: true,
- filterable: true,
- direction: "asc",
- width: "30%",
- template: (issues) =>
- html`${issues
- ? issues.map(
- (issue) =>
- this.hass.localize(
- `ui.panel.developer-tools.tabs.statistics.issues.${issue.type}`,
- issue.data
- ) || issue.type
- )
- : ""}`,
- },
- fix: {
- title: "",
- template: (_, data: any) =>
- html`${data.issues
- ? html`Fix issue`
- : ""}`,
- width: "113px",
- },
- };
+ /* eslint-disable lit/no-template-arrow */
+ private _columns = memoizeOne(
+ (localize): DataTableColumnContainer => ({
+ state: {
+ title: "Entity",
+ sortable: true,
+ filterable: true,
+ grows: true,
+ template: (entityState, data: any) =>
+ html`${entityState
+ ? computeStateName(entityState)
+ : data.statistic_id}`,
+ },
+ statistic_id: {
+ title: "Statistic id",
+ sortable: true,
+ filterable: true,
+ hidden: this.narrow,
+ width: "30%",
+ },
+ unit_of_measurement: {
+ title: "Unit",
+ sortable: true,
+ filterable: true,
+ width: "10%",
+ },
+ issues: {
+ title: "Issue",
+ sortable: true,
+ filterable: true,
+ direction: "asc",
+ width: "30%",
+ template: (issues) =>
+ html`${issues
+ ? issues.map(
+ (issue) =>
+ localize(
+ `ui.panel.developer-tools.tabs.statistics.issues.${issue.type}`,
+ issue.data
+ ) || issue.type
+ )
+ : ""}`,
+ },
+ fix: {
+ title: "",
+ template: (_, data: any) =>
+ html`${data.issues
+ ? html` this._fixIssue(ev)}
+ .data=${data.issues}
+ >
+ Fix issue
+ `
+ : ""}`,
+ width: "113px",
+ },
+ })
+ );
+ /* eslint-enable lit/no-template-arrow */
protected render() {
return html`