UI: Time series chart widgets performance and layout improvements. Update echarts version.

ui-ngx/package.json

@@ -55,7 +55,7 @@
     "core-js": "^3.29.1",
     "date-fns": "2.0.0-alpha.27",
     "dayjs": "1.11.4",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
     "flot": "https://github.com/thingsboard/flot.git#0.9-work",
     "flot.curvedlines": "https://github.com/MichaelZinsmaier/CurvedLines.git#master",
     "font-awesome": "^4.7.0",

ui-ngx/patches/echarts+5.5.0.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js b/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js
-index 112ebe3..9afc9b7 100644
+index d6c05f3..d09baed 100644
 --- a/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js
 +++ b/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js
-@@ -422,7 +422,10 @@ function (_super) {
+@@ -362,7 +362,10 @@ var DataZoomModel = /** @class */function (_super) {
          return axisProxy.getDataValueWindow();
        }
      } else {
@@ -14,32 +14,30 @@ index 112ebe3..9afc9b7 100644
      }
    };
    /**
-@@ -449,11 +452,11 @@ function (_super) {
+@@ -381,10 +384,10 @@ var DataZoomModel = /** @class */function (_super) {
+       var axisInfo = this._targetAxisInfoMap.get(axisDim);
        for (var j = 0; j < axisInfo.indexList.length; j++) {
          var proxy = this.getAxisProxy(axisDim, axisInfo.indexList[j]);
- 
 -        if (proxy.hostedBy(this)) {
 +        if (proxy && proxy.hostedBy(this)) {
            return proxy;
          }
- 
 -        if (!firstProxy) {
 +        if (proxy && !firstProxy) {
            firstProxy = proxy;
          }
        }
 diff --git a/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js b/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js
-index 7163279..c37f9c2 100644
+index 06469b2..ccfbfa6 100644
 --- a/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js
 +++ b/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js
-@@ -112,12 +112,15 @@ var getRangeHandlers = {
+@@ -96,11 +96,14 @@ var getRangeHandlers = {
      range[0] = (range[0] - percentPoint) * scale + percentPoint;
-     range[1] = (range[1] - percentPoint) * scale + percentPoint; // Restrict range.
+     range[1] = (range[1] - percentPoint) * scale + percentPoint;
- 
+     // Restrict range.
 -    var minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
 -    sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan);
 -    this.range = range;
--
 -    if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) {
 -      return range;
 +    var proxy = this.dataZoomModel.findRepresentativeAxisProxy();
@@ -47,7 +45,6 @@ index 7163279..c37f9c2 100644
 +      var minMaxSpan = proxy.getMinMaxSpan();
 +      sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan);
 +      this.range = range;
-+
 +      if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) {
 +        return range;
 +      }
@@ -55,7 +52,7 @@ index 7163279..c37f9c2 100644
    },
    pan: makeMover(function (range, axisModel, coordSysInfo, coordSysMainType, controller, e) {
 diff --git a/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js b/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js
-index 590ef51..aff8a0a 100644
+index 98912e0..2e809af 100644
 --- a/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js
 +++ b/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js
 @@ -64,7 +64,7 @@ var DEFAULT_MOVE_HANDLE_SIZE = 7;
@@ -67,7 +64,7 @@ index 590ef51..aff8a0a 100644
  var REALTIME_ANIMATION_CONFIG = {
    easing: 'cubicOut',
    duration: 100,
-@@ -406,34 +406,37 @@ function (_super) {
+@@ -359,30 +359,33 @@ var SliderZoomView = /** @class */function (_super) {
      var result;
      var ecModel = this.ecModel;
      dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) {
@@ -76,20 +73,16 @@ index 590ef51..aff8a0a 100644
 -        if (result) {
 -          return;
 -        }
--
 -        if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) {
 -          return;
 -        }
--
 -        var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis;
 -        var otherDim = getOtherDim(axisDim);
 -        var otherAxisInverse;
 -        var coordSys = seriesModel.coordinateSystem;
--
 -        if (otherDim != null && coordSys.getOtherAxis) {
 -          otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse;
 -        }
--
 -        otherDim = seriesModel.getData().mapDimension(otherDim);
 -        result = {
 -          thisAxis: thisAxis,
@@ -106,20 +99,16 @@ index 590ef51..aff8a0a 100644
 +          if (result) {
 +            return;
 +          }
-+
 +          if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) {
 +            return;
 +          }
-+
 +          var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis;
 +          var otherDim = getOtherDim(axisDim);
 +          var otherAxisInverse;
 +          var coordSys = seriesModel.coordinateSystem;
-+
 +          if (otherDim != null && coordSys.getOtherAxis) {
 +            otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse;
 +          }
-+
 +          otherDim = seriesModel.getData().mapDimension(otherDim);
 +          result = {
 +            thisAxis: thisAxis,
@@ -133,10 +122,10 @@ index 590ef51..aff8a0a 100644
      }, this);
      return result;
    };
-@@ -595,12 +598,17 @@ function (_super) {
+@@ -530,12 +533,17 @@ var SliderZoomView = /** @class */function (_super) {
- 
+     var dataZoomModel = this.dataZoomModel;
+     var handleEnds = this._handleEnds;
      var viewExtend = this._getViewExtent();
- 
 -    var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
 -    var percentExtent = [0, 100];
 -    sliderMove(delta, handleEnds, viewExtend, dataZoomModel.get('zoomLock') ? 'all' : handleIndex, minMaxSpan.minSpan != null ? linearMap(minMaxSpan.minSpan, percentExtent, viewExtend, true) : null, minMaxSpan.maxSpan != null ? linearMap(minMaxSpan.maxSpan, percentExtent, viewExtend, true) : null);
@@ -155,13 +144,13 @@ index 590ef51..aff8a0a 100644
 +      return false;
 +    }
    };
- 
    SliderZoomView.prototype._updateView = function (nonRealtime) {
+     var displaybles = this._displayables;
 diff --git a/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js b/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js
-index 3871784..9bab428 100644
+index ce98fed..361b138 100644
 --- a/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js
 +++ b/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js
-@@ -91,7 +91,10 @@ var dataZoomProcessor = {
+@@ -90,7 +90,10 @@ var dataZoomProcessor = {
        // init stage and not after action dispatch handler, because
        // reset should be called after seriesData.restoreData.
        dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) {
@@ -170,12 +159,12 @@ index 3871784..9bab428 100644
 +        if (axisProxy) {
 +          axisProxy.reset(dataZoomModel);
 +        }
-       }); // Caution: data zoom filtering is order sensitive when using
+       });
+       // Caution: data zoom filtering is order sensitive when using
        // percent range and no min/max/scale set on axis.
-       // For example, we have dataZoom definition:
+@@ -107,7 +110,10 @@ var dataZoomProcessor = {
-@@ -108,7 +111,10 @@ var dataZoomProcessor = {
+       // So we should filter x-axis after reset x-axis immediately,
        // and then reset y-axis and filter y-axis.
- 
        dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) {
 -        dataZoomModel.getAxisProxy(axisDim, axisIndex).filterData(dataZoomModel, api);
 +        var axisProxy = dataZoomModel.getAxisProxy(axisDim, axisIndex);
@@ -186,23 +175,22 @@ index 3871784..9bab428 100644
      });
      ecModel.eachComponent('dataZoom', function (dataZoomModel) {
 diff --git a/node_modules/echarts/lib/component/toolbox/feature/DataZoom.js b/node_modules/echarts/lib/component/toolbox/feature/DataZoom.js
-index c5ee405..957ffd2 100644
+index cf8d6bc..9b30ec1 100644
 --- a/node_modules/echarts/lib/component/toolbox/feature/DataZoom.js
 +++ b/node_modules/echarts/lib/component/toolbox/feature/DataZoom.js
-@@ -129,10 +129,13 @@ function (_super) {
+@@ -109,9 +109,12 @@ var DataZoomFeature = /** @class */function (_super) {
        var axisModel = axis.model;
-       var dataZoomModel = findDataZoom(dimName, axisModel, ecModel); // Restrict range.
+       var dataZoomModel = findDataZoom(dimName, axisModel, ecModel);
- 
+       // Restrict range.
 -      var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy(axisModel).getMinMaxSpan();
+-      if (minMaxSpan.minValueSpan != null || minMaxSpan.maxValueSpan != null) {
+-        minMax = sliderMove(0, minMax.slice(), axis.scale.getExtent(), 0, minMaxSpan.minValueSpan, minMaxSpan.maxValueSpan);
 +      var proxy = dataZoomModel.findRepresentativeAxisProxy(axisModel);
 +      if (proxy) {
 +        var minMaxSpan = proxy.getMinMaxSpan();
- 
--      if (minMaxSpan.minValueSpan != null || minMaxSpan.maxValueSpan != null) {
--        minMax = sliderMove(0, minMax.slice(), axis.scale.getExtent(), 0, minMaxSpan.minValueSpan, minMaxSpan.maxValueSpan);
 +        if (minMaxSpan.minValueSpan != null || minMaxSpan.maxValueSpan != null) {
 +          minMax = sliderMove(0, minMax.slice(), axis.scale.getExtent(), 0, minMaxSpan.minValueSpan, minMaxSpan.maxValueSpan);
 +        }
        }
- 
        dataZoomModel && (snapshot[dataZoomModel.id] = {
+         dataZoomId: dataZoomModel.id,

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html

@@ -245,6 +245,12 @@
         <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
       </mat-form-field>
     </div>
+    <div class="tb-form-row space-between">
+      <div>{{ 'widget-config.card-padding' | translate }}</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+      </mat-form-field>
+    </div>
   </div>
   <tb-widget-actions-panel
       formControlName="actions">

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts

@@ -174,6 +174,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
 
       cardButtons: [this.getCardButtons(configData.config), []],
       borderRadius: [configData.config.borderRadius, []],
+      padding: [settings.padding, []],
 
       actions: [configData.config.actions || {}, []]
     });
@@ -229,6 +230,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
 
     this.setCardButtons(config.cardButtons, this.widgetConfig.config);
     this.widgetConfig.config.borderRadius = config.borderRadius;
+    this.widgetConfig.config.settings.padding = config.padding;
 
     this.widgetConfig.config.actions = config.actions;
     return this.widgetConfig;

ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts

@@ -37,7 +37,6 @@ import {
 } from '@shared/models/widget-settings.models';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { formatValue } from '@core/utils';
-import { DataKey } from '@shared/models/widget.models';
 import { Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -53,9 +52,9 @@ import { CallbackDataParams, CustomSeriesRenderItem, LabelLayoutOptionCallback }
 import {
   ECharts,
   echartsModule,
-  EChartsOption, EChartsSeriesItem,
+  EChartsOption,
+  EChartsSeriesItem,
   echartsTooltipFormatter,
-  NamedDataSet,
   toNamedData
 } from '@home/components/widget/lib/chart/echarts-widget.models';
 import { IntervalMath } from '@shared/models/time/time.models';
@@ -381,7 +380,7 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
       tooltip: {
         trigger: 'axis',
         confine: true,
-        appendToBody: true,
+        appendTo: 'body',
         axisPointer: {
           type: 'shadow'
         },

ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts

@@ -387,7 +387,7 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
       tooltip: {
         trigger: this.settings.showTooltip ? 'item' : 'none',
         confine: false,
-        appendToBody: true
+        appendTo: 'body',
       },
       series: [
         {

ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts

@@ -153,6 +153,7 @@ export type EChartsSeriesItem = {
   id: string;
   dataKey: DataKey;
   data: NamedDataSet;
+  dataSet?: DataSet;
   enabled: boolean;
   units?: string;
   decimals?: number;

ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts

@@ -318,7 +318,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
       tooltip: {
         trigger: 'axis',
         confine: true,
-        appendToBody: true,
+        appendTo: 'body',
         axisPointer: {
           type: 'shadow'
         },

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts

@@ -33,14 +33,18 @@ export interface BarVisualSettings {
   borderRadius: number;
 }
 
+export interface BarRenderSharedContext {
+  timeInterval: Interval;
+  noAggregationBarWidthStrategy: TimeSeriesChartNoAggregationBarWidthStrategy;
+  noAggregationWidthRelative: boolean;
+  noAggregationWidth: number;
+}
+
 export interface BarRenderContext {
+  shared: BarRenderSharedContext;
   barsCount?: number;
   barIndex?: number;
-  noAggregation: boolean;
+  noAggregation?: boolean;
-  noAggregationBarWidthStrategy: TimeSeriesChartNoAggregationBarWidthStrategy;
-  noAggregationWidthRelative?: boolean;
-  noAggregationWidth?: number;
-  timeInterval?: Interval;
   visualSettings?: BarVisualSettings;
   labelOption?: SeriesLabelOption;
   barStackIndex?: number;
@@ -56,20 +60,20 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
   const ts = start ? start : time;
 
   const separateBar = renderCtx.noAggregation &&
-    renderCtx.noAggregationBarWidthStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate;
+    renderCtx.shared.noAggregationBarWidthStrategy === TimeSeriesChartNoAggregationBarWidthStrategy.separate;
 
   if (renderCtx.noAggregation) {
-    if (renderCtx.noAggregationWidthRelative) {
+    if (renderCtx.shared.noAggregationWidthRelative) {
       const scaleWidth = api.getWidth() / api.size([1,0])[0];
-      interval = scaleWidth * (renderCtx.noAggregationWidth / 100);
+      interval = scaleWidth * (renderCtx.shared.noAggregationWidth / 100);
     } else {
-      interval = renderCtx.noAggregationWidth;
+      interval = renderCtx.shared.noAggregationWidth;
     }
     start = time - interval / 2;
     end = time + interval / 2;
   }
   if (!start || !end || !interval) {
-    interval = IntervalMath.numberValue(renderCtx.timeInterval);
+    interval = IntervalMath.numberValue(renderCtx.shared.timeInterval);
     start = time - interval / 2;
   }
 
@@ -147,7 +151,6 @@ export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: C
   } else {
     borderRadius = [renderCtx.visualSettings.borderRadius, renderCtx.visualSettings.borderRadius, 0, 0];
   }
-
   return rectShape && {
     type: 'rect',
     id: time + '',

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<div class="tb-time-series-chart-panel" [style]="backgroundStyle$ | async">
+<div class="tb-time-series-chart-panel" [style.padding]="padding"
+     [class.overlay]="overlayEnabled" [style]="backgroundStyle$ | async">
   <div class="tb-time-series-chart-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-time-series-chart-content" [class]="legendClass">

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss

@@ -24,7 +24,9 @@ $maxLegendHeight: 35%;
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 20px 24px 24px 24px;
+  &.overlay {
+    padding: 20px 24px 24px 24px;
+  }
   > div:not(.tb-time-series-chart-overlay) {
     z-index: 1;
   }
@@ -101,22 +103,6 @@ $maxLegendHeight: 35%;
           width: 100%;
           table-layout: auto;
         }
-
-        thead th, tbody th {
-          position: sticky;
-          z-index: 1;
-          backdrop-filter: blur(5000px);
-        }
-        thead th {
-          top: 0;
-          &:first-child {
-            left: 0;
-            z-index: 2;
-          }
-        }
-        tbody th {
-          left: 0;
-        }
         th, td {
           &:not(:last-child) {
             padding-right: 8px;

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts

@@ -70,6 +70,8 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
 
   backgroundStyle$: Observable<ComponentStyle>;
   overlayStyle: ComponentStyle = {};
+  overlayEnabled: boolean;
+  padding: string;
 
   legendLabelStyle: ComponentStyle;
   disabledLegendLabelStyle: ComponentStyle;
@@ -90,6 +92,8 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
+    this.overlayEnabled = this.settings.background.overlay.enabled;
+    this.padding = this.overlayEnabled ? undefined : this.settings.padding;
 
     this.showLegend = this.settings.showLegend;
     if (this.showLegend) {

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.models.ts

@@ -25,6 +25,7 @@ export interface TimeSeriesChartWidgetSettings extends TimeSeriesChartSettings {
   legendLabelColor: string;
   legendConfig: LegendConfig;
   background: BackgroundSettings;
+  padding: string;
 }
 
 export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings =
@@ -48,5 +49,6 @@ export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings
         color: 'rgba(255,255,255,0.72)',
         blur: 3
       }
-    }
+    },
+    padding: '12px'
   } as TimeSeriesChartWidgetSettings);

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts

@@ -37,11 +37,11 @@ import {
 import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient';
 import tinycolor from 'tinycolor2';
 import Axis2D from 'echarts/types/src/coord/cartesian/Axis2D';
-import { Interval } from '@shared/models/time/time.models';
 import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes';
 import { SeriesLabelOption } from 'echarts/types/src/util/types';
 import {
   BarRenderContext,
+  BarRenderSharedContext,
   BarVisualSettings,
   renderTimeSeriesBar
 } from '@home/components/widget/lib/chart/time-series-chart-bar.models';
@@ -915,13 +915,12 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartAxisSetting
 
 export const generateChartData = (dataItems: TimeSeriesChartDataItem[],
                                   thresholdItems: TimeSeriesChartThresholdItem[],
-                                  timeInterval: Interval,
                                   stack: boolean,
                                   noAggregation: boolean,
-                                  noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings,
+                                  barRenderSharedContext: BarRenderSharedContext,
                                   darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => {
-  let series = generateChartSeries(dataItems, timeInterval,
+  let series = generateChartSeries(dataItems,
-    stack, noAggregation, noAggregationBarWidthSettings, darkMode);
+    stack, noAggregation, barRenderSharedContext, darkMode);
   if (thresholdItems.length) {
     const thresholds = generateChartThresholds(thresholdItems, darkMode);
     series = series.concat(thresholds);
@@ -1030,10 +1029,9 @@ const createThresholdData = (val: string | number, item: TimeSeriesChartThreshol
   ];
 
 const generateChartSeries = (dataItems: TimeSeriesChartDataItem[],
-                             timeInterval: Interval,
                              stack: boolean,
                              noAggregation: boolean,
-                             noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings,
+                             barRenderSharedContext: BarRenderSharedContext,
                              darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => {
   const series: Array<LineSeriesOption | CustomSeriesOption> = [];
   const enabledDataItems = dataItems.filter(d => d.enabled);
@@ -1053,21 +1051,11 @@ const generateChartSeries = (dataItems: TimeSeriesChartDataItem[],
     if (item.dataKey.settings.type === TimeSeriesChartSeriesType.bar) {
       if (!item.barRenderContext) {
         item.barRenderContext = {noAggregation,
-          noAggregationBarWidthStrategy: noAggregationBarWidthSettings.strategy};
+          shared: barRenderSharedContext};
-        const targetWidth = noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group ?
-          noAggregationBarWidthSettings.groupWidth : noAggregationBarWidthSettings.barWidth;
-        if (targetWidth.relative) {
-          item.barRenderContext.noAggregationWidthRelative = true;
-          item.barRenderContext.noAggregationWidth = targetWidth.relativeWidth;
-        } else {
-          item.barRenderContext.noAggregationWidthRelative = false;
-          item.barRenderContext.noAggregationWidth = targetWidth.absoluteWidth;
-        }
       }
       item.barRenderContext.noAggregation = noAggregation;
       item.barRenderContext.barsCount = barsCount;
       item.barRenderContext.barIndex = stack ? barGroups.indexOf(item.yAxisIndex) : barDataItems.indexOf(item);
-      item.barRenderContext.timeInterval = timeInterval;
       if (stack) {
         const stackItems = enabledDataItems.filter(d => d.yAxisIndex === item.yAxisIndex);
         item.barRenderContext.currentStackItems = stackItems;

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts

@@ -19,21 +19,26 @@ import {
   AxisPosition,
   calculateThresholdsOffset,
   createTimeSeriesXAxisOption,
-  createTimeSeriesYAxis, defaultTimeSeriesChartYAxisSettings,
+  createTimeSeriesYAxis,
+  defaultTimeSeriesChartYAxisSettings,
   generateChartData,
   parseThresholdData,
   SeriesLabelPosition,
   TimeSeriesChartDataItem,
   timeSeriesChartDefaultSettings,
   timeSeriesChartKeyDefaultSettings,
-  TimeSeriesChartKeySettings,
+  TimeSeriesChartKeySettings, TimeSeriesChartNoAggregationBarWidthStrategy,
   TimeSeriesChartSeriesType,
   TimeSeriesChartSettings,
-  TimeSeriesChartShape, TimeSeriesChartThreshold, timeSeriesChartThresholdDefaultSettings,
+  TimeSeriesChartShape,
+  TimeSeriesChartThreshold,
+  timeSeriesChartThresholdDefaultSettings,
   TimeSeriesChartThresholdItem,
   TimeSeriesChartThresholdType,
   TimeSeriesChartType,
-  TimeSeriesChartYAxis, TimeSeriesChartYAxisId, TimeSeriesChartYAxisSettings,
+  TimeSeriesChartYAxis,
+  TimeSeriesChartYAxisId,
+  TimeSeriesChartYAxisSettings,
   updateDarkMode
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -52,7 +57,7 @@ import {
   toNamedData
 } from '@home/components/widget/lib/chart/echarts-widget.models';
 import { DateFormatProcessor } from '@shared/models/widget-settings.models';
-import { isDefinedAndNotNull, mergeDeep } from '@core/utils';
+import { isDefinedAndNotNull, isEqual, mergeDeep } from '@core/utils';
 import { DataKey, Datasource, DatasourceType, widgetType } from '@shared/models/widget.models';
 import * as echarts from 'echarts/core';
 import { CallbackDataParams } from 'echarts/types/dist/shared';
@@ -64,6 +69,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { DataKeySettingsFunction } from '@home/components/widget/config/data-keys.component.models';
 import { DeepPartial } from '@shared/models/common';
+import { BarRenderSharedContext } from '@home/components/widget/lib/chart/time-series-chart-bar.models';
 
 export class TbTimeSeriesChart {
 
@@ -119,6 +125,8 @@ export class TbTimeSeriesChart {
 
   private highlightedDataKey: DataKey;
 
+  private barRenderSharedContext: BarRenderSharedContext;
+
   yMin$ = this.yMinSubject.asObservable();
   yMax$ = this.yMaxSubject.asObservable();
 
@@ -156,7 +164,10 @@ export class TbTimeSeriesChart {
   public update(): void {
     for (const item of this.dataItems) {
       const datasourceData = this.ctx.data ? this.ctx.data.find(d => d.dataKey === item.dataKey) : null;
-      item.data = datasourceData?.data ? toNamedData(datasourceData.data) : [];
+      if (!isEqual(item.dataSet, datasourceData?.data)) {
+        item.dataSet = datasourceData?.data;
+        item.data = datasourceData?.data ? toNamedData(datasourceData.data) : [];
+      }
     }
     this.onResize();
     if (this.timeSeriesChart) {
@@ -168,6 +179,7 @@ export class TbTimeSeriesChart {
       } else {
         this.timeSeriesChartOptions.tooltip[0].axisPointer.type = 'shadow';
       }
+      this.barRenderSharedContext.timeInterval = this.ctx.timeWindow.interval;
       this.updateSeriesData(true);
       if (this.highlightedDataKey) {
         this.keyEnter(this.highlightedDataKey);
@@ -277,6 +289,15 @@ export class TbTimeSeriesChart {
   }
 
   private setupData(): void {
+    const noAggregationBarWidthSettings = this.settings.noAggregationBarWidthSettings;
+    const targetBarWidth = noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group ?
+      noAggregationBarWidthSettings.groupWidth : noAggregationBarWidthSettings.barWidth;
+    this.barRenderSharedContext = {
+      timeInterval: this.ctx.timeWindow?.interval,
+      noAggregationBarWidthStrategy: noAggregationBarWidthSettings.strategy,
+      noAggregationWidthRelative: targetBarWidth.relative,
+      noAggregationWidth: targetBarWidth.relative ? targetBarWidth.relativeWidth : targetBarWidth.absoluteWidth
+    };
     if (this.ctx.datasources.length) {
       for (const datasource of this.ctx.datasources) {
         const dataKeys = datasource.dataKeys;
@@ -458,7 +479,7 @@ export class TbTimeSeriesChart {
       tooltip: [{
         trigger: this.settings.tooltipTrigger === EChartsTooltipTrigger.axis ? 'axis' : 'item',
         confine: true,
-        appendToBody: true,
+        appendTo: 'body',
         axisPointer: {
           type: this.noAggregation ? 'line' : 'shadow'
         },
@@ -533,10 +554,9 @@ export class TbTimeSeriesChart {
 
   private updateSeries(): Array<LineSeriesOption | CustomSeriesOption> {
     return generateChartData(this.dataItems, this.thresholdItems,
-      this.ctx.timeWindow.interval,
       this.settings.stack,
       this.noAggregation,
-      this.settings.noAggregationBarWidthSettings, this.darkMode);
+      this.barRenderSharedContext, this.darkMode);
   }
 
   private updateAxes() {
@@ -721,10 +741,32 @@ export class TbTimeSeriesChart {
         const width = this.timeSeriesChart.getWidth();
         const height = this.timeSeriesChart.getHeight();
         if (width !== shapeWidth || height !== shapeHeight) {
+          let barItems: TimeSeriesChartDataItem[];
+          if (this.animationEnabled()) {
+            barItems =
+              this.dataItems.filter(d => d.enabled && d.data.length &&
+                d.dataKey.settings.type === TimeSeriesChartSeriesType.bar);
+            this.updateBarsAnimation(barItems, false);
+          }
           this.timeSeriesChart.resize();
+          if (this.animationEnabled()) {
+            this.updateBarsAnimation(barItems, true);
+          }
         }
       }
     }
   }
 
+  private animationEnabled(): boolean {
+    return this.settings.animation.animation;
+  }
+
+  private updateBarsAnimation(barItems: TimeSeriesChartDataItem[], animation: boolean) {
+    if (barItems.length) {
+      barItems.forEach(item => {
+        item.option.animation = animation;
+      });
+      this.timeSeriesChart.setOption(this.timeSeriesChartOptions);
+    }
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html

@@ -160,10 +160,19 @@
     <tb-time-series-chart-animation-settings
       formControlName="animation">
     </tb-time-series-chart-animation-settings>
-    <div class="tb-form-row space-between">
+    <div class="tb-form-panel">
-      <div>{{ 'widgets.background.background' | translate }}</div>
+      <div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
-      <tb-background-settings formControlName="background">
+      <div class="tb-form-row space-between">
-      </tb-background-settings>
+        <div>{{ 'widgets.background.background' | translate }}</div>
+        <tb-background-settings formControlName="background">
+        </tb-background-settings>
+      </div>
+      <div class="tb-form-row space-between">
+        <div>{{ 'widget-config.card-padding' | translate }}</div>
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
+          <input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
+        </mat-form-field>
+      </div>
     </div>
   </div>
 </ng-container>

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts

@@ -140,7 +140,8 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
 
       animation: [settings.animation, []],
 
-      background: [settings.background, []]
+      background: [settings.background, []],
+      padding: [settings.padding, []]
     });
   }
 

ui-ngx/src/assets/dashboard/sys_admin_home_page.json

@@ -2110,13 +2110,14 @@
                 "color": "rgba(255,255,255,0.72)",
                 "blur": 3
               }
-            }
+            },
+            "padding": "0"
           },
           "title": "Time series chart",
           "dropShadow": false,
           "enableFullscreen": false,
           "titleStyle": null,
-          "configMode": "advanced",
+          "configMode": "basic",
           "actions": {},
           "showTitleIcon": false,
           "titleIcon": "thermostat",
@@ -2134,7 +2135,7 @@
           "titleColor": "rgba(0, 0, 0, 0.87)",
           "titleTooltip": "",
           "widgetStyle": {},
-          "widgetCss": ".tb-widget-container > .tb-widget {\n    border: none !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n}\n\n.tb-time-series-chart-panel {\n    padding: 0;\n}\n\n.tb-time-series-chart-panel div.tb-widget-title {\n    padding-top: 5px;\n    padding-left: 5px;\n}",
+          "widgetCss": ".tb-widget-container > .tb-widget {\n    border: none !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n}\n\n.tb-time-series-chart-panel div.tb-widget-title {\n    padding-top: 5px;\n    padding-left: 5px;\n}",
           "pageSize": 1024,
           "units": "",
           "decimals": null,
@@ -2580,7 +2581,8 @@
                 "color": "rgba(255,255,255,0.72)",
                 "blur": 3
               }
-            }
+            },
+            "padding": "0"
           },
           "title": "Time series chart",
           "dropShadow": false,
@@ -2604,7 +2606,7 @@
           "titleColor": "rgba(0, 0, 0, 0.87)",
           "titleTooltip": "",
           "widgetStyle": {},
-          "widgetCss": ".tb-time-series-chart-panel {\n    padding: 0;\n}\n\n.tb-time-series-chart-panel div.tb-widget-title {\n    padding-top: 5px;\n    padding-left: 5px;\n}",
+          "widgetCss": ".tb-time-series-chart-panel div.tb-widget-title {\n    padding-top: 5px;\n    padding-left: 5px;\n}",
           "pageSize": 1024,
           "units": "%",
           "decimals": null,

ui-ngx/src/assets/dashboard/tenant_admin_home_page.json

@@ -758,13 +758,14 @@
                 "color": "rgba(255,255,255,0.72)",
                 "blur": 3
               }
-            }
+            },
+            "padding": "0"
           },
           "title": "Time series chart",
           "dropShadow": false,
           "enableFullscreen": false,
           "titleStyle": null,
-          "configMode": "advanced",
+          "configMode": "basic",
           "actions": {},
           "showTitleIcon": false,
           "titleIcon": "thermostat",
@@ -782,7 +783,7 @@
           "titleColor": "rgba(0, 0, 0, 0.87)",
           "titleTooltip": "",
           "widgetStyle": {},
-          "widgetCss": ".tb-widget-container > .tb-widget {\n    border: none !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n}\n\n.tb-time-series-chart-panel {\n    padding: 0;\n}\n\n.tb-time-series-chart-panel div.tb-widget-title {\n    padding-top: 5px;\n    padding-left: 5px;\n}",
+          "widgetCss": ".tb-widget-container > .tb-widget {\n    border: none !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n}\n\n.tb-time-series-chart-panel div.tb-widget-title {\n    padding-top: 5px;\n    padding-left: 5px;\n}",
           "pageSize": 1024,
           "units": "",
           "decimals": null,
@@ -932,42 +933,47 @@
           "color": "rgba(0, 0, 0, 0.87)",
           "padding": "0px",
           "settings": {
+            "yAxes": {
+              "default": {
+                "units": null,
+                "decimals": 0,
+                "show": true,
+                "label": "",
+                "labelFont": {
+                  "family": "Roboto",
+                  "size": 12,
+                  "sizeUnit": "px",
+                  "style": "normal",
+                  "weight": "600",
+                  "lineHeight": "1"
+                },
+                "labelColor": "rgba(0, 0, 0, 0.54)",
+                "position": "left",
+                "showTickLabels": true,
+                "tickLabelFont": {
+                  "family": "Roboto",
+                  "size": 12,
+                  "sizeUnit": "px",
+                  "style": "normal",
+                  "weight": "400",
+                  "lineHeight": "1"
+                },
+                "tickLabelColor": "rgba(0, 0, 0, 0.54)",
+                "ticksFormatter": null,
+                "showTicks": false,
+                "ticksColor": "rgba(0, 0, 0, 0.54)",
+                "showLine": false,
+                "lineColor": "rgba(0, 0, 0, 0.54)",
+                "showSplitLines": false,
+                "splitLinesColor": "rgba(0, 0, 0, 0.12)",
+                "id": "default",
+                "order": 0,
+                "min": 0
+              }
+            },
             "thresholds": [],
             "dataZoom": false,
             "stack": false,
-            "yAxis": {
-              "show": true,
-              "label": "",
-              "labelFont": {
-                "family": "Roboto",
-                "size": 12,
-                "sizeUnit": "px",
-                "style": "normal",
-                "weight": "600",
-                "lineHeight": "1"
-              },
-              "labelColor": "rgba(0, 0, 0, 0.54)",
-              "position": "left",
-              "showTickLabels": true,
-              "tickLabelFont": {
-                "family": "Roboto",
-                "size": 12,
-                "sizeUnit": "px",
-                "style": "normal",
-                "weight": "400",
-                "lineHeight": "1"
-              },
-              "tickLabelColor": "rgba(0, 0, 0, 0.54)",
-              "ticksFormatter": "",
-              "showTicks": false,
-              "ticksColor": "rgba(0, 0, 0, 0.54)",
-              "showLine": false,
-              "lineColor": "rgba(0, 0, 0, 0.54)",
-              "showSplitLines": false,
-              "splitLinesColor": "rgba(0, 0, 0, 0.12)",
-              "min": 0,
-              "max": null
-            },
             "xAxis": {
               "show": true,
               "label": "",
@@ -1060,53 +1066,6 @@
             "tooltipDateInterval": false,
             "tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
             "tooltipBackgroundBlur": 4,
-            "background": {
-              "type": "color",
-              "color": "#fff",
-              "overlay": {
-                "enabled": false,
-                "color": "rgba(255,255,255,0.72)",
-                "blur": 3
-              }
-            },
-            "yAxes": {
-              "default": {
-                "units": null,
-                "decimals": 0,
-                "show": true,
-                "label": "",
-                "labelFont": {
-                  "family": "Roboto",
-                  "size": 12,
-                  "sizeUnit": "px",
-                  "style": "normal",
-                  "weight": "600",
-                  "lineHeight": "1"
-                },
-                "labelColor": "rgba(0, 0, 0, 0.54)",
-                "position": "left",
-                "showTickLabels": true,
-                "tickLabelFont": {
-                  "family": "Roboto",
-                  "size": 12,
-                  "sizeUnit": "px",
-                  "style": "normal",
-                  "weight": "400",
-                  "lineHeight": "1"
-                },
-                "tickLabelColor": "rgba(0, 0, 0, 0.54)",
-                "ticksFormatter": null,
-                "showTicks": false,
-                "ticksColor": "rgba(0, 0, 0, 0.54)",
-                "showLine": false,
-                "lineColor": "rgba(0, 0, 0, 0.54)",
-                "showSplitLines": false,
-                "splitLinesColor": "rgba(0, 0, 0, 0.12)",
-                "id": "default",
-                "order": 0,
-                "min": 0
-              }
-            },
             "animation": {
               "animation": true,
               "animationThreshold": 2000,
@@ -1116,7 +1075,17 @@
               "animationDurationUpdate": 300,
               "animationEasingUpdate": "cubicOut",
               "animationDelayUpdate": 0
-            }
+            },
+            "background": {
+              "type": "color",
+              "color": "#fff",
+              "overlay": {
+                "enabled": false,
+                "color": "rgba(255,255,255,0.72)",
+                "blur": 3
+              }
+            },
+            "padding": "0"
           },
           "title": "Time series chart",
           "dropShadow": false,
@@ -1140,7 +1109,7 @@
           "titleColor": "rgba(0, 0, 0, 0.87)",
           "titleTooltip": "",
           "widgetStyle": {},
-          "widgetCss": ".tb-widget-container > .tb-widget {\n    border: none !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n}\n\n.tb-time-series-chart-panel {\n    padding: 0;\n}\n\n.tb-time-series-chart-panel div.tb-widget-title {\n    padding-top: 5px;\n    padding-left: 5px;\n}",
+          "widgetCss": ".tb-widget-container > .tb-widget {\n    border: none !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n}\n\n.tb-time-series-chart-panel div.tb-widget-title {\n    padding-top: 5px;\n    padding-left: 5px;\n}",
           "pageSize": 1024,
           "units": "",
           "decimals": null,

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -5213,6 +5213,7 @@
         "card-buttons": "Card buttons",
         "show-card-buttons": "Show card buttons",
         "card-border-radius": "Card border radius",
+        "card-padding": "Card padding",
         "card-appearance": "Card appearance",
         "color": "Color",
         "tooltip": "Tooltip",

ui-ngx/yarn.lock

@@ -5367,13 +5367,13 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-echarts@^5.4.3:
+echarts@^5.5.0:
-  version "5.4.3"
+  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
-  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+  integrity sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==
   dependencies:
     tslib "2.3.0"
-    zrender "5.4.4"
+    zrender "5.5.0"
 
 editorconfig@^0.15.3:
   version "0.15.3"
@@ -11101,9 +11101,9 @@ zone.js@~0.13.0:
   dependencies:
     tslib "^2.3.0"
 
-zrender@5.4.4:
+zrender@5.5.0:
-  version "5.4.4"
+  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
-  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+  integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
   dependencies:
     tslib "2.3.0"