Skip to content

Commit

Permalink
Merge pull request #1357 from FlowFuse/1339-histogram
Browse files Browse the repository at this point in the history 
Chart - New Type: Histogram
  • Loading branch information
@Steve-Mcl
Steve-Mcl authored Oct 10, 2024
2 parents f167e59 + a7eb95f commit 4a3514b
Show file tree
Hide file tree
Showing 14 changed files with 1,584 additions and 24 deletions.
452 changes: 452 additions & 0 deletions cypress/fixtures/flows/dashboard-chart-histogram.json
View file

Large diffs are not rendered by default.

125 changes: 125 additions & 0 deletions cypress/tests/widgets/chart-histogram.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
/// <reference types="cypress" />
import should from 'should'

/* eslint-disable cypress/no-unnecessary-waiting */
describe('Node-RED Dashboard 2.0 - Chart - Type: Histogram', () => {
beforeEach(() => {
cy.deployFixture('dashboard-chart-histogram')
cy.visit('/dashboard/page1')
})

it('renders charts with correct data with a "Categorical" x-axis type', () => {
cy.get('#nrdb-ui-widget-dashboard-ui-chart-histogram-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 histogram = win.uiCharts['dashboard-ui-chart-histogram-1']
should(histogram).is.not.empty()
})

// clear chart first
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-clear-chart')) // Clear Chart
// Add data - Series 1 - 3 x A, 1 x B, 2 x C
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series1-A')) // A - Series 1
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series1-A')) // A - Series 1
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series1-A')) // A - Series 1
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series1-B')) // B - Series 1
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series1-C')) // C - Series 1
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series1-C')) // C - Series 1

// Add data - Series 2 - 2 x A, 3 x B, 1 x C
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series2-A')) // C - Series 2
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series2-A')) // C - Series 2
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series2-B')) // C - Series 2
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series2-B')) // C - Series 2
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series2-B')) // C - Series 2
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-series2-C')) // C - Series 2

// eslint-disable-next-line promise/catch-or-return, promise/always-return
cy.window().then(win => {
should(win.uiCharts).is.not.empty()
const histogram = win.uiCharts['dashboard-ui-chart-histogram-1']

// Check Data for Histogram
should(histogram.chart.config.data).be.an.Object()
should(histogram.chart.config.data.datasets).be.an.Array()

cy.log('Histogram 1 Data')
cy.log(histogram.chart.config.data)

// 3 categories on the x-axis
should(histogram.chart.config.data.labels).be.an.Array().and.have.length(3)
should(histogram.chart.config.data.labels[0]).be.equal('A')
should(histogram.chart.config.data.labels[1]).be.equal('B')
should(histogram.chart.config.data.labels[2]).be.equal('C')

// Two Series of Data
should(histogram.chart.config.data.datasets).be.an.Array().and.have.length(2)
should(histogram.chart.config.data.datasets[0].label).be.equal('Series 1')
should(histogram.chart.config.data.datasets[1].label).be.equal('Series 2')

// Check Series 1
should(histogram.chart.config.data.datasets[0].data).be.an.Array().and.have.length(3)
should(histogram.chart.config.data.datasets[0].data[0]).be.equal(3)
should(histogram.chart.config.data.datasets[0].data[1]).be.equal(1)
should(histogram.chart.config.data.datasets[0].data[2]).be.equal(2)

// Check Series 2
should(histogram.chart.config.data.datasets[1].data).be.an.Array().and.have.length(3)
should(histogram.chart.config.data.datasets[1].data[0]).be.equal(2)
should(histogram.chart.config.data.datasets[1].data[1]).be.equal(3)
should(histogram.chart.config.data.datasets[1].data[2]).be.equal(1)
})
})

it('renders charts with correct data with a "Bins" x-axis type', () => {
cy.get('#nrdb-ui-widget-dashboard-ui-chart-histogram-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 histogram = win.uiCharts['dashboard-ui-chart-histogram-2']
should(histogram).is.not.empty()
})

// Load the data
cy.clickAndWait(cy.get('#nrdb-ui-widget-dashboard-ui-button-load-bins'))

// eslint-disable-next-line promise/catch-or-return, promise/always-return
cy.window().then(win => {
should(win.uiCharts).is.not.empty()
const histogram = win.uiCharts['dashboard-ui-chart-histogram-2']

// Check Data for Histogram
should(histogram.chart.config.data).be.an.Object()
should(histogram.chart.config.data.datasets).be.an.Array()

// 10 bins on the x-axis
should(histogram.chart.config.data.labels).be.an.Array().and.have.length(10)

// 4 Datasets
should(histogram.chart.config.data.datasets).be.an.Array().and.have.length(4)

function checkArray (array, values) {
should(array).be.an.Array().and.have.length(values.length)
for (let i = 0; i < array.length; i++) {
should(array[i]).be.equal(values[i])
}
}

// Check all datasets
should(histogram.chart.config.data.datasets[0].label).be.equal('2.1.3')
checkArray(histogram.chart.config.data.datasets[0].data, [0, 0, 0, 0, 0, 1, 0, 0, 0, 4])

should(histogram.chart.config.data.datasets[1].label).be.equal('2.4.5')
checkArray(histogram.chart.config.data.datasets[1].data, [0, 0, 1, 1, 0, 0, 1, 0, 0, 2])

should(histogram.chart.config.data.datasets[2].label).be.equal('2.6.7')
checkArray(histogram.chart.config.data.datasets[2].data, [0, 1, 1, 1, 0, 0, 1, 0, 0, 1])

should(histogram.chart.config.data.datasets[3].label).be.equal('2.8.9')
checkArray(histogram.chart.config.data.datasets[3].data, [0, 0, 0, 0, 0, 1, 0, 1, 1, 2])
})
})
})
156 changes: 156 additions & 0 deletions docs/examples/chart-histogram-bins.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
[
{
"id": "df07df47734f792e",
"type": "ui-slider",
"z": "28aca5b1020ec1a4",
"group": "ef4891074978d31b",
"name": "",
"label": "slider",
"tooltip": "",
"order": 11,
"width": 0,
"height": 0,
"passthru": false,
"outs": "all",
"topic": "topic",
"topicType": "msg",
"thumbLabel": "true",
"showTicks": "always",
"min": 0,
"max": 10,
"step": 1,
"className": "",
"iconPrepend": "",
"iconAppend": "",
"color": "",
"colorTrack": "",
"colorThumb": "",
"x": 120,
"y": 40,
"wires": [
[
"88a1f34f43c4b907"
]
]
},
{
"id": "88a1f34f43c4b907",
"type": "ui-chart",
"z": "28aca5b1020ec1a4",
"group": "ef4891074978d31b",
"name": "Histogram",
"label": "Slider Histogram",
"order": 10,
"chartType": "histogram",
"category": "",
"categoryType": "none",
"xAxisLabel": "Slider Values",
"xAxisProperty": "payload",
"xAxisPropertyType": "msg",
"xAxisType": "bins",
"xAxisFormat": "",
"xAxisFormatType": "auto",
"yAxisLabel": "Frequency",
"yAxisProperty": "earnings",
"xmin": "0",
"xmax": "10",
"ymin": "0",
"ymax": "25",
"bins": "5",
"action": "append",
"stackSeries": true,
"pointShape": "circle",
"pointRadius": 4,
"showLegend": true,
"removeOlder": 1,
"removeOlderUnit": "3600",
"removeOlderPoints": "",
"colors": [
"#0095ff",
"#ff0000",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#ff00bb",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": "6",
"height": "8",
"className": "",
"x": 240,
"y": 40,
"wires": [
[]
]
},
{
"id": "ef4891074978d31b",
"type": "ui-group",
"name": "Histograms",
"page": "d0621b8f20aee671",
"width": "6",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "d0621b8f20aee671",
"type": "ui-page",
"name": "Charts",
"ui": "c2e1aa56f50f03bd",
"path": "/charts",
"icon": "home",
"layout": "notebook",
"theme": "5075a7d8e4947586",
"order": 33,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "c2e1aa56f50f03bd",
"type": "ui-base",
"name": "Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-control",
"ui-notification"
],
"showPathInSidebar": false,
"showPageTitle": false,
"navigationStyle": "icon",
"titleBarStyle": "default"
},
{
"id": "5075a7d8e4947586",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
Loading

0 comments on commit 4a3514b

Please sign in to comment.