446 lines
16 KiB
TypeScript
446 lines
16 KiB
TypeScript
///
|
|
/// 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 * as CanvasGauges from 'canvas-gauges';
|
|
import { WidgetContext } from '@home/models/widget-component.models';
|
|
import {
|
|
attributesGaugeType,
|
|
ColorLevelSetting,
|
|
DigitalGaugeSettings,
|
|
FixedLevelColors
|
|
} from '@home/components/widget/lib/digital-gauge.models';
|
|
import tinycolor from 'tinycolor2';
|
|
import { isDefined, isDefinedAndNotNull, parseFunction, safeExecute } from '@core/utils';
|
|
import { prepareFontSettings } from '@home/components/widget/lib/settings.models';
|
|
import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/widget/lib/canvas-digital-gauge';
|
|
import { DatePipe } from '@angular/common';
|
|
import { DataKey, Datasource, DatasourceData, DatasourceType, widgetType } from '@shared/models/widget.models';
|
|
import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
|
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
|
|
import { EMPTY, Observable } from 'rxjs';
|
|
import {
|
|
ColorProcessor,
|
|
ColorType,
|
|
ValueSourceDataKeyType,
|
|
ValueSourceWithDataKey
|
|
} from '@shared/models/widget-settings.models';
|
|
import GenericOptions = CanvasGauges.GenericOptions;
|
|
|
|
// @dynamic
|
|
export class TbCanvasDigitalGauge {
|
|
|
|
constructor(protected ctx: WidgetContext, canvasId: string) {
|
|
const gaugeElement = $('#' + canvasId, ctx.$container)[0];
|
|
const settings: DigitalGaugeSettings = ctx.settings;
|
|
|
|
this.localSettings = {};
|
|
this.localSettings.minValue = settings.minValue || 0;
|
|
this.localSettings.maxValue = settings.maxValue || 100;
|
|
this.localSettings.gaugeType = settings.gaugeType || 'arc';
|
|
this.localSettings.neonGlowBrightness = settings.neonGlowBrightness || 0;
|
|
this.localSettings.dashThickness = settings.dashThickness || 0;
|
|
this.localSettings.roundedLineCap = settings.roundedLineCap === true;
|
|
|
|
const dataKey = ctx.data[0].dataKey;
|
|
const keyColor = settings.defaultColor || dataKey.color;
|
|
|
|
this.localSettings.unitTitle = ((settings.showUnitTitle === true) ?
|
|
(settings.unitTitle && settings.unitTitle.length > 0 ?
|
|
settings.unitTitle : dataKey.label) : '');
|
|
|
|
this.localSettings.showUnitTitle = settings.showUnitTitle === true;
|
|
this.localSettings.showTimestamp = settings.showTimestamp === true;
|
|
this.localSettings.timestampFormat = settings.timestampFormat && settings.timestampFormat.length ?
|
|
settings.timestampFormat : 'yyyy-MM-dd HH:mm:ss';
|
|
|
|
this.localSettings.gaugeWidthScale = settings.gaugeWidthScale || 0.75;
|
|
this.localSettings.gaugeColor = settings.gaugeColor || tinycolor(keyColor).setAlpha(0.2).toRgbString();
|
|
this.localSettings.barColor = settings.barColor;
|
|
|
|
this.localSettings.useFixedLevelColor = settings.useFixedLevelColor || false;
|
|
if (!settings.useFixedLevelColor) {
|
|
if (!settings.levelColors || settings.levelColors.length === 0) {
|
|
this.localSettings.levelColors = [keyColor];
|
|
} else {
|
|
this.localSettings.levelColors = settings.levelColors.slice();
|
|
}
|
|
} else {
|
|
this.localSettings.levelColors = [keyColor];
|
|
this.localSettings.fixedLevelColors = settings.fixedLevelColors || [];
|
|
}
|
|
|
|
this.localSettings.showTicks = settings.showTicks || false;
|
|
this.localSettings.ticks = [];
|
|
this.localSettings.ticksValue = settings.ticksValue || [];
|
|
this.localSettings.tickWidth = settings.tickWidth || 4;
|
|
this.localSettings.colorTicks = settings.colorTicks || '#666';
|
|
|
|
this.localSettings.decimals = isDefined(dataKey.decimals) ? dataKey.decimals :
|
|
(isDefinedAndNotNull(settings.decimals) ? settings.decimals : ctx.decimals);
|
|
|
|
this.localSettings.units = dataKey.units && dataKey.units.length ? dataKey.units :
|
|
(isDefined(settings.units) && settings.units.length > 0 ? settings.units : ctx.units);
|
|
|
|
this.localSettings.hideValue = settings.showValue !== true;
|
|
this.localSettings.hideMinMax = settings.showMinMax !== true;
|
|
this.localSettings.donutStartAngle = isDefinedAndNotNull(settings.donutStartAngle) ?
|
|
-TbCanvasDigitalGauge.toRadians(settings.donutStartAngle) : null;
|
|
|
|
this.localSettings.title = ((settings.showTitle === true) ?
|
|
(settings.title && settings.title.length > 0 ?
|
|
settings.title : dataKey.label) : '');
|
|
|
|
if (!this.localSettings.unitTitle && this.localSettings.showTimestamp) {
|
|
this.localSettings.unitTitle = ' ';
|
|
}
|
|
|
|
this.localSettings.titleFont = prepareFontSettings(settings.titleFont, {
|
|
size: 12,
|
|
style: 'normal',
|
|
weight: '500',
|
|
color: keyColor
|
|
});
|
|
|
|
this.localSettings.valueFont = prepareFontSettings(settings.valueFont, {
|
|
size: 18,
|
|
style: 'normal',
|
|
weight: '500',
|
|
color: keyColor
|
|
});
|
|
|
|
this.localSettings.minMaxFont = prepareFontSettings(settings.minMaxFont, {
|
|
size: 10,
|
|
style: 'normal',
|
|
weight: '500',
|
|
color: keyColor
|
|
});
|
|
|
|
this.localSettings.labelFont = prepareFontSettings(settings.labelFont, {
|
|
size: 8,
|
|
style: 'normal',
|
|
weight: '500',
|
|
color: keyColor
|
|
});
|
|
|
|
const gaugeData: CanvasDigitalGaugeOptions = {
|
|
renderTo: gaugeElement,
|
|
|
|
gaugeWidthScale: this.localSettings.gaugeWidthScale,
|
|
gaugeColor: this.localSettings.gaugeColor,
|
|
levelColors: this.localSettings.levelColors,
|
|
|
|
colorTicks: this.localSettings.colorTicks,
|
|
tickWidth: this.localSettings.tickWidth,
|
|
ticks: this.localSettings.ticks,
|
|
|
|
title: this.localSettings.title,
|
|
|
|
fontTitleSize: this.localSettings.titleFont.size,
|
|
fontTitleStyle: this.localSettings.titleFont.style,
|
|
fontTitleWeight: this.localSettings.titleFont.weight,
|
|
colorTitle: this.localSettings.titleFont.color,
|
|
fontTitle: this.localSettings.titleFont.family,
|
|
|
|
fontValueSize: this.localSettings.valueFont.size,
|
|
fontValueStyle: this.localSettings.valueFont.style,
|
|
fontValueWeight: this.localSettings.valueFont.weight,
|
|
colorValue: this.localSettings.valueFont.color,
|
|
fontValue: this.localSettings.valueFont.family,
|
|
|
|
fontMinMaxSize: this.localSettings.minMaxFont.size,
|
|
fontMinMaxStyle: this.localSettings.minMaxFont.style,
|
|
fontMinMaxWeight: this.localSettings.minMaxFont.weight,
|
|
colorMinMax: this.localSettings.minMaxFont.color,
|
|
fontMinMax: this.localSettings.minMaxFont.family,
|
|
|
|
fontLabelSize: this.localSettings.labelFont.size,
|
|
fontLabelStyle: this.localSettings.labelFont.style,
|
|
fontLabelWeight: this.localSettings.labelFont.weight,
|
|
colorLabel: this.localSettings.labelFont.color,
|
|
fontLabel: this.localSettings.labelFont.family,
|
|
|
|
minValue: this.localSettings.minValue,
|
|
maxValue: this.localSettings.maxValue,
|
|
gaugeType: this.localSettings.gaugeType,
|
|
dashThickness: this.localSettings.dashThickness,
|
|
roundedLineCap: this.localSettings.roundedLineCap,
|
|
|
|
symbol: this.localSettings.units,
|
|
unitTitle: this.localSettings.unitTitle,
|
|
showUnitTitle: this.localSettings.showUnitTitle,
|
|
showTimestamp: this.localSettings.showTimestamp,
|
|
hideValue: this.localSettings.hideValue,
|
|
hideMinMax: this.localSettings.hideMinMax,
|
|
|
|
donutStartAngle: this.localSettings.donutStartAngle,
|
|
|
|
valueDec: this.localSettings.decimals,
|
|
|
|
neonGlowBrightness: this.localSettings.neonGlowBrightness,
|
|
|
|
// animations
|
|
animation: settings.animation !== false && !ctx.isMobile,
|
|
animationDuration: isDefinedAndNotNull(settings.animationDuration) ? settings.animationDuration : 500,
|
|
animationRule: settings.animationRule || 'linear',
|
|
|
|
isMobile: ctx.isMobile
|
|
};
|
|
|
|
this.gauge = new CanvasDigitalGauge(gaugeData).draw();
|
|
this.init();
|
|
}
|
|
|
|
private localSettings: DigitalGaugeSettings;
|
|
private levelColorsSourcesSubscription: IWidgetSubscription;
|
|
private ticksSourcesSubscription: IWidgetSubscription;
|
|
|
|
private gauge: CanvasDigitalGauge;
|
|
|
|
static generateDatasource(ctx: WidgetContext, datasources: Datasource[], entityAlias: string,
|
|
attribute: string, settings: any): Datasource[]{
|
|
const entityAliasId = ctx.aliasController.getEntityAliasId(entityAlias);
|
|
if (!entityAliasId) {
|
|
throw new Error('Not valid entity aliase name ' + entityAlias);
|
|
}
|
|
|
|
const datasource = datasources.find((datasourceIteration) =>
|
|
datasourceIteration.entityAliasId === entityAliasId
|
|
);
|
|
|
|
const dataKey: DataKey = {
|
|
type: DataKeyType.attribute,
|
|
name: attribute,
|
|
label: attribute,
|
|
settings: [settings],
|
|
_hash: Math.random()
|
|
};
|
|
|
|
if (datasource) {
|
|
const findDataKey = datasource.dataKeys.find((dataKeyIteration) =>
|
|
dataKeyIteration.name === attribute
|
|
);
|
|
|
|
if (findDataKey) {
|
|
findDataKey.settings.push(settings);
|
|
} else {
|
|
datasource.dataKeys.push(dataKey);
|
|
}
|
|
} else {
|
|
const datasourceAttribute: Datasource = {
|
|
type: DatasourceType.entity,
|
|
name: entityAlias,
|
|
aliasName: entityAlias,
|
|
entityAliasId,
|
|
dataKeys: [dataKey]
|
|
};
|
|
datasources.push(datasourceAttribute);
|
|
}
|
|
|
|
return datasources;
|
|
}
|
|
|
|
private static toRadians(angle: number): number {
|
|
return angle * (Math.PI / 180);
|
|
}
|
|
|
|
init() {
|
|
let updateSetting = false;
|
|
if (this.localSettings.useFixedLevelColor && this.localSettings.fixedLevelColors?.length > 0) {
|
|
this.localSettings.levelColors = this.settingLevelColorsSubscribe(this.localSettings.fixedLevelColors);
|
|
updateSetting = true;
|
|
}
|
|
if (this.localSettings.showTicks && this.localSettings.ticksValue?.length) {
|
|
this.localSettings.ticks = this.settingTicksSubscribe(this.localSettings.ticksValue);
|
|
updateSetting = true;
|
|
}
|
|
|
|
if (updateSetting) {
|
|
this.updateSetting();
|
|
}
|
|
}
|
|
|
|
settingLevelColorsSubscribe(options: FixedLevelColors[]): ColorLevelSetting[] {
|
|
let levelColorsDatasource: Datasource[] = [];
|
|
const predefineLevelColors: ColorLevelSetting[] = [];
|
|
|
|
predefineLevelColors.push({
|
|
value: this.localSettings.minValue,
|
|
color: this.localSettings.gaugeColor
|
|
});
|
|
|
|
function setLevelColor(levelSetting, color: string) {
|
|
if (levelSetting.type === ValueSourceDataKeyType.constant && isFinite(levelSetting.value)) {
|
|
predefineLevelColors.push({
|
|
value: levelSetting.value,
|
|
color
|
|
});
|
|
} else if (levelSetting.type === ValueSourceDataKeyType.latestKey || levelSetting.type === ValueSourceDataKeyType.entity) {
|
|
try {
|
|
levelColorsDatasource = ColorProcessor.generateDatasource(
|
|
this.ctx, levelColorsDatasource, levelSetting, {color, index: predefineLevelColors.length}
|
|
);
|
|
} catch (e) {
|
|
return;
|
|
}
|
|
predefineLevelColors.push(null);
|
|
} else if (isFinite(levelSetting)) {
|
|
predefineLevelColors.push({
|
|
value: levelSetting,
|
|
color
|
|
});
|
|
}
|
|
}
|
|
|
|
for (const levelColor of options) {
|
|
if (levelColor.from) {
|
|
setLevelColor.call(this, levelColor.from, levelColor.color);
|
|
}
|
|
if (levelColor.to) {
|
|
setLevelColor.call(this, levelColor.to, levelColor.color);
|
|
}
|
|
}
|
|
|
|
this.subscribeAttributes(levelColorsDatasource, 'levelColors').subscribe((subscription) => {
|
|
this.levelColorsSourcesSubscription = subscription;
|
|
});
|
|
|
|
return predefineLevelColors;
|
|
}
|
|
|
|
settingTicksSubscribe(options: ValueSourceWithDataKey[]): number[] {
|
|
let ticksDatasource: Datasource[] = [];
|
|
const predefineTicks: number[] = [];
|
|
|
|
for (const tick of options) {
|
|
if (tick.type === ValueSourceDataKeyType.constant && isFinite(tick.value)) {
|
|
predefineTicks.push(tick.value);
|
|
} else {
|
|
try {
|
|
ticksDatasource = ColorProcessor.generateDatasource(
|
|
this.ctx, ticksDatasource, tick, {index: predefineTicks.length}
|
|
);
|
|
} catch (e) {
|
|
continue;
|
|
}
|
|
predefineTicks.push(null);
|
|
}
|
|
}
|
|
|
|
this.subscribeAttributes(ticksDatasource, 'ticks').subscribe((subscription) => {
|
|
this.ticksSourcesSubscription = subscription;
|
|
});
|
|
|
|
return predefineTicks;
|
|
}
|
|
|
|
subscribeAttributes(datasource: Datasource[], typeAttributes: attributesGaugeType): Observable<IWidgetSubscription> {
|
|
if (!datasource.length) {
|
|
return EMPTY;
|
|
}
|
|
|
|
const levelColorsSourcesSubscriptionOptions: WidgetSubscriptionOptions = {
|
|
datasources: datasource,
|
|
useDashboardTimewindow: false,
|
|
type: widgetType.latest,
|
|
callbacks: {
|
|
onDataUpdated: (subscription) => {
|
|
this.updateAttribute(subscription.data, typeAttributes);
|
|
}
|
|
}
|
|
};
|
|
|
|
return this.ctx.subscriptionApi.createSubscription(levelColorsSourcesSubscriptionOptions, true);
|
|
}
|
|
|
|
updateAttribute(data: Array<DatasourceData>, typeAttributes: attributesGaugeType) {
|
|
for (const keyData of data) {
|
|
if (keyData && keyData.data && keyData.data[0]) {
|
|
const attrValue = keyData.data[0][1];
|
|
if (isFinite(attrValue)) {
|
|
for (const setting of keyData.dataKey.settings.dataKeySettings) {
|
|
switch (typeAttributes) {
|
|
case 'levelColors':
|
|
this.localSettings.levelColors[setting.index] = {
|
|
value: attrValue,
|
|
color: setting.color
|
|
};
|
|
break;
|
|
case 'ticks':
|
|
this.localSettings.ticks[setting.index] = attrValue;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.updateSetting();
|
|
}
|
|
|
|
updateSetting() {
|
|
(this.gauge.options as CanvasDigitalGaugeOptions).ticks = this.localSettings.ticks;
|
|
(this.gauge.options as CanvasDigitalGaugeOptions).levelColors = this.localSettings.levelColors;
|
|
this.gauge.options = CanvasDigitalGauge.configure(this.gauge.options);
|
|
this.gauge.update({} as CanvasDigitalGaugeOptions);
|
|
}
|
|
|
|
update() {
|
|
if (this.ctx.data.length > 0) {
|
|
const cellData = this.ctx.data[0];
|
|
if (cellData.data.length > 0) {
|
|
const tvPair = cellData.data[cellData.data.length -
|
|
1];
|
|
let timestamp;
|
|
if (this.localSettings.showTimestamp) {
|
|
timestamp = tvPair[0];
|
|
const filter = this.ctx.$injector.get(DatePipe);
|
|
(this.gauge.options as CanvasDigitalGaugeOptions).labelTimestamp =
|
|
filter.transform(timestamp, this.localSettings.timestampFormat);
|
|
}
|
|
const value = parseFloat(tvPair[1]);
|
|
if (value !== this.gauge.value) {
|
|
if (!this.gauge.options.animation) {
|
|
this.gauge._value = value;
|
|
}
|
|
this.gauge.value = value;
|
|
if (this.localSettings.barColor?.type === ColorType.function && isDefined(this.localSettings.barColor?.colorFunction)) {
|
|
this.localSettings.levelColors = [safeExecute(parseFunction(this.localSettings.barColor.colorFunction, ['value']), [value])];
|
|
this.updateSetting();
|
|
} else if (this.localSettings.barColor?.type === ColorType.constant && isDefinedAndNotNull(this.localSettings.barColor?.color)) {
|
|
this.localSettings.levelColors = [this.localSettings.barColor.color];
|
|
this.updateSetting();
|
|
}
|
|
} else if (this.localSettings.showTimestamp && this.gauge.timestamp !== timestamp) {
|
|
this.gauge.timestamp = timestamp;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
mobileModeChanged() {
|
|
const animation = this.ctx.settings.animation !== false && !this.ctx.isMobile;
|
|
this.gauge.update({animation, isMobile: this.ctx.isMobile} as CanvasDigitalGaugeOptions);
|
|
}
|
|
|
|
resize() {
|
|
this.gauge.update({width: this.ctx.width, height: this.ctx.height} as GenericOptions);
|
|
}
|
|
|
|
destroy() {
|
|
this.gauge.destroy();
|
|
this.gauge = null;
|
|
}
|
|
}
|