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

Fixed label in horizontal bar widget

Browse Source
This commit is contained in:
kalutkaz 2022-04-20 17:04:35 +03:00
parent 77b962e1bb
commit 76a0636ce9
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,6 +86,9 @@ export interface CanvasDigitalGaugeOptions extends GenericOptions {
colorTicks?: string; colorTicks?: string;
tickWidth?: number; tickWidth?: number;
labelTimestamp?: string
unitTitle?: string;
showUnitTitle?: boolean;
showTimestamp?: boolean; showTimestamp?: boolean;
} }
@ -362,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) {
const context = canvas.contextClone; let context = canvas.contextClone;
// clear the cache // clear the cache
context.clearRect(x, y, w, h); context.clearRect(x, y, w, h);
@ -378,8 +381,9 @@ export class CanvasDigitalGauge extends BaseGauge {
drawDigitalTitle(context, options); drawDigitalTitle(context, options);
if (!options.showTimestamp) { if (options.showUnitTitle) {
drawDigitalLabel(context, options); drawDigitalLabel(context, options, options.unitTitle);
context['barDimensions'].labelY += 20;
} }
drawDigitalMinMax(context, options); drawDigitalMinMax(context, options);
@ -406,7 +410,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); drawDigitalLabel(context, options, options.labelTimestamp);
this.elementValueClone.renderedTimestamp = this.timestamp; this.elementValueClone.renderedTimestamp = this.timestamp;
} }
@ -751,8 +755,8 @@ function drawDigitalTitle(context: DigitalGaugeCanvasRenderingContext2D, options
context.restore(); context.restore();
} }
function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions) { function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options: CanvasDigitalGaugeOptions, text: string) {
if (!options.label || options.label === '') { if (!text || text === '') {
return; return;
} }
@ -766,7 +770,7 @@ function drawDigitalLabel(context: DigitalGaugeCanvasRenderingContext2D, options
context.textAlign = 'center'; context.textAlign = 'center';
context.font = Drawings.font(options, 'Label', fontSizeFactor); context.font = Drawings.font(options, 'Label', fontSizeFactor);
context.lineWidth = 0; context.lineWidth = 0;
drawText(context, options, 'Label', options.label, textX, textY); drawText(context, options, 'Label', text, textX, textY);
context.restore(); context.restore();
} }

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

@ -72,6 +72,7 @@ export class TbCanvasDigitalGauge {
(settings.unitTitle && settings.unitTitle.length > 0 ? (settings.unitTitle && settings.unitTitle.length > 0 ?
settings.unitTitle : dataKey.label) : ''); settings.unitTitle : dataKey.label) : '');
this.localSettings.showUnitTitle = settings.showUnitTitle === true;
this.localSettings.showTimestamp = settings.showTimestamp === true; this.localSettings.showTimestamp = settings.showTimestamp === true;
this.localSettings.timestampFormat = settings.timestampFormat && settings.timestampFormat.length ? this.localSettings.timestampFormat = settings.timestampFormat && settings.timestampFormat.length ?
settings.timestampFormat : 'yyyy-MM-dd HH:mm:ss'; settings.timestampFormat : 'yyyy-MM-dd HH:mm:ss';
@ -188,7 +189,9 @@ export class TbCanvasDigitalGauge {
roundedLineCap: this.localSettings.roundedLineCap, roundedLineCap: this.localSettings.roundedLineCap,
symbol: this.localSettings.units, symbol: this.localSettings.units,
label: this.localSettings.unitTitle, // label: this.localSettings.unitTitle,
unitTitle: this.localSettings.unitTitle,
showUnitTitle: this.localSettings.showUnitTitle,
showTimestamp: this.localSettings.showTimestamp, showTimestamp: this.localSettings.showTimestamp,
hideValue: this.localSettings.hideValue, hideValue: this.localSettings.hideValue,
hideMinMax: this.localSettings.hideMinMax, hideMinMax: this.localSettings.hideMinMax,
@ -407,7 +410,7 @@ export class TbCanvasDigitalGauge {
if (this.localSettings.showTimestamp) { if (this.localSettings.showTimestamp) {
timestamp = tvPair[0]; timestamp = tvPair[0];
const filter = this.ctx.$injector.get(DatePipe); 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); filter.transform(timestamp, this.localSettings.timestampFormat);
} }
const value = tvPair[1]; const value = tvPair[1];