dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix label scaling

Browse Source
This commit is contained in:
kalutkaz 2022-04-21 16:45:55 +03:00
parent 76a0636ce9
commit 1f94e3d234
2 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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