tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #6462 from kalutkaz/fix/displayHorizontalBarWidget 

[3.4] UI: Fix displaying 'Unit title' and 'value timestamp' for Digital gauges widgets
pull/6682/head
Igor Kulikov 4 years ago
committed by GitHub
parent
0adcb36d10 285ec0f905
commit
697eef2e06
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts
  2. 6
      ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts

52
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;
@ -86,6 +85,9 @@ export interface CanvasDigitalGaugeOptions extends GenericOptions {
colorTicks?: string;
tickWidth?: number;
labelTimestamp?: string
unitTitle?: string;
showUnitTitle?: boolean;
showTimestamp?: boolean;
}
@ -100,7 +102,6 @@ const defaultDigitalGaugeOptions: CanvasDigitalGaugeOptions = { ...GenericOption
levelColors: ['blue'],
symbol: '',
label: '',
hideValue: false,
hideMinMax: false,
@ -145,6 +146,7 @@ interface DigitalGaugeCanvasRenderingContext2D extends CanvasRenderingContext2D
}
interface BarDimensions {
timeseriesLabelY?: number;
baseX: number;
baseY: number;
width: number;
@ -362,7 +364,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;
const context: DigitalGaugeCanvasRenderingContext2D = canvas.contextClone;
// clear the cache
context.clearRect(x, y, w, h);
@ -378,8 +380,8 @@ export class CanvasDigitalGauge extends BaseGauge {
drawDigitalTitle(context, options);
if (!options.showTimestamp) {
drawDigitalLabel(context, options);
if (options.showUnitTitle) {
drawDigitalLabel(context, options, options.unitTitle, 'labelY');
}
drawDigitalMinMax(context, options);
@ -406,7 +408,7 @@ export class CanvasDigitalGauge extends BaseGauge {
drawDigitalValue(context, options, this.elementValueClone.renderedValue);
if (options.showTimestamp) {
drawDigitalLabel(context, options);
drawDigitalLabel(context, options, options.labelTimestamp, 'timeseriesLabelY');
this.elementValueClone.renderedTimestamp = this.timestamp;
}
@ -564,11 +566,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;
@ -577,6 +580,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;
@ -595,8 +599,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 {
@ -609,6 +614,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') {
@ -618,14 +624,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 - 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';
@ -657,6 +663,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:' +
@ -751,22 +765,22 @@ 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, 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';
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();
}

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

@ -65,6 +65,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';
@ -181,7 +182,8 @@ 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,
hideValue: this.localSettings.hideValue,
hideMinMax: this.localSettings.hideMinMax,
@ -400,7 +402,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];

Write Preview
Loading…
Cancel
Save