@flowfuse/node-red-dashboard 0.7.1 → 0.7.2-1aface9-202311080934.0

package/nodes/config/locales/en-US/ui_base.json

@@ -7,6 +7,7 @@
         "layout": {
             "pages": "Pages",
             "edit": "Edit",
+            "focus": "Focus",
             "collapse": "Collapse",
             "expand": "Expand"
         },

package/nodes/config/ui_base.html

@@ -79,6 +79,8 @@
     .nrdb2-sb-list-header-button-group {
         position: absolute;
         right: 1rem;
+        display: flex;
+        gap: 4px;
     }
     .nrdb2-sb-list-header-button-group,
     .nrdb2-sb-list-handle {
@@ -110,7 +112,7 @@
 
     // convert to i18 text
     function c_ (x) {
-        return RED._('@flowforge/node-red-dashboard/ui-base:ui-base.' + x)
+        return RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.' + x)
     }
 
     function hasProperty (obj, prop) {
@@ -258,10 +260,19 @@
      * @param {Object} row - The page/group/widget that these actions are bound to
      */
     function addRowActions (row, item) {
+        const configNodes = ['ui-base', 'ui-page', 'ui-group']
         const btnGroup = $('<div>', { class: 'nrdb2-sb-list-header-button-group', id: item.id }).appendTo(row)
-        const editButton = $('<a href="#" class="nr-db-sb-tab-edit-button editor-button  editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> ' + c_('layout.edit') + '</a>').appendTo(btnGroup)
+        if (!configNodes.includes(item.type)) {
+            const focusButton = $('<a href="#" class="nr-db-sb-tab-focus-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-bullseye"></i> ' + c_('layout.focus') + '</a>').appendTo(btnGroup)
+            focusButton.on('click', function (evt) {
+                RED.view.reveal(item.id)
+                evt.stopPropagation()
+                evt.preventDefault()
+            })
+        }
+        const editButton = $('<a href="#" class="nr-db-sb-tab-edit-button editor-button editor-button-small nr-db-sb-list-header-button"><i class="fa fa-pencil"></i> ' + c_('layout.edit') + '</a>').appendTo(btnGroup)
         editButton.on('click', function (evt) {
-            if (item.type === 'ui-page' || item.type === 'ui-group') {
+            if (configNodes.includes(item.type)) {
                 RED.editor.editConfig('', item.type, item.id)
             } else {
                 RED.editor.edit(item)
@@ -348,8 +359,8 @@
                 const titleRow = $('<div>', { class: 'nrdb2-sb-list-header nrdb2-sb-widgets-list-header' }).appendTo(container)
                 $('<i class="nrdb2-sb-list-handle nrdb2-sb-widget-list-handle fa fa-bars"></i>').appendTo(titleRow)
 
-                const groupicon = 'fa-image'
-                $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon fa ' + groupicon }).appendTo(titleRow)
+                const widgeticon = 'fa-image'
+                $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon fa ' + widgeticon }).appendTo(titleRow)
                 $('<span>', { class: 'nrdb2-sb-title' }).text(widget.name || widget.label || widget.type || widget.id).appendTo(titleRow)
 
                 addRowActions(titleRow, widget)
@@ -572,7 +583,7 @@
         pinned: true,
         disableOnEdit: true,
         iconClass: 'fa fa-bar-chart',
-        action: '@flowforge/node-red-dashboard:show-dashboard-2.0-tab',
+        action: '@flowfuse/node-red-dashboard:show-dashboard-2.0-tab',
         onchange: function () {
             sidebar.empty()
             RED.nodes.eachConfig(function (n) {
@@ -586,8 +597,8 @@
         }
     })
 
-    RED.actions.add('@flowforge/node-red-dashboard:show-dashboard-2.0-tab', function () {
-        RED.sidebar.show('flowforge-nr-tools')
+    RED.actions.add('@flowfuse/node-red-dashboard:show-dashboard-2.0-tab', function () {
+        RED.sidebar.show('flowfuse-nr-tools')
     })
 
     /**
@@ -597,7 +608,7 @@
         _create: function () {
             // convert to i18 text
             function c_ (x) {
-                return RED._(`@flowforge/node-red-dashboard/ui-base:ui-base.${x}`)
+                return RED._(`@flowfuse/node-red-dashboard/ui-base:ui-base.${x}`)
             }
 
             const thisWidget = this

package/nodes/config/ui_page.js

@@ -21,12 +21,18 @@ module.exports = function (RED) {
         node.register = function (group, widgetNode, widgetConfig, widgetEvents) {
             const ui = RED.nodes.getNode(config.ui)
             const page = config
-            ui.register(page, group, widgetNode, widgetConfig, widgetEvents)
+            if (ui) {
+                ui.register(page, group, widgetNode, widgetConfig, widgetEvents)
+            } else {
+                node.error(`Error registering Widget - ${widgetNode.name || widgetNode.id}. No parent ui-base node found for ui-page node: ${(page.name || page.id)}`)
+            }
         }
         node.deregister = function (group, widgetNode) {
             const ui = RED.nodes.getNode(config.ui)
             const page = config
-            ui.deregister(page, group, widgetNode)
+            if (ui) {
+                ui.deregister(page, group, widgetNode)
+            }
         }
     }
     RED.nodes.registerType('ui-page', UIPageNode)

package/nodes/widgets/locales/en-US/ui_chart.html

@@ -16,7 +16,7 @@
         </dd>
         <dt>Properties <span class="property-type">string</span></dt>
         <dd>
-            <p><b>Series:</b> Controls how you want to set the Series of data stream into this widget. The default is <code>msg.topic</code>, where separate topics will render to a new line/bar in their respective plots.</p>
+            <p><b>Series:</b> Controls how you want to set the Series of data stream into this widget. The default is <code>msg.topic</code>, where separate topics will render to a new line/bar in their respective plots. You can also provide a JSON array, which will plot multiple data points from a single msg object.</p>
             <p><b>X:</b> Only available for Line & Scatter Charts. This defines the key (which can be nested) of the value that should be plotted onto the x-axis. If left blank, the x-value will be calculated as the current timestamp.</p>
             <p><b>Y:</b> Defines the key (which can be nested, e.g. <code>'nested.value'</code>) of the value that should be plotted onto the x-axis. This value is ignored if injecting single numerical values into the chart.</p>
         </dd>

package/nodes/widgets/ui_chart.html

@@ -130,7 +130,7 @@
                 $('#node-input-category').typedInput({
                     default: 'msg',
                     typeField: $('#node-input-categoryType'),
-                    types: ['msg', 'str', propertyType]
+                    types: ['msg', 'str', 'json', propertyType]
                 })
                 $('#node-input-xAxisProperty').typedInput({
                     default: propertyType.value,
@@ -178,6 +178,18 @@
                         $('#x-axis-show').hide()
                     }
                 })
+    
+                // handle event when chart's type is changed
+                $('#node-input-category').change((evt) => {
+                    const categoryType = $('#node-input-categoryType').val()
+
+                    if (categoryType === 'json') {
+                        // hide y-axis proepty setting as category will now control that
+                        $('#node-container-yAxisProperty').hide()
+                    } else {
+                        $('#node-container-yAxisProperty').show()
+                    }
+                })
 
                 // Series Color Pickers
                 const setColor = function (id, value) {

package/nodes/widgets/ui_chart.js

@@ -21,6 +21,8 @@ module.exports = function (RED) {
         }
 
         const evts = {
+            // beforeSend will run before messages are sent client-side, as well as before sending on within Node-RED
+            // here, we use it to pre-process chart data to format it ready for plotting
             beforeSend: function (msg) {
                 const p = msg.payload
 
@@ -46,7 +48,19 @@ module.exports = function (RED) {
                         })
                     } else {
                         // single point
-                        msg._datapoint = addToLine(p, series)
+                        if (config.categoryType === 'json') {
+                            // we can produce multiple datapoints from a single object/value here
+                            const points = []
+                            series.forEach((s) => {
+                                if (s in p) {
+                                    const datapoint = addToLine(p, s)
+                                    points.push(datapoint)
+                                }
+                            })
+                            msg._datapoint = points
+                        } else {
+                            msg._datapoint = addToLine(p, series)
+                        }
                     }
                 } else if (config.chartType === 'bar') {
                     // single point or array of data?
@@ -66,6 +80,7 @@ module.exports = function (RED) {
 
                 // function to process a data point being appended to a line/scatter chart
                 function addToLine (payload, series) {
+                    console.log(payload, series)
                     const datapoint = {}
                     datapoint.category = series
                     // construct our datapoint
@@ -76,11 +91,21 @@ module.exports = function (RED) {
                     } else if (typeof payload === 'object') {
                         // may have been given an x/y object already
                         let x = getProperty(payload, config.xAxisProperty)
+                        let y = payload.y
                         if (x === undefined || x === null) {
                             x = (new Date()).getTime()
                         }
+                        if (Array.isArray(series)) {
+                            if (series.length > 1) {
+                                y = series.map((s) => {
+                                    return getProperty(payload, s)
+                                })
+                            } else {
+                                y = getProperty(payload, series[0])
+                            }
+                        }
                         datapoint.x = x
-                        datapoint.y = payload.y
+                        datapoint.y = y
                     }
                     return datapoint
                 }
@@ -92,6 +117,17 @@ module.exports = function (RED) {
                     if (typeof payload === 'number') {
                         datapoint.y = payload
                     }
+                    if (Array.isArray(series)) {
+                        let y = null
+                        if (series.length > 1) {
+                            y = series.map((s) => {
+                                return getProperty(payload, s)
+                            })
+                        } else {
+                            y = getProperty(payload, series[0])
+                        }
+                        datapoint.y = y
+                    }
                     return datapoint
                 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flowfuse/node-red-dashboard",
     "homepage": "https://dashboard.flowfuse.com",
-    "version": "0.7.1",
+    "version": "0.7.2-1aface9-202311080934.0",
     "description": "A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts) within Node-RED.",
     "author": {
         "name": "Joe Pavitt",
@@ -99,7 +99,7 @@
     },
     "overrides": {
         "node-red-node-test-helper": {
-            "semver": "^7.5.4" 
+            "semver": "^7.5.4"
         }
     },
     "browserslist": [

package/dist/css/app.a12b8d13.css

@@ -1 +0,0 @@
-:deep(.v-field__input){--v-field-input-min-height:calc(var(--widget-row-height) - 4px);--v-field-input-padding-top:12px;--v-field-input-padding-bottom:12px}:deep(.v-input--horizontal){grid-template-areas:"prepend control append";grid-template-rows:auto}.nr-db-layout-group--grid{grid-auto-rows:minmax(var(--widget-row-height),auto);padding:0;grid-template-columns:repeat(6,1fr);display:grid;flex-wrap:wrap;padding:var(--layout-gap);gap:var(--layout-gap)}.nrdb-layout--flex[data-v-194d4b32]{--layout-card-width:320px;--layout-gap:12px;display:flex;flex-wrap:wrap;padding:var(--layout-gap);gap:var(--layout-gap)}.nrdb-layout--flex>div[data-v-194d4b32]{width:var(--layout-card-width);max-width:100%}.v-card[data-v-194d4b32]{width:100%}.nrdb-layout--grid[data-v-6b3c6e9c]{--layout-card-width:320px;--layout-gap:12px;--widget-row-height:48px;display:grid;grid-template-columns:repeat(12,1fr);flex-wrap:wrap;padding:var(--layout-gap);gap:var(--layout-gap)}.nrdb-layout--grid>div[data-v-6b3c6e9c],.v-card[data-v-6b3c6e9c]{width:100%}@media only screen and (max-width:1024px){.nrdb-layout--grid[data-v-6b3c6e9c]{grid-template-columns:repeat(9,1fr)}}@media only screen and (max-width:768px){.nrdb-layout--grid[data-v-6b3c6e9c]{grid-template-columns:repeat(6,1fr)}}.nrdb-layout--notebook[data-v-a95d5376]{--layout-card-width:1024px;--layout-gap:12px;margin:auto;width:100%;max-width:var(--layout-card-width);min-height:100%;flex-wrap:wrap;padding:var(--layout-gap)}.nrdb-layout--notebook>div[data-v-a95d5376]{width:100%;margin-bottom:var(--layout-gap)}.v-card[data-v-a95d5376]{width:100%}.nrdb-table-nodata{text-align:center}.nrdb-table-nodata td{opacity:.5}.nrdb-switch{display:flex;align-items:center;justify-content:space-between}.nrdb-switch label{flex-grow:1}.nrdb-switch .v-selection-control{justify-content:flex-end}.nrdb-switch.nrdb-nolabel .v-selection-control{justify-content:center}.nrdb-ui-notification{padding-top:64px}.nrdb-ui-notification .v-snackbar__wrapper{background-color:rgb(var(--v-theme-group-background));color:rgb(var(--v-theme-on-group-background));border-left:6px solid var(--nrdb-ui-notification-color)}.nrdb-ui-notification .v-snackbar__content{padding-left:8px}.nrdb-ui-notification-countdown{position:absolute;width:calc(100% + 6px);top:0;left:0;margin-left:-6px;border-top-left-radius:4px}.nrdb-ui-notification h1,.nrdb-ui-notification h2,.nrdb-ui-notification h3,.nrdb-ui-notification h4{margin:.5rem 0}.nrdb-ui-text[data-v-14b9f4fa]{display:flex;flex-direction:row;gap:2px}.nrdb-ui-text-value[data-v-14b9f4fa]{font-weight:600}.nrdb-ui-text--row-left[data-v-14b9f4fa]{align-items:center;justify-content:flex-start}.nrdb-ui-text--row-center[data-v-14b9f4fa]{align-items:center;justify-content:center}.nrdb-ui-text--row-center label[data-v-14b9f4fa],.nrdb-ui-text--row-center span[data-v-14b9f4fa]{text-align:center}.nrdb-ui-text--row-right[data-v-14b9f4fa]{align-items:center;justify-content:flex-end}.nrdb-ui-text--row-spread[data-v-14b9f4fa]{align-items:center;justify-content:space-between}.nrdb-ui-text--col-center[data-v-14b9f4fa]{align-items:center;justify-content:center;flex-direction:column}:root{--nrdb-bg-color:#222;--nrdb-text-color:#fff;--nrdb-font-family:Helvtiva;--nrdb-header-bg:red;--nrdb-header-padding:6px 12px;--nrdb-header-text-color:#fff;--nrdb-main-padding:12px;--widget-row-height:42px}body{margin:0;font-family:Helvetica;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--nrdb-bg-color);color:var(--nrdb-text-color)}main{padding:var(--nrdb-main-padding)}.nrdb-ui-widget{min-height:var(--widget-row-height)}.v-btn{text-transform:none}.nrdb-ui-form-label{font-weight:700;margin-bottom:1rem}.nrdb-ui-form-rows{display:grid;gap:.5rem}.nrdb-ui-form-rows--split{grid-template-columns:1fr 1fr}.nrdb-ui-form-row{margin-bottom:.25rem;display:flex;align-items:center}.nrdb-ui-form-row .nrdb-ui-widget,.nrdb-ui-form-row .v-selection-control{min-height:0}.nrdb-ui-form-actions{margin-top:1rem}.nrdb-ui-form-actions button{margin-right:1rem}.nrdb-ui-form-row .v-text-field .v-input__details{-webkit-padding-start:0;padding-inline-start:0}.nrdb-ui-radio-group .v-selection-control-group{display:grid}.nrdb-ui-radio-group .v-selection-control-group .v-selection-control{grid-area:initial}.nrdb-ui-radio-group.nrdb-ui-radio-group--cols-2 .v-selection-control-group{grid-template-columns:repeat(2,1fr)}.nrdb-ui-radio-group.nrdb-ui-radio-group--cols-3 .v-selection-control-group{grid-template-columns:repeat(3,1fr)}.nrdb-ui-radio-group.nrdb-ui-radio-group--cols-4 .v-selection-control-group{grid-template-columns:repeat(4,1fr)}.nrdb-ui-radio-group.nrdb-ui-radio-group--cols-5 .v-selection-control-group{grid-template-columns:repeat(5,1fr)}.nrdb-ui-markdown h1{margin:.67em 0}.nrdb-ui-markdown p{margin:1em 0}.nrdb-ui-markdown>:first-child{margin-top:0!important}.nrdb-ui-markdown blockquote,.nrdb-ui-markdown details,.nrdb-ui-markdown dl,.nrdb-ui-markdown ol,.nrdb-ui-markdown p,.nrdb-ui-markdown pre,.nrdb-ui-markdown table,.nrdb-ui-markdown ul{margin-top:0;margin-bottom:1rem}.nrdb-ui-markdown h1,.nrdb-ui-markdown h2,.nrdb-ui-markdown h3,.nrdb-ui-markdown h4,.nrdb-ui-markdown h5,.nrdb-ui-markdown h6{margin-top:1.5rem;margin-bottom:1rem;font-weight:600;line-height:1.25}.nrdb-ui-markdown ol,.nrdb-ui-markdown ul{padding-left:2em}.nrdb-ui-markdown hr{margin:1rem 0}.nrdb-ui-markdown ol ol,.nrdb-ui-markdown ol ul,.nrdb-ui-markdown ul ol,.nrdb-ui-markdown ul ul{margin-top:0;margin-bottom:0}.nrdb-ui-markdown code{background:#f3f3f3;font-size:.85rem}.nrdb-ui-markdown pre code{overflow:auto;line-height:1.25rem;border-radius:6px}.nrdb-ui-markdown blockquote{padding-left:1em;border-left:4px solid #d1d1d1;color:gray}.nrdb-ui-markdown table{border-collapse:collapse;border-spacing:0;margin:.5em 0;width:100%;overflow:auto;width:-moz-max-content;width:max-content}.nrdb-ui-markdown table th{font-weight:700}.nrdb-ui-markdown table td,.nrdb-ui-markdown table th{padding:.5em .5em;border:1px solid #d1d1d1}.v-list-item--active{background-color:var(--v-theme-background)}.v-btn--variant-elevated,.v-btn--variant-flat,.v-btn-group .v-btn--variant-elevated.v-btn--active,.v-btn-group .v-btn--variant-flat.v-btn--active{background-color:rgb(var(--v-theme-primary));color:rgb(var(--v-theme-on-primary))}.v-btn-group .v-btn--variant-elevated,.v-btn-group .v-btn--variant-flat{background-color:rgb(var(--v-theme-surface));color:rgb(var(--v-theme-on-surface))}.v-btn-group .v-btn{flex-grow:1}.v-card{border:1px solid rgb(var(--v-theme-group-outline))}.v-field--variant-outlined.v-field--focused .v-field__outline__end,.v-field--variant-outlined.v-field--focused .v-field__outline__notch:after,.v-field--variant-outlined.v-field--focused .v-field__outline__notch:before,.v-field--variant-outlined.v-field--focused .v-field__outline__start{border-color:rgb(var(--v-theme-primary))}.v-menu>.v-overlay__content>.v-card,.v-menu>.v-overlay__content>.v-list,.v-menu>.v-overlay__content>.v-sheet{background:rgb(var(--v-theme-background));color:rgb(var(--v-theme-on-background))}.v-slider-thumb__surface,.v-slider-track__background,.v-slider-track__fill,.v-slider-track__tick{background-color:rgb(var(--v-theme-primary))}.v-switch__track{opacity:.3}.v-switch__thumb{color:rgb(var(--v-theme-surface-variant))}.active .v-switch__track{opacity:.6}.active .v-switch__thumb{opacity:1}.v-table{background:rgb(var(--v-theme-group-background))}.v-table,.v-table .v-table__wrapper>table>thead>tr>th{color:rgb(var(--v-theme-on-group-background))}.v-table .v-table__wrapper>table>thead>tr>th{font-weight:600}