Fixed label in horizontal bar widget

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

@@ -86,6 +86,9 @@ export interface CanvasDigitalGaugeOptions extends GenericOptions {
   colorTicks?: string;
   tickWidth?: number;
 
+  labelTimestamp?: string
+  unitTitle?: string;
+  showUnitTitle?: boolean;
   showTimestamp?: boolean;
 }
 
@@ -362,7 +365,7 @@ export class CanvasDigitalGauge extends BaseGauge {
       const options = this.options as CanvasDigitalGaugeOptions;
       const elementClone = canvas.elementClone as HTMLCanvasElementClone;
       if (!elementClone.initialized) {
-        const context = canvas.contextClone;
+        let context = canvas.contextClone;
 
         // clear the cache
         context.clearRect(x, y, w, h);
@@ -378,8 +381,9 @@ export class CanvasDigitalGauge extends BaseGauge {
 
         drawDigitalTitle(context, options);
 
-        if (!options.showTimestamp) {
+        if (options.showUnitTitle) {
-          drawDigitalLabel(context, options);
+          drawDigitalLabel(context, options, options.unitTitle);
+          context['barDimensions'].labelY += 20;
         }
 
         drawDigitalMinMax(context, options);
@@ -406,7 +410,7 @@ export class CanvasDigitalGauge extends BaseGauge {
         drawDigitalValue(context, options, this.elementValueClone.renderedValue);
 
         if (options.showTimestamp) {
-          drawDigitalLabel(context, options);
+          drawDigitalLabel(context, options, options.labelTimestamp);
           this.elementValueClone.renderedTimestamp = this.timestamp;
         }
 
@@ -751,8 +755,8 @@ function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options
   context.restore();
 }
 
-function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) {
+function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, text: string) {
-  if (!options.label || options.label === '') {
+  if (!text || text === '') {
     return;
   }
 
@@ -766,7 +770,7 @@ function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options
   context.textAlign = 'center';
   context.font = Drawings.font(options, 'Label', fontSizeFactor);
   context.lineWidth = 0;
-  drawText(context, options, 'Label', options.label, textX, textY);
+  drawText(context, options, 'Label', text, textX, textY);
   context.restore();
 }
 

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

@@ -72,6 +72,7 @@ export class TbCanvasDigitalGauge {
       (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';
@@ -188,7 +189,9 @@ export class TbCanvasDigitalGauge {
       roundedLineCap: this.localSettings.roundedLineCap,
 
       symbol: this.localSettings.units,
-      label: this.localSettings.unitTitle,
+      // label: this.localSettings.unitTitle,
+      unitTitle: this.localSettings.unitTitle,
+      showUnitTitle: this.localSettings.showUnitTitle,
       showTimestamp: this.localSettings.showTimestamp,
       hideValue: this.localSettings.hideValue,
       hideMinMax: this.localSettings.hideMinMax,
@@ -407,7 +410,7 @@ export class TbCanvasDigitalGauge {
         if (this.localSettings.showTimestamp) {
           timestamp = tvPair[0];
           const filter = this.ctx.$injector.get(DatePipe);
-          (this.gauge.options as CanvasDigitalGaugeOptions).label =
+          (this.gauge.options as CanvasDigitalGaugeOptions).labelTimestamp =
             filter.transform(timestamp, this.localSettings.timestampFormat);
         }
         const value = tvPair[1];