Browse Source

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

pull/10326/head
Vladyslav_Prykhodko 3 years ago
parent
commit
230ad4e42c
  1. 2
      ui-ngx/package.json
  2. 66
      ui-ngx/patches/echarts+5.5.0.patch
  3. 6
      ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
  4. 2
      ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
  5. 7
      ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts
  6. 2
      ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
  7. 1
      ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts
  8. 2
      ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
  9. 25
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts
  10. 3
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html
  11. 20
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss
  12. 4
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts
  13. 4
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.models.ts
  14. 35
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
  15. 60
      ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
  16. 17
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
  17. 3
      ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
  18. 1168
      ui-ngx/src/assets/dashboard/sys_admin_home_page.json
  19. 945
      ui-ngx/src/assets/dashboard/tenant_admin_home_page.json
  20. 1
      ui-ngx/src/assets/locale/locale.constant-en_US.json
  21. 18
      ui-ngx/yarn.lock

2
ui-ngx/package.json

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

66
ui-ngx/patches/echarts+5.4.3.patch → 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 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 --- a/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js
+++ b/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(); return axisProxy.getDataValueWindow();
} }
} else { } 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++) { for (var j = 0; j < axisInfo.indexList.length; j++) {
var proxy = this.getAxisProxy(axisDim, axisInfo.indexList[j]); var proxy = this.getAxisProxy(axisDim, axisInfo.indexList[j]);
- if (proxy.hostedBy(this)) { - if (proxy.hostedBy(this)) {
+ if (proxy && proxy.hostedBy(this)) { + if (proxy && proxy.hostedBy(this)) {
return proxy; return proxy;
} }
- if (!firstProxy) { - if (!firstProxy) {
+ if (proxy && !firstProxy) { + if (proxy && !firstProxy) {
firstProxy = proxy; firstProxy = proxy;
} }
} }
diff --git a/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js b/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js 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 --- a/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js
+++ b/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[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(); - var minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
- sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan); - sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan);
- this.range = range; - this.range = range;
-
- if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) { - if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) {
- return range; - return range;
+ var proxy = this.dataZoomModel.findRepresentativeAxisProxy(); + var proxy = this.dataZoomModel.findRepresentativeAxisProxy();
@ -47,7 +45,6 @@ index 7163279..c37f9c2 100644
+ var minMaxSpan = proxy.getMinMaxSpan(); + var minMaxSpan = proxy.getMinMaxSpan();
+ sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan); + sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan);
+ this.range = range; + this.range = range;
+
+ if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) { + if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) {
+ return range; + return range;
+ } + }
@ -55,7 +52,7 @@ index 7163279..c37f9c2 100644
}, },
pan: makeMover(function (range, axisModel, coordSysInfo, coordSysMainType, controller, e) { 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 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 --- a/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js
+++ b/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; @@ -64,7 +64,7 @@ var DEFAULT_MOVE_HANDLE_SIZE = 7;
@ -67,7 +64,7 @@ index 590ef51..aff8a0a 100644
var REALTIME_ANIMATION_CONFIG = { var REALTIME_ANIMATION_CONFIG = {
easing: 'cubicOut', easing: 'cubicOut',
duration: 100, duration: 100,
@@ -406,34 +406,37 @@ function (_super) { @@ -359,30 +359,33 @@ var SliderZoomView = /** @class */function (_super) {
var result; var result;
var ecModel = this.ecModel; var ecModel = this.ecModel;
dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) { dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) {
@ -76,20 +73,16 @@ index 590ef51..aff8a0a 100644
- if (result) { - if (result) {
- return; - return;
- } - }
-
- if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) { - if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) {
- return; - return;
- } - }
-
- var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis; - var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis;
- var otherDim = getOtherDim(axisDim); - var otherDim = getOtherDim(axisDim);
- var otherAxisInverse; - var otherAxisInverse;
- var coordSys = seriesModel.coordinateSystem; - var coordSys = seriesModel.coordinateSystem;
-
- if (otherDim != null && coordSys.getOtherAxis) { - if (otherDim != null && coordSys.getOtherAxis) {
- otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse; - otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse;
- } - }
-
- otherDim = seriesModel.getData().mapDimension(otherDim); - otherDim = seriesModel.getData().mapDimension(otherDim);
- result = { - result = {
- thisAxis: thisAxis, - thisAxis: thisAxis,
@ -106,20 +99,16 @@ index 590ef51..aff8a0a 100644
+ if (result) { + if (result) {
+ return; + return;
+ } + }
+
+ if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) { + if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) {
+ return; + return;
+ } + }
+
+ var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis; + var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis;
+ var otherDim = getOtherDim(axisDim); + var otherDim = getOtherDim(axisDim);
+ var otherAxisInverse; + var otherAxisInverse;
+ var coordSys = seriesModel.coordinateSystem; + var coordSys = seriesModel.coordinateSystem;
+
+ if (otherDim != null && coordSys.getOtherAxis) { + if (otherDim != null && coordSys.getOtherAxis) {
+ otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse; + otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse;
+ } + }
+
+ otherDim = seriesModel.getData().mapDimension(otherDim); + otherDim = seriesModel.getData().mapDimension(otherDim);
+ result = { + result = {
+ thisAxis: thisAxis, + thisAxis: thisAxis,
@ -133,10 +122,10 @@ index 590ef51..aff8a0a 100644
}, this); }, this);
return result; 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 viewExtend = this._getViewExtent();
- var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan(); - var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
- var percentExtent = [0, 100]; - 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); - 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; + return false;
+ } + }
}; };
SliderZoomView.prototype._updateView = function (nonRealtime) { 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 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 --- a/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js
+++ b/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 // init stage and not after action dispatch handler, because
// reset should be called after seriesData.restoreData. // reset should be called after seriesData.restoreData.
dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) { dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) {
@ -170,12 +159,12 @@ index 3871784..9bab428 100644
+ if (axisProxy) { + if (axisProxy) {
+ axisProxy.reset(dataZoomModel); + 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. // 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. // and then reset y-axis and filter y-axis.
dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) { dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) {
- dataZoomModel.getAxisProxy(axisDim, axisIndex).filterData(dataZoomModel, api); - dataZoomModel.getAxisProxy(axisDim, axisIndex).filterData(dataZoomModel, api);
+ var axisProxy = dataZoomModel.getAxisProxy(axisDim, axisIndex); + var axisProxy = dataZoomModel.getAxisProxy(axisDim, axisIndex);
@ -186,23 +175,22 @@ index 3871784..9bab428 100644
}); });
ecModel.eachComponent('dataZoom', function (dataZoomModel) { 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 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 --- a/node_modules/echarts/lib/component/toolbox/feature/DataZoom.js
+++ b/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 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(); - 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); + var proxy = dataZoomModel.findRepresentativeAxisProxy(axisModel);
+ if (proxy) { + if (proxy) {
+ var minMaxSpan = proxy.getMinMaxSpan(); + 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) { + if (minMaxSpan.minValueSpan != null || minMaxSpan.maxValueSpan != null) {
+ minMax = sliderMove(0, minMax.slice(), axis.scale.getExtent(), 0, minMaxSpan.minValueSpan, minMaxSpan.maxValueSpan); + minMax = sliderMove(0, minMax.slice(), axis.scale.getExtent(), 0, minMaxSpan.minValueSpan, minMaxSpan.maxValueSpan);
+ } + }
} }
dataZoomModel && (snapshot[dataZoomModel.id] = { 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

@ -245,6 +245,12 @@
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> <input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field> </mat-form-field>
</div> </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>
<tb-widget-actions-panel <tb-widget-actions-panel
formControlName="actions"> formControlName="actions">

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

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

2
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: { tooltip: {
trigger: this.settings.showTooltip ? 'item' : 'none', trigger: this.settings.showTooltip ? 'item' : 'none',
confine: false, confine: false,
appendToBody: true appendTo: 'body',
}, },
series: [ series: [
{ {

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

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

2
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: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine: true, confine: true,
appendToBody: true, appendTo: 'body',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, },

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

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

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

@ -24,7 +24,9 @@ $maxLegendHeight: 35%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: 20px 24px 24px 24px; &.overlay {
padding: 20px 24px 24px 24px;
}
> div:not(.tb-time-series-chart-overlay) { > div:not(.tb-time-series-chart-overlay) {
z-index: 1; z-index: 1;
} }
@ -101,22 +103,6 @@ $maxLegendHeight: 35%;
width: 100%; width: 100%;
table-layout: auto; 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 { th, td {
&:not(:last-child) { &:not(:last-child) {
padding-right: 8px; padding-right: 8px;

4
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>; backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {}; overlayStyle: ComponentStyle = {};
overlayEnabled: boolean;
padding: string;
legendLabelStyle: ComponentStyle; legendLabelStyle: ComponentStyle;
disabledLegendLabelStyle: 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.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
this.overlayStyle = overlayStyle(this.settings.background.overlay); 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; this.showLegend = this.settings.showLegend;
if (this.showLegend) { if (this.showLegend) {

4
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; legendLabelColor: string;
legendConfig: LegendConfig; legendConfig: LegendConfig;
background: BackgroundSettings; background: BackgroundSettings;
padding: string;
} }
export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings = export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings =
@ -48,5 +49,6 @@ export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings
color: 'rgba(255,255,255,0.72)', color: 'rgba(255,255,255,0.72)',
blur: 3 blur: 3
} }
} },
padding: '12px'
} as TimeSeriesChartWidgetSettings); } as TimeSeriesChartWidgetSettings);

35
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 { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import Axis2D from 'echarts/types/src/coord/cartesian/Axis2D'; 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 { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes';
import { SeriesLabelOption } from 'echarts/types/src/util/types'; import { SeriesLabelOption } from 'echarts/types/src/util/types';
import { import {
BarRenderContext, BarRenderContext,
BarRenderSharedContext,
BarVisualSettings, BarVisualSettings,
renderTimeSeriesBar renderTimeSeriesBar
} from '@home/components/widget/lib/chart/time-series-chart-bar.models'; } from '@home/components/widget/lib/chart/time-series-chart-bar.models';
@ -884,7 +884,16 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartAxisSetting
fontWeight: xAxisTickLabelStyle.fontWeight, fontWeight: xAxisTickLabelStyle.fontWeight,
fontFamily: xAxisTickLabelStyle.fontFamily, fontFamily: xAxisTickLabelStyle.fontFamily,
fontSize: xAxisTickLabelStyle.fontSize, 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: { axisLine: {
show: settings.showLine, show: settings.showLine,
@ -906,13 +915,12 @@ export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartAxisSetting
export const generateChartData = (dataItems: TimeSeriesChartDataItem[], export const generateChartData = (dataItems: TimeSeriesChartDataItem[],
thresholdItems: TimeSeriesChartThresholdItem[], thresholdItems: TimeSeriesChartThresholdItem[],
timeInterval: Interval,
stack: boolean, stack: boolean,
noAggregation: boolean, noAggregation: boolean,
noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings, barRenderSharedContext: BarRenderSharedContext,
darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => { 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) { if (thresholdItems.length) {
const thresholds = generateChartThresholds(thresholdItems, darkMode); const thresholds = generateChartThresholds(thresholdItems, darkMode);
series = series.concat(thresholds); series = series.concat(thresholds);
@ -1021,10 +1029,9 @@ const createThresholdData = (val: string | number, item: TimeSeriesChartThreshol
]; ];
const generateChartSeries = (dataItems: TimeSeriesChartDataItem[], const generateChartSeries = (dataItems: TimeSeriesChartDataItem[],
timeInterval: Interval,
stack: boolean, stack: boolean,
noAggregation: boolean, noAggregation: boolean,
noAggregationBarWidthSettings: TimeSeriesChartNoAggregationBarWidthSettings, barRenderSharedContext: BarRenderSharedContext,
darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => { darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => {
const series: Array<LineSeriesOption | CustomSeriesOption> = []; const series: Array<LineSeriesOption | CustomSeriesOption> = [];
const enabledDataItems = dataItems.filter(d => d.enabled); const enabledDataItems = dataItems.filter(d => d.enabled);
@ -1044,21 +1051,11 @@ const generateChartSeries = (dataItems: TimeSeriesChartDataItem[],
if (item.dataKey.settings.type === TimeSeriesChartSeriesType.bar) { if (item.dataKey.settings.type === TimeSeriesChartSeriesType.bar) {
if (!item.barRenderContext) { if (!item.barRenderContext) {
item.barRenderContext = {noAggregation, 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.noAggregation = noAggregation;
item.barRenderContext.barsCount = barsCount; item.barRenderContext.barsCount = barsCount;
item.barRenderContext.barIndex = stack ? barGroups.indexOf(item.yAxisIndex) : barDataItems.indexOf(item); item.barRenderContext.barIndex = stack ? barGroups.indexOf(item.yAxisIndex) : barDataItems.indexOf(item);
item.barRenderContext.timeInterval = timeInterval;
if (stack) { if (stack) {
const stackItems = enabledDataItems.filter(d => d.yAxisIndex === item.yAxisIndex); const stackItems = enabledDataItems.filter(d => d.yAxisIndex === item.yAxisIndex);
item.barRenderContext.currentStackItems = stackItems; item.barRenderContext.currentStackItems = stackItems;

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

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

@ -160,10 +160,19 @@
<tb-time-series-chart-animation-settings <tb-time-series-chart-animation-settings
formControlName="animation"> formControlName="animation">
</tb-time-series-chart-animation-settings> </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>
</div> </div>
</ng-container> </ng-container>

3
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, []], animation: [settings.animation, []],
background: [settings.background, []] background: [settings.background, []],
padding: [settings.padding, []]
}); });
} }

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

File diff suppressed because it is too large

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

@ -69,142 +69,6 @@
"id": "d70cc256-4c7b-ee06-9905-b8c5e546605f", "id": "d70cc256-4c7b-ee06-9905-b8c5e546605f",
"typeFullFqn": "system.cards.markdown_card" "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": { "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4": {
"type": "static", "type": "static",
"sizeX": 7.5, "sizeX": 7.5,
@ -269,159 +133,6 @@
"id": "a23185ad-dc46-806c-0e50-5b21fb080ace", "id": "a23185ad-dc46-806c-0e50-5b21fb080ace",
"typeFullFqn": "system.home_page_widgets.getting_started" "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": { "ebbd0a6e-8a47-e770-5086-7f4974250f2d": {
"type": "static", "type": "static",
"sizeX": 7.5, "sizeX": 7.5,
@ -777,6 +488,655 @@
"col": 0, "col": 0,
"id": "7ac20b6a-dc40-b18e-9f5f-bca20bc693bb", "id": "7ac20b6a-dc40-b18e-9f5f-bca20bc693bb",
"typeFullFqn": "system.cards.markdown_card" "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": { "states": {
@ -868,7 +1228,7 @@
"layouts": { "layouts": {
"main": { "main": {
"widgets": { "widgets": {
"8ee72d43-678c-4e25-e9a8-7d4cfd7a5f8e": { "bf7f6efa-7614-3bc0-c4d0-6665d67510a8": {
"sizeX": 24, "sizeX": 24,
"sizeY": 11, "sizeY": 11,
"row": 0, "row": 0,
@ -895,7 +1255,7 @@
"layouts": { "layouts": {
"main": { "main": {
"widgets": { "widgets": {
"d26e5cd7-75ef-d475-00c7-1a2d1114efe8": { "8e71a398-caf5-540d-cec5-6e5dc264343e": {
"sizeX": 24, "sizeX": 24,
"sizeY": 11, "sizeY": 11,
"row": 0, "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" "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" "name": "Tenant Administrator Home Page"
} }

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

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

18
ui-ngx/yarn.lock

@ -5367,13 +5367,13 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0" jsbn "~0.1.0"
safer-buffer "^2.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: dependencies:
tslib "2.3.0" tslib "2.3.0"
zrender "5.4.4" zrender "5.5.0"
editorconfig@^0.15.3: editorconfig@^0.15.3:
version "0.15.3" version "0.15.3"
@ -11101,9 +11101,9 @@ zone.js@~0.13.0:
dependencies: dependencies:
tslib "^2.3.0" 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: dependencies:
tslib "2.3.0" tslib "2.3.0"

Loading…
Cancel
Save