From 1f94e3d234c2d2ebcfdf4665e23b300621f262f2 Mon Sep 17 00:00:00 2001 From: kalutkaz Date: Thu, 21 Apr 2022 16:45:55 +0300 Subject: [PATCH] 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,