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

Merge pull request #13373 from pgrisu/features/add_tooltip_option_to_show_stack_mode_total_value_on_timeseries_chart_widgets

Browse Source 
Add tooltip settings option to show also total value in stack mode timeseries charts
This commit is contained in:
Igor Kulikov 2025-10-01 15:42:21 +03:00 committed by GitHub
commit ee0cd6c31c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 129 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.html
View File

@ -318,6 +318,11 @@
{{ 'tooltip.hide-zero-tooltip-values' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="tooltipStackedShowTotal">
{{ 'tooltip.show-stack-total' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row space-between">
<div>{{ 'tooltip.background-color' | translate }}</div>
<tb-color-input asBoxInput

11
ui-ngx/src/app/modules/home/components/widget/config/basic/chart/time-series-chart-basic-config.component.ts
View File

@ -189,6 +189,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
tooltipDateColor: [settings.tooltipDateColor, []],
tooltipDateInterval: [settings.tooltipDateInterval, []],
tooltipHideZeroValues: [settings.tooltipHideZeroValues ,[]],
tooltipStackedShowTotal: [settings.tooltipStackedShowTotal, []],
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@ -266,6 +267,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
this.widgetConfig.config.settings.tooltipDateColor = config.tooltipDateColor;
this.widgetConfig.config.settings.tooltipDateInterval = config.tooltipDateInterval;
this.widgetConfig.config.settings.tooltipHideZeroValues = config.tooltipHideZeroValues;
this.widgetConfig.config.settings.tooltipStackedShowTotal = config.tooltipStackedShowTotal;
this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor;
this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur;
@ -286,7 +288,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
}
protected validatorTriggers(): string[] {
return ['comparisonEnabled', 'showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate'];
return ['comparisonEnabled', 'showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate', 'stack'];
}
protected updateValidators(emitEvent: boolean, trigger?: string) {
@ -296,6 +298,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
const showLegend: boolean = this.timeSeriesChartWidgetConfigForm.get('showLegend').value;
const showTooltip: boolean = this.timeSeriesChartWidgetConfigForm.get('showTooltip').value;
const tooltipShowDate: boolean = this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').value;
const stack: boolean = this.timeSeriesChartWidgetConfigForm.get('stack').value;
if (comparisonEnabled) {
this.timeSeriesChartWidgetConfigForm.get('timeForComparison').enable();
@ -360,6 +363,11 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable();
this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroValues').enable({emitEvent: false});
if (stack) {
this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').enable();
} else {
this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').disable();
}
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').enable();
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').enable();
if (tooltipShowDate) {
@ -385,6 +393,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
this.timeSeriesChartWidgetConfigForm.get('tooltipDateColor').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroValues').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipStackedShowTotal').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').disable();
}

143
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-tooltip.models.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { isFunction } from '@core/utils';
import { isDefined, isFunction, isNotEmptyStr } from '@core/utils';
import { FormattedData } from '@shared/models/widget.models';
import { DateFormatProcessor, DateFormatSettings, Font } from '@shared/models/widget-settings.models';
import { TimeSeriesChartDataItem } from '@home/components/widget/lib/chart/time-series-chart.models';
@ -22,6 +22,7 @@ import { Renderer2, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CallbackDataParams } from 'echarts/types/dist/shared';
import { Interval } from '@shared/models/time/time.models';
import { TranslateService } from '@ngx-translate/core';
export type TimeSeriesChartTooltipValueFormatFunction =
(value: any, latestData: FormattedData, units?: string, decimals?: number) => string;
@ -43,6 +44,7 @@ export interface TimeSeriesChartTooltipWidgetSettings {
tooltipDateColor: string;
tooltipBackgroundColor: string;
tooltipBackgroundBlur: number;
tooltipStackedShowTotal?: boolean
}
export enum TimeSeriesChartTooltipTrigger {
@ -88,7 +90,8 @@ export class TimeSeriesChartTooltip {
private sanitizer: DomSanitizer,
private settings: TimeSeriesChartTooltipWidgetSettings,
private tooltipDateFormat: DateFormatProcessor,
private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction) {
private valueFormatFunction: TimeSeriesChartTooltipValueFormatFunction,
private translate: TranslateService) {
}
@ -130,16 +133,65 @@ export class TimeSeriesChartTooltip {
if (this.settings.tooltipShowDate) {
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval));
}
let total = 0;
let isStacked = false;
const totalUnits = new Set<string>();
let totalDecimal = 0;
for (const item of items) {
if (!this.settings.tooltipHideZeroValues || (item.param.value[1] && item.param.value[1] !== 'false')) {
if (this.shouldShowItem(item)) {
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
if (item.dataItem?.option?.stack !== undefined && !isNaN(Number(item.param.value[1]))) {
isStacked = true;
total += Number(item.param.value[1]);
if (isNotEmptyStr(item.dataItem.units)) {
totalUnits.add(item.dataItem.units);
}
if (isDefined(item.dataItem.decimals)) {
totalDecimal = Math.max(item.dataItem.decimals, totalDecimal);
}
}
}
}
if (isStacked && this.settings.tooltipStackedShowTotal) {
const unit = totalUnits.size === 1 ? Array.from(totalUnits.values())[0] : "";
const totalValue = this.valueFormatFunction(total, {} as FormattedData, unit, totalDecimal);
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipTotalStackedElement(totalValue));
}
}
}
private shouldShowItem(item: TooltipItem): boolean {
if (!this.settings.tooltipHideZeroValues) return true;
const value = item.param?.value?.[1];
return value && value !== 'false';
}
private createElement(tag = 'div', styles?: Record<string, string>): HTMLElement {
const node = this.renderer.createElement(tag);
if (styles) {
for (const [k, v] of Object.entries(styles)) {
this.renderer.setStyle(node, k, v);
}
}
return node;
}
private applyFont(el: HTMLElement, font: {family: string; size: number; sizeUnit: string; style: string; weight: string; lineHeight: string}, color: string, overrides?: Partial<CSSStyleDeclaration>) {
this.renderer.setStyle(el, 'font-family', font.family);
this.renderer.setStyle(el, 'font-size', `${font.size}${font.sizeUnit}`);
this.renderer.setStyle(el, 'font-style', font.style);
this.renderer.setStyle(el, 'font-weight', font.weight);
this.renderer.setStyle(el, 'line-height', font.lineHeight);
this.renderer.setStyle(el, 'color', color);
if (overrides) {
for (const [k, v] of Object.entries(overrides)) {
if (v != null) this.renderer.setStyle(el, k, v as string);
}
}
}
private constructTooltipDateElement(param: CallbackDataParams, interval?: Interval): HTMLElement {
const dateElement: HTMLElement = this.renderer.createElement('div');
const dateElement = this.createElement();
let dateText: string;
const startTs = param.value[2];
const endTs = param.value[3];
@ -156,43 +208,25 @@ export class TimeSeriesChartTooltip {
dateText = this.tooltipDateFormat.update(ts, interval);
}
this.renderer.appendChild(dateElement, this.renderer.createText(dateText));
this.renderer.setStyle(dateElement, 'font-family', this.settings.tooltipDateFont.family);
this.renderer.setStyle(dateElement, 'font-size', this.settings.tooltipDateFont.size + this.settings.tooltipDateFont.sizeUnit);
this.renderer.setStyle(dateElement, 'font-style', this.settings.tooltipDateFont.style);
this.renderer.setStyle(dateElement, 'font-weight', this.settings.tooltipDateFont.weight);
this.renderer.setStyle(dateElement, 'line-height', this.settings.tooltipDateFont.lineHeight);
this.renderer.setStyle(dateElement, 'color', this.settings.tooltipDateColor);
this.applyFont(dateElement, this.settings.tooltipDateFont, this.settings.tooltipDateColor);
return dateElement;
}
private constructTooltipSeriesElement(item: TooltipItem): HTMLElement {
const labelValueElement: HTMLElement = this.renderer.createElement('div');
this.renderer.setStyle(labelValueElement, 'display', 'flex');
this.renderer.setStyle(labelValueElement, 'flex-direction', 'row');
this.renderer.setStyle(labelValueElement, 'align-items', 'center');
this.renderer.setStyle(labelValueElement, 'align-self', 'stretch');
this.renderer.setStyle(labelValueElement, 'gap', '12px');
const labelElement: HTMLElement = this.renderer.createElement('div');
this.renderer.setStyle(labelElement, 'display', 'flex');
this.renderer.setStyle(labelElement, 'align-items', 'center');
this.renderer.setStyle(labelElement, 'gap', '8px');
this.renderer.appendChild(labelValueElement, labelElement);
const circleElement: HTMLElement = this.renderer.createElement('div');
this.renderer.setStyle(circleElement, 'width', '8px');
this.renderer.setStyle(circleElement, 'height', '8px');
this.renderer.setStyle(circleElement, 'border-radius', '50%');
this.renderer.setStyle(circleElement, 'background', item.param.color);
this.renderer.appendChild(labelElement, circleElement);
const labelTextElement: HTMLElement = this.renderer.createElement('div');
this.renderer.setProperty(labelTextElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, item.param.seriesName));
this.renderer.setStyle(labelTextElement, 'font-family', this.settings.tooltipLabelFont.family);
this.renderer.setStyle(labelTextElement, 'font-size', this.settings.tooltipLabelFont.size + this.settings.tooltipLabelFont.sizeUnit);
this.renderer.setStyle(labelTextElement, 'font-style', this.settings.tooltipLabelFont.style);
this.renderer.setStyle(labelTextElement, 'font-weight', this.settings.tooltipLabelFont.weight);
this.renderer.setStyle(labelTextElement, 'line-height', this.settings.tooltipLabelFont.lineHeight);
this.renderer.setStyle(labelTextElement, 'color', this.settings.tooltipLabelColor);
this.renderer.appendChild(labelElement, labelTextElement);
const valueElement: HTMLElement = this.renderer.createElement('div');
const row = this.createElement('div', {display: 'flex', 'flex-direction': 'row', 'align-items': 'center', 'align-self': 'stretch', gap: '12px'});
const label = this.createElement('div', { display: 'flex', 'align-items': 'center', gap: '8px' });
this.renderer.appendChild(row, label);
const dot = this.createElement('div', { width: '8px', height: '8px', 'border-radius': '50%', background: item.param.color as string });
this.renderer.appendChild(label, dot);
const labelText = this.createElement('div');
this.renderer.setProperty(labelText, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, item.param.seriesName));
this.applyFont(labelText, this.settings.tooltipLabelFont, this.settings.tooltipLabelColor);
this.renderer.appendChild(label, labelText);
const valueElement: HTMLElement = this.createElement('div', { flex: '1', 'text-align': 'end' });
let formatFunction = this.valueFormatFunction;
let latestData: FormattedData;
let units = '';
@ -210,19 +244,32 @@ export class TimeSeriesChartTooltip {
}
const value = formatFunction(item.param.value[1], latestData, units, decimals);
this.renderer.setProperty(valueElement, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, value));
this.renderer.setStyle(valueElement, 'flex', '1');
this.renderer.setStyle(valueElement, 'text-align', 'end');
this.renderer.setStyle(valueElement, 'font-family', this.settings.tooltipValueFont.family);
this.renderer.setStyle(valueElement, 'font-size', this.settings.tooltipValueFont.size + this.settings.tooltipValueFont.sizeUnit);
this.renderer.setStyle(valueElement, 'font-style', this.settings.tooltipValueFont.style);
this.renderer.setStyle(valueElement, 'font-weight', this.settings.tooltipValueFont.weight);
this.renderer.setStyle(valueElement, 'line-height', this.settings.tooltipValueFont.lineHeight);
this.renderer.setStyle(valueElement, 'color', this.settings.tooltipValueColor);
this.renderer.appendChild(labelValueElement, valueElement);
return labelValueElement;
this.applyFont(valueElement, this.settings.tooltipValueFont, this.settings.tooltipValueColor);
this.renderer.appendChild(row, valueElement);
return row;
}
private static mapTooltipParams(params: CallbackDataParams[] | CallbackDataParams,
private constructTooltipTotalStackedElement(total: string): HTMLElement {
const row = this.createElement('div', {display: 'flex', 'flex-direction': 'row', 'align-items': 'center', 'align-self': 'stretch', gap: '12px'});
const label = this.createElement('div', { display: 'flex', 'align-items': 'center', gap: '8px' });
this.renderer.appendChild(row, label);
const labelText = this.createElement('div');
this.renderer.setProperty(labelText, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, this.translate.instant('legend.Total')));
this.applyFont(labelText, this.settings.tooltipLabelFont, this.settings.tooltipLabelColor, { fontWeight: 'bold' });
this.renderer.appendChild(label, labelText);
const valueEl = this.createElement('div', { flex: '1', 'text-align': 'end' });
this.renderer.setProperty(valueEl, 'innerHTML', this.sanitizer.sanitize(SecurityContext.HTML, total));
this.applyFont(valueEl, this.settings.tooltipValueFont, this.settings.tooltipValueColor, { fontWeight: 'bold' });
this.renderer.appendChild(row, valueEl);
return row;
}
private static mapTooltipParams(params: CallbackDataParams[] | CallbackDataParams,
series?: TimeSeriesChartDataItem[],
focusedSeriesIndex?: number): TooltipParams {
const result: TooltipParams = {

3
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.models.ts
View File

@ -143,7 +143,7 @@ export interface TimeSeriesChartDataItem {
xAxisIndex: number;
yAxisId: TimeSeriesChartYAxisId;
yAxisIndex: number;
option?: LineSeriesOption | CustomSeriesOption;
option?: LineSeriesOption;
barRenderContext?: BarRenderContext;
unitConvertor?: TbUnitConverter;
}
@ -762,6 +762,7 @@ export const timeSeriesChartDefaultSettings: TimeSeriesChartSettings = {
},
tooltipDateColor: 'rgba(0, 0, 0, 0.76)',
tooltipDateInterval: true,
tooltipStackedShowTotal: false,
tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)',
tooltipBackgroundBlur: 4,
comparisonEnabled: false,

3
ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart.ts
View File

@ -212,7 +212,8 @@ export class TbTimeSeriesChart {
this.ctx.sanitizer,
this.settings,
this.tooltipDateFormat,
tooltipValueFormatFunction
tooltipValueFormatFunction,
this.ctx.translate
);
this.onResize();
if (this.autoResize) {

5
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.html
View File

@ -242,6 +242,11 @@
{{ 'tooltip.hide-zero-tooltip-values' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row">
<mat-slide-toggle class="mat-slide" formControlName="tooltipStackedShowTotal">
{{ 'tooltip.show-stack-total' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-row space-between">
<div>{{ 'tooltip.background-color' | translate }}</div>
<tb-color-input asBoxInput

10
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component.ts
View File

@ -164,6 +164,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
tooltipDateColor: [settings.tooltipDateColor, []],
tooltipDateInterval: [settings.tooltipDateInterval, []],
tooltipHideZeroValues: [settings.tooltipHideZeroValues ,[]],
tooltipStackedShowTotal: [settings.tooltipStackedShowTotal, []],
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@ -179,7 +180,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
}
protected validatorTriggers(): string[] {
return ['comparisonEnabled', 'showLegend', 'showTooltip', 'tooltipShowDate'];
return ['comparisonEnabled', 'showLegend', 'showTooltip', 'tooltipShowDate', 'stack'];
}
protected updateValidators(emitEvent: boolean) {
@ -187,6 +188,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
const showLegend: boolean = this.timeSeriesChartWidgetSettingsForm.get('showLegend').value;
const showTooltip: boolean = this.timeSeriesChartWidgetSettingsForm.get('showTooltip').value;
const tooltipShowDate: boolean = this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').value;
const stack: boolean = this.timeSeriesChartWidgetSettingsForm.get('stack').value;
if (comparisonEnabled) {
this.timeSeriesChartWidgetSettingsForm.get('timeForComparison').enable();
@ -225,6 +227,11 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').enable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroValues').enable();
if (stack) {
this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').enable();
} else {
this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').disable();
}
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').enable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
if (tooltipShowDate) {
@ -251,6 +258,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
this.timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipDateInterval').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroValues').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipStackedShowTotal').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable();
}

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -6026,6 +6026,7 @@
"show-date-time-interval": "Show date time interval",
"show-date-time-interval-hint": "Show date time interval according to the data aggregation.",
"hide-zero-tooltip-values": "Hide zero values",
"show-stack-total": "Show total value in stack mode",
"background-color": "Background color",
"background-blur": "Background blur"
},