diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts index 78c9245614..0e6b5bb316 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts @@ -128,6 +128,7 @@ export interface TbFlotYAxisSettings { export interface TbFlotBaseSettings { stack: boolean; + enableSelection: boolean; shadowSize: number; fontColor: string; fontSize: number; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts index d71d9e84f2..89d6ddfaf3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts @@ -118,6 +118,8 @@ export class TbFlot { private mouseleaveHandler = this.onFlotMouseLeave.bind(this); private flotClickHandler = this.onFlotClick.bind(this); + private enableSelection: boolean; + private readonly showTooltip: boolean; private readonly animatedPie: boolean; private pieDataAnimationDuration: number; @@ -132,6 +134,7 @@ export class TbFlot { this.chartType = this.chartType || 'line'; this.settings = ctx.settings as TbFlotSettings; this.utils = this.ctx.$injector.get(UtilsService); + this.enableSelection = isDefined(this.settings.enableSelection) ? this.settings.enableSelection : true; this.showTooltip = isDefined(this.settings.showTooltip) ? this.settings.showTooltip : true; this.tooltip = this.showTooltip ? $('#flot-series-tooltip') : null; if (this.tooltip?.length === 0) { @@ -168,7 +171,7 @@ export class TbFlot { }; if (this.chartType === 'line' || this.chartType === 'bar' || this.chartType === 'state') { - this.options.selection = { mode : 'x' }; + this.options.selection = { mode: this.enableSelection ? 'x' : null }; this.options.xaxes = []; this.xaxis = { mode: 'time', @@ -1251,7 +1254,7 @@ export class TbFlot { this.$element.css('pointer-events', ''); this.$element.addClass('mouse-events'); if (this.chartType !== 'pie') { - this.options.selection = {mode: 'x'}; + this.options.selection = {mode: this.enableSelection ? 'x' : null}; this.$element.bind('plotselected', this.flotSelectHandler); this.$element.bind('dblclick', this.dblclickHandler); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html index 06b9bc5f86..a3758665f0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html @@ -18,9 +18,14 @@
widgets.chart.common-settings - - {{ 'widgets.chart.enable-stacking-mode' | translate }} - +
+ + {{ 'widgets.chart.enable-stacking-mode' | translate }} + + + {{ 'widgets.chart.enable-selection' | translate }} + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts index 8d00d55b63..a9b2812d5d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.ts @@ -44,6 +44,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; export function flotDefaultSettings(chartType: ChartType): Partial { const settings: Partial = { stack: false, + enableSelection: true, fontColor: '#545454', fontSize: 10, showTooltip: true, @@ -145,6 +146,7 @@ export class FlotWidgetSettingsComponent extends PageComponent implements OnInit // Common settings stack: [false, []], + enableSelection: [true, []], fontSize: [10, [Validators.min(0)]], fontColor: ['#545454', []], diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 3df8a15e52..358cff401d 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -3764,6 +3764,7 @@ "chart": { "common-settings": "Common settings", "enable-stacking-mode": "Enable stacking mode", + "enable-selection": "Enable selection", "line-shadow-size": "Line shadow size", "display-smooth-lines": "Display smooth (curved) lines", "default-bar-width": "Default bar width for non-aggregated data (milliseconds)",