Fixed show ticks and start donut angle for gauge; Refactoring

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

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

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

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

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