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;
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';

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,
symbol: this.localSettings.units,
// label: this.localSettings.unitTitle,
unitTitle: this.localSettings.unitTitle,
showUnitTitle: this.localSettings.showUnitTitle,
showTimestamp: this.localSettings.showTimestamp,