UI: Add setting enable selection for flot widget

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;

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);
     }

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html

@@ -18,9 +18,14 @@
 <section class="tb-widget-settings" [formGroup]="flotSettingsFormGroup" fxLayout="column">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
-    <mat-checkbox formControlName="stack" style="margin-bottom: 16px;">
-      {{ 'widgets.chart.enable-stacking-mode' | translate }}
-    </mat-checkbox>
+    <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" style="margin-bottom: 16px;">
+      <mat-checkbox fxFlex formControlName="stack" >
+        {{ 'widgets.chart.enable-stacking-mode' | translate }}
+      </mat-checkbox>
+      <mat-checkbox fxFlex formControlName="enableSelection">
+        {{ 'widgets.chart.enable-selection' | translate }}
+      </mat-checkbox>
+    </section>
     <section *ngIf="chartType === 'graph'" fxLayout="column" fxLayout.gt-xs="row"
              fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">
       <mat-form-field fxFlex class="mat-block">

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<TbFlotSettings> {
   const settings: Partial<TbFlotSettings> = {
     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', []],
 

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)",