UI: Refactoring for touch event

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

@@ -136,7 +136,7 @@ export interface TbFlotYAxisSettings {
 
 export interface TbFlotBaseSettings {
   stack: boolean;
-  enableSelection: FlotSelection;
+  enableSelection: boolean;
   shadowSize: number;
   fontColor: string;
   fontSize: number;
@@ -183,8 +183,6 @@ 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, FlotSelection,
+  ChartType,
   TbFlotAxisOptions,
   TbFlotHoverInfo,
   TbFlotKeySettings,
@@ -117,7 +117,7 @@ export class TbFlot {
   private mouseleaveHandler = this.onFlotMouseLeave.bind(this);
   private flotClickHandler = this.onFlotClick.bind(this);
 
-  private enableSelection: FlotSelection;
+  private enableSelection: boolean;
   private selectionMode: 'x' | null;
 
   private readonly showTooltip: boolean;
@@ -134,8 +134,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 : 'enable';
+    this.enableSelection = isDefined(this.settings.enableSelection) ? this.settings.enableSelection : true;
-    this.checkSelectionMode();
+    this.selectionMode = this.enableSelection ? 'x' : null;
     this.showTooltip = isDefined(this.settings.showTooltip) ? this.settings.showTooltip : true;
     this.tooltip = this.showTooltip ? $('#flot-series-tooltip') : null;
     if (this.tooltip?.length === 0) {
@@ -172,7 +172,7 @@ export class TbFlot {
     };
 
     if (this.chartType === 'line' || this.chartType === 'bar' || this.chartType === 'state') {
-      this.options.selection = { mode: this.selectionMode };
+      this.options.selection = { mode: this.selectionMode, touch: true };
       this.options.xaxes = [];
       this.xaxis = {
         mode: 'time',
@@ -589,22 +589,6 @@ export class TbFlot {
     this.createPlot();
   }
 
-  mobileModeChanged() {
-    this.checkSelectionMode();
-    this.options.selection = { mode: this.selectionMode };
-    this.redrawPlot();
-  }
-
-  private checkSelectionMode() {
-    if (this.enableSelection === 'enable' ||
-      this.enableSelection === 'mobile' && this.ctx.isMobile ||
-      this.enableSelection === 'desktop' && !this.ctx.isMobile) {
-      this.selectionMode = 'x';
-    }  else {
-      this.selectionMode = null;
-    }
-  }
-
   public update() {
     if (this.updateTimeoutHandle) {
       clearTimeout(this.updateTimeoutHandle);
@@ -1272,7 +1256,7 @@ export class TbFlot {
     this.$element.css('pointer-events', '');
     this.$element.addClass('mouse-events');
     if (this.chartType !== 'pie') {
-      this.options.selection = {mode: this.selectionMode};
+      this.options.selection = {mode: this.selectionMode, touch: true};
       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

@@ -19,26 +19,12 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.chart.common-settings</legend>
     <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px" style="margin-bottom: 16px;">
-      <mat-checkbox formControlName="stack">
+      <mat-checkbox fxFlex formControlName="stack">
         {{ 'widgets.chart.enable-stacking-mode' | translate }}
       </mat-checkbox>
-      <mat-form-field fxFlex class="mat-block">
+      <mat-checkbox fxFlex formControlName="enableSelection">
-        <mat-label translate>widgets.chart.selection</mat-label>
+        {{ 'widgets.chart.enable-selection-mode' | translate }}
-        <mat-select formControlName="enableSelection">
+      </mat-checkbox>
-          <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

@@ -45,7 +45,7 @@ import { defaultLegendConfig, widgetType } from '@shared/models/widget.models';
 export const flotDefaultSettings = (chartType: ChartType): Partial<TbFlotSettings> => {
   const settings: Partial<TbFlotSettings> = {
     stack: false,
-    enableSelection: 'enable',
+    enableSelection: true,
     fontColor: '#545454',
     fontSize: 10,
     showTooltip: true,
@@ -149,7 +149,7 @@ export class FlotWidgetSettingsComponent extends PageComponent implements OnInit
       // Common settings
 
       stack: [false, []],
-      enableSelection: ['enable', []],
+      enableSelection: [true, []],
       fontSize: [10, [Validators.min(0)]],
       fontColor: ['#545454', []],
 

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

@@ -4214,10 +4214,7 @@
             "common-settings": "Common settings",
             "enable-stacking-mode": "Enable stacking mode",
             "selection": "Time range selection",
-            "selection-enable": "Enable",
+            "enable-selection-mode": "Enable stacking mode",
-            "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)",

ui-ngx/src/typings/jquery.flot.typings.d.ts

@@ -119,6 +119,7 @@ interface JQueryPlotSelection {
   color?: string;
   shape?: JQueryPlotSelectionShape;
   minSize?: number;
+  touch?: boolean;
 }
 
 interface JQueryPlotSelectionRanges {