diff --git a/ui-ngx/package.json b/ui-ngx/package.json index ab60ebd525..c39817749f 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -55,7 +55,7 @@ "core-js": "^3.29.1", "date-fns": "2.0.0-alpha.27", "dayjs": "1.11.4", - "echarts": "^5.4.3", + "echarts": "^5.5.0", "flot": "https://github.com/thingsboard/flot.git#0.9-work", "flot.curvedlines": "https://github.com/MichaelZinsmaier/CurvedLines.git#master", "font-awesome": "^4.7.0", diff --git a/ui-ngx/patches/echarts+5.4.3.patch b/ui-ngx/patches/echarts+5.5.0.patch similarity index 89% rename from ui-ngx/patches/echarts+5.4.3.patch rename to ui-ngx/patches/echarts+5.5.0.patch index bca89c616c..b25599afd8 100644 --- a/ui-ngx/patches/echarts+5.4.3.patch +++ b/ui-ngx/patches/echarts+5.5.0.patch @@ -1,8 +1,8 @@ diff --git a/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js b/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js -index 112ebe3..9afc9b7 100644 +index d6c05f3..d09baed 100644 --- a/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js +++ b/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js -@@ -422,7 +422,10 @@ function (_super) { +@@ -362,7 +362,10 @@ var DataZoomModel = /** @class */function (_super) { return axisProxy.getDataValueWindow(); } } else { @@ -14,32 +14,30 @@ index 112ebe3..9afc9b7 100644 } }; /** -@@ -449,11 +452,11 @@ function (_super) { +@@ -381,10 +384,10 @@ var DataZoomModel = /** @class */function (_super) { + var axisInfo = this._targetAxisInfoMap.get(axisDim); for (var j = 0; j < axisInfo.indexList.length; j++) { var proxy = this.getAxisProxy(axisDim, axisInfo.indexList[j]); - - if (proxy.hostedBy(this)) { + if (proxy && proxy.hostedBy(this)) { return proxy; } - - if (!firstProxy) { + if (proxy && !firstProxy) { firstProxy = proxy; } } diff --git a/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js b/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js -index 7163279..c37f9c2 100644 +index 06469b2..ccfbfa6 100644 --- a/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js +++ b/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js -@@ -112,12 +112,15 @@ var getRangeHandlers = { +@@ -96,11 +96,14 @@ var getRangeHandlers = { range[0] = (range[0] - percentPoint) * scale + percentPoint; - range[1] = (range[1] - percentPoint) * scale + percentPoint; // Restrict range. - + range[1] = (range[1] - percentPoint) * scale + percentPoint; + // Restrict range. - var minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan(); - sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan); - this.range = range; -- - if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) { - return range; + var proxy = this.dataZoomModel.findRepresentativeAxisProxy(); @@ -47,7 +45,6 @@ index 7163279..c37f9c2 100644 + var minMaxSpan = proxy.getMinMaxSpan(); + sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan); + this.range = range; -+ + if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) { + return range; + } @@ -55,7 +52,7 @@ index 7163279..c37f9c2 100644 }, pan: makeMover(function (range, axisModel, coordSysInfo, coordSysMainType, controller, e) { diff --git a/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js b/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js -index 590ef51..aff8a0a 100644 +index 98912e0..2e809af 100644 --- a/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js +++ b/node_modules/echarts/lib/component/dataZoom/SliderZoomView.js @@ -64,7 +64,7 @@ var DEFAULT_MOVE_HANDLE_SIZE = 7; @@ -67,7 +64,7 @@ index 590ef51..aff8a0a 100644 var REALTIME_ANIMATION_CONFIG = { easing: 'cubicOut', duration: 100, -@@ -406,34 +406,37 @@ function (_super) { +@@ -359,30 +359,33 @@ var SliderZoomView = /** @class */function (_super) { var result; var ecModel = this.ecModel; dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) { @@ -76,20 +73,16 @@ index 590ef51..aff8a0a 100644 - if (result) { - return; - } -- - if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) { - return; - } -- - var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis; - var otherDim = getOtherDim(axisDim); - var otherAxisInverse; - var coordSys = seriesModel.coordinateSystem; -- - if (otherDim != null && coordSys.getOtherAxis) { - otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse; - } -- - otherDim = seriesModel.getData().mapDimension(otherDim); - result = { - thisAxis: thisAxis, @@ -106,20 +99,16 @@ index 590ef51..aff8a0a 100644 + if (result) { + return; + } -+ + if (showDataShadow !== true && indexOf(SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')) < 0) { + return; + } -+ + var thisAxis = ecModel.getComponent(getAxisMainType(axisDim), axisIndex).axis; + var otherDim = getOtherDim(axisDim); + var otherAxisInverse; + var coordSys = seriesModel.coordinateSystem; -+ + if (otherDim != null && coordSys.getOtherAxis) { + otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse; + } -+ + otherDim = seriesModel.getData().mapDimension(otherDim); + result = { + thisAxis: thisAxis, @@ -133,10 +122,10 @@ index 590ef51..aff8a0a 100644 }, this); return result; }; -@@ -595,12 +598,17 @@ function (_super) { - +@@ -530,12 +533,17 @@ var SliderZoomView = /** @class */function (_super) { + var dataZoomModel = this.dataZoomModel; + var handleEnds = this._handleEnds; var viewExtend = this._getViewExtent(); - - var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan(); - var percentExtent = [0, 100]; - sliderMove(delta, handleEnds, viewExtend, dataZoomModel.get('zoomLock') ? 'all' : handleIndex, minMaxSpan.minSpan != null ? linearMap(minMaxSpan.minSpan, percentExtent, viewExtend, true) : null, minMaxSpan.maxSpan != null ? linearMap(minMaxSpan.maxSpan, percentExtent, viewExtend, true) : null); @@ -155,13 +144,13 @@ index 590ef51..aff8a0a 100644 + return false; + } }; - SliderZoomView.prototype._updateView = function (nonRealtime) { + var displaybles = this._displayables; diff --git a/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js b/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js -index 3871784..9bab428 100644 +index ce98fed..361b138 100644 --- a/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js +++ b/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js -@@ -91,7 +91,10 @@ var dataZoomProcessor = { +@@ -90,7 +90,10 @@ var dataZoomProcessor = { // init stage and not after action dispatch handler, because // reset should be called after seriesData.restoreData. dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) { @@ -170,12 +159,12 @@ index 3871784..9bab428 100644 + if (axisProxy) { + axisProxy.reset(dataZoomModel); + } - }); // Caution: data zoom filtering is order sensitive when using + }); + // Caution: data zoom filtering is order sensitive when using // percent range and no min/max/scale set on axis. - // For example, we have dataZoom definition: -@@ -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, diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html index adaeb78acb..b254b4df68 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html @@ -245,6 +245,12 @@ +
+
{{ 'widget-config.card-padding' | translate }}
+ + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts index ba4b4c6371..31dca75c7e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts @@ -174,6 +174,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon cardButtons: [this.getCardButtons(configData.config), []], borderRadius: [configData.config.borderRadius, []], + padding: [settings.padding, []], actions: [configData.config.actions || {}, []] }); @@ -229,6 +230,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon this.setCardButtons(config.cardButtons, this.widgetConfig.config); this.widgetConfig.config.borderRadius = config.borderRadius; + this.widgetConfig.config.settings.padding = config.padding; this.widgetConfig.config.actions = config.actions; return this.widgetConfig; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts index c523bf7927..4784a65c88 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts @@ -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' }, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts index 723b581fc5..d215f37a32 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts @@ -387,7 +387,7 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit tooltip: { trigger: this.settings.showTooltip ? 'item' : 'none', confine: false, - appendToBody: true + appendTo: 'body', }, series: [ { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts index 06e8e98fd0..c446fcbda1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/echarts-widget.models.ts @@ -153,6 +153,7 @@ export type EChartsSeriesItem = { id: string; dataKey: DataKey; data: NamedDataSet; + dataSet?: DataSet; enabled: boolean; units?: string; decimals?: number; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts index 0a8c15b247..9909be6532 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts @@ -318,7 +318,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn tooltip: { trigger: 'axis', confine: true, - appendToBody: true, + appendTo: 'body', axisPointer: { type: 'shadow' }, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts index bf7f6cf764..c00a078b2f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-bar.models.ts @@ -33,14 +33,18 @@ export interface BarVisualSettings { borderRadius: number; } +export interface BarRenderSharedContext { + timeInterval: Interval; + noAggregationBarWidthStrategy: TimeSeriesChartNoAggregationBarWidthStrategy; + noAggregationWidthRelative: boolean; + noAggregationWidth: number; +} + export interface BarRenderContext { + shared: BarRenderSharedContext; barsCount?: number; barIndex?: number; - noAggregation: boolean; - 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 + '', diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html index 1b96aac669..4430579899 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html @@ -15,7 +15,8 @@ limitations under the License. --> -
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss index 7da3d8e4b5..66428d9d91 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss @@ -24,7 +24,9 @@ $maxLegendHeight: 35%; display: flex; flex-direction: column; gap: 8px; - padding: 20px 24px 24px 24px; + &.overlay { + padding: 20px 24px 24px 24px; + } > div:not(.tb-time-series-chart-overlay) { z-index: 1; } @@ -101,22 +103,6 @@ $maxLegendHeight: 35%; width: 100%; table-layout: auto; } - - thead th, tbody th { - position: sticky; - z-index: 1; - backdrop-filter: blur(5000px); - } - thead th { - top: 0; - &:first-child { - left: 0; - z-index: 2; - } - } - tbody th { - left: 0; - } th, td { &:not(:last-child) { padding-right: 8px; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts index 560309b08b..fbb23c6c84 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts +++ b/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; 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) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.models.ts index ccfca7c4d0..6edf87251c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.models.ts @@ -25,6 +25,7 @@ export interface TimeSeriesChartWidgetSettings extends TimeSeriesChartSettings { legendLabelColor: string; legendConfig: LegendConfig; background: BackgroundSettings; + padding: string; } export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings = @@ -48,5 +49,6 @@ export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings color: 'rgba(255,255,255,0.72)', blur: 3 } - } + }, + padding: '12px' } as TimeSeriesChartWidgetSettings); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts index 9af41fa378..b5d5968565 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts @@ -37,11 +37,11 @@ import { import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient'; import tinycolor from 'tinycolor2'; import Axis2D from 'echarts/types/src/coord/cartesian/Axis2D'; -import { Interval } from '@shared/models/time/time.models'; import { ValueAxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes'; import { SeriesLabelOption } from 'echarts/types/src/util/types'; import { BarRenderContext, + BarRenderSharedContext, BarVisualSettings, renderTimeSeriesBar } from '@home/components/widget/lib/chart/time-series-chart-bar.models'; @@ -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 => { - 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 => { const series: Array = []; 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; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts index abad3f79e8..57e52f5f5d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts @@ -19,21 +19,26 @@ import { AxisPosition, calculateThresholdsOffset, createTimeSeriesXAxisOption, - createTimeSeriesYAxis, defaultTimeSeriesChartYAxisSettings, + createTimeSeriesYAxis, + defaultTimeSeriesChartYAxisSettings, generateChartData, parseThresholdData, SeriesLabelPosition, TimeSeriesChartDataItem, timeSeriesChartDefaultSettings, timeSeriesChartKeyDefaultSettings, - TimeSeriesChartKeySettings, + TimeSeriesChartKeySettings, TimeSeriesChartNoAggregationBarWidthStrategy, TimeSeriesChartSeriesType, TimeSeriesChartSettings, - TimeSeriesChartShape, TimeSeriesChartThreshold, timeSeriesChartThresholdDefaultSettings, + TimeSeriesChartShape, + TimeSeriesChartThreshold, + timeSeriesChartThresholdDefaultSettings, TimeSeriesChartThresholdItem, TimeSeriesChartThresholdType, TimeSeriesChartType, - TimeSeriesChartYAxis, TimeSeriesChartYAxisId, TimeSeriesChartYAxisSettings, + TimeSeriesChartYAxis, + TimeSeriesChartYAxisId, + TimeSeriesChartYAxisSettings, updateDarkMode } from '@home/components/widget/lib/chart/time-series-chart.models'; import { ResizeObserver } from '@juggle/resize-observer'; @@ -52,7 +57,7 @@ import { toNamedData } from '@home/components/widget/lib/chart/echarts-widget.models'; import { DateFormatProcessor } from '@shared/models/widget-settings.models'; -import { isDefinedAndNotNull, mergeDeep } from '@core/utils'; +import { isDefinedAndNotNull, isEqual, mergeDeep } from '@core/utils'; import { DataKey, Datasource, DatasourceType, widgetType } from '@shared/models/widget.models'; import * as echarts from 'echarts/core'; import { CallbackDataParams } from 'echarts/types/dist/shared'; @@ -64,6 +69,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { WidgetSubscriptionOptions } from '@core/api/widget-api.models'; import { DataKeySettingsFunction } from '@home/components/widget/config/data-keys.component.models'; import { DeepPartial } from '@shared/models/common'; +import { BarRenderSharedContext } from '@home/components/widget/lib/chart/time-series-chart-bar.models'; export class TbTimeSeriesChart { @@ -119,6 +125,8 @@ export class TbTimeSeriesChart { private highlightedDataKey: DataKey; + private barRenderSharedContext: BarRenderSharedContext; + yMin$ = this.yMinSubject.asObservable(); yMax$ = this.yMaxSubject.asObservable(); @@ -156,7 +164,10 @@ export class TbTimeSeriesChart { public update(): void { for (const item of this.dataItems) { const datasourceData = this.ctx.data ? this.ctx.data.find(d => d.dataKey === item.dataKey) : null; - item.data = datasourceData?.data ? toNamedData(datasourceData.data) : []; + if (!isEqual(item.dataSet, datasourceData?.data)) { + item.dataSet = datasourceData?.data; + item.data = datasourceData?.data ? toNamedData(datasourceData.data) : []; + } } this.onResize(); if (this.timeSeriesChart) { @@ -168,6 +179,7 @@ export class TbTimeSeriesChart { } else { this.timeSeriesChartOptions.tooltip[0].axisPointer.type = 'shadow'; } + this.barRenderSharedContext.timeInterval = this.ctx.timeWindow.interval; this.updateSeriesData(true); if (this.highlightedDataKey) { this.keyEnter(this.highlightedDataKey); @@ -277,6 +289,15 @@ export class TbTimeSeriesChart { } private setupData(): void { + const noAggregationBarWidthSettings = this.settings.noAggregationBarWidthSettings; + const targetBarWidth = noAggregationBarWidthSettings.strategy === TimeSeriesChartNoAggregationBarWidthStrategy.group ? + noAggregationBarWidthSettings.groupWidth : noAggregationBarWidthSettings.barWidth; + this.barRenderSharedContext = { + timeInterval: this.ctx.timeWindow?.interval, + noAggregationBarWidthStrategy: noAggregationBarWidthSettings.strategy, + noAggregationWidthRelative: targetBarWidth.relative, + noAggregationWidth: targetBarWidth.relative ? targetBarWidth.relativeWidth : targetBarWidth.absoluteWidth + }; if (this.ctx.datasources.length) { for (const datasource of this.ctx.datasources) { const dataKeys = datasource.dataKeys; @@ -458,7 +479,7 @@ export class TbTimeSeriesChart { tooltip: [{ trigger: this.settings.tooltipTrigger === EChartsTooltipTrigger.axis ? 'axis' : 'item', confine: true, - appendToBody: true, + appendTo: 'body', axisPointer: { type: this.noAggregation ? 'line' : 'shadow' }, @@ -533,10 +554,9 @@ export class TbTimeSeriesChart { private updateSeries(): Array { 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); + } + } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html index 42249a67cd..cd6f1255f8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html @@ -160,10 +160,19 @@ -
-
{{ 'widgets.background.background' | translate }}
- - +
+
widget-config.card-appearance
+
+
{{ 'widgets.background.background' | translate }}
+ + +
+
+
{{ 'widget-config.card-padding' | translate }}
+ + + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts index e270b97137..6edab7ecf2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts @@ -140,7 +140,8 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon animation: [settings.animation, []], - background: [settings.background, []] + background: [settings.background, []], + padding: [settings.padding, []] }); } diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json index f93de01596..29c692ad87 100644 --- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json @@ -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" - }, "4b5e47ed-c197-a937-d727-041ba8decec2": { "type": "latest", "sizeX": 5, @@ -294,227 +158,6 @@ "id": "4b5e47ed-c197-a937-d727-041ba8decec2", "typeFullFqn": "system.cards.markdown_card" }, - "eace9148-b02a-48fe-1a95-acd9928aa8c5": { - "type": "timeseries", - "sizeX": 8, - "sizeY": 5, - "config": { - "datasources": [ - { - "type": "entity", - "name": null, - "entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079", - "filterId": null, - "dataKeys": [ - { - "name": "cpuUsage", - "type": "timeseries", - "label": "{i18n:widgets.system-info.cpu}", - "color": "#305680", - "settings": { - "hideDataByDefault": false, - "disableDataHiding": false, - "removeFromLegend": false, - "excludeFromStacking": false, - "showLines": true, - "lineWidth": 3, - "fillLines": false, - "showPoints": false, - "showPointsLineWidth": 5, - "showPointsRadius": 3, - "showPointShape": "circle", - "pointShapeFormatter": "var size = radius * Math.sqrt(Math.PI) / 2;\nctx.moveTo(x - size, y - size);\nctx.lineTo(x + size, y + size);\nctx.moveTo(x - size, y + size);\nctx.lineTo(x + size, y - size);", - "showSeparateAxis": false, - "axisPosition": "left", - "comparisonSettings": { - "showValuesForComparison": true, - "comparisonValuesLabel": "", - "color": "" - }, - "thresholds": [] - }, - "_hash": 0.9347575372081658, - "aggregationType": null, - "units": null, - "decimals": null, - "funcBody": null, - "usePostProcessing": null, - "postFuncBody": null - }, - { - "name": "memoryUsage", - "type": "timeseries", - "label": "{i18n:widgets.system-info.ram}", - "color": "#ac3bc9", - "settings": { - "hideDataByDefault": false, - "disableDataHiding": false, - "removeFromLegend": false, - "excludeFromStacking": false, - "showLines": true, - "lineWidth": 3, - "fillLines": false, - "showPoints": false, - "showPointsLineWidth": 5, - "showPointsRadius": 3, - "showPointShape": "circle", - "pointShapeFormatter": "var size = radius * Math.sqrt(Math.PI) / 2;\nctx.moveTo(x - size, y - size);\nctx.lineTo(x + size, y + size);\nctx.moveTo(x - size, y + size);\nctx.lineTo(x + size, y - size);", - "showSeparateAxis": false, - "axisPosition": "left", - "comparisonSettings": { - "showValuesForComparison": true, - "comparisonValuesLabel": "", - "color": "" - }, - "thresholds": [] - }, - "_hash": 0.31887216598848855, - "aggregationType": null, - "units": null, - "decimals": null, - "funcBody": null, - "usePostProcessing": null, - "postFuncBody": null - }, - { - "name": "discUsage", - "type": "timeseries", - "label": "{i18n:widgets.system-info.disk}", - "color": "#40d0ae", - "settings": { - "hideDataByDefault": false, - "disableDataHiding": false, - "removeFromLegend": false, - "excludeFromStacking": false, - "showLines": true, - "lineWidth": 3, - "fillLines": false, - "showPoints": false, - "showPointsLineWidth": 5, - "showPointsRadius": 3, - "showPointShape": "circle", - "pointShapeFormatter": "var size = radius * Math.sqrt(Math.PI) / 2;\nctx.moveTo(x - size, y - size);\nctx.lineTo(x + size, y + size);\nctx.moveTo(x - size, y + size);\nctx.lineTo(x + size, y - size);", - "showSeparateAxis": false, - "axisPosition": "left", - "comparisonSettings": { - "showValuesForComparison": true, - "comparisonValuesLabel": "", - "color": "" - }, - "thresholds": [] - }, - "_hash": 0.26499182606431004, - "aggregationType": null, - "units": null, - "decimals": null, - "funcBody": null, - "usePostProcessing": null, - "postFuncBody": null - } - ], - "latestDataKeys": null - } - ], - "timewindow": { - "hideInterval": false, - "hideLastInterval": false, - "hideQuickInterval": false, - "hideAggregation": false, - "hideAggInterval": false, - "hideTimezone": false, - "selectedTab": 0, - "realtime": { - "realtimeType": 0, - "timewindowMs": 3600000, - "quickInterval": "CURRENT_DAY", - "interval": 10000 - }, - "aggregation": { - "type": "AVG", - "limit": 25000 - } - }, - "showTitle": false, - "backgroundColor": "#fff", - "color": "rgba(0, 0, 0, 0.87)", - "padding": "8px", - "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": 0, - "max": 100, - "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": true, - "legendConfig": { - "direction": "row", - "position": "top", - "sortDataKeys": false, - "showMin": false, - "showMax": false, - "showAvg": false, - "showTotal": false, - "showLatest": false - } - }, - "title": "System Info Chart", - "dropShadow": false, - "enableFullscreen": false, - "titleStyle": { - "fontSize": "16px", - "fontWeight": 400 - }, - "useDashboardTimewindow": false, - "showTitleIcon": false, - "titleTooltip": "", - "widgetStyle": {}, - "widgetCss": "\n.tb-legend-keys td .tb-legend-line {\n height: 5px !important;\n vertical-align: middle;\n}\n", - "pageSize": 1024, - "units": "%", - "noDataDisplayMessage": "", - "displayTimewindow": true - }, - "row": 0, - "col": 0, - "id": "eace9148-b02a-48fe-1a95-acd9928aa8c5", - "typeFullFqn": "system.charts.basic_timeseries" - }, "8acbf5df-f9fc-114d-216f-86f081aa4779": { "type": "latest", "sizeX": 5, @@ -2197,6 +1840,800 @@ "col": 0, "id": "163025d8-3ca4-dd1e-c17b-e40d8e03e8a8", "typeFullFqn": "system.cards.markdown_card" + }, + "98bce47d-76df-5fc1-f8b9-8584d73a2439": { + "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": "98bce47d-76df-5fc1-f8b9-8584d73a2439" + }, + "b9174a99-2a00-3dbe-0eae-927fd8506345": { + "typeFullFqn": "system.time_series_chart", + "type": "timeseries", + "sizeX": 8, + "sizeY": 5, + "config": { + "datasources": [ + { + "type": "entity", + "name": "", + "entityAliasId": "d9229b29-3f46-de8d-7fe8-eb0c43c75079", + "dataKeys": [ + { + "name": "cpuUsage", + "type": "timeseries", + "label": "{i18n:widgets.system-info.cpu}", + "color": "#305680", + "settings": { + "yAxisId": "default", + "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": "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": null, + "aggregationType": null, + "units": null, + "funcBody": null, + "usePostProcessing": null, + "postFuncBody": null + }, + { + "name": "memoryUsage", + "type": "timeseries", + "label": "{i18n:widgets.system-info.ram}", + "color": "#AC3BC9", + "settings": { + "yAxisId": "default", + "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": "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.9392996197028385, + "aggregationType": null, + "units": null, + "decimals": null, + "funcBody": null, + "usePostProcessing": null, + "postFuncBody": null + }, + { + "name": "discUsage", + "type": "timeseries", + "label": "{i18n:widgets.system-info.disk}", + "color": "#40D0AE", + "settings": { + "yAxisId": "default", + "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": "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.027335636460212864, + "aggregationType": null, + "units": null, + "decimals": null, + "funcBody": null, + "usePostProcessing": null, + "postFuncBody": null + } + ], + "alarmFilterConfig": { + "statusList": [ + "ACTIVE" + ] + }, + "latestDataKeys": [] + } + ], + "timewindow": { + "hideInterval": false, + "hideLastInterval": false, + "hideQuickInterval": false, + "hideAggregation": false, + "hideAggInterval": false, + "hideTimezone": false, + "selectedTab": 0, + "realtime": { + "realtimeType": 0, + "timewindowMs": 3600000, + "quickInterval": "CURRENT_DAY", + "interval": 10000 + }, + "aggregation": { + "type": "AVG", + "limit": 25000 + }, + "timezone": null + }, + "showTitle": false, + "backgroundColor": "rgb(255, 255, 255)", + "color": "rgba(0, 0, 0, 0.87)", + "padding": "8px", + "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": "", + "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": 100 + } + }, + "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": true, + "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": false, + "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": "dd MMM yyyy HH:mm:ss", + "lastUpdateAgo": false, + "custom": false + }, + "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": 300, + "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-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": "", + "iconSize": "0px" + }, + "row": 0, + "col": 0, + "id": "b9174a99-2a00-3dbe-0eae-927fd8506345" } }, "states": { @@ -2288,7 +2725,7 @@ "layouts": { "main": { "widgets": { - "8ee72d43-678c-4e25-e9a8-7d4cfd7a5f8e": { + "98bce47d-76df-5fc1-f8b9-8584d73a2439": { "sizeX": 24, "sizeY": 11, "row": 0, @@ -2315,14 +2752,6 @@ "layouts": { "main": { "widgets": { - "eace9148-b02a-48fe-1a95-acd9928aa8c5": { - "sizeX": 48, - "sizeY": 20, - "row": 8, - "col": 0, - "mobileOrder": 1, - "mobileHeight": 10 - }, "f0479b00-ed47-0a30-0c36-bde7847aae00": { "sizeX": 48, "sizeY": 8, @@ -2330,6 +2759,12 @@ "mobileHeight": 4, "row": 0, "col": 0 + }, + "b9174a99-2a00-3dbe-0eae-927fd8506345": { + "sizeX": 48, + "sizeY": 20, + "row": 8, + "col": 0 } }, "gridSettings": { @@ -2609,6 +3044,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": "System Administrator Home Page" } \ No newline at end of file diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json index 37e8d82e45..063cb0def2 100644 --- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json +++ b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json @@ -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" -} +} \ No newline at end of file diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index c4302b0070..8f02129a80 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -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", diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock index d78a9a52d6..4317883a2b 100644 --- a/ui-ngx/yarn.lock +++ b/ui-ngx/yarn.lock @@ -5367,13 +5367,13 @@ ecc-jsbn@~0.1.1: jsbn "~0.1.0" safer-buffer "^2.1.0" -echarts@^5.4.3: - 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"