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

UI: Hide zero tooltip for time series charts

Browse Source
This commit is contained in:
Artem Dzhereleiko 2025-05-27 12:15:06 +03:00
parent 2f061c448b
commit acc28245ad
6 changed files with 26 additions and 1 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

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

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

@ -188,6 +188,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
tooltipDateFont: [settings.tooltipDateFont, []],
tooltipDateColor: [settings.tooltipDateColor, []],
tooltipDateInterval: [settings.tooltipDateInterval, []],
tooltipHideZeroFalse: [settings.tooltipHideZeroFalse ,[]],
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@ -264,6 +265,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
this.widgetConfig.config.settings.tooltipDateFont = config.tooltipDateFont;
this.widgetConfig.config.settings.tooltipDateColor = config.tooltipDateColor;
this.widgetConfig.config.settings.tooltipDateInterval = config.tooltipDateInterval;
this.widgetConfig.config.settings.tooltipHideZeroFalse = config.tooltipHideZeroFalse;
this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor;
this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur;
@ -357,6 +359,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
this.timeSeriesChartWidgetConfigForm.get('tooltipValueFont').enable();
this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable();
this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false});
this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroFalse').enable({emitEvent: false});
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').enable();
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').enable();
if (tooltipShowDate) {
@ -381,6 +384,7 @@ export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigCompon
this.timeSeriesChartWidgetConfigForm.get('tooltipDateFont').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipDateColor').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipHideZeroFalse').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').disable();
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').disable();
}

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

@ -39,6 +39,7 @@ export interface TimeSeriesChartTooltipWidgetSettings {
tooltipValueFormatter?: string | TimeSeriesChartTooltipValueFormatFunction;
tooltipShowDate: boolean;
tooltipDateInterval?: boolean;
tooltipHideZeroFalse?: boolean;
tooltipDateFormat: DateFormatSettings;
tooltipDateFont: Font;
tooltipDateColor: string;
@ -129,7 +130,13 @@ export class TimeSeriesChartTooltip {
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipDateElement(items[0].param, interval));
}
for (const item of items) {
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
if (this.settings.tooltipHideZeroFalse) {
if (item.param.value[1]) {
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
}
} else {
this.renderer.appendChild(tooltipItemsElement, this.constructTooltipSeriesElement(item));
}
}
}
}

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

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

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

@ -163,6 +163,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
tooltipDateFont: [settings.tooltipDateFont, []],
tooltipDateColor: [settings.tooltipDateColor, []],
tooltipDateInterval: [settings.tooltipDateInterval, []],
tooltipHideZeroFalse: [settings.tooltipHideZeroFalse ,[]],
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []],
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []],
@ -223,6 +224,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
this.timeSeriesChartWidgetSettingsForm.get('tooltipValueColor').enable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipValueFormatter').enable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipShowDate').enable({emitEvent: false});
this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroFalse').enable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').enable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').enable();
if (tooltipShowDate) {
@ -248,6 +250,7 @@ export class TimeSeriesChartWidgetSettingsComponent extends WidgetSettingsCompon
this.timeSeriesChartWidgetSettingsForm.get('tooltipDateFont').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipDateColor').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipDateInterval').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipHideZeroFalse').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundColor').disable();
this.timeSeriesChartWidgetSettingsForm.get('tooltipBackgroundBlur').disable();
}

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

@ -5863,6 +5863,7 @@
"date": "Date",
"show-date-time-interval": "Show date time interval",
"show-date-time-interval-hint": "Show date time interval according to the data aggregation.",
"hide-zero-false-tooltip-values": "Hide zero/false values",
"background-color": "Background color",
"background-blur": "Background blur"
},