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 46bafd69ca..844d7540ff 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 @@ -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; 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 4f3db3d91b..1d20068e20 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 @@ -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.checkSelectionMode(); + this.enableSelection = isDefined(this.settings.enableSelection) ? this.settings.enableSelection : true; + 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); } 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 00173841e6..9baf89cbd4 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 @@ -19,26 +19,12 @@
widgets.chart.common-settings
- + {{ 'widgets.chart.enable-stacking-mode' | translate }} - - widgets.chart.selection - - - {{ 'widgets.chart.selection-enable' | translate }} - - - {{ 'widgets.chart.selection-disable' | translate }} - - - {{ 'widgets.chart.selection-mobile' | translate }} - - - {{ 'widgets.chart.selection-desktop' | translate }} - - - + + {{ 'widgets.chart.enable-selection-mode' | 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 92e7309b4b..abcfdeebc3 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 @@ -45,7 +45,7 @@ import { defaultLegendConfig, widgetType } from '@shared/models/widget.models'; export const flotDefaultSettings = (chartType: ChartType): Partial => { const settings: Partial = { 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', []], 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 4eca6e48d9..724fd11893 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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", - "selection-disable": "Disable", - "selection-mobile": "Only mobile", - "selection-desktop": "Only desktop", + "enable-selection-mode": "Enable stacking mode", "line-shadow-size": "Line shadow size", "display-smooth-lines": "Display smooth (curved) lines", "default-bar-width": "Default bar width for non-aggregated data (milliseconds)", diff --git a/ui-ngx/src/typings/jquery.flot.typings.d.ts b/ui-ngx/src/typings/jquery.flot.typings.d.ts index 5bcc9b9b3e..e832a36e7a 100644 --- a/ui-ngx/src/typings/jquery.flot.typings.d.ts +++ b/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 {