Echarts: show all series in tooltip (#23989)

* Echarts: show all series in tooltip

* fix typo

* remove duplicate tooltip entries in statistics chart

* take last valid point instead of first

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

@@ -88,45 +88,74 @@ export class StateHistoryChartLine extends LitElement {
     `;
   }
 
-  private _renderTooltip(params) {
+  private _renderTooltip(params: any) {
-    return params
+    const time = params[0].axisValue;
-      .map((param, index: number) => {
+    const title =
-        let value = `${formatNumber(
+      formatDateTimeWithSeconds(
-          param.value[1] as number,
+        new Date(time),
-          this.hass.locale,
+        this.hass.locale,
-          getNumberFormatOptions(
+        this.hass.config
-            undefined,
+      ) + "<br>";
-            this.hass.entities[this._entityIds[param.seriesIndex]]
+    const datapoints: Record<string, any>[] = [];
-          )
+    this._chartData.forEach((dataset, index) => {
-        )} ${this.unit}`;
+      const param = params.find(
-        const dataIndex = this._datasetToDataIndex[param.seriesIndex];
+        (p: Record<string, any>) => p.seriesIndex === index
-        const data = this.data[dataIndex];
+      );
-        if (data.statistics && data.statistics.length > 0) {
+      if (param) {
-          value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+        datapoints.push(param);
-          const source =
+        return;
-            data.states.length === 0 ||
+      }
-            param.value[0] < data.states[0].last_changed
+      // If the datapoint is not found, we need to find the last datapoint before the current time
-              ? `${this.hass.localize(
+      let lastData;
-                  "ui.components.history_charts.source_stats"
+      const data = dataset.data || [];
-                )}`
+      for (let i = data.length - 1; i >= 0; i--) {
-              : `${this.hass.localize(
+        const point = data[i];
-                  "ui.components.history_charts.source_history"
+        if (point && point[0] <= time && point[1]) {
-                )}`;
+          lastData = point;
-          value += source;
+          break;
         }
+      }
+      if (!lastData) return;
+      datapoints.push({
+        seriesName: dataset.name,
+        seriesIndex: index,
+        value: lastData,
+        // HTML copied from echarts. May change based on options
+        marker: `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
+      });
+    });
+    return (
+      title +
+      datapoints
+        .map((param) => {
+          let value = `${formatNumber(
+            param.value[1] as number,
+            this.hass.locale,
+            getNumberFormatOptions(
+              undefined,
+              this.hass.entities[this._entityIds[param.seriesIndex]]
+            )
+          )} ${this.unit}`;
+          const dataIndex = this._datasetToDataIndex[param.seriesIndex];
+          const data = this.data[dataIndex];
+          if (data.statistics && data.statistics.length > 0) {
+            value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+            const source =
+              data.states.length === 0 ||
+              param.value[0] < data.states[0].last_changed
+                ? `${this.hass.localize(
+                    "ui.components.history_charts.source_stats"
+                  )}`
+                : `${this.hass.localize(
+                    "ui.components.history_charts.source_history"
+                  )}`;
+            value += source;
+          }
 
-        const time =
+          return `${param.marker} ${param.seriesName}: ${value}`;
-          index === 0
+        })
-            ? formatDateTimeWithSeconds(
+        .join("<br>")
-                new Date(param.value[0]),
+    );
-                this.hass.locale,
-                this.hass.config
-              ) + "<br>"
-            : "";
-        return `${time}${param.marker} ${param.seriesName}: ${value}
-      `;
-      })
-      .join("<br>");
   }
 
   public willUpdate(changedProps: PropertyValues) {

src/components/chart/statistics-chart.ts

@@ -185,9 +185,12 @@ export class StatisticsChart extends LitElement {
     this.requestUpdate("_hiddenStats");
   }
 
-  private _renderTooltip = (params: any) =>
+  private _renderTooltip = (params: any) => {
-    params
+    const rendered: Record<string, boolean> = {};
+    return params
       .map((param, index: number) => {
+        if (rendered[param.seriesName]) return "";
+        rendered[param.seriesName] = true;
         const value = `${formatNumber(
           // max series can have 3 values, as the second value is the max-min to form a band
           (param.value[2] ?? param.value[1]) as number,
@@ -206,10 +209,11 @@ export class StatisticsChart extends LitElement {
                 this.hass.config
               ) + "<br>"
             : "";
-        return `${time}${param.marker} ${param.seriesName}: ${value}
+        return `${time}${param.marker} ${param.seriesName}: ${value}`;
-  `;
       })
+      .filter(Boolean)
       .join("<br>");
+  };
 
   private _createOptions() {
     const splitLineStyle = this.hass.themes?.darkMode ? { opacity: 0.15 } : {};