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

Merge pull request #3395 from vvlladd28/improvement/gauge/minor-fix 

Fixed show ticks and start donut angle for gauge
pull/3407/head
Igor Kulikov 6 years ago
committed by GitHub
parent
fe27cb1a31 7349108111
commit
2db7dedcc6
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 127 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ui-ngx/src/app/modules/home/components/widget/lib/analogue-compass.models.ts
  2. 2
      ui-ngx/src/app/modules/home/components/widget/lib/analogue-compass.ts
  3. 32
      ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts
  4. 2
      ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts
  5. 2
      ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.ts
  6. 136
      ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
  7. 8
      ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
  8. 52
      ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts

4
ui-ngx/src/app/modules/home/components/widget/lib/analogue-compass.models.ts
View File

@ -163,7 +163,7 @@ export const analogueCompassSettingsSchema: JsonSettingsSchema = {
form: [
{
key: 'majorTicks',
items:[
items: [
'majorTicks[]'
]
},
@ -267,7 +267,7 @@ export const analogueCompassSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',

2
ui-ngx/src/app/modules/home/components/widget/lib/analogue-compass.ts
View File

@ -43,7 +43,7 @@ export class TbAnalogueCompass extends TbBaseGauge<AnalogueCompassSettings, Radi
protected createGaugeOptions(gaugeElement: HTMLElement, settings: AnalogueCompassSettings): RadialGaugeOptions {
const majorTicks = (settings.majorTicks && settings.majorTicks.length > 0) ? deepClone(settings.majorTicks) :
['N','NE','E','SE','S','SW','W','NW'];
['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
majorTicks.push(majorTicks[0]);
return {

32
ui-ngx/src/app/modules/home/components/widget/lib/analogue-gauge.models.ts
View File

@ -492,7 +492,7 @@ export const analogueGaugeSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',
@ -581,7 +581,7 @@ export const analogueGaugeSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',
@ -670,7 +670,7 @@ export const analogueGaugeSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',
@ -759,7 +759,7 @@ export const analogueGaugeSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',
@ -842,7 +842,7 @@ export abstract class TbBaseGauge<S, O extends GenericOptions> {
private gauge: BaseGauge;
protected constructor(protected ctx: WidgetContext, canvasId: string) {
const gaugeElement = $('#'+canvasId, ctx.$container)[0];
const gaugeElement = $('#' + canvasId, ctx.$container)[0];
const settings: S = ctx.settings;
const gaugeData: O = this.createGaugeOptions(gaugeElement, settings);
this.gauge = this.createGauge(gaugeData as O).draw();
@ -859,7 +859,7 @@ export abstract class TbBaseGauge<S, O extends GenericOptions> {
const tvPair = cellData.data[cellData.data.length -
1];
const value = tvPair[1];
if(value !== this.gauge.value) {
if (value !== this.gauge.value) {
this.gauge.value = value;
}
}
@ -876,10 +876,10 @@ export abstract class TbBaseGauge<S, O extends GenericOptions> {
}
}
export abstract class TbAnalogueGauge<S extends AnalogueGaugeSettings, O extends GenericOptions> extends TbBaseGauge<S,O> {
export abstract class TbAnalogueGauge<S extends AnalogueGaugeSettings, O extends GenericOptions> extends TbBaseGauge<S, O> {
protected constructor(ctx: WidgetContext, canvasId: string) {
super(ctx,canvasId);
super(ctx, canvasId);
}
protected createGaugeOptions(gaugeElement: HTMLElement, settings: S): O {
@ -891,26 +891,26 @@ export abstract class TbAnalogueGauge<S extends AnalogueGaugeSettings, O extends
const keyColor = settings.defaultColor || dataKey.color;
const majorTicksCount = settings.majorTicksCount || 10;
const total = maxValue-minValue;
let step = (total/majorTicksCount);
const total = maxValue - minValue;
let step = (total / majorTicksCount);
const valueInt = settings.valueInt || 3;
const valueDec = getValueDec(this.ctx, settings);
step = parseFloat(parseFloat(step+'').toFixed(valueDec));
step = parseFloat(parseFloat(step + '').toFixed(valueDec));
const majorTicks: number[] = [];
const highlights: Highlight[] = [];
let tick = minValue;
while(tick<=maxValue) {
while (tick <= maxValue) {
majorTicks.push(tick);
let nextTick = tick+step;
nextTick = parseFloat(parseFloat(nextTick+'').toFixed(valueDec));
if (tick<maxValue) {
let nextTick = tick + step;
nextTick = parseFloat(parseFloat(nextTick + '').toFixed(valueDec));
if (tick < maxValue) {
const highlightColor = tinycolor(keyColor);
const percent = (tick-minValue)/total;
const percent = (tick - minValue) / total;
highlightColor.setAlpha(percent);
const highlight: Highlight = {
from: tick,

2
ui-ngx/src/app/modules/home/components/widget/lib/analogue-linear-gauge.ts
View File

@ -32,7 +32,7 @@ const tinycolor = tinycolor_;
const analogueLinearGaugeSettingsSchemaValue = getAnalogueLinearGaugeSettingsSchema();
export class TbAnalogueLinearGauge extends TbAnalogueGauge<AnalogueLinearGaugeSettings,LinearGaugeOptions>{
export class TbAnalogueLinearGauge extends TbAnalogueGauge<AnalogueLinearGaugeSettings, LinearGaugeOptions>{
static get settingsSchema(): JsonSettingsSchema {
return analogueLinearGaugeSettingsSchemaValue;

2
ui-ngx/src/app/modules/home/components/widget/lib/analogue-radial-gauge.ts
View File

@ -28,7 +28,7 @@ import BaseGauge = CanvasGauges.BaseGauge;
const analogueRadialGaugeSettingsSchemaValue = getAnalogueRadialGaugeSettingsSchema();
export class TbAnalogueRadialGauge extends TbAnalogueGauge<AnalogueRadialGaugeSettings,RadialGaugeOptions>{
export class TbAnalogueRadialGauge extends TbAnalogueGauge<AnalogueRadialGaugeSettings, RadialGaugeOptions>{
static get settingsSchema(): JsonSettingsSchema {
return analogueRadialGaugeSettingsSchemaValue;

136
ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
View File

@ -18,7 +18,7 @@ import * as CanvasGauges from 'canvas-gauges';
import { FontStyle, FontWeight } from '@home/components/widget/lib/settings.models';
import * as tinycolor_ from 'tinycolor2';
import { ColorFormats } from 'tinycolor2';
import { isDefined, isString, isUndefined, padValue } from '@core/utils';
import { isDefined, isDefinedAndNotNull, isString, isUndefined, padValue } from '@core/utils';
import GenericOptions = CanvasGauges.GenericOptions;
import BaseGauge = CanvasGauges.BaseGauge;
@ -220,7 +220,7 @@ export class CanvasDigitalGauge extends BaseGauge {
public _value: number;
constructor(options: CanvasDigitalGaugeOptions) {
options = {...defaultDigitalGaugeOptions,...(options || {})};
options = {...defaultDigitalGaugeOptions, ...(options || {})};
super(CanvasDigitalGauge.configure(options));
this.initValueClone();
}
@ -236,10 +236,10 @@ export class CanvasDigitalGauge extends BaseGauge {
}
if (options.gaugeType === 'donut') {
if (!options.donutStartAngle) {
if (!isDefinedAndNotNull(options.donutStartAngle)) {
options.donutStartAngle = 1.5 * Math.PI;
}
if (!options.donutEndAngle) {
if (!isDefinedAndNotNull(options.donutEndAngle)) {
options.donutEndAngle = options.donutStartAngle + 2 * Math.PI;
}
}
@ -255,7 +255,7 @@ export class CanvasDigitalGauge extends BaseGauge {
const levelColor: any = options.levelColors[i];
if (levelColor !== null) {
let percentage: number;
if(isColorProperty){
if (isColorProperty) {
percentage = inc * i;
} else {
percentage = CanvasDigitalGauge.normalizeValue(levelColor.value, options.minValue, options.maxValue);
@ -280,7 +280,7 @@ export class CanvasDigitalGauge extends BaseGauge {
options.ticksValue = [];
for (const tick of options.ticks) {
if (tick !== null) {
options.ticksValue.push(CanvasDigitalGauge.normalizeValue(tick, options.minValue, options.maxValue))
options.ticksValue.push(CanvasDigitalGauge.normalizeValue(tick, options.minValue, options.maxValue));
}
}
@ -294,7 +294,7 @@ export class CanvasDigitalGauge extends BaseGauge {
return options;
}
static normalizeValue (value: number, min: number, max: number): number {
static normalizeValue(value: number, min: number, max: number): number {
const normalValue = (value - min) / (max - min);
if (normalValue <= 0) {
return 0;
@ -539,8 +539,8 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
titleOffset += bd.fontSizeFactor * 2;
bd.titleY = bd.baseY + titleOffset;
titleOffset += bd.fontSizeFactor * 2;
bd.Cy += titleOffset/2;
bd.Ro -= titleOffset/2;
bd.Cy += titleOffset / 2;
bd.Ro -= titleOffset / 2;
}
bd.Ri = bd.Ro - bd.width / 6.666666666666667 * gws * 1.2;
bd.Cx = bd.baseX + bd.width / 2;
@ -575,8 +575,8 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
const valueHeight = determineFontHeight(options, 'Value', bd.fontSizeFactor).height;
const labelHeight = determineFontHeight(options, 'Label', bd.fontSizeFactor).height;
const total = valueHeight + labelHeight;
bd.labelY = bd.Cy + total/2;
bd.valueY = bd.Cy - total/2 + valueHeight/2;
bd.labelY = bd.Cy + total / 2;
bd.valueY = bd.Cy - total / 2 + valueHeight / 2;
} else {
bd.valueY = bd.Cy;
}
@ -586,8 +586,8 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
bd.labelY = bd.Cy + (8 + options.fontLabelSize) * bd.fontSizeFactor;
bd.minY = bd.maxY = bd.labelY;
if (options.roundedLineCap) {
bd.minY += bd.strokeWidth/2;
bd.maxY += bd.strokeWidth/2;
bd.minY += bd.strokeWidth / 2;
bd.maxY += bd.strokeWidth / 2;
}
bd.minX = bd.Cx - bd.Rm;
bd.maxX = bd.Cx + bd.Rm;
@ -604,15 +604,15 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
if (options.hideMinMax && options.label === '') {
bd.labelY = bd.barBottom;
bd.barLeft = bd.origBaseX + options.fontMinMaxSize/3 * bd.fontSizeFactor;
bd.barRight = bd.origBaseX + w + /*bd.width*/ - options.fontMinMaxSize/3 * bd.fontSizeFactor;
bd.barLeft = bd.origBaseX + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
bd.barRight = bd.origBaseX + w + /*bd.width*/ -options.fontMinMaxSize / 3 * bd.fontSizeFactor;
} else {
context.font = Drawings.font(options, 'MinMax', bd.fontSizeFactor);
const minTextWidth = context.measureText(options.minValue+'').width;
const maxTextWidth = context.measureText(options.maxValue+'').width;
const minTextWidth = context.measureText(options.minValue + '').width;
const maxTextWidth = context.measureText(options.maxValue + '').width;
const maxW = Math.max(minTextWidth, maxTextWidth);
bd.minX = bd.origBaseX + maxW/2 + options.fontMinMaxSize/3 * bd.fontSizeFactor;
bd.maxX = bd.origBaseX + w + /*bd.width*/ - maxW/2 - options.fontMinMaxSize/3 * bd.fontSizeFactor;
bd.minX = bd.origBaseX + maxW / 2 + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
bd.maxX = bd.origBaseX + w + /*bd.width*/ -maxW / 2 - options.fontMinMaxSize / 3 * bd.fontSizeFactor;
bd.barLeft = bd.minX;
bd.barRight = bd.maxX;
bd.labelY = bd.barBottom + (8 + options.fontLabelSize) * bd.fontSizeFactor;
@ -632,7 +632,7 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
bd.barBottom = bd.labelY - (8 + options.fontLabelSize) * bd.fontSizeFactor;
}
bd.minX = bd.maxX =
bd.baseX + bd.width/2 + bd.strokeWidth/2 + options.fontMinMaxSize/3 * bd.fontSizeFactor;
bd.baseX + bd.width / 2 + bd.strokeWidth / 2 + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
bd.minY = bd.barBottom;
bd.maxY = bd.barTop;
bd.fontMinMaxBaseline = 'middle';
@ -658,13 +658,13 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
// tslint:disable-next-line:no-bitwise
dashCount = (dashCount - 1) | 1;
}
bd.dashLength = Math.ceil(circumference/dashCount);
bd.dashLength = Math.ceil(circumference / dashCount);
}
return bd;
}
function determineFontHeight (options: CanvasDigitalGaugeOptions, target: string, baseSize: number): FontHeightInfo {
function determineFontHeight(options: CanvasDigitalGaugeOptions, target: string, baseSize: number): FontHeightInfo {
const fontStyleStr = 'font-style:' + options['font' + target + 'Style'] + ';font-weight:' +
options['font' + target + 'Weight'] + ';font-size:' +
options['font' + target + 'Size'] * baseSize + 'px;font-family:' +
@ -688,9 +688,9 @@ function determineFontHeight (options: CanvasDigitalGaugeOptions, target: string
try {
result = {};
block.css({ verticalAlign: 'baseline' });
block.css({verticalAlign: 'baseline'});
result.ascent = block.offset().top - text.offset().top;
block.css({ verticalAlign: 'bottom' });
block.css({verticalAlign: 'bottom'});
result.height = block.offset().top - text.offset().top;
result.descent = result.height - result.ascent;
} finally {
@ -720,15 +720,15 @@ function drawBackground(context: DigitalGaugeCanvasRenderingContext2D, options:
context.stroke();
} else if (options.gaugeType === 'arc') {
context.arc(context.barDimensions.Cx, context.barDimensions.Cy,
context.barDimensions.Rm, Math.PI, 2*Math.PI);
context.barDimensions.Rm, Math.PI, 2 * Math.PI);
context.stroke();
} else if (options.gaugeType === 'horizontalBar') {
context.moveTo(barLeft,barTop + strokeWidth/2);
context.lineTo(barRight,barTop + strokeWidth/2);
context.moveTo(barLeft, barTop + strokeWidth / 2);
context.lineTo(barRight, barTop + strokeWidth / 2);
context.stroke();
} else if (options.gaugeType === 'verticalBar') {
context.moveTo(baseX + width/2, barBottom);
context.lineTo(baseX + width/2, barTop);
context.moveTo(baseX + width / 2, barBottom);
context.lineTo(baseX + width / 2, barTop);
context.stroke();
}
}
@ -740,7 +740,9 @@ function drawText(context: DigitalGaugeCanvasRenderingContext2D, options: Canvas
}
function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
if (!options.title || typeof options.title !== 'string') return;
if (!options.title || typeof options.title !== 'string') {
return;
}
const {titleY, width, baseX, fontSizeFactor} =
context.barDimensions;
@ -756,7 +758,9 @@ function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options
}
function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
if (!options.label || options.label === '') return;
if (!options.label || options.label === '') {
return;
}
const {labelY, baseX, width, fontSizeFactor} =
context.barDimensions;
@ -772,7 +776,9 @@ function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options
}
function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
if (options.hideMinMax || options.gaugeType === 'donut') return;
if (options.hideMinMax || options.gaugeType === 'donut') {
return;
}
const {minY, maxY, minX, maxX, fontSizeFactor, fontMinMaxAlign, fontMinMaxBaseline} =
context.barDimensions;
@ -782,12 +788,14 @@ function drawDigitalMinMax(context: DigitalGaugeCanvasRenderingContext2D, option
context.textBaseline = fontMinMaxBaseline;
context.font = Drawings.font(options, 'MinMax', fontSizeFactor);
context.lineWidth = 0;
drawText(context, options, 'MinMax', options.minValue+'', minX, minY);
drawText(context, options, 'MinMax', options.maxValue+'', maxX, maxY);
drawText(context, options, 'MinMax', options.minValue + '', minX, minY);
drawText(context, options, 'MinMax', options.maxValue + '', maxX, maxY);
}
function drawDigitalValue(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, value: any) {
if (options.hideValue) return;
if (options.hideValue) {
return;
}
const {valueY, baseX, width, fontSizeFactor, fontValueBaseline} =
context.barDimensions;
@ -837,16 +845,16 @@ function drawArcGlow(context: DigitalGaugeCanvasRenderingContext2D,
context.setLineDash([]);
const strokeWidth = Ro - Ri;
const blur = 0.55;
const edge = strokeWidth*blur;
context.lineWidth = strokeWidth+edge;
const stop = blur/(2*blur+2);
const glowGradient = context.createRadialGradient(Cx,Cy,Ri-edge/2,Cx,Cy,Ro+edge/2);
const edge = strokeWidth * blur;
context.lineWidth = strokeWidth + edge;
const stop = blur / (2 * blur + 2);
const glowGradient = context.createRadialGradient(Cx, Cy, Ri - edge / 2, Cx, Cy, Ro + edge / 2);
const color1 = tinycolor(color).setAlpha(0.5).toRgbString();
const color2 = tinycolor(color).setAlpha(0).toRgbString();
glowGradient.addColorStop(0,color2);
glowGradient.addColorStop(stop,color1);
glowGradient.addColorStop(1.0-stop,color1);
glowGradient.addColorStop(1,color2);
glowGradient.addColorStop(0, color2);
glowGradient.addColorStop(stop, color1);
glowGradient.addColorStop(1.0 - stop, color1);
glowGradient.addColorStop(1, color2);
context.strokeStyle = glowGradient;
context.beginPath();
const e = 0.01 * Math.PI;
@ -863,21 +871,21 @@ function drawBarGlow(context: DigitalGaugeCanvasRenderingContext2D, startX: numb
endX: number, endY: number, color: string, strokeWidth: number, isVertical: boolean) {
context.setLineDash([]);
const blur = 0.55;
const edge = strokeWidth*blur;
context.lineWidth = strokeWidth+edge;
const stop = blur/(2*blur+2);
const gradientStartX = isVertical ? startX - context.lineWidth/2 : 0;
const gradientStartY = isVertical ? 0 : startY - context.lineWidth/2;
const gradientStopX = isVertical ? startX + context.lineWidth/2 : 0;
const gradientStopY = isVertical ? 0 : startY + context.lineWidth/2;
const glowGradient = context.createLinearGradient(gradientStartX,gradientStartY,gradientStopX,gradientStopY);
const edge = strokeWidth * blur;
context.lineWidth = strokeWidth + edge;
const stop = blur / (2 * blur + 2);
const gradientStartX = isVertical ? startX - context.lineWidth / 2 : 0;
const gradientStartY = isVertical ? 0 : startY - context.lineWidth / 2;
const gradientStopX = isVertical ? startX + context.lineWidth / 2 : 0;
const gradientStopY = isVertical ? 0 : startY + context.lineWidth / 2;
const glowGradient = context.createLinearGradient(gradientStartX, gradientStartY, gradientStopX, gradientStopY);
const color1 = tinycolor(color).setAlpha(0.5).toRgbString();
const color2 = tinycolor(color).setAlpha(0).toRgbString();
glowGradient.addColorStop(0,color2);
glowGradient.addColorStop(stop,color1);
glowGradient.addColorStop(1.0-stop,color1);
glowGradient.addColorStop(1,color2);
glowGradient.addColorStop(0, color2);
glowGradient.addColorStop(stop, color1);
glowGradient.addColorStop(1.0 - stop, color1);
glowGradient.addColorStop(1, color2);
context.strokeStyle = glowGradient;
const dx = isVertical ? 0 : 0.05 * context.lineWidth;
const dy = isVertical ? 0.05 * context.lineWidth : 0;
@ -984,12 +992,12 @@ function drawProgress(context: DigitalGaugeCanvasRenderingContext2D,
context.strokeStyle = neonColor;
}
context.beginPath();
context.moveTo(barLeft,barTop + strokeWidth/2);
context.lineTo(barLeft + (barRight-barLeft)*progress, barTop + strokeWidth/2);
context.moveTo(barLeft, barTop + strokeWidth / 2);
context.lineTo(barLeft + (barRight - barLeft) * progress, barTop + strokeWidth / 2);
context.stroke();
if (options.neonGlowBrightness && !options.isMobile) {
drawBarGlow(context, barLeft, barTop + strokeWidth/2,
barLeft + (barRight-barLeft)*progress, barTop + strokeWidth/2,
drawBarGlow(context, barLeft, barTop + strokeWidth / 2,
barLeft + (barRight - barLeft) * progress, barTop + strokeWidth / 2,
neonColor, strokeWidth, false);
}
drawTickBar(context, options.ticksValue, barLeft, barTop, barRight - barLeft, strokeWidth,
@ -999,12 +1007,12 @@ function drawProgress(context: DigitalGaugeCanvasRenderingContext2D,
context.strokeStyle = neonColor;
}
context.beginPath();
context.moveTo(baseX + width/2, barBottom);
context.lineTo(baseX + width/2, barBottom - (barBottom-barTop)*progress);
context.moveTo(baseX + width / 2, barBottom);
context.lineTo(baseX + width / 2, barBottom - (barBottom - barTop) * progress);
context.stroke();
if (options.neonGlowBrightness && !options.isMobile) {
drawBarGlow(context, baseX + width/2, barBottom,
baseX + width/2, barBottom - (barBottom-barTop)*progress,
drawBarGlow(context, baseX + width / 2, barBottom,
baseX + width / 2, barBottom - (barBottom - barTop) * progress,
neonColor, strokeWidth, true);
}
drawTickBar(context, options.ticksValue, baseX + width / 2, barTop, barTop - barBottom, strokeWidth,

8
ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
View File

@ -694,7 +694,7 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',
@ -783,7 +783,7 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',
@ -872,7 +872,7 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',
@ -961,7 +961,7 @@ export const digitalGaugeSettingsSchema: JsonSettingsSchema = {
},
{
value: '700',
label: '800'
label: '700'
},
{
value: '800',

52
ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
View File

@ -25,7 +25,7 @@ import {
FixedLevelColors
} from '@home/components/widget/lib/digital-gauge.models';
import * as tinycolor_ from 'tinycolor2';
import { isDefined } from '@core/utils';
import { isDefined, isDefinedAndNotNull } 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';
@ -53,7 +53,7 @@ export class TbCanvasDigitalGauge {
}
constructor(protected ctx: WidgetContext, canvasId: string) {
const gaugeElement = $('#'+canvasId, ctx.$container)[0];
const gaugeElement = $('#' + canvasId, ctx.$container)[0];
const settings: DigitalGaugeSettings = ctx.settings;
this.localSettings = {};
@ -80,7 +80,7 @@ export class TbCanvasDigitalGauge {
this.localSettings.useFixedLevelColor = settings.useFixedLevelColor || false;
if (!settings.useFixedLevelColor) {
if (!settings.levelColors || settings.levelColors.length <= 0) {
if (!settings.levelColors || settings.levelColors.length === 0) {
this.localSettings.levelColors = [keyColor];
} else {
this.localSettings.levelColors = settings.levelColors.slice();
@ -97,14 +97,15 @@ export class TbCanvasDigitalGauge {
this.localSettings.colorTicks = settings.colorTicks || '#666';
this.localSettings.decimals = isDefined(dataKey.decimals) ? dataKey.decimals :
((isDefined(settings.decimals) && settings.decimals !== null)
? settings.decimals : ctx.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 ?
@ -191,14 +192,15 @@ export class TbCanvasDigitalGauge {
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: (isDefined(settings.animationDuration) && settings.animationDuration !== null)
? settings.animationDuration : 500,
animationDuration: isDefinedAndNotNull(settings.animationDuration) ? settings.animationDuration : 500,
animationRule: settings.animationRule || 'linear',
isMobile: ctx.isMobile
@ -241,7 +243,7 @@ export class TbCanvasDigitalGauge {
if (findDataKey) {
findDataKey.settings.push(settings);
} else {
datasource.dataKeys.push(dataKey)
datasource.dataKeys.push(dataKey);
}
} else {
const datasourceAttribute: Datasource = {
@ -257,17 +259,23 @@ export class TbCanvasDigitalGauge {
return datasources;
}
private static toRadians(angle: number): number {
return angle * (Math.PI / 180);
}
init() {
if (this.localSettings.useFixedLevelColor) {
if (this.localSettings.fixedLevelColors && this.localSettings.fixedLevelColors.length > 0) {
this.localSettings.levelColors = this.settingLevelColorsSubscribe(this.localSettings.fixedLevelColors);
}
let updateSetting = false;
if (this.localSettings.showTicks) {
if (this.localSettings.ticksValue && this.localSettings.ticksValue.length) {
this.localSettings.ticks = this.settingTicksSubscribe(this.localSettings.ticksValue);
}
}
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();
}
}
@ -281,7 +289,7 @@ export class TbCanvasDigitalGauge {
predefineLevelColors.push({
value: levelSetting.value,
color
})
});
} else if (levelSetting.entityAlias && levelSetting.attribute) {
try {
levelColorsDatasource = TbCanvasDigitalGauge.generateDatasource(this.ctx, levelColorsDatasource,
@ -293,7 +301,7 @@ export class TbCanvasDigitalGauge {
}
}
for(const levelColor of options){
for (const levelColor of options) {
if (levelColor.from) {
setLevelColor.call(this, levelColor.from, levelColor.color);
}
@ -313,9 +321,9 @@ export class TbCanvasDigitalGauge {
let ticksDatasource: Datasource[] = [];
const predefineTicks: number[] = [];
for(const tick of options){
for (const tick of options) {
if (tick.valueSource === 'predefinedValue' && isFinite(tick.value)) {
predefineTicks.push(tick.value)
predefineTicks.push(tick.value);
} else if (tick.entityAlias && tick.attribute) {
try {
ticksDatasource = TbCanvasDigitalGauge
@ -398,7 +406,7 @@ export class TbCanvasDigitalGauge {
filter.transform(timestamp, this.localSettings.timestampFormat);
}
const value = tvPair[1];
if(value !== this.gauge.value) {
if (value !== this.gauge.value) {
if (!this.gauge.options.animation) {
this.gauge._value = value;
}

Write Preview
Loading…
Cancel
Save