Fix statistics name sorting in developer tools (#15646)

src/panels/developer-tools/statistics/developer-tools-statistics.ts

@@ -34,16 +34,23 @@ const FIX_ISSUES_ORDER = {
   unsupported_state_class: 2,
   units_changed: 3,
 };
+
+type StatisticData = StatisticsMetaData & {
+  issues?: StatisticsValidationResult[];
+  state?: HassEntity;
+};
+
+type DisplayedStatisticData = StatisticData & {
+  displayName: string;
+};
+
 @customElement("developer-tools-statistics")
 class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @state() private _data: (StatisticsMetaData & {
+  @state() private _data: StatisticData[] = [] as StatisticsMetaData[];
-    issues?: StatisticsValidationResult[];
-    state?: HassEntity;
-  })[] = [] as StatisticsMetaData[];
 
   private _disabledEntities = new Set<string>();
 
@@ -51,17 +58,23 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
     this._validateStatistics();
   }
 
+  private _displayData = memoizeOne(
+    (data: StatisticData[]): DisplayedStatisticData[] =>
+      data.map((item) => ({
+        ...item,
+        displayName: item.state
+          ? computeStateName(item.state)
+          : item.name || item.statistic_id,
+      }))
+  );
+
   private _columns = memoizeOne(
     (localize): DataTableColumnContainer => ({
-      state: {
+      displayName: {
         title: "Name",
         sortable: true,
         filterable: true,
         grows: true,
-        template: (entityState, data: any) =>
-          html`${entityState
-            ? computeStateName(entityState)
-            : data.name || data.statistic_id}`,
       },
       statistic_id: {
         title: "Statistic id",
@@ -140,7 +153,7 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
     return html`
       <ha-data-table
         .columns=${this._columns(this.hass.localize)}
-        .data=${this._data}
+        .data=${this._displayData(this._data)}
         noDataText="No statistics"
         id="statistic_id"
         clickable