From 76a0636ce9f6387f2e267cb9b59d30be89d48e86 Mon Sep 17 00:00:00 2001 From: kalutkaz Date: Wed, 20 Apr 2022 17:04:35 +0300 Subject: [PATCH 1/5] Fixed label in horizontal bar widget --- .../widget/lib/canvas-digital-gauge.ts | 18 +++++++++++------- .../components/widget/lib/digital-gauge.ts | 7 +++++-- 2 files changed, 16 insertions(+), 9 deletions(-) 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]; From 1f94e3d234c2d2ebcfdf4665e23b300621f262f2 Mon Sep 17 00:00:00 2001 From: kalutkaz Date: Thu, 21 Apr 2022 16:45:55 +0300 Subject: [PATCH 2/5] Fix label scaling --- .../widget/lib/canvas-digital-gauge.ts | 43 ++++++++++++------- .../components/widget/lib/digital-gauge.ts | 1 - 2 files changed, 27 insertions(+), 17 deletions(-) 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 899c0fe32b..bd37512dcc 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 @@ -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'; 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 4da6e8fb98..cd0ff5d007 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 @@ -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, From e79d1735bc3a09bd398bbaf1c0be0c0c6146fac9 Mon Sep 17 00:00:00 2001 From: kalutkaz Date: Fri, 22 Apr 2022 11:34:55 +0300 Subject: [PATCH 3/5] Refactoring --- .../modules/home/components/widget/lib/canvas-digital-gauge.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 bd37512dcc..b89b3344c0 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 @@ -628,7 +628,7 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D, 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; + bd.barBottom = bd.labelY - options.fontLabelSize * bd.fontSizeFactor; } else { bd.barBottom = bd.labelY } From 757e4d2a4335d99fb1abdb96f890e7e20b9e162b Mon Sep 17 00:00:00 2001 From: kalutkaz Date: Fri, 22 Apr 2022 11:43:40 +0300 Subject: [PATCH 4/5] Refactoring --- .../modules/home/components/widget/lib/canvas-digital-gauge.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b89b3344c0..e75a5a4c4f 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 @@ -664,7 +664,6 @@ function barDimensions(context: DigitalGaugeCanvasRenderingContext2D, return bd; } - function determineTimeseriesLabelY(options: CanvasDigitalGaugeOptions, labelY: number, fontSizeFactor: number){ if (options.showUnitTitle) { return labelY + options.fontLabelSize * fontSizeFactor * 1.2; @@ -672,6 +671,7 @@ function determineTimeseriesLabelY(options: CanvasDigitalGaugeOptions, labelY: n 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:' + From 285ec0f9055e37ef848bb1453662ef8a22141cbf Mon Sep 17 00:00:00 2001 From: kalutkaz Date: Fri, 22 Apr 2022 13:11:50 +0300 Subject: [PATCH 5/5] Delete default label field --- .../modules/home/components/widget/lib/canvas-digital-gauge.ts | 1 - 1 file changed, 1 deletion(-) 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 e75a5a4c4f..e550148df1 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 @@ -102,7 +102,6 @@ const defaultDigitalGaugeOptions: CanvasDigitalGaugeOptions = { ...GenericOption levelColors: ['blue'], symbol: '', - label: '', hideValue: false, hideMinMax: false,