diff --git a/cypress/fixtures/flows/dashboard-charts.json b/cypress/fixtures/flows/dashboard-charts.json index 28b5c892..caf4d9b0 100644 --- a/cypress/fixtures/flows/dashboard-charts.json +++ b/cypress/fixtures/flows/dashboard-charts.json @@ -238,8 +238,8 @@ "pointShape": "circle", "pointRadius": 4, "showLegend": true, - "removeOlder": 1, - "removeOlderUnit": "3600", + "removeOlder": 1000000, + "removeOlderUnit": "604800", "removeOlderPoints": "", "colors": [ "#1f77b4", @@ -286,7 +286,7 @@ "className": "", "icon": "", "iconPosition": "left", - "payload": "[{\"location\":\"New York\",\"temp\":56,\"datestamp\":1643784000},{\"location\":\"Los Angeles\",\"temp\":67,\"datestamp\":1643784000},{\"location\":\"Chicago\",\"temp\":44,\"datestamp\":1643784000},{\"location\":\"New York\",\"temp\":60,\"datestamp\":1643798400},{\"location\":\"Los Angeles\",\"temp\":71,\"datestamp\":1643798400},{\"location\":\"Chicago\",\"temp\":48,\"datestamp\":1643798400},{\"location\":\"New York\",\"temp\":65,\"datestamp\":1643812800},{\"location\":\"Los Angeles\",\"temp\":74,\"datestamp\":1643812800},{\"location\":\"Chicago\",\"temp\":52,\"datestamp\":1643812800},{\"location\":\"New York\",\"temp\":69,\"datestamp\":1643827200},{\"location\":\"Los Angeles\",\"temp\":77,\"datestamp\":1643827200},{\"location\":\"Chicago\",\"temp\":56,\"datestamp\":1643827200},{\"location\":\"New York\",\"temp\":73,\"datestamp\":1643841600},{\"location\":\"Los Angeles\",\"temp\":80,\"datestamp\":1643841600},{\"location\":\"Chicago\",\"temp\":60,\"datestamp\":1643841600},{\"location\":\"New York\",\"temp\":77,\"datestamp\":1643856000},{\"location\":\"Los Angeles\",\"temp\":82,\"datestamp\":1643856000},{\"location\":\"Chicago\",\"temp\":64,\"datestamp\":1643856000},{\"location\":\"New York\",\"temp\":80,\"datestamp\":1643870400},{\"location\":\"Los Angeles\",\"temp\":84,\"datestamp\":1643870400},{\"location\":\"Chicago\",\"temp\":68,\"datestamp\":1643870400},{\"location\":\"New York\",\"temp\":83,\"datestamp\":1643884800},{\"location\":\"Los Angeles\",\"temp\":86,\"datestamp\":1643884800},{\"location\":\"Chicago\",\"temp\":72,\"datestamp\":1643884800},{\"location\":\"New York\",\"temp\":86,\"datestamp\":1643899200},{\"location\":\"Los Angeles\",\"temp\":88,\"datestamp\":1643899200},{\"location\":\"Chicago\",\"temp\":76,\"datestamp\":1643899200},{\"location\":\"New York\",\"temp\":89,\"datestamp\":1643913600},{\"location\":\"Los Angeles\",\"temp\":89,\"datestamp\":1643913600},{\"location\":\"Chicago\",\"temp\":80,\"datestamp\":1643913600},{\"location\":\"New York\",\"temp\":89,\"datestamp\":1643928000},{\"location\":\"Los Angeles\",\"temp\":88,\"datestamp\":1643928000},{\"location\":\"Chicago\",\"temp\":84,\"datestamp\":1643928000},{\"location\":\"New York\",\"temp\":86,\"datestamp\":1643942400},{\"location\":\"Los Angeles\",\"temp\":86,\"datestamp\":1643942400},{\"location\":\"Chicago\",\"temp\":88,\"datestamp\":1643942400},{\"location\":\"New York\",\"temp\":83,\"datestamp\":1643956800},{\"location\":\"Los Angeles\",\"temp\":84,\"datestamp\":1643956800},{\"location\":\"Chicago\",\"temp\":92,\"datestamp\":1643956800},{\"location\":\"New York\",\"temp\":79,\"datestamp\":1643971200},{\"location\":\"Los Angeles\",\"temp\":82,\"datestamp\":1643971200},{\"location\":\"Chicago\",\"temp\":96,\"datestamp\":1643971200},{\"location\":\"New York\",\"temp\":73,\"datestamp\":1643985600},{\"location\":\"Los Angeles\",\"temp\":80,\"datestamp\":1643985600},{\"location\":\"Chicago\",\"temp\":100,\"datestamp\":1643985600},{\"location\":\"New York\",\"temp\":66,\"datestamp\":1644000000},{\"location\":\"Los Angeles\",\"temp\":78,\"datestamp\":1644000000},{\"location\":\"Chicago\",\"temp\":96,\"datestamp\":1644000000},{\"location\":\"New York\",\"temp\":59,\"datestamp\":1644014400},{\"location\":\"Los Angeles\",\"temp\":76,\"datestamp\":1644014400},{\"location\":\"Chicago\",\"temp\":92,\"datestamp\":1644014400},{\"location\":\"New York\",\"temp\":53,\"datestamp\":1644028800},{\"location\":\"Los Angeles\",\"temp\":74,\"datestamp\":1644028800},{\"location\":\"Chicago\",\"temp\":88,\"datestamp\":1644028800},{\"location\":\"New York\",\"temp\":47,\"datestamp\":1644043200},{\"location\":\"Los Angeles\",\"temp\":72,\"datestamp\":1644043200},{\"location\":\"Chicago\",\"temp\":84,\"datestamp\":1644043200},{\"location\":\"New York\",\"temp\":42,\"datestamp\":1644057600},{\"location\":\"Los Angeles\",\"temp\":70,\"datestamp\":1644057600},{\"location\":\"Chicago\",\"temp\":80,\"datestamp\":1644057600},{\"location\":\"New York\",\"temp\":39,\"datestamp\":1644072000},{\"location\":\"Los Angeles\",\"temp\":68,\"datestamp\":1644072000},{\"location\":\"Chicago\",\"temp\":76,\"datestamp\":1644072000},{\"location\":\"New York\",\"temp\":37,\"datestamp\":1644086400},{\"location\":\"Los Angeles\",\"temp\":66,\"datestamp\":1644086400},{\"location\":\"Chicago\",\"temp\":72,\"datestamp\":1644086400},{\"location\":\"New York\",\"temp\":36,\"datestamp\":1644100800},{\"location\":\"Los Angeles\",\"temp\":64,\"datestamp\":1644100800},{\"location\":\"Chicago\",\"temp\":68,\"datestamp\":1644100800},{\"location\":\"New York\",\"temp\":37,\"datestamp\":1644115200},{\"location\":\"Los Angeles\",\"temp\":62,\"datestamp\":1644115200},{\"location\":\"Chicago\",\"temp\":64,\"datestamp\":1644115200}]", + "payload": "[{\"location\":\"New York\",\"temp\":56,\"datestamp\":1643784000000},{\"location\":\"Los Angeles\",\"temp\":67,\"datestamp\":1643784000000},{\"location\":\"Chicago\",\"temp\":44,\"datestamp\":1643784000000},{\"location\":\"New York\",\"temp\":60,\"datestamp\":1643798400000},{\"location\":\"Los Angeles\",\"temp\":71,\"datestamp\":1643798400000},{\"location\":\"Chicago\",\"temp\":48,\"datestamp\":1643798400000},{\"location\":\"New York\",\"temp\":65,\"datestamp\":1643812800000},{\"location\":\"Los Angeles\",\"temp\":74,\"datestamp\":1643812800000},{\"location\":\"Chicago\",\"temp\":52,\"datestamp\":1643812800000},{\"location\":\"New York\",\"temp\":69,\"datestamp\":1643827200000},{\"location\":\"Los Angeles\",\"temp\":77,\"datestamp\":1643827200000},{\"location\":\"Chicago\",\"temp\":56,\"datestamp\":1643827200000},{\"location\":\"New York\",\"temp\":73,\"datestamp\":1643841600000},{\"location\":\"Los Angeles\",\"temp\":80,\"datestamp\":1643841600000},{\"location\":\"Chicago\",\"temp\":60,\"datestamp\":1643841600000},{\"location\":\"New York\",\"temp\":77,\"datestamp\":1643856000000},{\"location\":\"Los Angeles\",\"temp\":82,\"datestamp\":1643856000000},{\"location\":\"Chicago\",\"temp\":64,\"datestamp\":1643856000000},{\"location\":\"New York\",\"temp\":80,\"datestamp\":1643870400000},{\"location\":\"Los Angeles\",\"temp\":84,\"datestamp\":1643870400000},{\"location\":\"Chicago\",\"temp\":68,\"datestamp\":1643870400},{\"location\":\"New York\",\"temp\":83,\"datestamp\":1643884800000},{\"location\":\"Los Angeles\",\"temp\":86,\"datestamp\":1643884800000},{\"location\":\"Chicago\",\"temp\":72,\"datestamp\":1643884800000},{\"location\":\"New York\",\"temp\":86,\"datestamp\":1643899200000},{\"location\":\"Los Angeles\",\"temp\":88,\"datestamp\":1643899200000},{\"location\":\"Chicago\",\"temp\":76,\"datestamp\":1643899200000},{\"location\":\"New York\",\"temp\":89,\"datestamp\":16439136000000},{\"location\":\"Los Angeles\",\"temp\":89,\"datestamp\":1643913600000},{\"location\":\"Chicago\",\"temp\":80,\"datestamp\":1643913600000},{\"location\":\"New York\",\"temp\":89,\"datestamp\":1643928000000},{\"location\":\"Los Angeles\",\"temp\":88,\"datestamp\":1643928000000},{\"location\":\"Chicago\",\"temp\":84,\"datestamp\":1643928000000},{\"location\":\"New York\",\"temp\":86,\"datestamp\":1643942400000},{\"location\":\"Los Angeles\",\"temp\":86,\"datestamp\":1643942400000},{\"location\":\"Chicago\",\"temp\":88,\"datestamp\":1643942400000},{\"location\":\"New York\",\"temp\":83,\"datestamp\":1643956800000},{\"location\":\"Los Angeles\",\"temp\":84,\"datestamp\":1643956800000},{\"location\":\"Chicago\",\"temp\":92,\"datestamp\":1643956800000},{\"location\":\"New York\",\"temp\":79,\"datestamp\":1643971200000},{\"location\":\"Los Angeles\",\"temp\":82,\"datestamp\":1643971200000},{\"location\":\"Chicago\",\"temp\":96,\"datestamp\":1643971200000},{\"location\":\"New York\",\"temp\":73,\"datestamp\":1643985600000},{\"location\":\"Los Angeles\",\"temp\":80,\"datestamp\":1643985600000},{\"location\":\"Chicago\",\"temp\":100,\"datestamp\":1643985600000},{\"location\":\"New York\",\"temp\":66,\"datestamp\":1644000000000000},{\"location\":\"Los Angeles\",\"temp\":78,\"datestamp\":1644000000000},{\"location\":\"Chicago\",\"temp\":96,\"datestamp\":1644000000000},{\"location\":\"New York\",\"temp\":59,\"datestamp\":1644014400000},{\"location\":\"Los Angeles\",\"temp\":76,\"datestamp\":1644014400000},{\"location\":\"Chicago\",\"temp\":92,\"datestamp\":1644014400000},{\"location\":\"New York\",\"temp\":53,\"datestamp\":1644028800000},{\"location\":\"Los Angeles\",\"temp\":74,\"datestamp\":1644028800000},{\"location\":\"Chicago\",\"temp\":88,\"datestamp\":1644028800000},{\"location\":\"New York\",\"temp\":47,\"datestamp\":1644043200000},{\"location\":\"Los Angeles\",\"temp\":72,\"datestamp\":1644043200000},{\"location\":\"Chicago\",\"temp\":84,\"datestamp\":1644043200000},{\"location\":\"New York\",\"temp\":42,\"datestamp\":1644057600000},{\"location\":\"Los Angeles\",\"temp\":70,\"datestamp\":1644057600000},{\"location\":\"Chicago\",\"temp\":80,\"datestamp\":1644057600000},{\"location\":\"New York\",\"temp\":39,\"datestamp\":1644072000000},{\"location\":\"Los Angeles\",\"temp\":68,\"datestamp\":1644072000000},{\"location\":\"Chicago\",\"temp\":76,\"datestamp\":1644072000000},{\"location\":\"New York\",\"temp\":37,\"datestamp\":1644086400000},{\"location\":\"Los Angeles\",\"temp\":66,\"datestamp\":1644086400000},{\"location\":\"Chicago\",\"temp\":72,\"datestamp\":1644086400000},{\"location\":\"New York\",\"temp\":36,\"datestamp\":1644100800000},{\"location\":\"Los Angeles\",\"temp\":64,\"datestamp\":1644100800000},{\"location\":\"Chicago\",\"temp\":68,\"datestamp\":1644100800000},{\"location\":\"New York\",\"temp\":37,\"datestamp\":1644115200000},{\"location\":\"Los Angeles\",\"temp\":62,\"datestamp\":1644115200000},{\"location\":\"Chicago\",\"temp\":64,\"datestamp\":1644115200000}]", "payloadType": "json", "topic": "topic", "topicType": "msg", diff --git a/cypress/tests/widgets/chart.spec.js b/cypress/tests/widgets/chart.spec.js index 29540744..2194a03d 100644 --- a/cypress/tests/widgets/chart.spec.js +++ b/cypress/tests/widgets/chart.spec.js @@ -8,44 +8,20 @@ describe('Node/-RED Dashboard 2.0 - Chart Widget', () => { cy.visit('/dashboard/page1') }) - it('renders charts with correct data', () => { + it('renders bar charts with correct data', () => { cy.get('#nrdb-ui-widget-bar-chart-1 > div > canvas').should('exist') - cy.get('#nrdb-ui-widget-line-chart-1 > div > canvas').should('exist') - cy.get('#nrdb-ui-widget-line-chart-2 > div > canvas').should('exist') - cy.get('#nrdb-ui-widget-scatter-chart-1 > div > canvas').should('exist') - // 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['bar-chart-1'] - const scatterChart = win.uiCharts['scatter-chart-1'] - const simpleLineChart = win.uiCharts['line-chart-1'] - const multiLineChart = win.uiCharts['line-chart-2'] should(barChart).is.not.empty() - cy.log('Bar Chart Data') - cy.log(barChart) - should(scatterChart).is.not.empty() - should(simpleLineChart).is.not.empty() - should(multiLineChart).is.not.empty() }) cy.clickAndWait(cy.get('button').contains('Button 1 (json)')) // bar chart - cy.clickAndWait(cy.get('button').contains('Button 2 (json)')) // scatter chart - cy.clickAndWait(cy.get('button').contains('Button 3 (number)')) // simple line chart (inject 3 times) - cy.wait(100) - cy.clickAndWait(cy.get('button').contains('Button 3 (number)')) - cy.wait(100) - cy.clickAndWait(cy.get('button').contains('Button 3 (number)')) - cy.clickAndWait(cy.get('button').contains('Button 4 (json)')) // multi-line chart // eslint-disable-next-line promise/catch-or-return, promise/always-return - cy.window().then(win => { - should(win.uiCharts).is.not.empty() + cy.window().then((win) => { const barChart = win.uiCharts['bar-chart-1'] - const scatterChart = win.uiCharts['scatter-chart-1'] - const simpleLineChart = win.uiCharts['line-chart-1'] - const multiLineChart = win.uiCharts['line-chart-2'] - // Bar chart should(barChart.chart.config.data).be.an.Object() should(barChart.chart.config.data.datasets).be.an.Array() @@ -60,19 +36,34 @@ describe('Node/-RED Dashboard 2.0 - Chart Widget', () => { checkBarElement(2, { category: 'Chicago', location: 'Chicago', sales_millions: 1.8 }) checkBarElement(3, { category: 'Houston', location: 'Houston', sales_millions: 2.9 }) checkBarElement(4, { category: 'Miami', location: 'Miami', sales_millions: 2.1 }) + }) + }) - // Scatter chart - // scatter data [{"x":1,"y":2},{"x":3,"y":4},{"x":5.5,"y":6.6}] - should(scatterChart.chart.config.data.datasets).be.an.Array().and.have.length(1) - should(scatterChart.chart.config.data.datasets[0].data).be.an.Array().and.have.length(3) - should(scatterChart.chart.config.data.datasets[0].data[0]).have.property('x', 1) - should(scatterChart.chart.config.data.datasets[0].data[0]).have.property('y', 2) - should(scatterChart.chart.config.data.datasets[0].data[1]).have.property('x', 3) - should(scatterChart.chart.config.data.datasets[0].data[1]).have.property('y', 4) - should(scatterChart.chart.config.data.datasets[0].data[2]).have.property('x', 5.5) - should(scatterChart.chart.config.data.datasets[0].data[2]).have.property('y', 6.6) - // TODO: check other properties relevant to the nodes config (like axis labels, ledgend yes/no etc) + it('renders line charts with correct data', () => { + cy.get('#nrdb-ui-widget-line-chart-1 > div > canvas').should('exist') + cy.get('#nrdb-ui-widget-line-chart-2 > div > canvas').should('exist') + // eslint-disable-next-line promise/catch-or-return, promise/always-return + cy.window().then(win => { + should(win.uiCharts).is.not.empty() + const simpleLineChart = win.uiCharts['line-chart-1'] + const multiLineChart = win.uiCharts['line-chart-2'] + should(simpleLineChart).is.not.empty() + should(multiLineChart).is.not.empty() + }) + // simple line chart (inject 3 times) + cy.clickAndWait(cy.get('button').contains('Button 3 (number)')) + cy.wait(100) + cy.clickAndWait(cy.get('button').contains('Button 3 (number)')) + cy.wait(100) + cy.clickAndWait(cy.get('button').contains('Button 3 (number)')) + // multi-line chart + cy.clickAndWait(cy.get('button').contains('Button 4 (json)')) + + // eslint-disable-next-line promise/catch-or-return, promise/always-return + cy.window().then(win => { + const simpleLineChart = win.uiCharts['line-chart-1'] + const multiLineChart = win.uiCharts['line-chart-2'] // simple line chart should(simpleLineChart.chart.config.data.datasets).be.an.Array().and.have.length(1) should(simpleLineChart.chart.config.data.datasets[0].data).be.an.Array().and.have.length(3) @@ -86,7 +77,7 @@ describe('Node/-RED Dashboard 2.0 - Chart Widget', () => { // multi line chart: uses a copy of the data from the chart fixture for the test // eslint-disable-next-line comma-spacing, quote-props, key-spacing, quotes, object-curly-spacing - const data = [{"location":"New York","temp":56,"datestamp":1643784000},{"location":"Los Angeles","temp":67,"datestamp":1643784000},{"location":"Chicago","temp":44,"datestamp":1643784000},{"location":"New York","temp":60,"datestamp":1643798400},{"location":"Los Angeles","temp":71,"datestamp":1643798400},{"location":"Chicago","temp":48,"datestamp":1643798400},{"location":"New York","temp":65,"datestamp":1643812800},{"location":"Los Angeles","temp":74,"datestamp":1643812800},{"location":"Chicago","temp":52,"datestamp":1643812800},{"location":"New York","temp":69,"datestamp":1643827200},{"location":"Los Angeles","temp":77,"datestamp":1643827200},{"location":"Chicago","temp":56,"datestamp":1643827200},{"location":"New York","temp":73,"datestamp":1643841600},{"location":"Los Angeles","temp":80,"datestamp":1643841600},{"location":"Chicago","temp":60,"datestamp":1643841600},{"location":"New York","temp":77,"datestamp":1643856000},{"location":"Los Angeles","temp":82,"datestamp":1643856000},{"location":"Chicago","temp":64,"datestamp":1643856000},{"location":"New York","temp":80,"datestamp":1643870400},{"location":"Los Angeles","temp":84,"datestamp":1643870400},{"location":"Chicago","temp":68,"datestamp":1643870400},{"location":"New York","temp":83,"datestamp":1643884800},{"location":"Los Angeles","temp":86,"datestamp":1643884800},{"location":"Chicago","temp":72,"datestamp":1643884800},{"location":"New York","temp":86,"datestamp":1643899200},{"location":"Los Angeles","temp":88,"datestamp":1643899200},{"location":"Chicago","temp":76,"datestamp":1643899200},{"location":"New York","temp":89,"datestamp":1643913600},{"location":"Los Angeles","temp":89,"datestamp":1643913600},{"location":"Chicago","temp":80,"datestamp":1643913600},{"location":"New York","temp":89,"datestamp":1643928000},{"location":"Los Angeles","temp":88,"datestamp":1643928000},{"location":"Chicago","temp":84,"datestamp":1643928000},{"location":"New York","temp":86,"datestamp":1643942400},{"location":"Los Angeles","temp":86,"datestamp":1643942400},{"location":"Chicago","temp":88,"datestamp":1643942400},{"location":"New York","temp":83,"datestamp":1643956800},{"location":"Los Angeles","temp":84,"datestamp":1643956800},{"location":"Chicago","temp":92,"datestamp":1643956800},{"location":"New York","temp":79,"datestamp":1643971200},{"location":"Los Angeles","temp":82,"datestamp":1643971200},{"location":"Chicago","temp":96,"datestamp":1643971200},{"location":"New York","temp":73,"datestamp":1643985600},{"location":"Los Angeles","temp":80,"datestamp":1643985600},{"location":"Chicago","temp":100,"datestamp":1643985600},{"location":"New York","temp":66,"datestamp":1644000000},{"location":"Los Angeles","temp":78,"datestamp":1644000000},{"location":"Chicago","temp":96,"datestamp":1644000000},{"location":"New York","temp":59,"datestamp":1644014400},{"location":"Los Angeles","temp":76,"datestamp":1644014400},{"location":"Chicago","temp":92,"datestamp":1644014400},{"location":"New York","temp":53,"datestamp":1644028800},{"location":"Los Angeles","temp":74,"datestamp":1644028800},{"location":"Chicago","temp":88,"datestamp":1644028800},{"location":"New York","temp":47,"datestamp":1644043200},{"location":"Los Angeles","temp":72,"datestamp":1644043200},{"location":"Chicago","temp":84,"datestamp":1644043200},{"location":"New York","temp":42,"datestamp":1644057600},{"location":"Los Angeles","temp":70,"datestamp":1644057600},{"location":"Chicago","temp":80,"datestamp":1644057600},{"location":"New York","temp":39,"datestamp":1644072000},{"location":"Los Angeles","temp":68,"datestamp":1644072000},{"location":"Chicago","temp":76,"datestamp":1644072000},{"location":"New York","temp":37,"datestamp":1644086400},{"location":"Los Angeles","temp":66,"datestamp":1644086400},{"location":"Chicago","temp":72,"datestamp":1644086400},{"location":"New York","temp":36,"datestamp":1644100800},{"location":"Los Angeles","temp":64,"datestamp":1644100800},{"location":"Chicago","temp":68,"datestamp":1644100800},{"location":"New York","temp":37,"datestamp":1644115200},{"location":"Los Angeles","temp":62,"datestamp":1644115200},{"location":"Chicago","temp":64,"datestamp":1644115200}] + const data = [{"location":"New York","temp":56,"datestamp":1643784000000},{"location":"Los Angeles","temp":67,"datestamp":1643784000000},{"location":"Chicago","temp":44,"datestamp":1643784000000},{"location":"New York","temp":60,"datestamp":1643798400000},{"location":"Los Angeles","temp":71,"datestamp":1643798400000},{"location":"Chicago","temp":48,"datestamp":1643798400000},{"location":"New York","temp":65,"datestamp":1643812800000},{"location":"Los Angeles","temp":74,"datestamp":1643812800000},{"location":"Chicago","temp":52,"datestamp":1643812800000},{"location":"New York","temp":69,"datestamp":1643827200000},{"location":"Los Angeles","temp":77,"datestamp":1643827200000},{"location":"Chicago","temp":56,"datestamp":1643827200000},{"location":"New York","temp":73,"datestamp":1643841600000},{"location":"Los Angeles","temp":80,"datestamp":1643841600000},{"location":"Chicago","temp":60,"datestamp":1643841600000},{"location":"New York","temp":77,"datestamp":1643856000000},{"location":"Los Angeles","temp":82,"datestamp":1643856000000},{"location":"Chicago","temp":64,"datestamp":1643856000000},{"location":"New York","temp":80,"datestamp":1643870400000},{"location":"Los Angeles","temp":84,"datestamp":1643870400000},{"location":"Chicago","temp":68,"datestamp":1643870400},{"location":"New York","temp":83,"datestamp":1643884800000},{"location":"Los Angeles","temp":86,"datestamp":1643884800000},{"location":"Chicago","temp":72,"datestamp":1643884800000},{"location":"New York","temp":86,"datestamp":1643899200000},{"location":"Los Angeles","temp":88,"datestamp":1643899200000},{"location":"Chicago","temp":76,"datestamp":1643899200000},{"location":"New York","temp":89,"datestamp":16439136000000},{"location":"Los Angeles","temp":89,"datestamp":1643913600000},{"location":"Chicago","temp":80,"datestamp":1643913600000},{"location":"New York","temp":89,"datestamp":1643928000000},{"location":"Los Angeles","temp":88,"datestamp":1643928000000},{"location":"Chicago","temp":84,"datestamp":1643928000000},{"location":"New York","temp":86,"datestamp":1643942400000},{"location":"Los Angeles","temp":86,"datestamp":1643942400000},{"location":"Chicago","temp":88,"datestamp":1643942400000},{"location":"New York","temp":83,"datestamp":1643956800000},{"location":"Los Angeles","temp":84,"datestamp":1643956800000},{"location":"Chicago","temp":92,"datestamp":1643956800000},{"location":"New York","temp":79,"datestamp":1643971200000},{"location":"Los Angeles","temp":82,"datestamp":1643971200000},{"location":"Chicago","temp":96,"datestamp":1643971200000},{"location":"New York","temp":73,"datestamp":1643985600000},{"location":"Los Angeles","temp":80,"datestamp":1643985600000},{"location":"Chicago","temp":100,"datestamp":1643985600000},{"location":"New York","temp":66,"datestamp":1644000000000000},{"location":"Los Angeles","temp":78,"datestamp":1644000000000},{"location":"Chicago","temp":96,"datestamp":1644000000000},{"location":"New York","temp":59,"datestamp":1644014400000},{"location":"Los Angeles","temp":76,"datestamp":1644014400000},{"location":"Chicago","temp":92,"datestamp":1644014400000},{"location":"New York","temp":53,"datestamp":1644028800000},{"location":"Los Angeles","temp":74,"datestamp":1644028800000},{"location":"Chicago","temp":88,"datestamp":1644028800000},{"location":"New York","temp":47,"datestamp":1644043200000},{"location":"Los Angeles","temp":72,"datestamp":1644043200000},{"location":"Chicago","temp":84,"datestamp":1644043200000},{"location":"New York","temp":42,"datestamp":1644057600000},{"location":"Los Angeles","temp":70,"datestamp":1644057600000},{"location":"Chicago","temp":80,"datestamp":1644057600000},{"location":"New York","temp":39,"datestamp":1644072000000},{"location":"Los Angeles","temp":68,"datestamp":1644072000000},{"location":"Chicago","temp":76,"datestamp":1644072000000},{"location":"New York","temp":37,"datestamp":1644086400000},{"location":"Los Angeles","temp":66,"datestamp":1644086400000},{"location":"Chicago","temp":72,"datestamp":1644086400000},{"location":"New York","temp":36,"datestamp":1644100800000},{"location":"Los Angeles","temp":64,"datestamp":1644100800000},{"location":"Chicago","temp":68,"datestamp":1644100800000},{"location":"New York","temp":37,"datestamp":1644115200000},{"location":"Los Angeles","temp":62,"datestamp":1644115200000},{"location":"Chicago","temp":64,"datestamp":1644115200000}] const locNY = data.filter((d) => d.location === 'New York') const locLA = data.filter((d) => d.location === 'Los Angeles') const locCH = data.filter((d) => d.location === 'Chicago') @@ -114,92 +105,32 @@ describe('Node/-RED Dashboard 2.0 - Chart Widget', () => { checkMultiLineElement(dataSetCH, locCH) }) }) -}) - -describe('Node/-RED Dashboard 2.0 - Chart - Data Sets', () => { - it('renders charts correctly when "series" is set to a JSON array', () => { - cy.deployFixture('dashboard-chart-series-json') - cy.visit('/dashboard/page1') - - cy.get('#nrdb-ui-widget-bar-chart-finance > div > canvas').should('exist') - cy.clickAndWait(cy.get('button').contains('Load Finance Data')) // bar chart + it('renders scatter charts with correct data', () => { + cy.get('#nrdb-ui-widget-scatter-chart-1 > div > canvas').should('exist') // 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['bar-chart-finance'] - - // Bar chart - should(barChart.chart.config.data).be.an.Object() - should(barChart.chart.config.data.datasets).be.an.Array() - - function checkSeries (dataset, label, values) { - should(dataset).have.property('label', label) - const array = dataset.data - should(array).be.an.Array().and.have.length(values.length) - for (let i = 0; i < array.length; i++) { - should(array[i]).have.property('x', values[i][0]) - should(array[i]).have.property('y', values[i][1]) - } - } - - // Check Series Datasets - checkSeries(barChart.chart.config.data.datasets[0], 'Q1', [[2021, 115], [2022, 170], [2023, 86]]) - checkSeries(barChart.chart.config.data.datasets[1], 'Q2', [[2021, 207], [2022, 200], [2023, 140]]) - checkSeries(barChart.chart.config.data.datasets[2], 'Q3', [[2021, 198], [2022, 230], [2023, 180]]) - checkSeries(barChart.chart.config.data.datasets[3], 'Q4', [[2021, 163], [2022, 210], [2023, 138]]) + const scatterChart = win.uiCharts['scatter-chart-1'] + should(scatterChart).is.not.empty() }) - }) - it('renders charts correctly when x is set to "timestamp"', () => { - cy.deployFixture('dashboard-chart-timestamp') - cy.visit('/dashboard/page1') - - // new (from 1.18.1) - cy.get('#nrdb-ui-widget-line-chart-timestamp > div > canvas').should('exist') - - // legacy charts pre 1.18.1, which rendered time when xAxisProperty was empty - cy.get('#nrdb-ui-widget-line-chart-empty-xProp > div > canvas').should('exist') - - // Clear both charts - cy.clickAndWait(cy.get('button').contains('Button - Clear')) - - // Add 3 data points to BOTH charts, 200 milliseconds apart - cy.clickAndWait(cy.get('button').contains('Button - Number'), 200) - cy.clickAndWait(cy.get('button').contains('Button - Number'), 200) - cy.clickAndWait(cy.get('button').contains('Button - Number'), 200) + cy.clickAndWait(cy.get('button').contains('Button 2 (json)')) // scatter chart // eslint-disable-next-line promise/catch-or-return, promise/always-return cy.window().then(win => { - should(win.uiCharts).is.not.empty() - const timestampXChart = win.uiCharts['line-chart-timestamp'] - const emptyXChart = win.uiCharts['line-chart-empty-xProp'] - - // New Charts - should(timestampXChart.chart.config.data).be.an.Object() - should(timestampXChart.chart.config.data.datasets).be.an.Array() - - // Legacy Charts - should(emptyXChart.chart.config.data).be.an.Object() - should(emptyXChart.chart.config.data.datasets).be.an.Array() - - // Check data populated correctly - // New Charts - should(timestampXChart.chart.config.data.datasets[0].data).be.an.Array().and.have.length(3) - - // Legacy Charts - should(emptyXChart.chart.config.data.datasets[0].data).be.an.Array().and.have.length(3) - // loop over the three data points - // eslint-disable-next-line promise/always-return - for (let i = 0; i < 3; i++) { - // New Charts - should(timestampXChart.chart.config.data.datasets[0].data[i]).have.property('x') - should(timestampXChart.chart.config.data.datasets[0].data[i]).have.property('y', 2) - // Legacy Charts - should(emptyXChart.chart.config.data.datasets[0].data[i]).have.property('x') - should(emptyXChart.chart.config.data.datasets[0].data[i]).have.property('y', 2) - } + // Scatter chart + const scatterChart = win.uiCharts['scatter-chart-1'] + // scatter data [{"x":1,"y":2},{"x":3,"y":4},{"x":5.5,"y":6.6}] + should(scatterChart.chart.config.data.datasets).be.an.Array().and.have.length(1) + should(scatterChart.chart.config.data.datasets[0].data).be.an.Array().and.have.length(3) + should(scatterChart.chart.config.data.datasets[0].data[0]).have.property('x', 1) + should(scatterChart.chart.config.data.datasets[0].data[0]).have.property('y', 2) + should(scatterChart.chart.config.data.datasets[0].data[1]).have.property('x', 3) + should(scatterChart.chart.config.data.datasets[0].data[1]).have.property('y', 4) + should(scatterChart.chart.config.data.datasets[0].data[2]).have.property('x', 5.5) + should(scatterChart.chart.config.data.datasets[0].data[2]).have.property('y', 6.6) }) }) }) diff --git a/nodes/widgets/ui_chart.js b/nodes/widgets/ui_chart.js index 1b426421..52f88313 100644 --- a/nodes/widgets/ui_chart.js +++ b/nodes/widgets/ui_chart.js @@ -36,6 +36,25 @@ module.exports = function (RED) { return value } + /** + * Given the config of the chart, clear "old" data points + */ + function clearOldPoints () { + const removeOlder = parseFloat(config.removeOlder) + const removeOlderUnit = parseFloat(config.removeOlderUnit) + const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago + const cutoff = (new Date()).getTime() - ago + const _msg = datastore.get(node.id).filter((msg) => { + let timestamp = msg._datapoint.x + // is x already a millisecond timestamp? + if (typeof (msg._datapoint.x) === 'string') { + timestamp = (new Date(msg._datapoint.x)).getTime() + } + return timestamp > cutoff + }) + datastore.save(base, node, _msg) + } + // ensure sane defaults if (!['msg', 'str', 'property', 'timestamp'].includes(config.xAxisPropertyType)) { config.xAxisPropertyType = 'timestamp' // default to 'timestamp' @@ -205,22 +224,8 @@ module.exports = function (RED) { if (config.xAxisType === 'time' && config.removeOlder && config.removeOlderUnit) { // remove any points older than the specified time - const removeOlder = parseFloat(config.removeOlder) - const removeOlderUnit = parseFloat(config.removeOlderUnit) - const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago - const cutoff = (new Date()).getTime() - ago - const _msg = datastore.get(node.id).filter((msg) => { - let timestamp = msg._datapoint.x - // is x already a millisecond timestamp? - if (typeof (msg._datapoint.x) === 'string') { - timestamp = (new Date(msg._datapoint.x)).getTime() - } - return timestamp > cutoff - }) - datastore.save(base, node, _msg) + clearOldPoints() } - - // check sizing limits } send(msg) diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue index 6503480e..a9b5283a 100644 --- a/ui/src/widgets/ui-chart/UIChart.vue +++ b/ui/src/widgets/ui-chart/UIChart.vue @@ -544,13 +544,13 @@ export default { } // apply data limitations to the chart - if (points && this.chart.data.datasets.length > 0) { + if ((cutoff || points) && this.chart.data.datasets.length > 0) { for (let i = 0; i < this.chart.data.datasets.length; i++) { const length = this.chart.data.datasets[i].data.length this.chart.data.datasets[i].data = this.chart.data.datasets[i].data.filter((d, i) => { if (cutoff && d.x < cutoff) { return false - } else if (i < length - points) { + } else if (points && (i < length - points)) { return false } return true