From 2608ef107691a7ea4d9120fff69187fad7bc7e83 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Tue, 15 Oct 2024 12:25:56 +0530 Subject: [PATCH 1/5] interaction mode to 'nearest' to reduce cluttered tooltip --- ui/src/widgets/ui-chart/UIChart.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue index f1cb7ff42..bda3357ab 100644 --- a/ui/src/widgets/ui-chart/UIChart.vue +++ b/ui/src/widgets/ui-chart/UIChart.vue @@ -248,6 +248,7 @@ export default { case 'line': delete this.chart.options.interaction.axis this.chart.options.interaction.mode = 'x' + this.chart.options.interaction.mode = 'nearest' break case 'scatter': this.chart.options.interaction.axis = 'x' From a17e70a43b66eac14aea396fc02816737536898e Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Tue, 15 Oct 2024 12:32:01 +0530 Subject: [PATCH 2/5] Changed interaction mode to 'nearest' to reduce cluttered tooltip --- ui/src/widgets/ui-chart/UIChart.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue index bda3357ab..c2ac1a4f9 100644 --- a/ui/src/widgets/ui-chart/UIChart.vue +++ b/ui/src/widgets/ui-chart/UIChart.vue @@ -247,7 +247,6 @@ export default { switch (this.chart.config.type) { case 'line': delete this.chart.options.interaction.axis - this.chart.options.interaction.mode = 'x' this.chart.options.interaction.mode = 'nearest' break case 'scatter': From e235e25d22ea918d7eb0c6e4d370720447d58c81 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Tue, 15 Oct 2024 12:33:58 +0530 Subject: [PATCH 3/5] Updated E2E tests --- cypress/tests/widgets/chart-options.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/tests/widgets/chart-options.spec.js b/cypress/tests/widgets/chart-options.spec.js index 2acc01cbc..d9ff3ae05 100644 --- a/cypress/tests/widgets/chart-options.spec.js +++ b/cypress/tests/widgets/chart-options.spec.js @@ -3,7 +3,7 @@ import should from 'should' /* eslint-disable cypress/no-unnecessary-waiting */ describe('Node/-RED Dashboard 2.0 - Chart Widget - chart options', () => { - it('sets tooltip `mode` to "x" for line charts', () => { + it('sets tooltip `mode` to "nearest" for line charts', () => { const chartName = 'line-chart-1' const overrides = [ { @@ -29,7 +29,7 @@ describe('Node/-RED Dashboard 2.0 - Chart Widget - chart options', () => { should(chartObject).is.not.empty() should(chartObject.chart.options.type).be.equal('line') should(chartObject.chart.options.interaction).be.an.Object() - should(chartObject.chart.options.interaction.mode).be.equal('x') + should(chartObject.chart.options.interaction.mode).be.equal('nearest') should(chartObject.chart.options.interaction).not.have.property('axis') }) }) From 21076d11e2aa2de40dcd1ad828760c9972abbf31 Mon Sep 17 00:00:00 2001 From: Gayan Sandamal Date: Wed, 16 Oct 2024 14:21:16 +0530 Subject: [PATCH 4/5] Fixed line chart cluttered tooltip data issue --- cypress/tests/widgets/chart-options.spec.js | 2 +- ui/src/widgets/ui-chart/UIChart.vue | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/cypress/tests/widgets/chart-options.spec.js b/cypress/tests/widgets/chart-options.spec.js index d9ff3ae05..0fab1a9c0 100644 --- a/cypress/tests/widgets/chart-options.spec.js +++ b/cypress/tests/widgets/chart-options.spec.js @@ -29,7 +29,7 @@ describe('Node/-RED Dashboard 2.0 - Chart Widget - chart options', () => { should(chartObject).is.not.empty() should(chartObject.chart.options.type).be.equal('line') should(chartObject.chart.options.interaction).be.an.Object() - should(chartObject.chart.options.interaction.mode).be.equal('nearest') + should(chartObject.chart.options.interaction.mode).be.equal('x') should(chartObject.chart.options.interaction).not.have.property('axis') }) }) diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue index c2ac1a4f9..eac3e5f02 100644 --- a/ui/src/widgets/ui-chart/UIChart.vue +++ b/ui/src/widgets/ui-chart/UIChart.vue @@ -25,7 +25,8 @@ export default { chart: null, hasData: false, histogram: [], // populate later for bins per series - chartUpdateDebounceTimeout: null + chartUpdateDebounceTimeout: null, + tooltipDataset: [] } }, computed: { @@ -217,10 +218,21 @@ export default { } return true }, - filter: (tooltipItem) => { + filter: (tooltipItem, tooltipIndex) => { if (this.props.chartType === 'histogram') { // don't show tooltips for empty data points return tooltipItem.parsed.y !== undefined && tooltipItem.parsed.y > 0 + } else if (this.props.chartType === 'line') { + if (tooltipIndex === 0) { + // first element in the loop + this.tooltipDataset = [] + } + if (this.tooltipDataset.indexOf(tooltipItem.datasetIndex) === -1) { + this.tooltipDataset.push(tooltipItem.datasetIndex) + return true + } else { + return false + } } return true } @@ -247,7 +259,7 @@ export default { switch (this.chart.config.type) { case 'line': delete this.chart.options.interaction.axis - this.chart.options.interaction.mode = 'nearest' + this.chart.options.interaction.mode = 'x' break case 'scatter': this.chart.options.interaction.axis = 'x' From 266cdeb6e01f7be93813534555b073ce4541943f Mon Sep 17 00:00:00 2001 From: Joe Pavitt <99246719+joepavitt@users.noreply.github.com> Date: Mon, 21 Oct 2024 10:37:24 +0100 Subject: [PATCH 5/5] Update cypress/tests/widgets/chart-options.spec.js --- cypress/tests/widgets/chart-options.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/tests/widgets/chart-options.spec.js b/cypress/tests/widgets/chart-options.spec.js index 0fab1a9c0..2acc01cbc 100644 --- a/cypress/tests/widgets/chart-options.spec.js +++ b/cypress/tests/widgets/chart-options.spec.js @@ -3,7 +3,7 @@ import should from 'should' /* eslint-disable cypress/no-unnecessary-waiting */ describe('Node/-RED Dashboard 2.0 - Chart Widget - chart options', () => { - it('sets tooltip `mode` to "nearest" for line charts', () => { + it('sets tooltip `mode` to "x" for line charts', () => { const chartName = 'line-chart-1' const overrides = [ {