Igor Kulikov
3 years ago
23 changed files with 2752 additions and 128 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,208 @@ |
|||||
|
diff --git a/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js b/node_modules/echarts/lib/component/dataZoom/DataZoomModel.js
|
||||
|
index 112ebe3..9afc9b7 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) {
|
||||
|
return axisProxy.getDataValueWindow(); |
||||
|
} |
||||
|
} else { |
||||
|
- return this.getAxisProxy(axisDim, axisIndex).getDataValueWindow();
|
||||
|
+ var axisProxy = this.getAxisProxy(axisDim, axisIndex);
|
||||
|
+ if (axisProxy) {
|
||||
|
+ return axisProxy.getDataValueWindow();
|
||||
|
+ }
|
||||
|
} |
||||
|
}; |
||||
|
/** |
||||
|
@@ -449,11 +452,11 @@ function (_super) {
|
||||
|
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
|
||||
|
--- a/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js
|
||||
|
+++ b/node_modules/echarts/lib/component/dataZoom/InsideZoomView.js
|
||||
|
@@ -112,12 +112,15 @@ var getRangeHandlers = {
|
||||
|
range[0] = (range[0] - percentPoint) * scale + percentPoint; |
||||
|
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();
|
||||
|
+ if (proxy) {
|
||||
|
+ 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;
|
||||
|
+ }
|
||||
|
} |
||||
|
}, |
||||
|
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
|
||||
|
--- 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;
|
||||
|
var HORIZONTAL = 'horizontal'; |
||||
|
var VERTICAL = 'vertical'; |
||||
|
var LABEL_GAP = 5; |
||||
|
-var SHOW_DATA_SHADOW_SERIES_TYPE = ['line', 'bar', 'candlestick', 'scatter'];
|
||||
|
+var SHOW_DATA_SHADOW_SERIES_TYPE = ['line', 'bar', 'candlestick', 'scatter', 'custom'];
|
||||
|
var REALTIME_ANIMATION_CONFIG = { |
||||
|
easing: 'cubicOut', |
||||
|
duration: 100, |
||||
|
@@ -406,34 +406,37 @@ function (_super) {
|
||||
|
var result; |
||||
|
var ecModel = this.ecModel; |
||||
|
dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) { |
||||
|
- var seriesModels = dataZoomModel.getAxisProxy(axisDim, axisIndex).getTargetSeriesModels();
|
||||
|
- each(seriesModels, function (seriesModel) {
|
||||
|
- 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,
|
||||
|
- series: seriesModel,
|
||||
|
- thisDim: axisDim,
|
||||
|
- otherDim: otherDim,
|
||||
|
- otherAxisInverse: otherAxisInverse
|
||||
|
- };
|
||||
|
- }, this);
|
||||
|
+ var axisProxy = dataZoomModel.getAxisProxy(axisDim, axisIndex);
|
||||
|
+ if (axisProxy) {
|
||||
|
+ var seriesModels = axisProxy.getTargetSeriesModels();
|
||||
|
+ each(seriesModels, function (seriesModel) {
|
||||
|
+ 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,
|
||||
|
+ series: seriesModel,
|
||||
|
+ thisDim: axisDim,
|
||||
|
+ otherDim: otherDim,
|
||||
|
+ otherAxisInverse: otherAxisInverse
|
||||
|
+ };
|
||||
|
+ }, this);
|
||||
|
+ }
|
||||
|
}, this); |
||||
|
return result; |
||||
|
}; |
||||
|
@@ -595,12 +598,17 @@ function (_super) {
|
||||
|
|
||||
|
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);
|
||||
|
- var lastRange = this._range;
|
||||
|
- var range = this._range = asc([linearMap(handleEnds[0], viewExtend, percentExtent, true), linearMap(handleEnds[1], viewExtend, percentExtent, true)]);
|
||||
|
- return !lastRange || lastRange[0] !== range[0] || lastRange[1] !== range[1];
|
||||
|
+ var proxy = dataZoomModel.findRepresentativeAxisProxy();
|
||||
|
+ if (proxy) {
|
||||
|
+ var minMaxSpan = proxy.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);
|
||||
|
+ var lastRange = this._range;
|
||||
|
+ var range = this._range = asc([linearMap(handleEnds[0], viewExtend, percentExtent, true), linearMap(handleEnds[1], viewExtend, percentExtent, true)]);
|
||||
|
+ return !lastRange || lastRange[0] !== range[0] || lastRange[1] !== range[1];
|
||||
|
+ } else {
|
||||
|
+ return false;
|
||||
|
+ }
|
||||
|
}; |
||||
|
|
||||
|
SliderZoomView.prototype._updateView = function (nonRealtime) { |
||||
|
diff --git a/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js b/node_modules/echarts/lib/component/dataZoom/dataZoomProcessor.js
|
||||
|
index 3871784..9bab428 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 = {
|
||||
|
// init stage and not after action dispatch handler, because |
||||
|
// reset should be called after seriesData.restoreData. |
||||
|
dataZoomModel.eachTargetAxis(function (axisDim, axisIndex) { |
||||
|
- dataZoomModel.getAxisProxy(axisDim, axisIndex).reset(dataZoomModel);
|
||||
|
+ var axisProxy = dataZoomModel.getAxisProxy(axisDim, axisIndex);
|
||||
|
+ if (axisProxy) {
|
||||
|
+ axisProxy.reset(dataZoomModel);
|
||||
|
+ }
|
||||
|
}); // 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 = {
|
||||
|
// 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);
|
||||
|
+ if (axisProxy) {
|
||||
|
+ axisProxy.filterData(dataZoomModel, api);
|
||||
|
+ }
|
||||
|
}); |
||||
|
}); |
||||
|
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
|
||||
|
--- 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) {
|
||||
|
var axisModel = axis.model; |
||||
|
var dataZoomModel = findDataZoom(dimName, axisModel, ecModel); // Restrict range. |
||||
|
|
||||
|
- var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy(axisModel).getMinMaxSpan();
|
||||
|
+ 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] = { |
||||
@ -0,0 +1,134 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { LinearGradientObject } from 'zrender/lib/graphic/LinearGradient'; |
||||
|
import { Interval, IntervalMath } from '@shared/models/time/time.models'; |
||||
|
import { LabelFormatterCallback, SeriesLabelOption } from 'echarts/types/src/util/types'; |
||||
|
import { TimeSeriesChartDataItem } from '@home/components/widget/lib/chart/time-series-chart.models'; |
||||
|
import { CustomSeriesRenderItemParams } from 'echarts'; |
||||
|
import { CustomSeriesRenderItemAPI, CustomSeriesRenderItemReturn } from 'echarts/types/dist/shared'; |
||||
|
import { isNumeric } from '@core/utils'; |
||||
|
import * as echarts from 'echarts/core'; |
||||
|
|
||||
|
export interface BarVisualSettings { |
||||
|
color: string | LinearGradientObject; |
||||
|
borderColor: string; |
||||
|
borderWidth: number; |
||||
|
borderRadius: number; |
||||
|
} |
||||
|
|
||||
|
export interface BarRenderContext { |
||||
|
barsCount?: number; |
||||
|
barIndex?: number; |
||||
|
timeInterval?: Interval; |
||||
|
visualSettings?: BarVisualSettings; |
||||
|
labelOption?: SeriesLabelOption; |
||||
|
barStackIndex?: number; |
||||
|
currentStackItems?: TimeSeriesChartDataItem[]; |
||||
|
} |
||||
|
|
||||
|
export const renderTimeSeriesBar = (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI, |
||||
|
renderCtx: BarRenderContext): CustomSeriesRenderItemReturn => { |
||||
|
const time = api.value(0) as number; |
||||
|
let start = api.value(2) as number; |
||||
|
const end = api.value(3) as number; |
||||
|
let interval = end - start; |
||||
|
const ts = start ? start : time; |
||||
|
if (!start || !end || !interval) { |
||||
|
interval = IntervalMath.numberValue(renderCtx.timeInterval); |
||||
|
start = time - interval / 2; |
||||
|
} |
||||
|
const gap = 0.3; |
||||
|
const barInterval = interval / (renderCtx.barsCount + gap * (renderCtx.barsCount + 3)); |
||||
|
const intervalGap = barInterval * gap * 2; |
||||
|
const barGap = barInterval * gap; |
||||
|
const value = api.value(1); |
||||
|
const startTime = start + intervalGap + (barInterval + barGap) * renderCtx.barIndex; |
||||
|
const delta = barInterval; |
||||
|
let offset = 0; |
||||
|
if (renderCtx.currentStackItems?.length) { |
||||
|
for (let i = 0; i < renderCtx.barStackIndex; i++) { |
||||
|
const stackItem = renderCtx.currentStackItems[i]; |
||||
|
const dataName = ts + ''; |
||||
|
const data = stackItem.data.find(d => d.name === dataName); |
||||
|
if (data) { |
||||
|
const val = data.value[1]; |
||||
|
if (isNumeric(val)) { |
||||
|
offset += Number(val); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
let lowerLeft: number[]; |
||||
|
if (offset !== 0 && isNumeric(value)) { |
||||
|
lowerLeft = api.coord([startTime, value >= 0 ? Number(value) + offset : offset]); |
||||
|
} else { |
||||
|
lowerLeft = api.coord([startTime, value >= 0 ? value : 0]); |
||||
|
} |
||||
|
const size = api.size([delta, value]); |
||||
|
const width = size[0]; |
||||
|
const height = size[1]; |
||||
|
|
||||
|
const coordSys: {x: number; y: number; width: number; height: number} = params.coordSys as any; |
||||
|
|
||||
|
const rectShape = echarts.graphic.clipRectByRect({ |
||||
|
x: lowerLeft[0], |
||||
|
y: lowerLeft[1], |
||||
|
width, |
||||
|
height |
||||
|
}, { |
||||
|
x: coordSys.x, |
||||
|
y: coordSys.y, |
||||
|
width: coordSys.width, |
||||
|
height: coordSys.height |
||||
|
}); |
||||
|
|
||||
|
const zeroPos = api.coord([0, offset]); |
||||
|
|
||||
|
const style: any = { |
||||
|
fill: renderCtx.visualSettings.color, |
||||
|
stroke: renderCtx.visualSettings.borderColor, |
||||
|
lineWidth: renderCtx.visualSettings.borderWidth |
||||
|
}; |
||||
|
|
||||
|
if (renderCtx.labelOption.show) { |
||||
|
let position = renderCtx.labelOption.position; |
||||
|
if (value < 0) { |
||||
|
if (position === 'top') { |
||||
|
position = 'bottom'; |
||||
|
} else if (position === 'bottom') { |
||||
|
position = 'top'; |
||||
|
} |
||||
|
} |
||||
|
style.text = (renderCtx.labelOption.formatter as LabelFormatterCallback)({value: [null, value]} as any); |
||||
|
style.textDistance = 5; |
||||
|
style.textPosition = position; |
||||
|
style.rich = renderCtx.labelOption.rich; |
||||
|
} |
||||
|
|
||||
|
return rectShape && { |
||||
|
type: 'rect', |
||||
|
id: time + '', |
||||
|
shape: {...rectShape, r: renderCtx.visualSettings.borderRadius}, |
||||
|
style, |
||||
|
focus: 'series', |
||||
|
transition: 'all', |
||||
|
enterFrom: { |
||||
|
style: { opacity: 0 }, |
||||
|
shape: { height: 0, y: zeroPos[1] } |
||||
|
} |
||||
|
}; |
||||
|
}; |
||||
@ -0,0 +1,122 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-time-series-chart-panel" [style]="backgroundStyle$ | async"> |
||||
|
<div class="tb-time-series-chart-overlay" [style]="overlayStyle"></div> |
||||
|
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container> |
||||
|
<div class="tb-time-series-chart-content" [class]="legendClass"> |
||||
|
<div #chartShape class="tb-time-series-chart-shape"> |
||||
|
</div> |
||||
|
<div *ngIf="showLegend" class="tb-time-series-chart-legend" [class.tb-simple-legend]="!displayLegendValues"> |
||||
|
<ng-container *ngIf="displayLegendValues; else simpleLegend"> |
||||
|
<ng-container *ngIf="horizontalLegendPosition; else verticalLegend"> |
||||
|
<ng-container *ngTemplateOutlet="horizontalLegend"></ng-container> |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
<ng-template #horizontalLegend> |
||||
|
<table class="tb-time-series-chart-legend-table"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th></th> |
||||
|
<th *ngFor="let legendKey of legendKeys"> |
||||
|
<ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey}"></ng-container> |
||||
|
</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<ng-container *ngIf="legendConfig.showMin === true"> |
||||
|
<ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Min', type: 'min'}"></ng-container> |
||||
|
</ng-container> |
||||
|
<ng-container *ngIf="legendConfig.showMax === true"> |
||||
|
<ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Max', type: 'max'}"></ng-container> |
||||
|
</ng-container> |
||||
|
<ng-container *ngIf="legendConfig.showAvg === true"> |
||||
|
<ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Avg', type: 'avg'}"></ng-container> |
||||
|
</ng-container> |
||||
|
<ng-container *ngIf="legendConfig.showTotal === true"> |
||||
|
<ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Total', type: 'total'}"></ng-container> |
||||
|
</ng-container> |
||||
|
<ng-container *ngIf="legendConfig.showLatest === true"> |
||||
|
<ng-container *ngTemplateOutlet="legendDataRow; context:{label: 'legend.Latest', type: 'latest'}"></ng-container> |
||||
|
</ng-container> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</ng-template> |
||||
|
<ng-template #verticalLegend> |
||||
|
<table class="tb-time-series-chart-legend-table vertical"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<th></th> |
||||
|
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showMin === true">{{ 'legend.Min' | translate }}</th> |
||||
|
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showMax === true">{{ 'legend.Max' | translate }}</th> |
||||
|
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showAvg === true">{{ 'legend.Avg' | translate }}</th> |
||||
|
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showTotal === true">{{ 'legend.Total' | translate }}</th> |
||||
|
<th class="tb-time-series-chart-legend-type-label right" *ngIf="legendConfig.showLatest === true">{{ 'legend.Latest' | translate }}</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr *ngFor="let legendKey of legendKeys"> |
||||
|
<th> |
||||
|
<ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey, left: true}"></ng-container> |
||||
|
</th> |
||||
|
<td *ngIf="legendConfig.showMin === true" class="tb-time-series-chart-legend-value"> |
||||
|
{{ legendData.data[legendKey.dataIndex].min }} |
||||
|
</td> |
||||
|
<td *ngIf="legendConfig.showMax === true" class="tb-time-series-chart-legend-value"> |
||||
|
{{ legendData.data[legendKey.dataIndex].max }} |
||||
|
</td> |
||||
|
<td *ngIf="legendConfig.showAvg === true" class="tb-time-series-chart-legend-value"> |
||||
|
{{ legendData.data[legendKey.dataIndex].avg }} |
||||
|
</td> |
||||
|
<td *ngIf="legendConfig.showTotal === true" class="tb-time-series-chart-legend-value"> |
||||
|
{{ legendData.data[legendKey.dataIndex].total }} |
||||
|
</td> |
||||
|
<td *ngIf="legendConfig.showLatest === true" class="tb-time-series-chart-legend-value"> |
||||
|
{{ legendData.data[legendKey.dataIndex].latest }} |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</ng-template> |
||||
|
<ng-template #simpleLegend> |
||||
|
<ng-container *ngFor="let legendKey of legendKeys"> |
||||
|
<ng-container *ngTemplateOutlet="legendItem; context:{legendKey: legendKey}"></ng-container> |
||||
|
</ng-container> |
||||
|
</ng-template> |
||||
|
<ng-template #legendItem let-legendKey="legendKey" let-left="left"> |
||||
|
<div class="tb-time-series-chart-legend-item" |
||||
|
[class.left]="left"> |
||||
|
<div class="tb-time-series-chart-legend-item-label" |
||||
|
(mouseenter)="onLegendKeyEnter(legendKey)" |
||||
|
(mouseleave)="onLegendKeyLeave(legendKey)" |
||||
|
(click)="toggleLegendKey(legendKey)"> |
||||
|
<div class="tb-time-series-chart-legend-item-label-circle" [style]="{background: !legendKey.dataKey.hidden ? legendKey.dataKey.color : null}"></div> |
||||
|
<div [style]="!legendKey.dataKey.hidden ? legendLabelStyle : disabledLegendLabelStyle">{{ legendKey.dataKey.label }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
<ng-template #legendDataRow let-label="label" let-type="type"> |
||||
|
<tr> |
||||
|
<th class="tb-time-series-chart-legend-type-label">{{ label | translate }}</th> |
||||
|
<td *ngFor="let legendKey of legendKeys" class="tb-time-series-chart-legend-value"> |
||||
|
{{ legendData.data[legendKey.dataIndex][type] }} |
||||
|
</td> |
||||
|
</tr> |
||||
|
</ng-template> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,181 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
$maxLegendWidth: 25%; |
||||
|
$maxLegendHeight: 35%; |
||||
|
|
||||
|
.tb-time-series-chart-panel { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16px; |
||||
|
padding: 20px 24px 24px 24px; |
||||
|
> div:not(.tb-time-series-chart-overlay) { |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.tb-time-series-chart-overlay { |
||||
|
position: absolute; |
||||
|
top: 12px; |
||||
|
left: 12px; |
||||
|
bottom: 12px; |
||||
|
right: 12px; |
||||
|
} |
||||
|
div.tb-widget-title { |
||||
|
padding: 0; |
||||
|
} |
||||
|
.tb-time-series-chart-content { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
min-height: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16px; |
||||
|
&.legend-top { |
||||
|
flex-direction: column-reverse; |
||||
|
} |
||||
|
&.legend-right { |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
&.legend-left { |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
.tb-time-series-chart-shape { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
min-height: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
&.legend-right, &.legend-left { |
||||
|
.tb-time-series-chart-legend { |
||||
|
display: inline-grid; |
||||
|
grid-auto-flow: column; |
||||
|
grid-template-rows: repeat(auto-fit, minmax(16px, min-content)); |
||||
|
max-width: calc($maxLegendWidth - 8px); |
||||
|
height: fit-content; |
||||
|
max-height: 100%; |
||||
|
} |
||||
|
} |
||||
|
&.legend-top, &.legend-bottom { |
||||
|
.tb-time-series-chart-legend { |
||||
|
align-self: center; |
||||
|
&.tb-simple-legend { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
&:not(.tb-simple-legend) { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tb-time-series-chart-legend { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
align-self: stretch; |
||||
|
column-gap: 16px; |
||||
|
row-gap: 8px; |
||||
|
flex-wrap: wrap; |
||||
|
overflow: auto; |
||||
|
width: fit-content; |
||||
|
max-width: 100%; |
||||
|
max-height: calc($maxLegendHeight - 8px); |
||||
|
.tb-time-series-chart-legend-table { |
||||
|
border-spacing: 0; |
||||
|
table-layout: fixed; |
||||
|
&.vertical { |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
thead tr, tbody tr:not(:last-child) { |
||||
|
th, td { |
||||
|
padding-bottom: 8px; |
||||
|
} |
||||
|
} |
||||
|
.tb-time-series-chart-legend-item { |
||||
|
align-items: flex-end; |
||||
|
&.left { |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tb-time-series-chart-legend-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: flex-start; |
||||
|
user-select: none; |
||||
|
.tb-time-series-chart-legend-item-label { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 4px; |
||||
|
color: #ccc; |
||||
|
white-space: nowrap; |
||||
|
cursor: pointer; |
||||
|
.tb-time-series-chart-legend-item-label-circle { |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #ccc; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tb-time-series-chart-legend-type-label { |
||||
|
font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 16px; |
||||
|
color: rgba(0, 0, 0, 0.38); |
||||
|
white-space: nowrap; |
||||
|
text-align: left; |
||||
|
&.right { |
||||
|
text-align: right; |
||||
|
} |
||||
|
} |
||||
|
.tb-time-series-chart-legend-value { |
||||
|
font-size: 12px; |
||||
|
font-style: normal; |
||||
|
font-weight: 500; |
||||
|
line-height: 16px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
white-space: nowrap; |
||||
|
text-align: right; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,163 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
AfterViewInit, |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
Input, |
||||
|
OnDestroy, |
||||
|
OnInit, |
||||
|
Renderer2, |
||||
|
TemplateRef, |
||||
|
ViewChild, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { timeSeriesChartKeyDefaultSettings, TimeSeriesChartKeySettings } from '@home/components/widget/lib/chart/time-series-chart.models'; |
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { backgroundStyle, ComponentStyle, overlayStyle, textStyle } from '@shared/models/widget-settings.models'; |
||||
|
import { ImagePipe } from '@shared/pipe/image.pipe'; |
||||
|
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
import { LegendConfig, LegendData, LegendKey, LegendPosition } from '@shared/models/widget.models'; |
||||
|
import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart'; |
||||
|
import { |
||||
|
timeSeriesChartWidgetDefaultSettings, |
||||
|
TimeSeriesChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/time-series-chart-widget.models'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-time-series-chart-widget', |
||||
|
templateUrl: './time-series-chart-widget.component.html', |
||||
|
styleUrls: ['./time-series-chart-widget.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterViewInit { |
||||
|
|
||||
|
@ViewChild('chartShape', {static: false}) |
||||
|
chartShape: ElementRef<HTMLElement>; |
||||
|
|
||||
|
settings: TimeSeriesChartWidgetSettings; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
@Input() |
||||
|
widgetTitlePanel: TemplateRef<any>; |
||||
|
|
||||
|
horizontalLegendPosition = false; |
||||
|
|
||||
|
showLegend: boolean; |
||||
|
legendClass: string; |
||||
|
legendConfig: LegendConfig; |
||||
|
legendData: LegendData; |
||||
|
legendKeys: LegendKey[]; |
||||
|
|
||||
|
backgroundStyle$: Observable<ComponentStyle>; |
||||
|
overlayStyle: ComponentStyle = {}; |
||||
|
|
||||
|
legendLabelStyle: ComponentStyle; |
||||
|
disabledLegendLabelStyle: ComponentStyle; |
||||
|
|
||||
|
displayLegendValues = false; |
||||
|
|
||||
|
private timeSeriesChart: TbTimeSeriesChart; |
||||
|
|
||||
|
constructor(private imagePipe: ImagePipe, |
||||
|
private sanitizer: DomSanitizer, |
||||
|
private renderer: Renderer2, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.ctx.$scope.timeSeriesChartWidget = this; |
||||
|
this.settings = {...timeSeriesChartWidgetDefaultSettings, ...this.ctx.settings}; |
||||
|
|
||||
|
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer); |
||||
|
this.overlayStyle = overlayStyle(this.settings.background.overlay); |
||||
|
|
||||
|
this.showLegend = this.settings.showLegend; |
||||
|
if (this.showLegend) { |
||||
|
this.legendData = this.ctx.defaultSubscription.legendData; |
||||
|
this.legendConfig = this.settings.legendConfig; |
||||
|
this.legendKeys = this.legendData.keys; |
||||
|
if (this.legendConfig.sortDataKeys) { |
||||
|
this.legendKeys = this.legendData.keys.sort((key1, key2) => key1.dataKey.label.localeCompare(key2.dataKey.label)); |
||||
|
} |
||||
|
this.legendKeys.forEach(legendKey => { |
||||
|
legendKey.dataKey.settings = mergeDeep<TimeSeriesChartKeySettings>({} as TimeSeriesChartKeySettings, |
||||
|
timeSeriesChartKeyDefaultSettings, legendKey.dataKey.settings); |
||||
|
legendKey.dataKey.hidden = legendKey.dataKey.settings.dataHiddenByDefault; |
||||
|
}); |
||||
|
this.legendKeys = this.legendKeys.filter(legendKey => legendKey.dataKey.settings.showInLegend); |
||||
|
if (!this.legendKeys.length) { |
||||
|
this.showLegend = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (this.showLegend) { |
||||
|
this.horizontalLegendPosition = [LegendPosition.left, LegendPosition.right].includes(this.legendConfig.position); |
||||
|
this.legendClass = `legend-${this.legendConfig.position}`; |
||||
|
this.legendLabelStyle = textStyle(this.settings.legendLabelFont); |
||||
|
this.disabledLegendLabelStyle = textStyle(this.settings.legendLabelFont); |
||||
|
this.legendLabelStyle.color = this.settings.legendLabelColor; |
||||
|
this.displayLegendValues = this.legendConfig.showMin || this.legendConfig.showMax || |
||||
|
this.legendConfig.showAvg || this.legendConfig.showTotal || this.legendConfig.showLatest; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit() { |
||||
|
this.timeSeriesChart = new TbTimeSeriesChart(this.ctx, this.settings, this.chartShape.nativeElement, this.renderer); |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
if (this.timeSeriesChart) { |
||||
|
this.timeSeriesChart.destroy(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onInit() { |
||||
|
const borderRadius = this.ctx.$widgetElement.css('borderRadius'); |
||||
|
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; |
||||
|
this.cd.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
public onDataUpdated() { |
||||
|
if (this.timeSeriesChart) { |
||||
|
this.timeSeriesChart.update(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onLatestDataUpdated() { |
||||
|
if (this.timeSeriesChart) { |
||||
|
this.timeSeriesChart.latestUpdated(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public onLegendKeyEnter(legendKey: LegendKey) { |
||||
|
this.timeSeriesChart.keyEnter(legendKey.dataKey); |
||||
|
} |
||||
|
|
||||
|
public onLegendKeyLeave(legendKey: LegendKey) { |
||||
|
this.timeSeriesChart.keyLeave(legendKey.dataKey); |
||||
|
} |
||||
|
|
||||
|
public toggleLegendKey(legendKey: LegendKey) { |
||||
|
this.timeSeriesChart.toggleKey(legendKey.dataKey); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,52 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { timeSeriesChartDefaultSettings, TimeSeriesChartSettings } from '@home/components/widget/lib/chart/time-series-chart.models'; |
||||
|
import { BackgroundSettings, BackgroundType, Font } from '@shared/models/widget-settings.models'; |
||||
|
import { defaultLegendConfig, LegendConfig, LegendPosition, widgetType } from '@shared/models/widget.models'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
|
||||
|
export interface TimeSeriesChartWidgetSettings extends TimeSeriesChartSettings { |
||||
|
showLegend: boolean; |
||||
|
legendLabelFont: Font; |
||||
|
legendLabelColor: string; |
||||
|
legendConfig: LegendConfig; |
||||
|
background: BackgroundSettings; |
||||
|
} |
||||
|
|
||||
|
export const timeSeriesChartWidgetDefaultSettings: TimeSeriesChartWidgetSettings = |
||||
|
mergeDeep({} as TimeSeriesChartWidgetSettings, timeSeriesChartDefaultSettings as TimeSeriesChartWidgetSettings, { |
||||
|
showLegend: true, |
||||
|
legendLabelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '16px' |
||||
|
}, |
||||
|
legendLabelColor: 'rgba(0, 0, 0, 0.76)', |
||||
|
legendConfig: {...defaultLegendConfig(widgetType.timeseries), position: LegendPosition.top}, |
||||
|
background: { |
||||
|
type: BackgroundType.color, |
||||
|
color: '#fff', |
||||
|
overlay: { |
||||
|
enabled: false, |
||||
|
color: 'rgba(255,255,255,0.72)', |
||||
|
blur: 3 |
||||
|
} |
||||
|
} |
||||
|
} as TimeSeriesChartWidgetSettings); |
||||
@ -0,0 +1,873 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
ECharts, |
||||
|
EChartsOption, |
||||
|
EChartsSeriesItem, |
||||
|
EChartsTooltipTrigger, |
||||
|
EChartsTooltipWidgetSettings, |
||||
|
measureThresholdLabelOffset |
||||
|
} from '@home/components/widget/lib/chart/echarts-widget.models'; |
||||
|
import { ComponentStyle, Font, simpleDateFormat, textStyle } from '@shared/models/widget-settings.models'; |
||||
|
import { XAXisOption, YAXisOption } from 'echarts/types/dist/shared'; |
||||
|
import { CustomSeriesOption, LineSeriesOption } from 'echarts/charts'; |
||||
|
import { formatValue, isDefinedAndNotNull, parseFunction } from '@core/utils'; |
||||
|
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, |
||||
|
BarVisualSettings, |
||||
|
renderTimeSeriesBar |
||||
|
} from '@home/components/widget/lib/chart/time-series-chart-bar.models'; |
||||
|
import { DataKey } from '@shared/models/widget.models'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { TbColorScheme } from '@shared/models/color.models'; |
||||
|
|
||||
|
export enum PointLabelPosition { |
||||
|
top = 'top', |
||||
|
bottom = 'bottom' |
||||
|
} |
||||
|
|
||||
|
export enum AxisPosition { |
||||
|
left = 'left', |
||||
|
right = 'right', |
||||
|
top = 'top', |
||||
|
bottom = 'bottom' |
||||
|
} |
||||
|
|
||||
|
export enum TimeSeriesChartShape { |
||||
|
emptyCircle = 'emptyCircle', |
||||
|
circle = 'circle', |
||||
|
rect = 'rect', |
||||
|
roundRect = 'roundRect', |
||||
|
triangle = 'triangle', |
||||
|
diamond = 'diamond', |
||||
|
pin = 'pin', |
||||
|
arrow = 'arrow', |
||||
|
none = 'none' |
||||
|
} |
||||
|
|
||||
|
export enum TimeSeriesChartLineType { |
||||
|
solid = 'solid', |
||||
|
dashed = 'dashed', |
||||
|
dotted = 'dotted' |
||||
|
} |
||||
|
|
||||
|
export enum ThresholdLabelPosition { |
||||
|
start = 'start', |
||||
|
middle = 'middle', |
||||
|
end = 'end', |
||||
|
insideStart = 'insideStart', |
||||
|
insideStartTop = 'insideStartTop', |
||||
|
insideStartBottom = 'insideStartBottom', |
||||
|
insideMiddle = 'insideMiddle', |
||||
|
insideMiddleTop = 'insideMiddleTop', |
||||
|
insideMiddleBottom = 'insideMiddleBottom', |
||||
|
insideEnd = 'insideEnd', |
||||
|
insideEndTop = 'insideEndTop', |
||||
|
insideEndBottom = 'insideEndBottom' |
||||
|
} |
||||
|
|
||||
|
export interface TimeSeriesChartAxisSettings { |
||||
|
show: boolean; |
||||
|
position: AxisPosition; |
||||
|
label?: string; |
||||
|
labelFont?: Font; |
||||
|
labelColor?: string; |
||||
|
showLine: boolean; |
||||
|
lineColor: string; |
||||
|
showTicks: boolean; |
||||
|
ticksColor: string; |
||||
|
showTickLabels: boolean; |
||||
|
tickLabelFont: Font; |
||||
|
tickLabelColor: string; |
||||
|
showSplitLines: boolean; |
||||
|
splitLinesColor: string; |
||||
|
} |
||||
|
|
||||
|
export interface TimeSeriesChartYAxisSettings extends TimeSeriesChartAxisSettings { |
||||
|
min?: number | string; |
||||
|
max?: number | string; |
||||
|
intervalCalculator?: string; |
||||
|
} |
||||
|
|
||||
|
export enum TimeSeriesChartThresholdType { |
||||
|
constant = 'constant', |
||||
|
latestKey = 'latestKey', |
||||
|
entity = 'entity' |
||||
|
} |
||||
|
|
||||
|
export interface TimeSeriesChartThreshold { |
||||
|
type: TimeSeriesChartThresholdType; |
||||
|
value?: number; |
||||
|
latestKeyName?: string; |
||||
|
entityAlias?: string; |
||||
|
entityKeyType?: DataKeyType.attribute | DataKeyType.timeseries; |
||||
|
entityKey?: string; |
||||
|
units?: string; |
||||
|
decimals?: number; |
||||
|
lineWidth: number; |
||||
|
lineType: TimeSeriesChartLineType; |
||||
|
lineColor: string; |
||||
|
startSymbol: TimeSeriesChartShape; |
||||
|
startSymbolSize: number; |
||||
|
endSymbol: TimeSeriesChartShape; |
||||
|
endSymbolSize: number; |
||||
|
showLabel: boolean; |
||||
|
labelPosition: ThresholdLabelPosition; |
||||
|
labelFont: Font; |
||||
|
labelColor: string; |
||||
|
} |
||||
|
|
||||
|
const timeSeriesChartColorScheme: TbColorScheme = { |
||||
|
'threshold.line': { |
||||
|
light: 'rgba(0, 0, 0, 0.76)', |
||||
|
dark: '#eee' |
||||
|
}, |
||||
|
'threshold.label': { |
||||
|
light: 'rgba(0, 0, 0, 0.76)', |
||||
|
dark: '#eee' |
||||
|
}, |
||||
|
'axis.line': { |
||||
|
light: 'rgba(0, 0, 0, 0.54)', |
||||
|
dark: '#B9B8CE' |
||||
|
}, |
||||
|
'axis.label': { |
||||
|
light: 'rgba(0, 0, 0, 0.54)', |
||||
|
dark: '#B9B8CE' |
||||
|
}, |
||||
|
'axis.ticks': { |
||||
|
light: 'rgba(0, 0, 0, 0.54)', |
||||
|
dark: '#B9B8CE' |
||||
|
}, |
||||
|
'axis.tickLabel': { |
||||
|
light: 'rgba(0, 0, 0, 0.54)', |
||||
|
dark: '#B9B8CE' |
||||
|
}, |
||||
|
'axis.splitLine': { |
||||
|
light: 'rgba(0, 0, 0, 0.12)', |
||||
|
dark: '#484753' |
||||
|
}, |
||||
|
'series.pointLabel': { |
||||
|
light: 'rgba(0, 0, 0, 0.76)', |
||||
|
dark: '#eee' |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export const timeSeriesChartThresholdDefaultSettings: TimeSeriesChartThreshold = { |
||||
|
type: TimeSeriesChartThresholdType.constant, |
||||
|
units: '', |
||||
|
decimals: 0, |
||||
|
lineWidth: 1, |
||||
|
lineType: TimeSeriesChartLineType.solid, |
||||
|
lineColor: timeSeriesChartColorScheme['threshold.line'].light, |
||||
|
startSymbol: TimeSeriesChartShape.none, |
||||
|
startSymbolSize: 5, |
||||
|
endSymbol: TimeSeriesChartShape.arrow, |
||||
|
endSymbolSize: 5, |
||||
|
showLabel: true, |
||||
|
labelPosition: ThresholdLabelPosition.end, |
||||
|
labelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
labelColor: timeSeriesChartColorScheme['threshold.label'].light |
||||
|
}; |
||||
|
|
||||
|
export interface TimeSeriesChartSettings extends EChartsTooltipWidgetSettings { |
||||
|
darkMode: boolean; |
||||
|
dataZoom: boolean; |
||||
|
stack: boolean; |
||||
|
thresholds: TimeSeriesChartThreshold[]; |
||||
|
xAxis: TimeSeriesChartAxisSettings; |
||||
|
yAxis: TimeSeriesChartYAxisSettings; |
||||
|
} |
||||
|
|
||||
|
export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = { |
||||
|
darkMode: false, |
||||
|
dataZoom: true, |
||||
|
stack: false, |
||||
|
thresholds: [], |
||||
|
xAxis: { |
||||
|
show: true, |
||||
|
position: AxisPosition.bottom, |
||||
|
label: '', |
||||
|
labelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '600', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
labelColor: timeSeriesChartColorScheme['axis.label'].light, |
||||
|
showLine: true, |
||||
|
lineColor: timeSeriesChartColorScheme['axis.line'].light, |
||||
|
showTicks: true, |
||||
|
ticksColor: timeSeriesChartColorScheme['axis.ticks'].light, |
||||
|
showTickLabels: true, |
||||
|
tickLabelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 10, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
tickLabelColor: timeSeriesChartColorScheme['axis.tickLabel'].light, |
||||
|
showSplitLines: true, |
||||
|
splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light |
||||
|
}, |
||||
|
yAxis: { |
||||
|
show: true, |
||||
|
position: AxisPosition.left, |
||||
|
label: '', |
||||
|
labelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '600', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
labelColor: timeSeriesChartColorScheme['axis.label'].light, |
||||
|
showLine: true, |
||||
|
lineColor: timeSeriesChartColorScheme['axis.line'].light, |
||||
|
showTicks: true, |
||||
|
ticksColor: timeSeriesChartColorScheme['axis.ticks'].light, |
||||
|
showTickLabels: true, |
||||
|
tickLabelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
tickLabelColor: timeSeriesChartColorScheme['axis.tickLabel'].light, |
||||
|
showSplitLines: true, |
||||
|
splitLinesColor: timeSeriesChartColorScheme['axis.splitLine'].light |
||||
|
}, |
||||
|
showTooltip: true, |
||||
|
tooltipTrigger: EChartsTooltipTrigger.axis, |
||||
|
tooltipValueFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 12, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '500', |
||||
|
lineHeight: '16px' |
||||
|
}, |
||||
|
tooltipValueColor: 'rgba(0, 0, 0, 0.76)', |
||||
|
tooltipShowDate: true, |
||||
|
tooltipDateInterval: true, |
||||
|
tooltipDateFormat: simpleDateFormat('dd MMM yyyy HH:mm:ss'), |
||||
|
tooltipDateFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 11, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '16px' |
||||
|
}, |
||||
|
tooltipDateColor: 'rgba(0, 0, 0, 0.76)', |
||||
|
tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)', |
||||
|
tooltipBackgroundBlur: 4 |
||||
|
}; |
||||
|
|
||||
|
export enum SeriesFillType { |
||||
|
none = 'none', |
||||
|
opacity = 'opacity', |
||||
|
gradient = 'gradient' |
||||
|
} |
||||
|
|
||||
|
export interface SeriesFillSettings { |
||||
|
type: SeriesFillType; |
||||
|
opacity: number; |
||||
|
gradient: { |
||||
|
start: number; |
||||
|
end: number; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export interface LineSeriesSettings { |
||||
|
step: false | 'start' | 'end' | 'middle'; |
||||
|
smooth: boolean; |
||||
|
showLine: boolean; |
||||
|
lineWidth: number; |
||||
|
lineType: TimeSeriesChartLineType; |
||||
|
fillAreaSettings: SeriesFillSettings; |
||||
|
showPoints: boolean; |
||||
|
pointShape: TimeSeriesChartShape; |
||||
|
pointSize: number; |
||||
|
} |
||||
|
|
||||
|
export interface BarSeriesSettings { |
||||
|
showBorder: boolean; |
||||
|
borderWidth: number; |
||||
|
borderRadius: number; |
||||
|
backgroundSettings: SeriesFillSettings; |
||||
|
} |
||||
|
|
||||
|
export enum TimeSeriesChartSeriesType { |
||||
|
line = 'line', |
||||
|
bar = 'bar' |
||||
|
} |
||||
|
|
||||
|
export interface TimeSeriesChartKeySettings { |
||||
|
dataHiddenByDefault: boolean; |
||||
|
showInLegend: boolean; |
||||
|
showPointLabel: boolean; |
||||
|
pointLabelPosition: PointLabelPosition; |
||||
|
pointLabelFont: Font; |
||||
|
pointLabelColor: string; |
||||
|
type: TimeSeriesChartSeriesType; |
||||
|
lineSettings: LineSeriesSettings; |
||||
|
barSettings: BarSeriesSettings; |
||||
|
} |
||||
|
|
||||
|
export const timeSeriesChartKeyDefaultSettings: TimeSeriesChartKeySettings = { |
||||
|
showInLegend: true, |
||||
|
dataHiddenByDefault: false, |
||||
|
showPointLabel: false, |
||||
|
pointLabelPosition: PointLabelPosition.top, |
||||
|
pointLabelFont: { |
||||
|
family: 'Roboto', |
||||
|
size: 11, |
||||
|
sizeUnit: 'px', |
||||
|
style: 'normal', |
||||
|
weight: '400', |
||||
|
lineHeight: '1' |
||||
|
}, |
||||
|
pointLabelColor: timeSeriesChartColorScheme['series.pointLabel'].light, |
||||
|
type: TimeSeriesChartSeriesType.line, |
||||
|
lineSettings: { |
||||
|
step: false, |
||||
|
smooth: false, |
||||
|
showLine: true, |
||||
|
lineWidth: 2, |
||||
|
lineType: TimeSeriesChartLineType.solid, |
||||
|
fillAreaSettings: { |
||||
|
type: SeriesFillType.none, |
||||
|
opacity: 0.4, |
||||
|
gradient: { |
||||
|
start: 100, |
||||
|
end: 0 |
||||
|
} |
||||
|
}, |
||||
|
showPoints: false, |
||||
|
pointShape: TimeSeriesChartShape.emptyCircle, |
||||
|
pointSize: 4 |
||||
|
}, |
||||
|
barSettings: { |
||||
|
showBorder: false, |
||||
|
borderWidth: 2, |
||||
|
borderRadius: 0, |
||||
|
backgroundSettings: { |
||||
|
type: SeriesFillType.none, |
||||
|
opacity: 0.4, |
||||
|
gradient: { |
||||
|
start: 100, |
||||
|
end: 0 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export interface TimeSeriesChartDataItem extends EChartsSeriesItem { |
||||
|
yAxisIndex: number; |
||||
|
option?: LineSeriesOption | CustomSeriesOption; |
||||
|
barRenderContext?: BarRenderContext; |
||||
|
} |
||||
|
|
||||
|
type TimeSeriesChartThresholdValue = number | string | (number | string)[]; |
||||
|
|
||||
|
export interface TimeSeriesChartThresholdItem { |
||||
|
id: string; |
||||
|
yAxisIndex: number; |
||||
|
latestDataKey?: DataKey; |
||||
|
units?: string; |
||||
|
decimals?: number; |
||||
|
value: TimeSeriesChartThresholdValue; |
||||
|
settings: TimeSeriesChartThreshold; |
||||
|
option?: LineSeriesOption; |
||||
|
} |
||||
|
|
||||
|
export interface TimeSeriesChartYAxis { |
||||
|
id: string; |
||||
|
units: string; |
||||
|
option: YAXisOption & ValueAxisBaseOption; |
||||
|
intervalCalculator?: (axis: Axis2D) => number; |
||||
|
} |
||||
|
|
||||
|
export const createTimeSeriesYAxis = (axisId: string, units: string, |
||||
|
decimals: number, settings: TimeSeriesChartYAxisSettings, |
||||
|
darkMode: boolean): TimeSeriesChartYAxis => { |
||||
|
const yAxisTickLabelStyle = createChartTextStyle(settings.tickLabelFont, |
||||
|
settings.tickLabelColor, darkMode, 'axis.tickLabel'); |
||||
|
const yAxisNameStyle = createChartTextStyle(settings.labelFont, |
||||
|
settings.labelColor, darkMode, 'axis.label'); |
||||
|
const yAxis: TimeSeriesChartYAxis = { |
||||
|
id: axisId, |
||||
|
units, |
||||
|
option: { |
||||
|
show: settings.show, |
||||
|
type: 'value', |
||||
|
position: settings.position, |
||||
|
id: axisId, |
||||
|
offset: 0, |
||||
|
alignTicks: true, |
||||
|
scale: true, |
||||
|
min: settings.min, |
||||
|
max: settings.max, |
||||
|
name: settings.label, |
||||
|
nameLocation: 'middle', |
||||
|
nameRotate: settings.position === AxisPosition.left ? 90 : -90, |
||||
|
nameTextStyle: { |
||||
|
color: yAxisNameStyle.color, |
||||
|
fontStyle: yAxisNameStyle.fontStyle, |
||||
|
fontWeight: yAxisNameStyle.fontWeight, |
||||
|
fontFamily: yAxisNameStyle.fontFamily, |
||||
|
fontSize: yAxisNameStyle.fontSize |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: settings.showLine, |
||||
|
onZero: false, |
||||
|
lineStyle: { |
||||
|
color: prepareChartThemeColor(settings.lineColor, darkMode, 'axis.line') |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: settings.showTicks, |
||||
|
lineStyle: { |
||||
|
color: prepareChartThemeColor(settings.ticksColor, darkMode, 'axis.ticks') |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: settings.showTickLabels, |
||||
|
color: yAxisTickLabelStyle.color, |
||||
|
fontStyle: yAxisTickLabelStyle.fontStyle, |
||||
|
fontWeight: yAxisTickLabelStyle.fontWeight, |
||||
|
fontFamily: yAxisTickLabelStyle.fontFamily, |
||||
|
fontSize: yAxisTickLabelStyle.fontSize, |
||||
|
formatter: (value: any) => formatValue(value, decimals, units, false) |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: settings.showSplitLines, |
||||
|
lineStyle: { |
||||
|
color: prepareChartThemeColor(settings.splitLinesColor, darkMode, 'axis.splitLine') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
if (settings.intervalCalculator && settings.intervalCalculator.length) { |
||||
|
yAxis.intervalCalculator = parseFunction(settings.intervalCalculator, ['axis']); |
||||
|
} |
||||
|
return yAxis; |
||||
|
}; |
||||
|
|
||||
|
export const createTimeSeriesXAxisOption = (settings: TimeSeriesChartAxisSettings, |
||||
|
min: number, max: number, darkMode: boolean): XAXisOption => { |
||||
|
const xAxisTickLabelStyle = createChartTextStyle(settings.tickLabelFont, |
||||
|
settings.tickLabelColor, darkMode, 'axis.tickLabel'); |
||||
|
const xAxisNameStyle = createChartTextStyle(settings.labelFont, |
||||
|
settings.labelColor, darkMode, 'axis.label'); |
||||
|
return { |
||||
|
show: settings.show, |
||||
|
type: 'time', |
||||
|
scale: true, |
||||
|
position: settings.position, |
||||
|
name: settings.label, |
||||
|
nameLocation: 'middle', |
||||
|
nameTextStyle: { |
||||
|
color: xAxisNameStyle.color, |
||||
|
fontStyle: xAxisNameStyle.fontStyle, |
||||
|
fontWeight: xAxisNameStyle.fontWeight, |
||||
|
fontFamily: xAxisNameStyle.fontFamily, |
||||
|
fontSize: xAxisNameStyle.fontSize |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: settings.showTicks, |
||||
|
lineStyle: { |
||||
|
color: prepareChartThemeColor(settings.ticksColor, darkMode, 'axis.ticks') |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: settings.showTickLabels, |
||||
|
color: xAxisTickLabelStyle.color, |
||||
|
fontStyle: xAxisTickLabelStyle.fontStyle, |
||||
|
fontWeight: xAxisTickLabelStyle.fontWeight, |
||||
|
fontFamily: xAxisTickLabelStyle.fontFamily, |
||||
|
fontSize: xAxisTickLabelStyle.fontSize, |
||||
|
hideOverlap: true |
||||
|
}, |
||||
|
axisLine: { |
||||
|
show: settings.showLine, |
||||
|
onZero: false, |
||||
|
lineStyle: { |
||||
|
color: prepareChartThemeColor(settings.lineColor, darkMode, 'axis.line') |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: settings.showSplitLines, |
||||
|
lineStyle: { |
||||
|
color: prepareChartThemeColor(settings.splitLinesColor, darkMode, 'axis.splitLine') |
||||
|
} |
||||
|
}, |
||||
|
min, |
||||
|
max |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
export const generateChartData = (dataItems: TimeSeriesChartDataItem[], |
||||
|
thresholdItems: TimeSeriesChartThresholdItem[], |
||||
|
timeInterval: Interval, |
||||
|
stack: boolean, |
||||
|
darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => { |
||||
|
let series = generateChartSeries(dataItems, timeInterval, stack, darkMode); |
||||
|
if (thresholdItems.length) { |
||||
|
const thresholds = generateChartThresholds(thresholdItems, darkMode); |
||||
|
series = series.concat(thresholds); |
||||
|
} |
||||
|
return series; |
||||
|
}; |
||||
|
|
||||
|
export const calculateThresholdsOffset = (chart: ECharts, |
||||
|
thresholdItems: TimeSeriesChartThresholdItem[], |
||||
|
yAxisList: TimeSeriesChartYAxis[]): [number, number] => { |
||||
|
const result: [number, number] = [0, 0]; |
||||
|
for (const item of thresholdItems) { |
||||
|
const yAxis = yAxisList[item.yAxisIndex]; |
||||
|
const offset = measureThresholdLabelOffset(chart, yAxis.id, item.id, item.value); |
||||
|
result[0] = Math.max(result[0], offset[0]); |
||||
|
result[1] = Math.max(result[1], offset[1]); |
||||
|
} |
||||
|
return result; |
||||
|
}; |
||||
|
|
||||
|
export const parseThresholdData = (value: any): TimeSeriesChartThresholdValue => { |
||||
|
let thresholdValue: TimeSeriesChartThresholdValue; |
||||
|
if (Array.isArray(value)) { |
||||
|
thresholdValue = value; |
||||
|
} else { |
||||
|
try { |
||||
|
const parsedData = JSON.parse(value); |
||||
|
thresholdValue = Array.isArray(parsedData) ? parsedData : [parsedData]; |
||||
|
} catch (e) { |
||||
|
thresholdValue = [value]; |
||||
|
} |
||||
|
} |
||||
|
return thresholdValue; |
||||
|
}; |
||||
|
|
||||
|
const generateChartThresholds = (thresholdItems: TimeSeriesChartThresholdItem[], darkMode: boolean): Array<LineSeriesOption> => { |
||||
|
const series: Array<LineSeriesOption> = []; |
||||
|
for (const item of thresholdItems) { |
||||
|
if (isDefinedAndNotNull(item.value)) { |
||||
|
let seriesOption = item.option; |
||||
|
if (!item.option) { |
||||
|
const thresholdLabelStyle = createChartTextStyle(item.settings.labelFont, |
||||
|
item.settings.labelColor, darkMode, 'threshold.label'); |
||||
|
seriesOption = { |
||||
|
type: 'line', |
||||
|
id: item.id, |
||||
|
dataGroupId: item.id, |
||||
|
yAxisIndex: item.yAxisIndex, |
||||
|
animation: true, |
||||
|
data: [], |
||||
|
tooltip: { |
||||
|
show: false |
||||
|
}, |
||||
|
markLine: { |
||||
|
animation: true, |
||||
|
symbol: [item.settings.startSymbol, item.settings.endSymbol], |
||||
|
symbolSize: [item.settings.startSymbolSize, item.settings.endSymbolSize], |
||||
|
lineStyle: { |
||||
|
width: item.settings.lineWidth, |
||||
|
color: prepareChartThemeColor(item.settings.lineColor, darkMode, 'threshold.line'), |
||||
|
type: item.settings.lineType |
||||
|
}, |
||||
|
label: { |
||||
|
show: item.settings.showLabel, |
||||
|
position: item.settings.labelPosition, |
||||
|
color: thresholdLabelStyle.color, |
||||
|
fontStyle: thresholdLabelStyle.fontStyle, |
||||
|
fontWeight: thresholdLabelStyle.fontWeight, |
||||
|
fontFamily: thresholdLabelStyle.fontFamily, |
||||
|
fontSize: thresholdLabelStyle.fontSize, |
||||
|
formatter: params => formatValue(params.value, item.decimals, |
||||
|
item.units, false) |
||||
|
}, |
||||
|
emphasis: { |
||||
|
disabled: true |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
item.option = seriesOption; |
||||
|
} |
||||
|
seriesOption.markLine.data = []; |
||||
|
if (Array.isArray(item.value)) { |
||||
|
for (const val of item.value) { |
||||
|
seriesOption.markLine.data.push({ |
||||
|
yAxis: val |
||||
|
}); |
||||
|
} |
||||
|
} else { |
||||
|
seriesOption.markLine.data.push({ |
||||
|
yAxis: item.value |
||||
|
}); |
||||
|
} |
||||
|
series.push(seriesOption); |
||||
|
} |
||||
|
} |
||||
|
return series; |
||||
|
}; |
||||
|
|
||||
|
const generateChartSeries = (dataItems: TimeSeriesChartDataItem[], |
||||
|
timeInterval: Interval, |
||||
|
stack: boolean, |
||||
|
darkMode: boolean): Array<LineSeriesOption | CustomSeriesOption> => { |
||||
|
const series: Array<LineSeriesOption | CustomSeriesOption> = []; |
||||
|
const enabledDataItems = dataItems.filter(d => d.enabled); |
||||
|
const barDataItems = enabledDataItems.filter(d => |
||||
|
d.dataKey.settings.type === TimeSeriesChartSeriesType.bar && d.data.length); |
||||
|
let barsCount = barDataItems.length; |
||||
|
const barGroups: number[] = []; |
||||
|
if (stack) { |
||||
|
barDataItems.forEach(item => { |
||||
|
if (barGroups.indexOf(item.yAxisIndex) === -1) { |
||||
|
barGroups.push(item.yAxisIndex); |
||||
|
} |
||||
|
}); |
||||
|
barsCount = barGroups.length; |
||||
|
} |
||||
|
for (const item of enabledDataItems) { |
||||
|
if (item.dataKey.settings.type === TimeSeriesChartSeriesType.bar) { |
||||
|
if (!item.barRenderContext) { |
||||
|
item.barRenderContext = {}; |
||||
|
} |
||||
|
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; |
||||
|
item.barRenderContext.barStackIndex = stackItems.indexOf(item); |
||||
|
} |
||||
|
} |
||||
|
const seriesOption = createTimeSeriesChartSeries(item, stack, darkMode); |
||||
|
series.push(seriesOption); |
||||
|
} |
||||
|
return series; |
||||
|
}; |
||||
|
|
||||
|
export const updateDarkMode = (options: EChartsOption, settings: TimeSeriesChartSettings, |
||||
|
dataItems: TimeSeriesChartDataItem[], thresholdDataItems: TimeSeriesChartThresholdItem[], |
||||
|
darkMode: boolean): EChartsOption => { |
||||
|
options.darkMode = darkMode; |
||||
|
if (Array.isArray(options.yAxis)) { |
||||
|
for (const yAxis of options.yAxis) { |
||||
|
yAxis.nameTextStyle.color = prepareChartThemeColor(settings.yAxis.labelColor, darkMode, 'axis.label'); |
||||
|
yAxis.axisLabel.color = prepareChartThemeColor(settings.yAxis.tickLabelColor, darkMode, 'axis.tickLabel'); |
||||
|
yAxis.axisLine.lineStyle.color = prepareChartThemeColor(settings.yAxis.lineColor, darkMode, 'axis.line'); |
||||
|
yAxis.axisTick.lineStyle.color = prepareChartThemeColor(settings.yAxis.ticksColor, darkMode, 'axis.ticks'); |
||||
|
yAxis.splitLine.lineStyle.color = prepareChartThemeColor(settings.yAxis.splitLinesColor, darkMode, 'axis.splitLine'); |
||||
|
} |
||||
|
} |
||||
|
if (Array.isArray(options.xAxis)) { |
||||
|
for (const xAxis of options.xAxis) { |
||||
|
xAxis.nameTextStyle.color = prepareChartThemeColor(settings.xAxis.labelColor, darkMode, 'axis.label'); |
||||
|
xAxis.axisLabel.color = prepareChartThemeColor(settings.xAxis.tickLabelColor, darkMode, 'axis.tickLabel'); |
||||
|
xAxis.axisLine.lineStyle.color = prepareChartThemeColor(settings.xAxis.lineColor, darkMode, 'axis.line'); |
||||
|
xAxis.axisTick.lineStyle.color = prepareChartThemeColor(settings.xAxis.ticksColor, darkMode, 'axis.ticks'); |
||||
|
xAxis.splitLine.lineStyle.color = prepareChartThemeColor(settings.xAxis.splitLinesColor, darkMode, 'axis.splitLine'); |
||||
|
} |
||||
|
} |
||||
|
for (const item of dataItems) { |
||||
|
if (item.dataKey.settings.type === TimeSeriesChartSeriesType.line) { |
||||
|
if (item.option.label?.show) { |
||||
|
item.option.label.rich.value.color = prepareChartThemeColor(item.dataKey.settings.pointLabelColor, darkMode, 'series.pointLabel'); |
||||
|
} |
||||
|
if (Array.isArray(options.series)) { |
||||
|
const series = options.series.find(s => s.id === item.id); |
||||
|
if (series) { |
||||
|
if (series.label?.show) { |
||||
|
series.label.rich.value.color = prepareChartThemeColor(item.dataKey.settings.pointLabelColor, darkMode, 'series.pointLabel'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
if (item.barRenderContext?.labelOption?.show) { |
||||
|
item.barRenderContext.labelOption.rich.value.color = prepareChartThemeColor(item.dataKey.settings.pointLabelColor, |
||||
|
darkMode, 'series.pointLabel'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
for (const item of thresholdDataItems) { |
||||
|
if (Array.isArray(options.series)) { |
||||
|
const series = options.series.find(s => s.id === item.id); |
||||
|
if (series) { |
||||
|
series.markLine.lineStyle.color = prepareChartThemeColor(item.settings.lineColor, darkMode, 'threshold.line'); |
||||
|
if (series.markLine?.label?.show) { |
||||
|
series.markLine.label.color = prepareChartThemeColor(item.settings.labelColor, darkMode, 'threshold.label'); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return options; |
||||
|
}; |
||||
|
|
||||
|
const createTimeSeriesChartSeries = (item: TimeSeriesChartDataItem, |
||||
|
stack: boolean, |
||||
|
darkMode: boolean): LineSeriesOption | CustomSeriesOption => { |
||||
|
let seriesOption = item.option; |
||||
|
if (!seriesOption) { |
||||
|
const dataKey = item.dataKey; |
||||
|
const settings: TimeSeriesChartKeySettings = dataKey.settings; |
||||
|
const seriesColor = item.dataKey.color; |
||||
|
let pointLabelStyle: ComponentStyle = {}; |
||||
|
if (settings.showPointLabel) { |
||||
|
pointLabelStyle = createChartTextStyle(settings.pointLabelFont, settings.pointLabelColor, darkMode, 'series.pointLabel'); |
||||
|
} |
||||
|
const label: SeriesLabelOption = { |
||||
|
show: settings.showPointLabel, |
||||
|
position: settings.pointLabelPosition, |
||||
|
formatter: (params): string => { |
||||
|
const value = formatValue(params.value[1], item.decimals, item.units, false); |
||||
|
return `{value|${value}}`; |
||||
|
}, |
||||
|
rich: { |
||||
|
value: pointLabelStyle |
||||
|
} |
||||
|
}; |
||||
|
seriesOption = { |
||||
|
id: item.id, |
||||
|
dataGroupId: item.id, |
||||
|
yAxisIndex: item.yAxisIndex, |
||||
|
name: item.dataKey.label, |
||||
|
color: seriesColor, |
||||
|
stack: stack ? (item.yAxisIndex + '') : undefined, |
||||
|
stackStrategy: 'all', |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
animation: true, |
||||
|
dimensions: [ |
||||
|
{name: 'intervalStart', type: 'number'}, |
||||
|
{name: 'intervalEnd', type: 'number'} |
||||
|
], |
||||
|
encode: { |
||||
|
intervalStart: 2, |
||||
|
intervalEnd: 3 |
||||
|
} |
||||
|
}; |
||||
|
item.option = seriesOption; |
||||
|
if (settings.type === TimeSeriesChartSeriesType.line) { |
||||
|
const lineSettings = settings.lineSettings; |
||||
|
const lineSeriesOption = seriesOption as LineSeriesOption; |
||||
|
lineSeriesOption.type = 'line'; |
||||
|
lineSeriesOption.label = label; |
||||
|
lineSeriesOption.step = lineSettings.step; |
||||
|
lineSeriesOption.smooth = lineSettings.smooth; |
||||
|
lineSeriesOption.lineStyle = { |
||||
|
width: lineSettings.showLine ? lineSettings.lineWidth : 0, |
||||
|
type: lineSettings.lineType |
||||
|
}; |
||||
|
if (lineSettings.fillAreaSettings.type !== SeriesFillType.none) { |
||||
|
lineSeriesOption.areaStyle = {}; |
||||
|
if (lineSettings.fillAreaSettings.type === SeriesFillType.opacity) { |
||||
|
lineSeriesOption.areaStyle.opacity = lineSettings.fillAreaSettings.opacity; |
||||
|
} else { |
||||
|
lineSeriesOption.areaStyle.opacity = 1; |
||||
|
lineSeriesOption.areaStyle.color = createLinearOpacityGradient(seriesColor, lineSettings.fillAreaSettings.gradient); |
||||
|
} |
||||
|
} |
||||
|
lineSeriesOption.showSymbol = lineSettings.showPoints; |
||||
|
lineSeriesOption.symbol = lineSettings.pointShape; |
||||
|
lineSeriesOption.symbolSize = lineSettings.pointSize; |
||||
|
} else { |
||||
|
const barSettings = settings.barSettings; |
||||
|
const barSeriesOption = (seriesOption as any) as CustomSeriesOption; |
||||
|
barSeriesOption.type = 'custom'; |
||||
|
const barVisualSettings: BarVisualSettings = { |
||||
|
color: seriesColor, |
||||
|
borderColor: seriesColor, |
||||
|
borderWidth: barSettings.showBorder ? barSettings.borderWidth : 0, |
||||
|
borderRadius: barSettings.borderRadius |
||||
|
}; |
||||
|
if (barSettings.backgroundSettings.type === SeriesFillType.none) { |
||||
|
barVisualSettings.color = seriesColor; |
||||
|
} else if (barSettings.backgroundSettings.type === SeriesFillType.opacity) { |
||||
|
barVisualSettings.color = tinycolor(seriesColor).setAlpha(barSettings.backgroundSettings.opacity).toRgbString(); |
||||
|
} else { |
||||
|
barVisualSettings.color = createLinearOpacityGradient(seriesColor, barSettings.backgroundSettings.gradient); |
||||
|
} |
||||
|
item.barRenderContext.visualSettings = barVisualSettings; |
||||
|
item.barRenderContext.labelOption = label; |
||||
|
barSeriesOption.renderItem = (params, api) => |
||||
|
renderTimeSeriesBar(params, api, item.barRenderContext); |
||||
|
} |
||||
|
} |
||||
|
seriesOption.data = item.data; |
||||
|
return seriesOption; |
||||
|
}; |
||||
|
|
||||
|
const createChartTextStyle = (font: Font, color: string, darkMode: boolean, colorKey?: string): ComponentStyle => { |
||||
|
const style = textStyle(font); |
||||
|
delete style.lineHeight; |
||||
|
style.fontSize = font.size; |
||||
|
style.color = prepareChartThemeColor(color, darkMode, colorKey); |
||||
|
return style; |
||||
|
}; |
||||
|
|
||||
|
const createLinearOpacityGradient = (color: string, gradient: {start: number; end: number}): LinearGradientObject => ({ |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, color: tinycolor(color).setAlpha(gradient.start / 100).toRgbString() // color at 0%
|
||||
|
}, { |
||||
|
offset: 1, color: tinycolor(color).setAlpha(gradient.end / 100).toRgbString() // color at 100%
|
||||
|
}], |
||||
|
global: false |
||||
|
}); |
||||
|
|
||||
|
const prepareChartThemeColor = (color: string, darkMode: boolean, colorKey?: string): string => { |
||||
|
if (darkMode) { |
||||
|
let colorInstance = tinycolor(color); |
||||
|
if (colorInstance.isDark()) { |
||||
|
if (colorKey && timeSeriesChartColorScheme[colorKey]) { |
||||
|
return timeSeriesChartColorScheme[colorKey].dark; |
||||
|
} else { |
||||
|
const rgb = colorInstance.toRgb(); |
||||
|
colorInstance = tinycolor({r: 255 - rgb.r, g: 255 - rgb.g, b: 255 - rgb.b, a: rgb.a}); |
||||
|
return colorInstance.toRgbString(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return color; |
||||
|
}; |
||||
@ -0,0 +1,642 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { WidgetContext } from '@home/models/widget-component.models'; |
||||
|
import { |
||||
|
AxisPosition, |
||||
|
calculateThresholdsOffset, |
||||
|
createTimeSeriesXAxisOption, |
||||
|
createTimeSeriesYAxis, |
||||
|
generateChartData, |
||||
|
TimeSeriesChartDataItem, |
||||
|
timeSeriesChartDefaultSettings, |
||||
|
timeSeriesChartKeyDefaultSettings, |
||||
|
TimeSeriesChartKeySettings, |
||||
|
TimeSeriesChartSeriesType, |
||||
|
TimeSeriesChartSettings, |
||||
|
TimeSeriesChartThresholdItem, |
||||
|
TimeSeriesChartThresholdType, |
||||
|
TimeSeriesChartYAxis, |
||||
|
parseThresholdData, |
||||
|
PointLabelPosition, |
||||
|
updateDarkMode |
||||
|
} from '@home/components/widget/lib/chart/time-series-chart.models'; |
||||
|
import { ResizeObserver } from '@juggle/resize-observer'; |
||||
|
import { |
||||
|
calculateXAxisHeight, |
||||
|
calculateYAxisWidth, |
||||
|
ECharts, |
||||
|
echartsModule, |
||||
|
EChartsOption, |
||||
|
echartsTooltipFormatter, |
||||
|
EChartsTooltipTrigger, |
||||
|
getAxisExtent, |
||||
|
getYAxis, |
||||
|
measureXAxisNameHeight, |
||||
|
measureYAxisNameWidth, |
||||
|
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 { DataKey, Datasource, DatasourceType, widgetType } from '@shared/models/widget.models'; |
||||
|
import * as echarts from 'echarts/core'; |
||||
|
import { CallbackDataParams } from 'echarts/types/dist/shared'; |
||||
|
import { Renderer2 } from '@angular/core'; |
||||
|
import { CustomSeriesOption, LineSeriesOption } from 'echarts/charts'; |
||||
|
import { BehaviorSubject } from 'rxjs'; |
||||
|
import { AggregationType } from '@shared/models/time/time.models'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { WidgetSubscriptionOptions } from '@core/api/widget-api.models'; |
||||
|
|
||||
|
export class TbTimeSeriesChart { |
||||
|
|
||||
|
private readonly shapeResize$: ResizeObserver; |
||||
|
|
||||
|
private dataItems: TimeSeriesChartDataItem[] = []; |
||||
|
private thresholdItems: TimeSeriesChartThresholdItem[] = []; |
||||
|
private yAxisList: TimeSeriesChartYAxis[] = []; |
||||
|
|
||||
|
private timeSeriesChart: ECharts; |
||||
|
private timeSeriesChartOptions: EChartsOption; |
||||
|
|
||||
|
private readonly tooltipDateFormat: DateFormatProcessor; |
||||
|
|
||||
|
private yMinSubject = new BehaviorSubject(-1); |
||||
|
private yMaxSubject = new BehaviorSubject(1); |
||||
|
|
||||
|
private darkMode = false; |
||||
|
|
||||
|
private messageChannel = new BroadcastChannel('tbMessageChannel'); |
||||
|
|
||||
|
private topPointLabels = false; |
||||
|
|
||||
|
private componentIndexCounter = 0; |
||||
|
|
||||
|
private highlightedDataKey: DataKey; |
||||
|
|
||||
|
yMin$ = this.yMinSubject.asObservable(); |
||||
|
yMax$ = this.yMaxSubject.asObservable(); |
||||
|
|
||||
|
constructor(private ctx: WidgetContext, |
||||
|
private readonly settings: TimeSeriesChartSettings, |
||||
|
private chartElement: HTMLElement, |
||||
|
private renderer: Renderer2, |
||||
|
private autoResize = true) { |
||||
|
|
||||
|
this.settings = mergeDeep({} as TimeSeriesChartSettings, timeSeriesChartDefaultSettings, this.settings); |
||||
|
this.darkMode = this.settings.darkMode; |
||||
|
this.setupData(); |
||||
|
this.setupThresholds(); |
||||
|
if (this.settings.showTooltip && this.settings.tooltipShowDate) { |
||||
|
this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.tooltipDateFormat); |
||||
|
} |
||||
|
this.onResize(); |
||||
|
if (this.autoResize) { |
||||
|
this.shapeResize$ = new ResizeObserver(() => { |
||||
|
this.onResize(); |
||||
|
}); |
||||
|
this.shapeResize$.observe(this.chartElement); |
||||
|
} |
||||
|
this.messageChannel.addEventListener('message', (event) => { |
||||
|
if (event?.data?.type === 'tbDarkMode') { |
||||
|
const darkMode = !!event?.data?.darkMode; |
||||
|
this.setDarkMode(darkMode); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
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) : []; |
||||
|
} |
||||
|
this.onResize(); |
||||
|
if (this.timeSeriesChart) { |
||||
|
this.timeSeriesChartOptions.xAxis[0].min = this.ctx.defaultSubscription.timeWindow.minTime; |
||||
|
this.timeSeriesChartOptions.xAxis[0].max = this.ctx.defaultSubscription.timeWindow.maxTime; |
||||
|
this.timeSeriesChartOptions.xAxis[0].tbTimeWindow = this.ctx.defaultSubscription.timeWindow; |
||||
|
if (this.ctx.defaultSubscription.timeWindowConfig?.aggregation?.type === AggregationType.NONE) { |
||||
|
this.timeSeriesChartOptions.tooltip[0].axisPointer.type = 'line'; |
||||
|
} else { |
||||
|
this.timeSeriesChartOptions.tooltip[0].axisPointer.type = 'shadow'; |
||||
|
} |
||||
|
this.updateSeriesData(true); |
||||
|
if (this.highlightedDataKey) { |
||||
|
this.keyEnter(this.highlightedDataKey); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public latestUpdated() { |
||||
|
let update = false; |
||||
|
if (this.ctx.latestData) { |
||||
|
for (const item of this.thresholdItems) { |
||||
|
if (item.settings.type === TimeSeriesChartThresholdType.latestKey && item.latestDataKey) { |
||||
|
const data = this.ctx.latestData.find(d => d.dataKey === item.latestDataKey); |
||||
|
if (data.data[0]) { |
||||
|
item.value = parseThresholdData(data.data[0][1]); |
||||
|
update = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
if (this.timeSeriesChart && update) { |
||||
|
this.updateSeriesData(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public keyEnter(dataKey: DataKey): void { |
||||
|
this.highlightedDataKey = dataKey; |
||||
|
const item = this.dataItems.find(d => d.dataKey === dataKey); |
||||
|
if (item) { |
||||
|
this.timeSeriesChart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesId: item.id |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public keyLeave(dataKey: DataKey): void { |
||||
|
this.highlightedDataKey = null; |
||||
|
const item = this.dataItems.find(d => d.dataKey === dataKey); |
||||
|
if (item) { |
||||
|
this.timeSeriesChart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesId: item.id |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public toggleKey(dataKey: DataKey): void { |
||||
|
const enable = dataKey.hidden; |
||||
|
const dataItem = this.dataItems.find(d => d.dataKey === dataKey); |
||||
|
if (dataItem) { |
||||
|
dataItem.enabled = enable; |
||||
|
if (!enable) { |
||||
|
this.timeSeriesChart.dispatchAction({ |
||||
|
type: 'downplay', |
||||
|
seriesId: dataItem.id |
||||
|
}); |
||||
|
} |
||||
|
this.timeSeriesChartOptions.series = this.updateSeries(); |
||||
|
const mergeList = ['series']; |
||||
|
if (this.updateYAxisScale(this.yAxisList)) { |
||||
|
this.timeSeriesChartOptions.yAxis = this.yAxisList.map(axis => axis.option); |
||||
|
mergeList.push('yAxis'); |
||||
|
} |
||||
|
this.timeSeriesChart.setOption(this.timeSeriesChartOptions, this.settings.stack ? {notMerge: true} : {replaceMerge: mergeList}); |
||||
|
this.updateAxes(); |
||||
|
dataKey.hidden = !enable; |
||||
|
if (enable) { |
||||
|
this.timeSeriesChart.dispatchAction({ |
||||
|
type: 'highlight', |
||||
|
seriesId: dataItem.id |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public destroy(): void { |
||||
|
if (this.shapeResize$) { |
||||
|
this.shapeResize$.disconnect(); |
||||
|
} |
||||
|
if (this.timeSeriesChart) { |
||||
|
this.timeSeriesChart.dispose(); |
||||
|
} |
||||
|
this.yMinSubject.complete(); |
||||
|
this.yMaxSubject.complete(); |
||||
|
this.messageChannel.close(); |
||||
|
} |
||||
|
|
||||
|
public resize(): void { |
||||
|
this.onResize(); |
||||
|
} |
||||
|
|
||||
|
public setDarkMode(darkMode: boolean): void { |
||||
|
if (this.darkMode !== darkMode) { |
||||
|
this.darkMode = darkMode; |
||||
|
if (this.timeSeriesChart) { |
||||
|
this.timeSeriesChartOptions = updateDarkMode(this.timeSeriesChartOptions, this.settings, this.dataItems, |
||||
|
this.thresholdItems, darkMode); |
||||
|
this.timeSeriesChart.setOption(this.timeSeriesChartOptions); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public isDarkMode(): boolean { |
||||
|
return this.darkMode; |
||||
|
} |
||||
|
|
||||
|
private setupData(): void { |
||||
|
if (this.ctx.datasources.length) { |
||||
|
for (const datasource of this.ctx.datasources) { |
||||
|
const dataKeys = datasource.dataKeys; |
||||
|
for (const dataKey of dataKeys) { |
||||
|
const keySettings = mergeDeep<TimeSeriesChartKeySettings>({} as TimeSeriesChartKeySettings, |
||||
|
timeSeriesChartKeyDefaultSettings, dataKey.settings); |
||||
|
if (keySettings.showPointLabel && keySettings.pointLabelPosition === PointLabelPosition.top) { |
||||
|
this.topPointLabels = true; |
||||
|
} |
||||
|
dataKey.settings = keySettings; |
||||
|
const datasourceData = this.ctx.data ? this.ctx.data.find(d => d.dataKey === dataKey) : null; |
||||
|
const namedData = datasourceData?.data ? toNamedData(datasourceData.data) : []; |
||||
|
const units = dataKey.units && dataKey.units.length ? dataKey.units : this.ctx.units; |
||||
|
const decimals = isDefinedAndNotNull(dataKey.decimals) ? dataKey.decimals : |
||||
|
(isDefinedAndNotNull(this.ctx.decimals) ? this.ctx.decimals : 2); |
||||
|
this.dataItems.push({ |
||||
|
id: this.nextComponentId(), |
||||
|
units, |
||||
|
decimals, |
||||
|
yAxisIndex: this.getYAxis(units, decimals), |
||||
|
dataKey, |
||||
|
data: namedData, |
||||
|
enabled: !keySettings.dataHiddenByDefault |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private setupThresholds(): void { |
||||
|
const thresholdDatasources: Datasource[] = []; |
||||
|
for (const threshold of this.settings.thresholds) { |
||||
|
let latestDataKey: DataKey = null; |
||||
|
let entityDataKey: DataKey = null; |
||||
|
let value = null; |
||||
|
if (threshold.type === TimeSeriesChartThresholdType.latestKey) { |
||||
|
if (this.ctx.datasources.length) { |
||||
|
for (const datasource of this.ctx.datasources) { |
||||
|
latestDataKey = datasource.latestDataKeys?.find(d => |
||||
|
(d.type === DataKeyType.function && d.label === threshold.latestKeyName) || |
||||
|
(d.type !== DataKeyType.function && d.name === threshold.latestKeyName)); |
||||
|
if (latestDataKey) { |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
if (!latestDataKey) { |
||||
|
continue; |
||||
|
} |
||||
|
} else if (threshold.type === TimeSeriesChartThresholdType.entity) { |
||||
|
const entityAliasId = this.ctx.aliasController.getEntityAliasId(threshold.entityAlias); |
||||
|
if (!entityAliasId) { |
||||
|
continue; |
||||
|
} |
||||
|
let datasource = thresholdDatasources.find(d => d.entityAliasId === entityAliasId); |
||||
|
entityDataKey = { |
||||
|
type: threshold.entityKeyType, |
||||
|
name: threshold.entityKey, |
||||
|
label: threshold.entityKey, |
||||
|
settings: {} |
||||
|
}; |
||||
|
if (datasource) { |
||||
|
datasource.dataKeys.push(entityDataKey); |
||||
|
} |
||||
|
datasource = { |
||||
|
type: DatasourceType.entity, |
||||
|
name: threshold.entityAlias, |
||||
|
aliasName: threshold.entityAlias, |
||||
|
entityAliasId, |
||||
|
dataKeys: [ entityDataKey ] |
||||
|
}; |
||||
|
thresholdDatasources.push(datasource); |
||||
|
} else { // constant
|
||||
|
value = threshold.value; |
||||
|
} |
||||
|
const units = threshold.units && threshold.units.length ? threshold.units : this.ctx.units; |
||||
|
const decimals = isDefinedAndNotNull(threshold.decimals) ? threshold.decimals : |
||||
|
(isDefinedAndNotNull(this.ctx.decimals) ? this.ctx.decimals : 2); |
||||
|
const thresholdItem: TimeSeriesChartThresholdItem = { |
||||
|
id: this.nextComponentId(), |
||||
|
units, |
||||
|
decimals, |
||||
|
yAxisIndex: this.getYAxis(units, decimals), |
||||
|
value, |
||||
|
latestDataKey, |
||||
|
settings: threshold |
||||
|
}; |
||||
|
if (entityDataKey) { |
||||
|
entityDataKey.settings.thresholdItemId = thresholdItem.id; |
||||
|
} |
||||
|
this.thresholdItems.push(thresholdItem); |
||||
|
} |
||||
|
this.subscribeForEntityThresholds(thresholdDatasources); |
||||
|
} |
||||
|
|
||||
|
private nextComponentId(): string { |
||||
|
return (this.componentIndexCounter++) + ''; |
||||
|
} |
||||
|
|
||||
|
private getYAxis(units: string, decimals: number): number { |
||||
|
let yAxisIndex = this.yAxisList.findIndex(axis => axis.units === units); |
||||
|
if (yAxisIndex === -1) { |
||||
|
const yAxisId = this.yAxisList.length + ''; |
||||
|
const yAxis = createTimeSeriesYAxis(yAxisId, units, decimals, this.settings.yAxis, this.darkMode); |
||||
|
this.yAxisList.push(yAxis); |
||||
|
yAxisIndex = this.yAxisList.length - 1; |
||||
|
} |
||||
|
return yAxisIndex; |
||||
|
} |
||||
|
|
||||
|
private subscribeForEntityThresholds(datasources: Datasource[]) { |
||||
|
if (datasources.length) { |
||||
|
const thresholdsSourcesSubscriptionOptions: WidgetSubscriptionOptions = { |
||||
|
datasources, |
||||
|
useDashboardTimewindow: false, |
||||
|
type: widgetType.latest, |
||||
|
callbacks: { |
||||
|
onDataUpdated: (subscription) => { |
||||
|
let update = false; |
||||
|
if (subscription.data) { |
||||
|
for (const item of this.thresholdItems) { |
||||
|
if (item.settings.type === TimeSeriesChartThresholdType.entity) { |
||||
|
const data = subscription.data.find(d => d.dataKey.settings?.thresholdItemId === item.id); |
||||
|
if (data.data[0]) { |
||||
|
item.value = parseThresholdData(data.data[0][1]); |
||||
|
update = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
if (this.timeSeriesChart && update) { |
||||
|
this.updateSeriesData(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
this.ctx.subscriptionApi.createSubscription(thresholdsSourcesSubscriptionOptions, true).subscribe(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private drawChart() { |
||||
|
echartsModule.init(); |
||||
|
this.timeSeriesChart = echarts.init(this.chartElement, null, { |
||||
|
renderer: 'canvas' |
||||
|
}); |
||||
|
const noAggregation = this.ctx.defaultSubscription.timeWindowConfig?.aggregation?.type === AggregationType.NONE; |
||||
|
this.timeSeriesChartOptions = { |
||||
|
darkMode: this.darkMode, |
||||
|
backgroundColor: 'transparent', |
||||
|
tooltip: [{ |
||||
|
trigger: this.settings.tooltipTrigger === EChartsTooltipTrigger.axis ? 'axis' : 'item', |
||||
|
confine: true, |
||||
|
appendToBody: true, |
||||
|
axisPointer: { |
||||
|
type: noAggregation ? 'line' : 'shadow' |
||||
|
}, |
||||
|
formatter: (params: CallbackDataParams[]) => |
||||
|
this.settings.showTooltip ? echartsTooltipFormatter(this.renderer, this.tooltipDateFormat, |
||||
|
this.settings, params, 0, '', -1, this.dataItems) : undefined, |
||||
|
padding: [8, 12], |
||||
|
backgroundColor: this.settings.tooltipBackgroundColor, |
||||
|
borderWidth: 0, |
||||
|
extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);` |
||||
|
}], |
||||
|
grid: [{ |
||||
|
top: this.minTopOffset(), |
||||
|
left: this.settings.dataZoom ? 5 : 0, |
||||
|
right: this.settings.dataZoom ? 5 : 0, |
||||
|
bottom: this.minBottomOffset() |
||||
|
}], |
||||
|
xAxis: [ |
||||
|
createTimeSeriesXAxisOption(this.settings.xAxis, this.ctx.defaultSubscription.timeWindow.minTime, |
||||
|
this.ctx.defaultSubscription.timeWindow.maxTime, this.darkMode) |
||||
|
], |
||||
|
yAxis: this.yAxisList.map(axis => axis.option), |
||||
|
dataZoom: [ |
||||
|
{ |
||||
|
type: 'inside', |
||||
|
disabled: !this.settings.dataZoom, |
||||
|
realtime: true |
||||
|
}, |
||||
|
{ |
||||
|
type: 'slider', |
||||
|
show: this.settings.dataZoom, |
||||
|
showDetail: false, |
||||
|
realtime: true, |
||||
|
bottom: 10 |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
this.timeSeriesChartOptions.xAxis[0].tbTimeWindow = this.ctx.defaultSubscription.timeWindow; |
||||
|
|
||||
|
this.timeSeriesChartOptions.series = this.updateSeries(); |
||||
|
if (this.updateYAxisScale(this.yAxisList)) { |
||||
|
this.timeSeriesChartOptions.yAxis = this.yAxisList.map(axis => axis.option); |
||||
|
} |
||||
|
|
||||
|
this.timeSeriesChart.setOption(this.timeSeriesChartOptions); |
||||
|
this.updateAxes(); |
||||
|
|
||||
|
if (this.settings.dataZoom) { |
||||
|
this.timeSeriesChart.on('datazoom', () => { |
||||
|
this.updateAxes(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateSeriesData(updateScale = false): void { |
||||
|
this.timeSeriesChartOptions.series = this.updateSeries(); |
||||
|
if (updateScale && this.updateYAxisScale(this.yAxisList)) { |
||||
|
this.timeSeriesChartOptions.yAxis = this.yAxisList.map(axis => axis.option); |
||||
|
} |
||||
|
this.timeSeriesChart.setOption(this.timeSeriesChartOptions); |
||||
|
this.updateAxes(); |
||||
|
} |
||||
|
|
||||
|
private updateSeries(): Array<LineSeriesOption | CustomSeriesOption> { |
||||
|
return generateChartData(this.dataItems, this.thresholdItems, |
||||
|
this.ctx.timeWindow.interval, this.settings.stack, this.darkMode); |
||||
|
} |
||||
|
|
||||
|
private updateAxes() { |
||||
|
const leftAxisList = this.yAxisList.filter(axis => axis.option.position === 'left'); |
||||
|
let res = this.updateYAxisOffset(leftAxisList); |
||||
|
let leftOffset = res.offset + (!res.offset && this.settings.dataZoom ? 5 : 0); |
||||
|
let changed = res.changed; |
||||
|
const rightAxisList = this.yAxisList.filter(axis => axis.option.position === 'right'); |
||||
|
res = this.updateYAxisOffset(rightAxisList); |
||||
|
let rightOffset = res.offset + (!res.offset && this.settings.dataZoom ? 5 : 0); |
||||
|
changed = changed || res.changed; |
||||
|
let bottomOffset = this.minBottomOffset(); |
||||
|
const minTopOffset = this.minTopOffset(); |
||||
|
let topOffset = minTopOffset; |
||||
|
if (this.timeSeriesChartOptions.xAxis[0].show) { |
||||
|
const xAxisHeight = calculateXAxisHeight(this.timeSeriesChart); |
||||
|
if (this.timeSeriesChartOptions.xAxis[0].position === AxisPosition.bottom) { |
||||
|
bottomOffset += xAxisHeight; |
||||
|
} else { |
||||
|
topOffset = Math.max(minTopOffset, xAxisHeight); |
||||
|
} |
||||
|
if (this.settings.xAxis.label) { |
||||
|
const nameHeight = measureXAxisNameHeight(this.timeSeriesChart, this.timeSeriesChartOptions.xAxis[0].name); |
||||
|
if (this.timeSeriesChartOptions.xAxis[0].position === AxisPosition.bottom) { |
||||
|
bottomOffset += nameHeight; |
||||
|
} else { |
||||
|
topOffset = Math.max(minTopOffset, xAxisHeight + nameHeight); |
||||
|
} |
||||
|
const nameGap = xAxisHeight; |
||||
|
if (this.timeSeriesChartOptions.xAxis[0].nameGap !== nameGap) { |
||||
|
this.timeSeriesChartOptions.xAxis[0].nameGap = nameGap; |
||||
|
changed = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const thresholdsOffset = calculateThresholdsOffset(this.timeSeriesChart, this.thresholdItems, this.yAxisList); |
||||
|
leftOffset = Math.max(leftOffset, thresholdsOffset[0]); |
||||
|
rightOffset = Math.max(rightOffset, thresholdsOffset[1]); |
||||
|
|
||||
|
if (this.timeSeriesChartOptions.grid[0].left !== leftOffset || |
||||
|
this.timeSeriesChartOptions.grid[0].right !== rightOffset || |
||||
|
this.timeSeriesChartOptions.grid[0].bottom !== bottomOffset || |
||||
|
this.timeSeriesChartOptions.grid[0].top !== topOffset) { |
||||
|
this.timeSeriesChartOptions.grid[0].left = leftOffset; |
||||
|
this.timeSeriesChartOptions.grid[0].right = rightOffset; |
||||
|
this.timeSeriesChartOptions.grid[0].bottom = bottomOffset; |
||||
|
this.timeSeriesChartOptions.grid[0].top = topOffset; |
||||
|
changed = true; |
||||
|
} |
||||
|
if (changed) { |
||||
|
this.timeSeriesChartOptions.yAxis = this.yAxisList.map(axis => axis.option); |
||||
|
this.timeSeriesChart.setOption(this.timeSeriesChartOptions, {replaceMerge: ['yAxis', 'xAxis', 'grid'], lazyUpdate: true}); |
||||
|
} |
||||
|
changed = this.calculateYAxisInterval(this.yAxisList); |
||||
|
if (changed) { |
||||
|
this.timeSeriesChartOptions.yAxis = this.yAxisList.map(axis => axis.option); |
||||
|
this.timeSeriesChart.setOption(this.timeSeriesChartOptions, {replaceMerge: ['yAxis'], lazyUpdate: true}); |
||||
|
} |
||||
|
if (this.yAxisList.length) { |
||||
|
const extent = getAxisExtent(this.timeSeriesChart, this.yAxisList[0].id); |
||||
|
const min = extent[0]; |
||||
|
const max = extent[1]; |
||||
|
if (this.yMinSubject.value !== min) { |
||||
|
this.yMinSubject.next(min); |
||||
|
} |
||||
|
if (this.yMaxSubject.value !== max) { |
||||
|
this.yMaxSubject.next(max); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateYAxisScale(axisList: TimeSeriesChartYAxis[]): boolean { |
||||
|
let changed = false; |
||||
|
for (const yAxis of axisList) { |
||||
|
const scaleYAxis = this.scaleYAxis(yAxis); |
||||
|
if (yAxis.option.scale !== scaleYAxis) { |
||||
|
yAxis.option.scale = scaleYAxis; |
||||
|
changed = true; |
||||
|
} |
||||
|
} |
||||
|
return changed; |
||||
|
} |
||||
|
|
||||
|
private updateYAxisOffset(axisList: TimeSeriesChartYAxis[]): {offset: number; changed: boolean} { |
||||
|
const result = {offset: 0, changed: false}; |
||||
|
let width = 0; |
||||
|
for (const yAxis of axisList) { |
||||
|
const newWidth = calculateYAxisWidth(this.timeSeriesChart, yAxis.id); |
||||
|
if (width && newWidth) { |
||||
|
result.offset += 5; |
||||
|
} |
||||
|
width = newWidth; |
||||
|
const showLine = !!width && this.settings.yAxis.showLine; |
||||
|
if (yAxis.option.axisLine.show !== showLine) { |
||||
|
yAxis.option.axisLine.show = showLine; |
||||
|
result.changed = true; |
||||
|
} |
||||
|
if (yAxis.option.offset !== result.offset) { |
||||
|
yAxis.option.offset = result.offset; |
||||
|
result.changed = true; |
||||
|
} |
||||
|
if (this.settings.yAxis.label) { |
||||
|
if (!width) { |
||||
|
if (yAxis.option.name) { |
||||
|
yAxis.option.name = null; |
||||
|
result.changed = true; |
||||
|
} |
||||
|
} else { |
||||
|
if (!yAxis.option.name) { |
||||
|
yAxis.option.name = this.settings.yAxis.label; |
||||
|
result.changed = true; |
||||
|
} |
||||
|
const nameGap = width; |
||||
|
if (yAxis.option.nameGap !== nameGap) { |
||||
|
yAxis.option.nameGap = nameGap; |
||||
|
result.changed = true; |
||||
|
} |
||||
|
const nameWidth = measureYAxisNameWidth(this.timeSeriesChart, yAxis.id, this.settings.yAxis.label); |
||||
|
result.offset += nameWidth; |
||||
|
} |
||||
|
} |
||||
|
result.offset += width; |
||||
|
} |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
private scaleYAxis(yAxis: TimeSeriesChartYAxis): boolean { |
||||
|
const yAxisIndex = this.yAxisList.indexOf(yAxis); |
||||
|
const axisBarDataItems = this.dataItems.filter(d => d.yAxisIndex === yAxisIndex && d.enabled && |
||||
|
d.data.length && d.dataKey.settings.type === TimeSeriesChartSeriesType.bar); |
||||
|
return !axisBarDataItems.length; |
||||
|
} |
||||
|
|
||||
|
private calculateYAxisInterval(axisList: TimeSeriesChartYAxis[]): boolean { |
||||
|
let changed = false; |
||||
|
for (const yAxis of axisList) { |
||||
|
if (yAxis.intervalCalculator) { |
||||
|
const axis = getYAxis(this.timeSeriesChart, yAxis.id); |
||||
|
if (axis) { |
||||
|
try { |
||||
|
const interval = yAxis.intervalCalculator(axis); |
||||
|
if ((yAxis.option as any).interval !== interval) { |
||||
|
(yAxis.option as any).interval = interval; |
||||
|
changed = true; |
||||
|
} |
||||
|
} catch (_e) {} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return changed; |
||||
|
} |
||||
|
|
||||
|
private minTopOffset(): number { |
||||
|
return (this.topPointLabels) ? 20 : |
||||
|
((this.settings.yAxis.show && this.settings.yAxis.showTickLabels) ? 10 : 5); |
||||
|
} |
||||
|
|
||||
|
private minBottomOffset(): number { |
||||
|
return this.settings.dataZoom ? 45 : 5; |
||||
|
} |
||||
|
|
||||
|
private onResize() { |
||||
|
const shapeWidth = this.chartElement.offsetWidth; |
||||
|
const shapeHeight = this.chartElement.offsetHeight; |
||||
|
if (shapeWidth && shapeHeight) { |
||||
|
if (!this.timeSeriesChart) { |
||||
|
this.drawChart(); |
||||
|
} else { |
||||
|
const width = this.timeSeriesChart.getWidth(); |
||||
|
const height = this.timeSeriesChart.getHeight(); |
||||
|
if (width !== shapeWidth || height !== shapeHeight) { |
||||
|
this.timeSeriesChart.resize(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
export interface TbColor { |
||||
|
light: string; |
||||
|
dark: string; |
||||
|
} |
||||
|
|
||||
|
export interface TbColorScheme { |
||||
|
[key: string]: TbColor; |
||||
|
} |
||||
Loading…
Reference in new issue