dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Igor Kulikov 2024-03-12 14:32:27 +02:00
parent e2a77779ad
commit b3d536a567
21 changed files with 211 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/package.json
View File

@ -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",

66
ui-ngx/patches/echarts+5.4.3.patch → ui-ngx/patches/echarts+5.5.0.patch
View File

@ -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:
@@ -108,7 +111,10 @@ var dataZoomProcessor = {
@@ -107,7 +110,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,

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

@ -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">

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

@ -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;

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

@ -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'
},

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

@ -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: [
{

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

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

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

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

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

@ -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;
noAggregationBarWidthStrategy: TimeSeriesChartNoAggregationBarWidthStrategy;
noAggregationWidthRelative?: boolean;
noAggregationWidth?: number;
timeInterval?: Interval;
noAggregation?: boolean;
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 + '',

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

@ -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">

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

@ -24,7 +24,9 @@ $maxLegendHeight: 35%;
display: flex;
flex-direction: column;
gap: 8px;
&.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;

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

@ -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) {

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

@ -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);

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

@ -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,
stack, noAggregation, noAggregationBarWidthSettings, darkMode);
let series = generateChartSeries(dataItems,
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};
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;
}
shared: barRenderSharedContext};
}
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;

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

@ -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,8 +164,11 @@ 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;
if (!isEqual(item.dataSet, datasourceData?.data)) {
item.dataSet = datasourceData?.data;
item.data = datasourceData?.data ? toNamedData(datasourceData.data) : [];
}
}
this.onResize();
if (this.timeSeriesChart) {
this.timeSeriesChartOptions.xAxis[0].min = this.ctx.defaultSubscription.timeWindow.minTime;
@ -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);
}
}
}

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

@ -160,10 +160,19 @@
<tb-time-series-chart-animation-settings
formControlName="animation">
</tb-time-series-chart-animation-settings>
<div class="tb-form-panel">
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div>
<div class="tb-form-row space-between">
<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>

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

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

12
ui-ngx/src/assets/dashboard/sys_admin_home_page.json
View File

@ -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,

85
ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
View File

@ -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,10 +933,10 @@
"color": "rgba(0, 0, 0, 0.87)",
"padding": "0px",
"settings": {
"thresholds": [],
"dataZoom": false,
"stack": false,
"yAxis": {
"yAxes": {
"default": {
"units": null,
"decimals": 0,
"show": true,
"label": "",
"labelFont": {
@ -958,16 +959,21 @@
"lineHeight": "1"
},
"tickLabelColor": "rgba(0, 0, 0, 0.54)",
"ticksFormatter": "",
"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)",
"min": 0,
"max": null
"id": "default",
"order": 0,
"min": 0
}
},
"thresholds": [],
"dataZoom": false,
"stack": false,
"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,8 +1075,18 @@
"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,
"enableFullscreen": 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,

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -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",

18
ui-ngx/yarn.lock
View File

@ -5367,13 +5367,13 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0"
safer-buffer "^2.1.0"
echarts@^5.4.3:
version "5.4.3"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
echarts@^5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.5.0.tgz#c13945a7f3acdd67c134d8a9ac67e917830113ac"
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:
version "5.4.4"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
zrender@5.5.0:
version "5.5.0"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"
integrity sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==
dependencies:
tslib "2.3.0"