Skip to content

Group tooltips for line chart #1336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 2, 2024
+485 −8
Merged

Group tooltips for line chart #1336

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
43b8c32
group tooltips for line chart
Steve-Mcl Sep 26, 2024
9202806
Merge branch 'main' into 1254-tooltip-grouping
Steve-Mcl Sep 26, 2024
71bc0ad
default chart interaction mode to 'nearest' (chartjs default)
Steve-Mcl Sep 26, 2024
321306d
Add support for testtime changes to a fixture
Steve-Mcl Sep 26, 2024
6040f1c
add basic e2e tests for chart options (tooltip mode, legend option)
Steve-Mcl Sep 26, 2024
55c5220
Update ui/src/widgets/ui-chart/UIChart.vue
Steve-Mcl Oct 1, 2024
644938b
Merge branch 'main' into 1254-tooltip-grouping
Steve-Mcl Oct 1, 2024
651754e
ensure interaction axis is cleared for line chart
Steve-Mcl Oct 1, 2024
bd924c0
re-do tests to check scatter and bar interaction modes
Steve-Mcl Oct 1, 2024
edf2152
fix test spelling of donut!
Steve-Mcl Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 210 additions & 0 deletions cypress/fixtures/flows/dashboard-chart-options.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
[
{
"id": "chart-1",
"type": "ui-chart",
"z": "9524c548fb0b956c",
"group": "dashboard-ui-group",
"name": "chart-name",
"label": "chart-label",
"order": 2,
"chartType": "line",
"category": "",
"categoryType": "property",
"xAxisLabel": "",
"xAxisProperty": "",
"xAxisPropertyType": "property",
"xAxisType": "time",
"xAxisFormat": "",
"xAxisFormatType": "auto",
"yAxisLabel": "",
"yAxisProperty": "",
"ymin": "",
"ymax": "",
"action": "append",
"stackSeries": false,
"pointShape": "circle",
"pointRadius": 4,
"showLegend": true,
"removeOlder": 1,
"removeOlderUnit": "3600",
"removeOlderPoints": "10",
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": 6,
"height": "4",
"className": "",
"x": 1690,
"y": 640,
"wires": [
[]
]
},
{
"id": "da1332f160b6a255",
"type": "inject",
"z": "9524c548fb0b956c",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "[]",
"payloadType": "json",
"x": 1490,
"y": 680,
"wires": [
[
"chart-1"
]
]
},
{
"id": "13bf93c81c0bd0a7",
"type": "change",
"z": "9524c548fb0b956c",
"name": "rand",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "(\t $minimum := 1;\t $maximum := 10;\t $round(($random() * ($maximum-$minimum)) + $minimum, 0)\t)",
"tot": "jsonata"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 1490,
"y": 640,
"wires": [
[
"chart-1"
]
]
},
{
"id": "12a55e898bb4162f",
"type": "ui-button",
"z": "9524c548fb0b956c",
"group": "dashboard-ui-group",
"name": "random",
"label": "random",
"order": 0,
"width": 0,
"height": 0,
"emulateClick": true,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "",
"iconPosition": "left",
"payload": "",
"payloadType": "date",
"topic": "topic",
"topicType": "msg",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"x": 1340,
"y": 640,
"wires": [
[
"13bf93c81c0bd0a7"
]
]
},
{
"id": "dashboard-ui-group",
"type": "ui-group",
"name": "Group Name",
"page": "dashboard-ui-page-1",
"width": "6",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "dashboard-ui-page-1",
"type": "ui-page",
"name": "import demos",
"ui": "dashboard-ui-base",
"path": "/page4",
"icon": "home",
"layout": "grid",
"theme": "dashboard-ui-theme",
"order": 1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "dashboard-ui-base",
"type": "ui-base",
"name": "base",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "default",
"titleBarStyle": "default"
},



{
"id": "dashboard-ui-theme",
"type": "ui-theme",
"name": "Default",
"colors": {
"surface": "#ffffff",
"primary": "#6771f4",
"bgPage": "#e5dcdc",
"groupBg": "#ffffff",
"groupOutline": "#d39292"
},
"sizes": {
"pagePadding": "6px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "6px",
"density": "default"
}
}
]
35 changes: 34 additions & 1 deletion cypress/support/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,22 @@ Cypress.Commands.add('loadFlows', loadFlows)

Cypress.Commands.add('deployFlow', deployFlow)

Cypress.Commands.add('deployFixture', (fixture) => {
Cypress.Commands.add('deployFixture', (fixture, overrides) => {
// disables service worker in testing due to ongoing issue with cypress - https://github.com/cypress-io/cypress/issues/27501
// NOTES on deployFixture():
// * The `fixture` is expected to be in the cypress/fixtures/flows folder. The name of the fixture should be the name of the file without the extension.
// * The `overrides` is an array of objects that will override the properties of the specified nodes in the fixture. The `mode` can be 'merge' or 'replace'
// * The point of this is to have a base flow that can be used across multiple tests, and then override specific properties for each test
// this saves writing lots of similar fixtures for each test
// * mode 'merge': will merge the the overrides `data` with the existing properties of the node
// * mode 'replace': will replace the entire node with the `data`
// * mode 'append': will add nodes to the flow i.e. the `data` should be a well formed node JSON
// example overrides:
// [
// { id: 'node-id-1', type: 'node-type', mode: 'merge', data: { name: 'new name', method: 'GET' } },
// { id: 'node-id-2', type: 'node-type', mode: 'replace', data: { id: 'new-id', type: 'new-type', ... } }
// ]

cy.intercept('/dashboard/sw.js', {
body: undefined
})
Expand All @@ -73,6 +87,25 @@ Cypress.Commands.add('deployFixture', (fixture) => {
})
.then((flow) => {
const flows = [...flow, ...helperApi]
if (overrides) {
overrides.forEach((override) => {
const index = flows.findIndex((node) => node.id === override.id)
if (index >= 0) {
const node = flows[index]
switch (override.mode) {
case 'merge':
Object.assign(node, override.data)
break
case 'replace':
flows[index] = override.data
break
case 'append':
flows.push(override.data)
break
}
}
})
}
console.log(flows)
return deployFlow(rev, flows)
})
Expand Down
121 changes: 121 additions & 0 deletions cypress/tests/widgets/chart-options.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/// <reference types="cypress" />
import should from 'should'

/* eslint-disable cypress/no-unnecessary-waiting */
describe('Node/-RED Dashboard 2.0 - Chart Widget - chart options', () => {
it('resets tooltip mode to "nearest" for bar charts', () => {
const chartName = 'bar-chart-1'
const overrides = [
{
id: 'chart-1', // the ID in the base flow fixture (required)
mode: 'merge',
data: {
label: chartName, // set the label
chartType: 'bar' // change the chart type to bar
}
}
]
cy.deployFixture('dashboard-chart-options', overrides)
cy.visit('/dashboard/page1')
cy.reload()

cy.get('#nrdb-ui-widget-chart-1 > div > canvas').should('exist')
cy.clickAndWait(cy.get('button').contains('random'), 10)

// eslint-disable-next-line promise/catch-or-return, promise/always-return
cy.window().then(win => {
should(win.uiCharts).is.not.empty()
const barChart = win.uiCharts['chart-1']
should(barChart).is.not.empty()
should(barChart.chart.options.interaction).be.an.Object()
should(barChart.chart.options.interaction.mode).be.equal('nearest')
should(barChart.chart.options.interaction.axis).not.equal('x')
})
})

it('sets tooltip mode to "index" and axis x for line charts', () => {
const chartName = 'line-chart-1'
const overrides = [
{
id: 'chart-1', // the ID in the base flow fixture (required)
mode: 'merge',
data: {
label: chartName, // set the label
chartType: 'line' // change the chart type to line
}
}
]
cy.deployFixture('dashboard-chart-options', overrides)
cy.visit('/dashboard/page1')
cy.reload()

cy.get('#nrdb-ui-widget-chart-1 > div > canvas').should('exist')
cy.clickAndWait(cy.get('button').contains('random'), 10)

// eslint-disable-next-line promise/catch-or-return, promise/always-return
cy.window().then(win => {
should(win.uiCharts).is.not.empty()
const lineChart = win.uiCharts['chart-1']
should(lineChart).is.not.empty()
should(lineChart.chart.options.interaction).be.an.Object()
should(lineChart.chart.options.interaction.mode).be.equal('index')
should(lineChart.chart.options.interaction.axis).be.equal('x')
})
})

it('hides legend when option is unchecked', () => {
const overrides = [
{
id: 'chart-1', // the ID in the base flow fixture (required)
mode: 'merge',
data: {
label: 'scatter-without-legend', // set the label
chartType: 'scatter', // change the chart type to scatter
showLegend: false // hide the legend
}
}
]
cy.deployFixture('dashboard-chart-options', overrides)
cy.visit('/dashboard/page1')
cy.reload()

cy.get('#nrdb-ui-widget-chart-1 > div > canvas').should('exist')
cy.clickAndWait(cy.get('button').contains('random'), 10)

// eslint-disable-next-line promise/catch-or-return, promise/always-return
cy.window().then(win => {
should(win.uiCharts).is.not.empty()
const barChart = win.uiCharts['chart-1']
should(barChart).is.not.empty()
should(barChart.chart.options.plugins.legend.display).be.false()
})
})

it('Shows legend when option is checked', () => {
const overrides = [
{
id: 'chart-1', // the ID in the base flow fixture (required)
mode: 'merge',
data: {
label: 'scatter-chart-with-legend', // set the label
chartType: 'scatter', // change the chart type to scatter
showLegend: true // show the legend
}
}
]
cy.deployFixture('dashboard-chart-options', overrides)
cy.visit('/dashboard/page1')
cy.reload()

cy.get('#nrdb-ui-widget-chart-1 > div > canvas').should('exist')
cy.clickAndWait(cy.get('button').contains('random'), 10)

// eslint-disable-next-line promise/catch-or-return, promise/always-return
cy.window().then(win => {
should(win.uiCharts).is.not.empty()
const barChart = win.uiCharts['chart-1']
should(barChart).is.not.empty()
should(barChart.chart.options.plugins.legend.display).be.true()
})
})
})
Loading