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

Merge remote-tracking branch 'upstream/master' into fix/apiUsageDashboard

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2024-03-12 14:42:11 +02:00
commit 230ad4e42c
21 changed files with 1613 additions and 778 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">

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

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

35
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';
@ -884,7 +884,16 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartAxisSetting
fontWeight: xAxisTickLabelStyle.fontWeight,
fontFamily: xAxisTickLabelStyle.fontFamily,
fontSize: xAxisTickLabelStyle.fontSize,
hideOverlap: true
hideOverlap: true,
/* formatter: {
year: '{yyyy}',
month: '{MMM}',
day: '{d}',
hour: '{HH}:{mm}',
minute: '{HH}:{mm}',
second: '{HH}:{mm}:{ss}',
millisecond: '{hh}:{mm}:{ss} {SSS}'
} */
},
axisLine: {
show: settings.showLine,
@ -906,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);
@ -1021,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);
@ -1044,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;

60
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,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);
}
}
}

17
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-row space-between">
<div>{{ 'widgets.background.background' | translate }}</div>
<tb-background-settings formControlName="background">
</tb-background-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, []]
});
}

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

File diff suppressed because it is too large Load Diff

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

@ -69,142 +69,6 @@
"id": "d70cc256-4c7b-ee06-9905-b8c5e546605f",
"typeFullFqn": "system.cards.markdown_card"
},
"8ee72d43-678c-4e25-e9a8-7d4cfd7a5f8e": {
"type": "timeseries",
"sizeX": 8,
"sizeY": 5,
"config": {
"datasources": [
{
"type": "entity",
"name": null,
"entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079",
"filterId": null,
"dataKeys": [
{
"name": "transportMsgCountHourly",
"type": "timeseries",
"label": "{i18n:widgets.transport-messages.title}",
"color": "#305680",
"settings": {},
"_hash": 0.2880464219129071,
"aggregationType": null,
"units": null,
"decimals": null,
"funcBody": null,
"usePostProcessing": null,
"postFuncBody": null
}
],
"latestDataKeys": []
}
],
"timewindow": {
"hideInterval": false,
"hideLastInterval": false,
"hideQuickInterval": false,
"hideAggregation": true,
"hideAggInterval": false,
"hideTimezone": false,
"selectedTab": 1,
"history": {
"historyType": 0,
"timewindowMs": 2592000000,
"interval": 86400000,
"fixedTimewindow": {
"startTimeMs": 1680443065451,
"endTimeMs": 1680529465451
},
"quickInterval": "CURRENT_DAY"
},
"aggregation": {
"type": "SUM",
"limit": 50000
}
},
"showTitle": false,
"backgroundColor": "#fff",
"color": "rgba(0, 0, 0, 0.87)",
"padding": "0px",
"settings": {
"stack": true,
"fontSize": 10,
"fontColor": "#545454",
"showTooltip": true,
"tooltipIndividual": false,
"tooltipCumulative": false,
"hideZeros": false,
"grid": {
"verticalLines": false,
"horizontalLines": false,
"outlineWidth": 0,
"color": "#545454",
"backgroundColor": null,
"tickColor": "#DDDDDD"
},
"xaxis": {
"title": null,
"showLabels": true,
"color": "#545454"
},
"yaxis": {
"min": 0,
"max": null,
"title": null,
"showLabels": true,
"color": "#545454",
"tickSize": null,
"tickDecimals": 0,
"ticksFormatter": "return value % 1000 === 0 ? ((value / 1000) + 'k') : '';"
},
"defaultBarWidth": 1800000,
"barAlignment": "left",
"comparisonEnabled": false,
"timeForComparison": "previousInterval",
"comparisonCustomIntervalValue": 7200000,
"xaxisSecond": {
"axisPosition": "top",
"title": null,
"showLabels": true
},
"customLegendEnabled": false,
"dataKeysListForLabels": [],
"showLegend": false,
"legendConfig": {
"direction": "column",
"position": "bottom",
"sortDataKeys": false,
"showMin": false,
"showMax": false,
"showAvg": true,
"showTotal": false,
"showLatest": false
}
},
"title": "Transport messages",
"dropShadow": false,
"enableFullscreen": false,
"titleStyle": {
"fontSize": "16px",
"fontWeight": 400
},
"widgetStyle": {
"padding": "0"
},
"useDashboardTimewindow": false,
"actions": {},
"displayTimewindow": true,
"showTitleIcon": false,
"titleTooltip": "",
"widgetCss": ".tb-widget-container > .tb-widget {\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n\n.tb-widget-container > .tb-widget .flot-base {\n opacity: 0.48;\n}\n",
"pageSize": 1024,
"noDataDisplayMessage": ""
},
"row": 0,
"col": 0,
"id": "8ee72d43-678c-4e25-e9a8-7d4cfd7a5f8e",
"typeFullFqn": "system.charts.timeseries_bars_flot"
},
"867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4": {
"type": "static",
"sizeX": 7.5,
@ -269,159 +133,6 @@
"id": "a23185ad-dc46-806c-0e50-5b21fb080ace",
"typeFullFqn": "system.home_page_widgets.getting_started"
},
"d26e5cd7-75ef-d475-00c7-1a2d1114efe8": {
"type": "timeseries",
"sizeX": 8,
"sizeY": 5,
"config": {
"datasources": [
{
"type": "entity",
"name": null,
"entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079",
"filterId": null,
"dataKeys": [
{
"name": "activeDevicesCountHourly",
"type": "timeseries",
"label": "{i18n:device.devices}",
"color": "#305680",
"settings": {
"hideDataByDefault": false,
"disableDataHiding": false,
"removeFromLegend": false,
"excludeFromStacking": false,
"showLines": true,
"lineWidth": 3,
"fillLines": true,
"fillLinesOpacity": 0.04,
"showPoints": false,
"showSeparateAxis": false,
"axisPosition": "left",
"comparisonSettings": {
"showValuesForComparison": true,
"comparisonValuesLabel": "",
"color": ""
},
"thresholds": []
},
"_hash": 0.9688095820365725,
"aggregationType": null,
"units": null,
"decimals": null,
"funcBody": null,
"usePostProcessing": null,
"postFuncBody": null
}
],
"latestDataKeys": []
}
],
"timewindow": {
"hideInterval": false,
"hideLastInterval": false,
"hideQuickInterval": false,
"hideAggregation": true,
"hideAggInterval": true,
"hideTimezone": false,
"selectedTab": 1,
"history": {
"historyType": 0,
"timewindowMs": 2592000000,
"interval": 7200000,
"fixedTimewindow": {
"startTimeMs": 1681400576338,
"endTimeMs": 1681486976338
},
"quickInterval": "CURRENT_DAY"
},
"aggregation": {
"type": "NONE",
"limit": 25000
}
},
"showTitle": false,
"backgroundColor": "#fff",
"color": "rgba(0, 0, 0, 0.87)",
"padding": "0px",
"settings": {
"stack": false,
"fontSize": 10,
"fontColor": "#545454",
"showTooltip": true,
"tooltipIndividual": false,
"tooltipCumulative": false,
"hideZeros": false,
"grid": {
"verticalLines": false,
"horizontalLines": false,
"outlineWidth": 0,
"color": "#545454",
"backgroundColor": null,
"tickColor": "#DDDDDD"
},
"xaxis": {
"title": null,
"showLabels": true,
"color": "#545454"
},
"yaxis": {
"min": null,
"max": null,
"title": null,
"showLabels": true,
"color": "#545454",
"tickSize": null,
"tickDecimals": 0,
"ticksFormatter": ""
},
"shadowSize": 0,
"smoothLines": true,
"comparisonEnabled": false,
"timeForComparison": "previousInterval",
"comparisonCustomIntervalValue": 7200000,
"xaxisSecond": {
"axisPosition": "top",
"title": null,
"showLabels": true
},
"customLegendEnabled": false,
"dataKeysListForLabels": [],
"showLegend": false,
"legendConfig": {
"direction": "column",
"position": "bottom",
"sortDataKeys": false,
"showMin": false,
"showMax": false,
"showAvg": true,
"showTotal": false,
"showLatest": false
}
},
"title": "Devices activity",
"dropShadow": false,
"enableFullscreen": false,
"titleStyle": {
"fontSize": "16px",
"fontWeight": 400
},
"useDashboardTimewindow": false,
"displayTimewindow": true,
"showTitleIcon": false,
"titleTooltip": "",
"widgetStyle": {
"padding": "0"
},
"widgetCss": ".tb-widget-container > .tb-widget {\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n}\n",
"pageSize": 1024,
"noDataDisplayMessage": ""
},
"row": 0,
"col": 0,
"id": "d26e5cd7-75ef-d475-00c7-1a2d1114efe8",
"typeFullFqn": "system.charts.basic_timeseries"
},
"ebbd0a6e-8a47-e770-5086-7f4974250f2d": {
"type": "static",
"sizeX": 7.5,
@ -777,6 +488,655 @@
"col": 0,
"id": "7ac20b6a-dc40-b18e-9f5f-bca20bc693bb",
"typeFullFqn": "system.cards.markdown_card"
},
"bf7f6efa-7614-3bc0-c4d0-6665d67510a8": {
"typeFullFqn": "system.time_series_chart",
"type": "timeseries",
"sizeX": 8,
"sizeY": 5,
"config": {
"datasources": [
{
"type": "entity",
"name": "",
"entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079",
"dataKeys": [
{
"name": "transportMsgCountHourly",
"type": "timeseries",
"label": "{i18n:widgets.transport-messages.title}",
"color": "#305680",
"settings": {
"showInLegend": true,
"dataHiddenByDefault": false,
"type": "bar",
"lineSettings": {
"showLine": true,
"step": false,
"stepType": "start",
"smooth": false,
"lineType": "solid",
"lineWidth": 2,
"showPoints": false,
"showPointLabel": false,
"pointLabelPosition": "top",
"pointLabelFont": {
"family": "Roboto",
"size": 11,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "1"
},
"pointLabelColor": "rgba(0, 0, 0, 0.76)",
"pointShape": "emptyCircle",
"pointSize": 4,
"fillAreaSettings": {
"type": "none",
"opacity": 0.4,
"gradient": {
"start": 100,
"end": 0
}
}
},
"barSettings": {
"showBorder": false,
"borderWidth": 2,
"borderRadius": 0,
"showLabel": false,
"labelPosition": "top",
"labelFont": {
"family": "Roboto",
"size": 11,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "1"
},
"labelColor": "rgba(0, 0, 0, 0.76)",
"backgroundSettings": {
"type": "none",
"opacity": 0.4,
"gradient": {
"start": 100,
"end": 0
}
}
}
},
"_hash": 0.39181957822569946,
"decimals": 0
}
],
"alarmFilterConfig": {
"statusList": [
"ACTIVE"
]
},
"latestDataKeys": []
}
],
"timewindow": {
"hideInterval": false,
"hideLastInterval": false,
"hideQuickInterval": false,
"hideAggregation": true,
"hideAggInterval": false,
"hideTimezone": false,
"selectedTab": 1,
"history": {
"historyType": 0,
"timewindowMs": 2592000000,
"interval": 86400000,
"fixedTimewindow": {
"startTimeMs": 1709807941444,
"endTimeMs": 1709894341444
},
"quickInterval": "CURRENT_DAY"
},
"aggregation": {
"type": "SUM",
"limit": 25000
},
"timezone": null
},
"showTitle": false,
"backgroundColor": "rgba(0, 0, 0, 0)",
"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": "return value === 0 ? value : ((value / 1000) + 'k');",
"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,
"max": null
}
},
"thresholds": [],
"dataZoom": false,
"stack": false,
"xAxis": {
"show": true,
"label": "",
"labelFont": {
"family": "Roboto",
"size": 12,
"sizeUnit": "px",
"style": "normal",
"weight": "600",
"lineHeight": "1"
},
"labelColor": "rgba(0, 0, 0, 0.54)",
"position": "bottom",
"showTickLabels": true,
"tickLabelFont": {
"family": "Roboto",
"size": 10,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "1"
},
"tickLabelColor": "rgba(0, 0, 0, 0.54)",
"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)"
},
"noAggregationBarWidthSettings": {
"strategy": "group",
"groupWidth": {
"relative": true,
"relativeWidth": 2,
"absoluteWidth": 1000
},
"barWidth": {
"relative": true,
"relativeWidth": 2,
"absoluteWidth": 1000
}
},
"showLegend": false,
"legendLabelFont": {
"family": "Roboto",
"size": 12,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "16px"
},
"legendLabelColor": "rgba(0, 0, 0, 0.76)",
"legendConfig": {
"direction": "column",
"position": "top",
"sortDataKeys": false,
"showMin": false,
"showMax": false,
"showAvg": true,
"showTotal": false,
"showLatest": false
},
"showTooltip": true,
"tooltipTrigger": "axis",
"tooltipValueFont": {
"family": "Roboto",
"size": 12,
"sizeUnit": "px",
"style": "normal",
"weight": "500",
"lineHeight": "16px"
},
"tooltipValueColor": "rgba(0, 0, 0, 0.76)",
"tooltipShowDate": true,
"tooltipDateFormat": {
"format": "MMMM dd, yyyy",
"lastUpdateAgo": false,
"custom": true
},
"tooltipDateFont": {
"family": "Roboto",
"size": 11,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "16px"
},
"tooltipDateColor": "rgba(0, 0, 0, 0.76)",
"tooltipDateInterval": false,
"tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
"tooltipBackgroundBlur": 4,
"animation": {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"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,
"titleStyle": null,
"configMode": "basic",
"actions": {},
"showTitleIcon": false,
"titleIcon": "thermostat",
"iconColor": "#1F6BDD",
"useDashboardTimewindow": false,
"displayTimewindow": true,
"titleFont": {
"size": 16,
"sizeUnit": "px",
"family": "Roboto",
"weight": "500",
"style": "normal",
"lineHeight": "24px"
},
"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 div.tb-widget-title {\n padding-top: 5px;\n padding-left: 5px;\n}",
"pageSize": 1024,
"units": "",
"decimals": null,
"noDataDisplayMessage": "",
"timewindowStyle": {
"showIcon": true,
"iconSize": "24px",
"icon": "query_builder",
"iconPosition": "left",
"font": {
"size": 14,
"sizeUnit": "px",
"family": "Roboto",
"weight": "400",
"style": "normal",
"lineHeight": "16px"
},
"color": "rgba(0, 0, 0, 0.54)",
"displayTypePrefix": true
},
"margin": "0px",
"borderRadius": "0px",
"iconSize": "0px"
},
"row": 0,
"col": 0,
"id": "bf7f6efa-7614-3bc0-c4d0-6665d67510a8"
},
"8e71a398-caf5-540d-cec5-6e5dc264343e": {
"typeFullFqn": "system.time_series_chart",
"type": "timeseries",
"sizeX": 8,
"sizeY": 5,
"config": {
"datasources": [
{
"type": "entity",
"name": "",
"entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079",
"dataKeys": [
{
"name": "activeDevicesCountHourly",
"type": "timeseries",
"label": "{i18n:device.devices}",
"color": "#305680",
"settings": {
"showInLegend": true,
"dataHiddenByDefault": false,
"type": "line",
"lineSettings": {
"showLine": true,
"step": false,
"stepType": "start",
"smooth": true,
"lineType": "solid",
"lineWidth": 3,
"showPoints": false,
"showPointLabel": false,
"pointLabelPosition": "top",
"pointLabelFont": {
"family": "Roboto",
"size": 11,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "1"
},
"pointLabelColor": "rgba(0, 0, 0, 0.76)",
"pointShape": "circle",
"pointSize": 14,
"fillAreaSettings": {
"type": "opacity",
"opacity": 0.04,
"gradient": {
"start": 100,
"end": 0
}
}
},
"barSettings": {
"showBorder": false,
"borderWidth": 2,
"borderRadius": 0,
"showLabel": false,
"labelPosition": "top",
"labelFont": {
"family": "Roboto",
"size": 11,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "1"
},
"labelColor": "rgba(0, 0, 0, 0.76)",
"backgroundSettings": {
"type": "none",
"opacity": 0.4,
"gradient": {
"start": 100,
"end": 0
}
}
}
},
"_hash": 0.39181957822569946,
"decimals": 0,
"aggregationType": null,
"funcBody": null,
"usePostProcessing": null,
"postFuncBody": null
}
],
"alarmFilterConfig": {
"statusList": [
"ACTIVE"
]
},
"latestDataKeys": []
}
],
"timewindow": {
"hideInterval": false,
"hideLastInterval": false,
"hideQuickInterval": false,
"hideAggregation": true,
"hideAggInterval": true,
"hideTimezone": false,
"selectedTab": 1,
"history": {
"historyType": 0,
"timewindowMs": 2592000000,
"interval": 86400000,
"fixedTimewindow": {
"startTimeMs": 1709807941444,
"endTimeMs": 1709894341444
},
"quickInterval": "CURRENT_DAY"
},
"aggregation": {
"type": "NONE",
"limit": 25000
},
"timezone": null
},
"showTitle": false,
"backgroundColor": "rgba(0, 0, 0, 0)",
"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,
"xAxis": {
"show": true,
"label": "",
"labelFont": {
"family": "Roboto",
"size": 12,
"sizeUnit": "px",
"style": "normal",
"weight": "600",
"lineHeight": "1"
},
"labelColor": "rgba(0, 0, 0, 0.54)",
"position": "bottom",
"showTickLabels": true,
"tickLabelFont": {
"family": "Roboto",
"size": 10,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "1"
},
"tickLabelColor": "rgba(0, 0, 0, 0.54)",
"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)"
},
"noAggregationBarWidthSettings": {
"strategy": "group",
"groupWidth": {
"relative": true,
"relativeWidth": 2,
"absoluteWidth": 1000
},
"barWidth": {
"relative": true,
"relativeWidth": 2,
"absoluteWidth": 1000
}
},
"showLegend": false,
"legendLabelFont": {
"family": "Roboto",
"size": 12,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "16px"
},
"legendLabelColor": "rgba(0, 0, 0, 0.76)",
"legendConfig": {
"direction": "column",
"position": "top",
"sortDataKeys": false,
"showMin": false,
"showMax": false,
"showAvg": true,
"showTotal": false,
"showLatest": false
},
"showTooltip": true,
"tooltipTrigger": "axis",
"tooltipValueFont": {
"family": "Roboto",
"size": 12,
"sizeUnit": "px",
"style": "normal",
"weight": "500",
"lineHeight": "16px"
},
"tooltipValueColor": "rgba(0, 0, 0, 0.76)",
"tooltipShowDate": true,
"tooltipDateFormat": {
"format": "MMMM dd, yyyy",
"lastUpdateAgo": false,
"custom": true
},
"tooltipDateFont": {
"family": "Roboto",
"size": 11,
"sizeUnit": "px",
"style": "normal",
"weight": "400",
"lineHeight": "16px"
},
"tooltipDateColor": "rgba(0, 0, 0, 0.76)",
"tooltipDateInterval": false,
"tooltipBackgroundColor": "rgba(255, 255, 255, 0.76)",
"tooltipBackgroundBlur": 4,
"animation": {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 200,
"animationEasing": "cubicOut",
"animationDelay": 0,
"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,
"titleStyle": null,
"configMode": "basic",
"actions": {},
"showTitleIcon": false,
"titleIcon": "thermostat",
"iconColor": "#1F6BDD",
"useDashboardTimewindow": false,
"displayTimewindow": true,
"titleFont": {
"size": 16,
"sizeUnit": "px",
"family": "Roboto",
"weight": "500",
"style": "normal",
"lineHeight": "24px"
},
"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 div.tb-widget-title {\n padding-top: 5px;\n padding-left: 5px;\n}",
"pageSize": 1024,
"units": "",
"decimals": null,
"noDataDisplayMessage": "",
"timewindowStyle": {
"showIcon": true,
"iconSize": "24px",
"icon": "query_builder",
"iconPosition": "left",
"font": {
"size": 14,
"sizeUnit": "px",
"family": "Roboto",
"weight": "400",
"style": "normal",
"lineHeight": "16px"
},
"color": "rgba(0, 0, 0, 0.54)",
"displayTypePrefix": true
},
"margin": "0px",
"borderRadius": "0px",
"iconSize": "0px"
},
"row": 0,
"col": 0,
"id": "8e71a398-caf5-540d-cec5-6e5dc264343e"
}
},
"states": {
@ -868,7 +1228,7 @@
"layouts": {
"main": {
"widgets": {
"8ee72d43-678c-4e25-e9a8-7d4cfd7a5f8e": {
"bf7f6efa-7614-3bc0-c4d0-6665d67510a8": {
"sizeX": 24,
"sizeY": 11,
"row": 0,
@ -895,7 +1255,7 @@
"layouts": {
"main": {
"widgets": {
"d26e5cd7-75ef-d475-00c7-1a2d1114efe8": {
"8e71a398-caf5-540d-cec5-6e5dc264343e": {
"sizeX": 24,
"sizeY": 11,
"row": 0,
@ -1049,6 +1409,5 @@
"dashboardCss": ".tb-widget-container > .tb-widget {\n border: 1px solid rgba(0, 0, 0, 0.05);\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.04);\n border-radius: 12px;\n}\n\n.tb-widget-container > .tb-widget:not([style*=\"padding: 0\"]) {\n padding: 16px !important;\n}\n\n.tb-card-title {\n display: grid;\n}\n\n.tb-home-widget-title {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n color: rgba(0, 0, 0, 0.54);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.tb-home-widget-link {\n position: relative;\n border-bottom: none;\n}\n\n.tb-home-widget-link:hover {\n border-bottom: none;\n}\n\n.tb-home-widget-link:focus {\n border-bottom: none;\n}\n\n.tb-home-widget-link::after {\n content: 'arrow_forward';\n display: inline-block;\n transform: rotate(315deg);\n font-family: 'Material Icons';\n font-weight: normal;\n font-style: normal;\n font-size: 18px;\n color: rgba(0, 0, 0, 0.12);\n vertical-align: bottom;\n margin-left: 6px; \n}\n\n.tb-home-widget-link:hover::after {\n color: inherit;\n}\n\n.tb-home-widget-info-icon {\n color: rgba(0, 0, 0, 0.12);\n font-size: 16px;\n width: 16px;\n height: 16px;\n line-height: 15px;\n vertical-align: middle;\n}\n\n.tb-widget-container > .tb-widget .tb-timewindow {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.25px;\n color: rgba(0, 0, 0, 0.54);\n padding: 0;\n}\n\n.tb-widget-container > .tb-widget .tb-legend-keys .tb-legend-label {\n cursor: pointer;\n user-select: none;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0.2px;\n color: rgba(0, 0, 0, 0.54);\n}\n\n@media screen and (min-width: 960px) and (max-width: 1279px) {\n .tb-widget-container > .tb-widget {\n border-radius: 4px;\n }\n .tb-widget-container > .tb-widget:not([style*=\"padding: 0\"]) {\n padding: 2px !important;\n }\n .tb-hide-md {\n display: none;\n }\n}\n\n@media screen and (min-width: 1280px) and (max-width: 1819px) {\n .tb-widget-container > .tb-widget:not([style*=\"padding: 0\"]) {\n padding: 8px !important;\n }\n .tb-hide-lg {\n display: none;\n }\n}\n\n@media screen and (min-width: 960px) and (max-width: 1819px) {\n .tb-hide-md-lg {\n display: none;\n }\n\n .tb-home-widget-title {\n font-size: 12px;\n line-height: 16px;\n }\n \n .tb-widget-container > .tb-widget .tb-widget-title {\n padding: 0;\n }\n\n .tb-widget-container > .tb-widget .tb-timewindow {\n font-size: 12px;\n line-height: 16px;\n min-height: 24px;\n padding: 0;\n }\n\n .tb-widget-container > .tb-widget .tb-timewindow .mat-mdc-icon-button.tb-mat-32 {\n width: 24px;\n height: 24px;\n line-height: 24px;\n }\n\n .tb-widget-container > .tb-widget .tb-timewindow .mat-mdc-icon-button.tb-mat-32 .mat-icon {\n width: 18px;\n height: 18px;\n font-size: 18px;\n }\n \n .tb-widget-container > .tb-widget tb-legend {\n padding-bottom: 0 !important;\n }\n \n .tb-widget-container > .tb-widget .tb-legend-keys .tb-legend-label {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: 0.25px;\n }\n}\n\n@media screen and (max-width: 959px), screen and (min-width: 1820px) {\n .tb-hide-not-md-lg {\n display: none;\n }\n}\n"
}
},
"externalId": null,
"name": "Tenant Administrator Home Page"
}
}

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

@ -5216,6 +5216,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"