UI: Refactoring checkbox to select

ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts

@@ -128,7 +128,7 @@ export interface TbFlotYAxisSettings {
 
 export interface TbFlotBaseSettings {
   stack: boolean;
-  enableSelection: boolean;
+  enableSelection: FlotSelection;
   shadowSize: number;
   fontColor: string;
   fontSize: number;
@@ -170,6 +170,8 @@ export interface TbFlotGraphSettings extends TbFlotBaseSettings,
 
 export declare type BarAlignment = 'left' | 'right' | 'center';
 
+export declare type FlotSelection = 'enable' | 'disable' | 'mobile' | 'desktop';
+
 export interface TbFlotBarSettings extends TbFlotBaseSettings,
                                            TbFlotThresholdsSettings, TbFlotComparisonSettings, TbFlotCustomLegendSettings {
   defaultBarWidth: number;

ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts

@@ -37,7 +37,7 @@ import {
   widgetType
 } from '@app/shared/models/widget.models';
 import {
-  ChartType,
+  ChartType, FlotSelection,
   TbFlotAxisOptions,
   TbFlotHoverInfo,
   TbFlotKeySettings,
@@ -118,7 +118,8 @@ export class TbFlot {
   private mouseleaveHandler = this.onFlotMouseLeave.bind(this);
   private flotClickHandler = this.onFlotClick.bind(this);
 
-  private enableSelection: boolean;
+  private enableSelection: FlotSelection;
+  private selectionMode: 'x' | null;
 
   private readonly showTooltip: boolean;
   private readonly animatedPie: boolean;
@@ -134,7 +135,8 @@ 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.enableSelection = isDefined(this.settings.enableSelection) ? this.settings.enableSelection : 'enable';
+    this.checkSelectionMode();
     this.showTooltip = isDefined(this.settings.showTooltip) ? this.settings.showTooltip : true;
     this.tooltip = this.showTooltip ? $('#flot-series-tooltip') : null;
     if (this.tooltip?.length === 0) {
@@ -171,7 +173,7 @@ export class TbFlot {
     };
 
     if (this.chartType === 'line' || this.chartType === 'bar' || this.chartType === 'state') {
-      this.options.selection = { mode: this.enableSelection ? 'x' : null };
+      this.options.selection = { mode: this.selectionMode };
       this.options.xaxes = [];
       this.xaxis = {
         mode: 'time',
@@ -587,6 +589,24 @@ export class TbFlot {
     this.createPlot();
   }
 
+  mobileModeChanged() {
+    this.checkSelectionMode();
+    this.options.selection = { mode: this.selectionMode };
+    this.redrawPlot();
+  }
+
+  private checkSelectionMode() {
+    if (this.enableSelection === 'enable') {
+      this.selectionMode = 'x';
+    }  else if (this.enableSelection === 'mobile' && this.ctx.isMobile) {
+      this.selectionMode = 'x';
+    } else if (this.enableSelection === 'desktop' && !this.ctx.isMobile) {
+      this.selectionMode = 'x';
+    } else {
+      this.selectionMode = null;
+    }
+  }
+
   public update() {
     if (this.updateTimeoutHandle) {
       clearTimeout(this.updateTimeoutHandle);
@@ -1254,7 +1274,7 @@ export class TbFlot {
     this.$element.css('pointer-events', '');
     this.$element.addClass('mouse-events');
     if (this.chartType !== 'pie') {
-      this.options.selection = {mode: this.enableSelection ? 'x' : null};
+      this.options.selection = {mode: this.selectionMode};
       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

@@ -22,9 +22,23 @@
       <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>
+      <mat-form-field fxFlex class="mat-block">
+        <mat-label translate>widgets.chart.selection</mat-label>
+        <mat-select formControlName="enableSelection">
+          <mat-option [value]="'enable'">
+            {{ 'widgets.chart.selection-enable' | translate }}
+          </mat-option>
+          <mat-option [value]="'disable'">
+            {{ 'widgets.chart.selection-disable' | translate }}
+          </mat-option>
+          <mat-option [value]="'mobile'">
+            {{ 'widgets.chart.selection-mobile' | translate }}
+          </mat-option>
+          <mat-option [value]="'desktop'">
+            {{ 'widgets.chart.selection-desktop' | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
     </section>
     <section *ngIf="chartType === 'graph'" fxLayout="column" fxLayout.gt-xs="row"
              fxLayoutGap.gt-xs="8px" fxLayoutAlign.gt-xs="start center">

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

@@ -44,7 +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,
+    enableSelection: 'enable',
     fontColor: '#545454',
     fontSize: 10,
     showTooltip: true,
@@ -146,7 +146,7 @@ export class FlotWidgetSettingsComponent extends PageComponent implements OnInit
       // Common settings
 
       stack: [false, []],
-      enableSelection: [true, []],
+      enableSelection: ['enable', []],
       fontSize: [10, [Validators.min(0)]],
       fontColor: ['#545454', []],
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3764,7 +3764,11 @@
         "chart": {
             "common-settings": "Common settings",
             "enable-stacking-mode": "Enable stacking mode",
-            "enable-selection": "Enable selection",
+            "selection": "Time range selection",
+            "selection-enable": "Enable",
+            "selection-disable": "Disable",
+            "selection-mobile": "Only mobile",
+            "selection-desktop": "Only desktop",
             "line-shadow-size": "Line shadow size",
             "display-smooth-lines": "Display smooth (curved) lines",
             "default-bar-width": "Default bar width for non-aggregated data (milliseconds)",