From 2059e7ae18fd7e4fc1419434df55cafc0106ed44 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 13 Dec 2022 17:41:39 +0200 Subject: [PATCH 1/7] UI: Add setting enable selection for flot widget --- .../home/components/widget/lib/flot-widget.models.ts | 1 + .../modules/home/components/widget/lib/flot-widget.ts | 7 +++++-- .../chart/flot-widget-settings.component.html | 11 ++++++++--- .../settings/chart/flot-widget-settings.component.ts | 2 ++ ui-ngx/src/assets/locale/locale.constant-en_US.json | 1 + 5 files changed, 17 insertions(+), 5 deletions(-) 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)", From d5e6b8e7efca18b41f5263e363c8bcb19bf0ae43 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 19 Dec 2022 17:12:11 +0200 Subject: [PATCH 2/7] UI: Refactoring checkbox to select --- .../widget/lib/flot-widget.models.ts | 4 ++- .../home/components/widget/lib/flot-widget.ts | 30 +++++++++++++++---- .../chart/flot-widget-settings.component.html | 20 +++++++++++-- .../chart/flot-widget-settings.component.ts | 4 +-- .../assets/locale/locale.constant-en_US.json | 6 +++- 5 files changed, 52 insertions(+), 12 deletions(-) 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 0e6b5bb316..1ec9e7b994 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,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; 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 89d6ddfaf3..19f667310b 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, + 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); } 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 a3758665f0..19280f8d45 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 @@ -22,9 +22,23 @@ {{ 'widgets.chart.enable-stacking-mode' | translate }} - - {{ 'widgets.chart.enable-selection' | translate }} - + + widgets.chart.selection + + + {{ 'widgets.chart.selection-enable' | translate }} + + + {{ 'widgets.chart.selection-disable' | translate }} + + + {{ 'widgets.chart.selection-mobile' | translate }} + + + {{ 'widgets.chart.selection-desktop' | 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 a9b2812d5d..ac137dc388 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,7 +44,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; export function flotDefaultSettings(chartType: ChartType): Partial { const settings: Partial = { 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', []], 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 358cff401d..d8808cf5e9 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/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)", From 9a1546f2b95a68f8b5c132e2df7662926c9833b1 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 20 Dec 2022 12:50:53 +0200 Subject: [PATCH 3/7] UI: Upgrade widget bundles --- .../src/main/data/json/system/widget_bundles/charts.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/application/src/main/data/json/system/widget_bundles/charts.json b/application/src/main/data/json/system/widget_bundles/charts.json index de32604dbb..452755f083 100644 --- a/application/src/main/data/json/system/widget_bundles/charts.json +++ b/application/src/main/data/json/system/widget_bundles/charts.json @@ -153,7 +153,7 @@ "resources": [], "templateHtml": "", "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n", - "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'state'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.typeParameters = function() {\n return {\n stateData: true,\n hasAdditionalLatestDataKeys: true\n };\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'state'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.mobileModeChanged();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.typeParameters = function() {\n return {\n stateData: true,\n hasAdditionalLatestDataKeys: true\n };\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}", "settingsDirective": "tb-flot-line-widget-settings", @@ -174,7 +174,7 @@ "resources": [], "templateHtml": "", "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n", - "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx);\n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.mobileModeChanged();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}", "latestDataKeySettingsSchema": "{}", @@ -196,7 +196,7 @@ "resources": [], "templateHtml": "", "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n", - "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'bar'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'bar');\n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.mobileModeChanged();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}", "settingsDirective": "tb-flot-bar-widget-settings", From 245143a988d79fc52105fe5a7376ae4b1cb44d37 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 20 Dec 2022 16:23:21 +0200 Subject: [PATCH 4/7] UI: Refactoring --- .../modules/home/components/widget/lib/flot-widget.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) 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 19f667310b..c976118356 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 @@ -596,13 +596,11 @@ export class TbFlot { } private checkSelectionMode() { - if (this.enableSelection === 'enable') { + if (this.enableSelection === 'enable' || + this.enableSelection === 'mobile' && this.ctx.isMobile || + this.enableSelection === 'desktop' && !this.ctx.isMobile) { 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 { + } else { this.selectionMode = null; } } From e9a4bb6de2e918c2668a5aa5ff8131ca35ec5114 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 20 Dec 2022 17:15:29 +0200 Subject: [PATCH 5/7] UI: Fixed widget bundles --- .../src/main/data/json/system/widget_bundles/charts.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application/src/main/data/json/system/widget_bundles/charts.json b/application/src/main/data/json/system/widget_bundles/charts.json index 452755f083..3910c9ec13 100644 --- a/application/src/main/data/json/system/widget_bundles/charts.json +++ b/application/src/main/data/json/system/widget_bundles/charts.json @@ -196,7 +196,7 @@ "resources": [], "templateHtml": "", "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.mouse-events .flot-overlay {\n cursor: crosshair; \n}\n\n", - "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'bar');\n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.mobileModeChanged();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.mobileModeChanged();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", + "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'bar');\n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.mobileModeChanged();\n}\n\nself.onLatestDataUpdated = function() {\n self.ctx.flot.latestDataUpdate();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n\nself.typeParameters = function() {\n return {\n hasAdditionalLatestDataKeys: true\n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}", "settingsDirective": "tb-flot-bar-widget-settings", From 5102e5fda7e570572c60b485fcf47d591cd3d4f0 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Thu, 8 Jun 2023 17:11:31 +0300 Subject: [PATCH 6/7] UI: Refactoring for touch event --- .../widget/lib/flot-widget.models.ts | 4 +-- .../home/components/widget/lib/flot-widget.ts | 28 ++++--------------- .../chart/flot-widget-settings.component.html | 22 +++------------ .../chart/flot-widget-settings.component.ts | 4 +-- .../assets/locale/locale.constant-en_US.json | 5 +--- ui-ngx/src/typings/jquery.flot.typings.d.ts | 1 + 6 files changed, 15 insertions(+), 49 deletions(-) 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 { From f5aba152cf164d7e8ac9d3c8ee4b69ef1ec81d33 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Thu, 8 Jun 2023 17:30:09 +0300 Subject: [PATCH 7/7] UI: Refactoring locale --- ui-ngx/src/assets/locale/locale.constant-en_US.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 724fd11893..a097c16dc3 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -4214,7 +4214,7 @@ "common-settings": "Common settings", "enable-stacking-mode": "Enable stacking mode", "selection": "Time range selection", - "enable-selection-mode": "Enable stacking mode", + "enable-selection-mode": "Enable selection 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)",