tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'master' into develop/3.0

pull/2486/head
Igor Kulikov 7 years ago
parent
4e16675ea4 90ae060cbe
commit
80fae20d21
2 changed files with 275 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 41
      ui/src/app/widget/lib/CanvasDigitalGauge.js
  2. 251
      ui/src/app/widget/lib/canvas-digital-gauge.js

41
ui/src/app/widget/lib/CanvasDigitalGauge.js
View File

@ -104,26 +104,32 @@ export default class CanvasDigitalGauge extends canvasGauges.BaseGauge {
} }
var colorsCount = options.levelColors.length; var colorsCount = options.levelColors.length;
var inc = colorsCount > 1 ? (1 / (colorsCount - 1)) : 1; const inc = colorsCount > 1 ? (1 / (colorsCount - 1)) : 1;
var isColorProperty = angular.isString(options.levelColors[0]);
options.colorsRange = []; options.colorsRange = [];
if (options.neonGlowBrightness) { if (options.neonGlowBrightness) {
options.neonColorsRange = []; options.neonColorsRange = [];
} }
for (var i = 0; i < options.levelColors.length; i++) {
var percentage = inc * i; for (let i = 0; i < options.levelColors.length; i++) {
var tColor = tinycolor(options.levelColors[i]); const levelColor = options.levelColors[i];
options.colorsRange[i] = { if (levelColor !== null) {
pct: percentage, let percentage = isColorProperty ? inc * i : CanvasDigitalGauge.normalizeValue(levelColor.value, options.minValue, options.maxValue);
color: tColor.toRgb(), let tColor = tinycolor(isColorProperty ? levelColor : levelColor.color);
rgbString: tColor.toRgbString() options.colorsRange[i] = {
};
if (options.neonGlowBrightness) {
tColor = tinycolor(options.levelColors[i]).brighten(options.neonGlowBrightness);
options.neonColorsRange[i] = {
pct: percentage, pct: percentage,
color: tColor.toRgb(), color: tColor.toRgb(),
rgbString: tColor.toRgbString() rgbString: tColor.toRgbString()
}; };
if (options.neonGlowBrightness) {
tColor = tinycolor(isColorProperty ? levelColor : levelColor.color).brighten(options.neonGlowBrightness);
options.neonColorsRange[i] = {
pct: percentage,
color: tColor.toRgb(),
rgbString: tColor.toRgbString()
};
}
} }
} }
@ -137,6 +143,17 @@ export default class CanvasDigitalGauge extends canvasGauges.BaseGauge {
return canvasGauges.BaseGauge.configure(options); return canvasGauges.BaseGauge.configure(options);
} }
static normalizeValue (value, min, max) {
let normalValue = (value - min) / (max - min);
if (normalValue <= 0) {
return 0;
}
if (normalValue >= 1) {
return 1;
}
return normalValue;
}
destroy() { destroy() {
this.contextValueClone = null; this.contextValueClone = null;
this.elementValueClone = null; this.elementValueClone = null;

251
ui/src/app/widget/lib/canvas-digital-gauge.js
View File

@ -50,10 +50,16 @@ export default class TbCanvasDigitalGauge {
this.localSettings.gaugeWidthScale = settings.gaugeWidthScale || 0.75; this.localSettings.gaugeWidthScale = settings.gaugeWidthScale || 0.75;
this.localSettings.gaugeColor = settings.gaugeColor || tinycolor(keyColor).setAlpha(0.2).toRgbString(); this.localSettings.gaugeColor = settings.gaugeColor || tinycolor(keyColor).setAlpha(0.2).toRgbString();
if (!settings.levelColors || settings.levelColors.length <= 0) { this.localSettings.useFixedLevelColor = settings.useFixedLevelColor || false;
this.localSettings.levelColors = [keyColor]; if (!settings.useFixedLevelColor) {
if (!settings.levelColors || settings.levelColors.length <= 0) {
this.localSettings.levelColors = [keyColor];
} else {
this.localSettings.levelColors = settings.levelColors.slice();
}
} else { } else {
this.localSettings.levelColors = settings.levelColors.slice(); this.localSettings.levelColors = [keyColor];
this.localSettings.fixedLevelColors = settings.fixedLevelColors || [];
} }
this.localSettings.decimals = angular.isDefined(dataKey.decimals) ? dataKey.decimals : this.localSettings.decimals = angular.isDefined(dataKey.decimals) ? dataKey.decimals :
@ -191,15 +197,137 @@ export default class TbCanvasDigitalGauge {
}; };
this.gauge = new CanvasDigitalGauge(gaugeData).draw(); this.gauge = new CanvasDigitalGauge(gaugeData).draw();
this.init();
}
init() {
if (this.localSettings.useFixedLevelColor) {
if (this.localSettings.fixedLevelColors && this.localSettings.fixedLevelColors.length > 0) {
this.localSettings.levelColors = this.settingLevelColorsSubscribe(this.localSettings.fixedLevelColors);
this.updateLevelColors(this.localSettings.levelColors);
}
}
}
settingLevelColorsSubscribe(options) {
let levelColorsDatasource = [];
let predefineLevelColors = [];
function setLevelColor(levelSetting, color) {
if (levelSetting.valueSource === 'predefinedValue' && isFinite(levelSetting.value)) {
predefineLevelColors.push({
value: levelSetting.value,
color: color
})
} else if (levelSetting.entityAlias && levelSetting.attribute) {
let entityAliasId = this.ctx.aliasController.getEntityAliasId(levelSetting.entityAlias);
if (!entityAliasId) {
return;
}
let datasource = levelColorsDatasource.filter((datasource) => {
return datasource.entityAliasId === entityAliasId;
})[0];
let dataKey = {
type: this.ctx.$scope.$injector.get('types').dataKeyType.attribute,
name: levelSetting.attribute,
label: levelSetting.attribute,
settings: [{
color: color,
index: predefineLevelColors.length
}],
_hash: Math.random()
};
if (datasource) {
let findDataKey = datasource.dataKeys.filter((dataKey) => {
return dataKey.name === levelSetting.attribute;
})[0];
if (findDataKey) {
findDataKey.settings.push({
color: color,
index: predefineLevelColors.length
});
} else {
datasource.dataKeys.push(dataKey)
}
} else {
datasource = {
type: this.ctx.$scope.$injector.get('types').datasourceType.entity,
name: levelSetting.entityAlias,
aliasName: levelSetting.entityAlias,
entityAliasId: entityAliasId,
dataKeys: [dataKey]
};
levelColorsDatasource.push(datasource);
}
predefineLevelColors.push(null);
}
}
for (let i = 0; i < options.length; i++) {
let levelColor = options[i];
if (levelColor.from) {
setLevelColor.call(this, levelColor.from, levelColor.color);
}
if (levelColor.to) {
setLevelColor.call(this, levelColor.to, levelColor.color);
}
}
this.subscribeLevelColorsAttributes(levelColorsDatasource);
return predefineLevelColors;
}
updateLevelColors(levelColors) {
this.gauge.options.levelColors = levelColors;
this.gauge.options = CanvasDigitalGauge.configure(this.gauge.options);
this.gauge.update();
}
subscribeLevelColorsAttributes(datasources) {
let TbCanvasDigitalGauge = this;
let levelColorsSourcesSubscriptionOptions = {
datasources: datasources,
useDashboardTimewindow: false,
type: this.ctx.$scope.$injector.get('types').widgetType.latest.value,
callbacks: {
onDataUpdated: (subscription) => {
for (let i = 0; i < subscription.data.length; i++) {
let keyData = subscription.data[i];
if (keyData && keyData.data && keyData.data[0]) {
let attrValue = keyData.data[0][1];
if (isFinite(attrValue)) {
for (let i = 0; i < keyData.dataKey.settings.length; i++) {
let setting = keyData.dataKey.settings[i];
this.localSettings.levelColors[setting.index] = {
value: attrValue,
color: setting.color
};
}
}
}
}
this.updateLevelColors(this.localSettings.levelColors);
}
}
};
this.ctx.subscriptionApi.createSubscription(levelColorsSourcesSubscriptionOptions, true).then(
(subscription) => {
TbCanvasDigitalGauge.levelColorSourcesSubscription = subscription;
}
);
} }
update() { update() {
if (this.ctx.data.length > 0) { if (this.ctx.data.length > 0) {
var cellData = this.ctx.data[0]; var cellData = this.ctx.data[0];
if (cellData.data.length > 0) { if (cellData.data.length > 0) {
var tvPair = cellData.data[cellData.data.length - var tvPair = cellData.data[cellData.data.length - 1];
1];
var timestamp; var timestamp;
if (this.localSettings.showTimestamp) { if (this.localSettings.showTimestamp) {
timestamp = tvPair[0]; timestamp = tvPair[0];
@ -325,6 +453,11 @@ export default class TbCanvasDigitalGauge {
"type": "string", "type": "string",
"default": null "default": null
}, },
"useFixedLevelColor": {
"title": "Use precise value for the color indicator",
"type": "boolean",
"default": false
},
"levelColors": { "levelColors": {
"title": "Colors of indicator, from lower to upper", "title": "Colors of indicator, from lower to upper",
"type": "array", "type": "array",
@ -333,6 +466,66 @@ export default class TbCanvasDigitalGauge {
"type": "string" "type": "string"
} }
}, },
"fixedLevelColors": {
"title": "The colors for the indicator using boundary values",
"type": "array",
"items": {
"title": "levelColor",
"type": "object",
"properties": {
"from": {
"title": "From",
"type": "object",
"properties": {
"valueSource": {
"title": "[From] Value source",
"type": "string",
"default": "predefinedValue"
},
"entityAlias": {
"title": "[From] Source entity alias",
"type": "string"
},
"attribute": {
"title": "[From] Source entity attribute",
"type": "string"
},
"value": {
"title": "[From] Value (if predefined value is selected)",
"type": "number"
}
}
},
"to": {
"title": "To",
"type": "object",
"properties": {
"valueSource": {
"title": "[To] Value source",
"type": "string",
"default": "predefinedValue"
},
"entityAlias": {
"title": "[To] Source entity alias",
"type": "string"
},
"attribute": {
"title": "[To] Source entity attribute",
"type": "string"
},
"value": {
"title": "[To] Value (if predefined value is selected)",
"type": "number"
}
}
},
"color": {
"title": "Color",
"type": "string"
}
}
}
},
"animation": { "animation": {
"title": "Enable animation", "title": "Enable animation",
"type": "boolean", "type": "boolean",
@ -521,8 +714,10 @@ export default class TbCanvasDigitalGauge {
"key": "gaugeColor", "key": "gaugeColor",
"type": "color" "type": "color"
}, },
"useFixedLevelColor",
{ {
"key": "levelColors", "key": "levelColors",
"condition": "model.useFixedLevelColor !== true",
"items": [ "items": [
{ {
"key": "levelColors[]", "key": "levelColors[]",
@ -530,6 +725,52 @@ export default class TbCanvasDigitalGauge {
} }
] ]
}, },
{
"key": "fixedLevelColors",
"condition": "model.useFixedLevelColor === true",
"items": [
{
"key": "fixedLevelColors[].from.valueSource",
"type": "rc-select",
"multiple": false,
"items": [
{
"value": "predefinedValue",
"label": "Predefined value (Default)"
},
{
"value": "entityAttribute",
"label": "Value taken from entity attribute"
}
]
},
"fixedLevelColors[].from.value",
"fixedLevelColors[].from.entityAlias",
"fixedLevelColors[].from.attribute",
{
"key": "fixedLevelColors[].to.valueSource",
"type": "rc-select",
"multiple": false,
"items": [
{
"value": "predefinedValue",
"label": "Predefined value (Default)"
},
{
"value": "entityAttribute",
"label": "Value taken from entity attribute"
}
]
},
"fixedLevelColors[].to.value",
"fixedLevelColors[].to.entityAlias",
"fixedLevelColors[].to.attribute",
{
"key": "fixedLevelColors[].color",
"type": "color"
}
]
},
"animation", "animation",
"animationDuration", "animationDuration",
{ {

Write Preview
Loading…
Cancel
Save