diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts index 0ec92e474c..899c0fe32b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts +++ b/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) { - drawDigitalLabel(context, options); + if (options.showUnitTitle) { + 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) { - if (!options.label || options.label === '') { +function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, text: string) { + 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(); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts index 61a18bf52e..4da6e8fb98 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts +++ b/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];