Fix label scaling

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

@@ -47,7 +47,6 @@ export interface CanvasDigitalGaugeOptions extends GenericOptions {
   gaugeColor?: string;
   levelColors?: levelColors;
   symbol?: string;
-  label?: string;
   hideValue?: boolean;
   hideMinMax?: boolean;
   fontTitle?: string;
@@ -148,6 +147,7 @@ interface DigitalGaugeCanvasRenderingContext2D extends CanvasRenderingContext2D
 }
 
 interface BarDimensions {
+  timeseriesLabelY?: number;
   baseX: number;
   baseY: number;
   width: number;
@@ -365,7 +365,7 @@ export class CanvasDigitalGauge extends BaseGauge {
       const options = this.options as CanvasDigitalGaugeOptions;
       const elementClone = canvas.elementClone as HTMLCanvasElementClone;
       if (!elementClone.initialized) {
-        let context = canvas.contextClone;
+        const context: DigitalGaugeCanvasRenderingContext2D = canvas.contextClone;
 
         // clear the cache
         context.clearRect(x, y, w, h);
@@ -382,8 +382,7 @@ export class CanvasDigitalGauge extends BaseGauge {
         drawDigitalTitle(context, options);
 
         if (options.showUnitTitle) {
-          drawDigitalLabel(context, options, options.unitTitle);
-          context['barDimensions'].labelY += 20;
+          drawDigitalLabel(context, options, options.unitTitle, 'labelY');
         }
 
         drawDigitalMinMax(context, options);
@@ -410,7 +409,7 @@ export class CanvasDigitalGauge extends BaseGauge {
         drawDigitalValue(context, options, this.elementValueClone.renderedValue);
 
         if (options.showTimestamp) {
-          drawDigitalLabel(context, options, options.labelTimestamp);
+          drawDigitalLabel(context, options, options.labelTimestamp, 'timeseriesLabelY');
           this.elementValueClone.renderedTimestamp = this.timestamp;
         }
 
@@ -568,11 +567,12 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
 
   if (options.gaugeType === 'donut') {
     bd.fontValueBaseline = 'middle';
-    if (options.label && options.label.length > 0) {
+    if (options.showUnitTitle || options.showTimestamp) {
       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.timeseriesLabelY = determineTimeseriesLabelY(options, bd.labelY, bd.fontSizeFactor)
       bd.valueY = bd.Cy - total / 2 + valueHeight / 2;
     } else {
       bd.valueY = bd.Cy;
@@ -581,6 +581,7 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
     bd.titleY = bd.Cy - bd.Ro - 12 * bd.fontSizeFactor;
     bd.valueY = bd.Cy;
     bd.labelY = bd.Cy + (8 + options.fontLabelSize) * bd.fontSizeFactor;
+    bd.timeseriesLabelY = determineTimeseriesLabelY(options, bd.labelY, bd.fontSizeFactor)
     bd.minY = bd.maxY = bd.labelY;
     if (options.roundedLineCap) {
       bd.minY += bd.strokeWidth / 2;
@@ -599,8 +600,9 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
     bd.barTop = bd.valueY + 8 * bd.fontSizeFactor;
     bd.barBottom = bd.barTop + bd.strokeWidth;
 
-    if (options.hideMinMax && options.label === '') {
+    if (options.hideMinMax && !options.showUnitTitle && !options.showTimestamp) {
       bd.labelY = bd.barBottom;
+      bd.timeseriesLabelY = determineTimeseriesLabelY(options, bd.labelY, bd.fontSizeFactor)
       bd.barLeft = bd.origBaseX + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
       bd.barRight = bd.origBaseX + w + /*bd.width*/ -options.fontMinMaxSize / 3 * bd.fontSizeFactor;
     } else {
@@ -613,6 +615,7 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
       bd.barLeft = bd.minX;
       bd.barRight = bd.maxX;
       bd.labelY = bd.barBottom + (8 + options.fontLabelSize) * bd.fontSizeFactor;
+      bd.timeseriesLabelY = determineTimeseriesLabelY(options, bd.labelY, bd.fontSizeFactor)
       bd.minY = bd.maxY = bd.labelY;
     }
   } else if (options.gaugeType === 'verticalBar') {
@@ -622,14 +625,14 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
     bd.valueY = bd.titleBottom + (options.hideValue ? 0 : options.fontValueSize * bd.fontSizeFactor);
     bd.barTop = bd.valueY + 8 * bd.fontSizeFactor;
 
-    bd.labelY = bd.baseY + bd.height - 16;
-    if (options.label === '') {
-      bd.barBottom = bd.labelY;
+    bd.labelY = bd.baseY + bd.height;
+    bd.timeseriesLabelY = determineTimeseriesLabelY(options, bd.labelY, bd.fontSizeFactor)
+    if (options.showUnitTitle || options.showTimestamp) {
+      bd.barBottom = bd.labelY * 1.1 - (8 + options.fontLabelSize) * bd.fontSizeFactor;
     } else {
-      bd.barBottom = bd.labelY - (8 + options.fontLabelSize) * bd.fontSizeFactor;
+      bd.barBottom = bd.labelY
     }
-    bd.minX = bd.maxX =
-      bd.baseX + bd.width / 2 + bd.strokeWidth / 2 + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
+    bd.minX = bd.maxX = bd.baseX + bd.width / 2 + bd.strokeWidth / 2 + options.fontMinMaxSize / 3 * bd.fontSizeFactor;
     bd.minY = bd.barBottom;
     bd.maxY = bd.barTop;
     bd.fontMinMaxBaseline = 'middle';
@@ -661,6 +664,14 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D,
   return bd;
 }
 
+
+function determineTimeseriesLabelY(options: CanvasDigitalGaugeOptions, labelY: number, fontSizeFactor: number){
+  if (options.showUnitTitle) {
+    return  labelY + options.fontLabelSize * fontSizeFactor * 1.2;
+  } else {
+    return labelY;
+  }
+}
 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:' +
@@ -755,16 +766,16 @@ function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options
   context.restore();
 }
 
-function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, text: string) {
+function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, text: string, nameTextY: string) {
   if (!text || text === '') {
     return;
   }
 
-  const {labelY, baseX, width, fontSizeFactor} =
+  const {baseX, width, fontSizeFactor} =
     context.barDimensions;
 
   const textX = Math.round(baseX + width / 2);
-  const textY = labelY;
+  const textY = context.barDimensions[nameTextY];
 
   context.save();
   context.textAlign = 'center';

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

@@ -189,7 +189,6 @@ export class TbCanvasDigitalGauge {
       roundedLineCap: this.localSettings.roundedLineCap,
 
       symbol: this.localSettings.units,
-      // label: this.localSettings.unitTitle,
       unitTitle: this.localSettings.unitTitle,
       showUnitTitle: this.localSettings.showUnitTitle,
       showTimestamp: this.localSettings.showTimestamp,