From 9a051640ec776acf6070b44fa511e7c2675f0be8 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Mon, 8 Jul 2024 15:29:07 +0300
Subject: [PATCH 1/2] UI: fixed hidden by default chart series not rendering on
 unhide

---
 .../widget/lib/chart/time-series-chart-widget.component.ts    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
index 0a242eba36..053598763e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
@@ -170,5 +170,9 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
 
   public toggleLegendKey(legendKey: LegendKey) {
     this.timeSeriesChart.toggleKey(legendKey.dataKey);
+    for (const id of Object.keys(this.ctx.subscriptions)) {
+      const subscription = this.ctx.subscriptions[id];
+      subscription.updateDataVisibility(legendKey.dataIndex);
+    }
   }
 }

From 7b2e38e04bd51158d769173eb829535871a40304 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Tue, 9 Jul 2024 13:27:50 +0300
Subject: [PATCH 2/2] UI: refactoring

---
 .../chart/time-series-chart-widget.component.ts    |  6 +-----
 .../widget/lib/chart/time-series-chart.ts          | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
index 053598763e..def776897e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
@@ -169,10 +169,6 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
   }
 
   public toggleLegendKey(legendKey: LegendKey) {
-    this.timeSeriesChart.toggleKey(legendKey.dataKey);
-    for (const id of Object.keys(this.ctx.subscriptions)) {
-      const subscription = this.ctx.subscriptions[id];
-      subscription.updateDataVisibility(legendKey.dataIndex);
-    }
+    this.timeSeriesChart.toggleKey(legendKey.dataKey, legendKey.dataIndex);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
index 913c346712..a76643ea20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
@@ -60,7 +60,14 @@ import {
   measureAxisNameSize
 } from '@home/components/widget/lib/chart/echarts-widget.models';
 import { DateFormatProcessor, ValueSourceType } from '@shared/models/widget-settings.models';
-import { formattedDataFormDatasourceData, formatValue, isDefinedAndNotNull, isEqual, mergeDeep } from '@core/utils';
+import {
+  formattedDataFormDatasourceData,
+  formatValue,
+  isDefined,
+  isDefinedAndNotNull,
+  isEqual,
+  mergeDeep
+} from '@core/utils';
 import { DataKey, Datasource, DatasourceType, FormattedData, widgetType } from '@shared/models/widget.models';
 import * as echarts from 'echarts/core';
 import { CallbackDataParams, PiecewiseVisualMapOption } from 'echarts/types/dist/shared';
@@ -290,7 +297,7 @@ export class TbTimeSeriesChart {
     }
   }
 
-  public toggleKey(dataKey: DataKey): void {
+  public toggleKey(dataKey: DataKey, dataIndex?: number): void {
     const enable = dataKey.hidden;
     const dataItem = this.dataItems.find(d => d.dataKey === dataKey);
     if (dataItem) {
@@ -310,6 +317,9 @@ export class TbTimeSeriesChart {
       this.timeSeriesChart.setOption(this.timeSeriesChartOptions, this.stackMode ? {notMerge: true} : {replaceMerge: mergeList});
       this.updateAxes();
       dataKey.hidden = !enable;
+      if (isDefined(dataIndex)) {
+        this.ctx.defaultSubscription.updateDataVisibility(dataIndex);
+      }
       if (enable) {
         this.timeSeriesChart.dispatchAction({
           type: 'highlight',