From 0bf213be7d08d9da755622666caa78bef6d967d4 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 12 Jan 2024 18:29:24 +0200
Subject: [PATCH] UI: Improve range chart and bar chart axis pointers.

---
 .../bar-chart-with-labels-widget.component.ts | 40 +++++++++----------
 .../lib/chart/range-chart-widget.component.ts | 31 +++++++-------
 2 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
index 57dbf908dd..2e2faf35e8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
@@ -384,7 +384,25 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
     });
     this.barChartOptions = {
       tooltip: {
-        trigger: 'none'
+        trigger: 'axis',
+        confine: true,
+        appendToBody: true,
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: (params: CallbackDataParams[]) => {
+          if (this.settings.showTooltip) {
+            const focusedSeriesIndex = this.focusedSeriesIndex();
+            return echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
+              this.settings, params, this.decimals, this.units, focusedSeriesIndex);
+          } else {
+            return undefined;
+          }
+        },
+        padding: [8, 12],
+        backgroundColor: this.settings.tooltipBackgroundColor,
+        borderWidth: 0,
+        extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`
       },
       grid: {
         containLabel: true,
@@ -421,26 +439,6 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
 
     this.barChartOptions.series = this.updateSeries();
 
-    if (this.settings.showTooltip) {
-      this.barChartOptions.tooltip = {
-        trigger: 'axis',
-        confine: true,
-        appendToBody: true,
-        axisPointer: {
-          type: 'shadow'
-        },
-        formatter: (params: CallbackDataParams[]) => {
-          const focusedSeriesIndex = this.focusedSeriesIndex();
-          return echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
-            this.settings, params, this.decimals, this.units, focusedSeriesIndex);
-        },
-        padding: [8, 12],
-        backgroundColor: this.settings.tooltipBackgroundColor,
-        borderWidth: 0,
-        extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`
-      };
-    }
-
     this.barChart.setOption(this.barChartOptions);
 
     this.shapeResize$ = new ResizeObserver(() => {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
index b199b2c64f..0a8c15b247 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
@@ -286,7 +286,8 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
       this.rangeChart.setOption({
         xAxis: {
           min: this.ctx.defaultSubscription.timeWindow.minTime,
-          max: this.ctx.defaultSubscription.timeWindow.maxTime
+          max: this.ctx.defaultSubscription.timeWindow.maxTime,
+          tbTimeWindow: this.ctx.defaultSubscription.timeWindow
         },
         series: [
           {data: this.ctx.data?.length ? toNamedData(this.ctx.data[0].data) : []}
@@ -315,7 +316,19 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
     });
     this.rangeChartOptions = {
       tooltip: {
-        trigger: 'none'
+        trigger: 'axis',
+        confine: true,
+        appendToBody: true,
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: (params: CallbackDataParams[]) =>
+          this.settings.showTooltip ? echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
+            this.settings, params, this.decimals, this.units, 0) : undefined,
+        padding: [8, 12],
+        backgroundColor: this.settings.tooltipBackgroundColor,
+        borderWidth: 0,
+        extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`
       },
       grid: {
         containLabel: true,
@@ -403,19 +416,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
       }
     };
 
-    if (this.settings.showTooltip) {
-      this.rangeChartOptions.tooltip = {
-        trigger: 'axis',
-        confine: true,
-        appendToBody: true,
-        formatter: (params: CallbackDataParams[]) => echartsTooltipFormatter(this.renderer, this.tooltipDateFormat,
-            this.settings, params, this.decimals, this.units, 0),
-        padding: [8, 12],
-        backgroundColor: this.settings.tooltipBackgroundColor,
-        borderWidth: 0,
-        extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);`
-      };
-    }
+    (this.rangeChartOptions.xAxis as any).tbTimeWindow = this.ctx.defaultSubscription.timeWindow;
 
     this.rangeChart.setOption(this.rangeChartOptions);