@flowfuse/node-red-dashboard 0.7.0

package/nodes/widgets/ui_chart.js

@@ -0,0 +1,195 @@
+const datastore = require('../store/index.js')
+
+module.exports = function (RED) {
+    function ChartNode (config) {
+        const node = this
+
+        // create node in Node-RED
+        RED.nodes.createNode(this, config)
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        function getProperty (value, property) {
+            const props = property.split('.')
+            props.forEach((prop) => {
+                if (value) {
+                    value = value[prop]
+                }
+            })
+            return value
+        }
+
+        const evts = {
+            beforeSend: function (msg) {
+                const p = msg.payload
+
+                let series = RED.util.evaluateNodeProperty(config.category, config.categoryType, node, msg)
+                // if receiving a object payload, the series could be a within the payload
+                if (config.categoryType === 'property') {
+                    series = getProperty(p, config.category)
+                }
+
+                if (config.chartType === 'line' || config.chartType === 'scatter') {
+                    // possible that we haven't received any x-data in the payload,
+                    // so let's make sure we append something
+
+                    // single point or array of data?
+                    if (Array.isArray(p)) {
+                        // array of data
+                        msg._datapoint = p.map((point) => {
+                            // series available on a msg by msg basis - ensure we check for each msg
+                            if (config.categoryType === 'property') {
+                                series = getProperty(point, config.category)
+                            }
+                            return addToLine(point, series)
+                        })
+                    } else {
+                        // single point
+                        msg._datapoint = addToLine(p, series)
+                    }
+                } else if (config.chartType === 'bar') {
+                    // single point or array of data?
+                    if (Array.isArray(p)) {
+                        // array of data
+                        msg._datapoint = p.map((point) => {
+                            if (config.categoryType === 'property') {
+                                series = getProperty(point, config.category)
+                            }
+                            return addToBar(point, series)
+                        })
+                    } else {
+                        // single point
+                        msg._datapoint = addToBar(p, series)
+                    }
+                }
+
+                // function to process a data point being appended to a line/scatter chart
+                function addToLine (payload, series) {
+                    const datapoint = {}
+                    datapoint.category = series
+                    // construct our datapoint
+                    if (typeof payload === 'number') {
+                        // just a number, assume we're plotting a time series
+                        datapoint.x = (new Date()).getTime()
+                        datapoint.y = payload
+                    } else if (typeof payload === 'object') {
+                        // may have been given an x/y object already
+                        let x = getProperty(payload, config.xAxisProperty)
+                        if (x === undefined || x === null) {
+                            x = (new Date()).getTime()
+                        }
+                        datapoint.x = x
+                        datapoint.y = payload.y
+                    }
+                    return datapoint
+                }
+
+                // the only server-side computed var we need is the category for a Bar Chart
+                function addToBar (payload, series) {
+                    const datapoint = {}
+                    datapoint.category = series
+                    if (typeof payload === 'number') {
+                        datapoint.y = payload
+                    }
+                    return datapoint
+                }
+
+                return msg
+            },
+            onInput: function (msg, send, done) {
+                // use our own custom onInput in order to store history of msg payloads
+                if (!datastore.get(node.id)) {
+                    datastore.save(node.id, [])
+                }
+                if (Array.isArray(msg.payload) && !msg.payload.length) {
+                    // clear history
+                    datastore.save(node.id, [])
+                } else {
+                    if (!Array.isArray(msg.payload)) {
+                        // quick clone of msg, and store in history
+                        datastore.append(node.id, {
+                            ...msg
+                        })
+                    } else {
+                        // we have an array in msg.payload, let's split them
+                        msg.payload.forEach((p, i) => {
+                            const payload = JSON.parse(JSON.stringify(p))
+                            const d = msg._datapoint ? msg._datapoint[i] : null
+                            const m = {
+                                ...msg,
+                                payload,
+                                _datapoint: d
+                            }
+                            datastore.append(node.id, m)
+                        })
+                    }
+
+                    const maxPoints = parseInt(config.removeOlderPoints)
+
+                    if (config.xAxisType === 'category') {
+                        const _msg = datastore.get(node.id)
+
+                        // filters the ._msg array so that we keep just the latest msg with each category/series
+                        const seen = {}
+                        _msg.forEach((m, index) => {
+                            const series = m._datapoint.category
+                            // loop through and record the latest index seen for each topic/label
+                            seen[series] = index
+                        })
+                        const indices = Object.values(seen)
+                        datastore.save(node.id, _msg.filter((msg, index) => {
+                            // return only the msgs with the latest index for each topic/label
+                            return indices.includes(index)
+                        }))
+                        console.log(datastore.get(node.id))
+                    } else if (maxPoints && config.removeOlderPoints) {
+                        // account for multiple lines?
+                        // client-side does this for _each_ line
+                        // remove older points
+                        const lineCounts = {}
+                        const _msg = datastore.get(node.id)
+                        // trawl through in reverse order, and only keep the latest points (up to maxPoints) for each label
+                        for (let i = _msg.length - 1; i >= 0; i--) {
+                            const msg = _msg[i]
+                            const label = msg.topic
+                            lineCounts[label] = lineCounts[label] || 0
+                            if (lineCounts[label] >= maxPoints) {
+                                _msg.splice(i, 1)
+                            } else {
+                                lineCounts[label]++
+                            }
+                        }
+                        datastore.save(node.id, _msg)
+                    }
+
+                    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(node.id, _msg)
+                    }
+
+                    // check sizing limits
+                }
+
+                send(msg)
+            }
+        }
+
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config, evts)
+    }
+
+    RED.nodes.registerType('ui-chart', ChartNode)
+}

package/nodes/widgets/ui_dropdown.html

@@ -0,0 +1,199 @@
+<script type="text/javascript">
+    (function () {
+        function hasProperty (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop)
+        }
+        RED.nodes.registerType('ui-dropdown', {
+            category: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.colors.light'),
+            defaults: {
+                group: { type: 'ui-group', required: true },
+                name: { value: '' },
+                label: { value: 'Select Option:' },
+                tooltip: { value: '' },
+                order: { value: 0 },
+                width: {
+                    value: 0,
+                    validate: function (v) {
+                        const width = v || 0
+                        const currentGroup = $('#node-input-group').val() || this.group
+                        const groupNode = RED.nodes.node(currentGroup)
+                        const valid = !groupNode || +width <= +groupNode.width
+                        $('#node-input-size').toggleClass('input-error', !valid)
+                        return valid
+                    }
+                },
+                height: { value: 0 },
+                passthru: { value: false },
+                multiple: { value: false },
+                options: {
+                    value: [{ value: '', label: '' }],
+                    validate: function (v) {
+                        const unique = new Set(v.map(function (o) { return o.value }))
+                        return v.length === unique.size
+                    }
+                },
+                payload: { value: '' },
+                topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
+                topicType: { value: 'msg' },
+                className: { value: '' }
+            },
+            inputs: 1,
+            outputs: 1,
+            icon: 'font-awesome/fa-bars',
+            paletteLabel: 'dropdown',
+            label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'dropdown' },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                if (this.multiple === undefined) {
+                    $('#node-input-multiple').prop('checked', false)
+                }
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group'
+                })
+                const un = new Set(this.options.map(function (o) { return o.value }))
+                if (this.options.length === un.size) { $('#valWarning').hide() } else { $('#valWarning').show() }
+
+                function generateOption (i, option) {
+                    const container = $('<li/>', { style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px; border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);' })
+                    const row = $('<div/>').appendTo(container)
+                    $('<div/>', { style: 'padding-top:5px; padding-left:175px;' }).appendTo(container)
+                    $('<div/>', { style: 'padding-top:5px; padding-left:120px;' }).appendTo(container)
+
+                    $('<i style="color: var(--red-ui-form-text-color, #eee); cursor:move; margin-left:3px;" class="node-input-option-handle fa fa-bars"></i>').appendTo(row)
+
+                    $('<input/>', { class: 'node-input-option-value', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Value', value: option.value }).appendTo(row).typedInput({ default: option.type || 'str', types: ['str', 'num', 'bool'] })
+                    $('<input/>', { class: 'node-input-option-label', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Label', value: option.label }).appendTo(row)
+
+                    const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row)
+                    const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan)
+                    $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton)
+
+                    deleteButton.click(function () {
+                        container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' })
+                        container.fadeOut(300, function () {
+                            $(this).remove()
+                        })
+                    })
+
+                    $('#node-input-option-container').append(container)
+                }
+
+                $('#node-input-add-option').click(function () {
+                    generateOption($('#node-input-option-container').children().length + 1, {})
+                    $('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight)
+                })
+
+                for (let i = 0; i < this.options.length; i++) {
+                    const option = this.options[i]
+                    generateOption(i + 1, option)
+                }
+
+                $('#node-input-option-container').sortable({
+                    axis: 'y',
+                    handle: '.node-input-option-handle',
+                    cursor: 'move'
+                })
+
+                $('#node-input-topic').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-topicType'),
+                    types: ['str', 'msg', 'flow', 'global']
+                })
+
+                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
+                $('.ui-node-popover-title').tooltip({
+                    show: {
+                        effect: 'slideDown',
+                        delay: 150
+                    }
+                })
+            },
+            oneditsave: function () {
+                const options = $('#node-input-option-container').children()
+                const node = this
+                node.options = []
+                options.each(function (i) {
+                    const option = $(this)
+                    const o = {
+                        label: option.find('.node-input-option-label').val(),
+                        value: option.find('.node-input-option-value').typedInput('value'),
+                        type: option.find('.node-input-option-value').typedInput('type')
+                    }
+                    if (option.find('.node-input-option-value').typedInput('type') === 'num') {
+                        o.value = Number(o.value)
+                    }
+                    if (option.find('.node-input-option-value').typedInput('type') === 'bool') {
+                        o.value = (o.value === 'true')
+                    }
+                    node.options.push(o)
+                })
+            },
+            oneditresize: function () {
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-dropdown">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name">
+    </div>
+    <div class="form-row">
+        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <input type="text" id="node-input-group">
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-object-group"></i> Size</label>
+        <input type="hidden" id="node-input-width">
+        <input type="hidden" id="node-input-height">
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <div class="form-row">
+        <label for="node-input-label"><i class="fa fa-tag"></i> Label</label>
+        <input type="text" id="node-input-label" placeholder="optional label">
+    </div>
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Class names can also be set by sending a message to the node with a msg.topic of 'ui-property:class' and a payload containing the class name(s) to be applied. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
+    <!--<div class="form-row">
+        <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
+        <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
+    </div>-->
+    <div class="form-row node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
+        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Options</label>
+        <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width:calc(70% + 15px);">
+            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
+            <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
+        </div>
+    </div>
+    <div class="form-row">
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>option</span></a>
+    </div>
+    <div class="form-row">
+        <label style="width:auto" for="node-input-multiple"><i class="fa fa-th-list"></i> Allow multiple selections from list: </label>
+        <input type="checkbox" checked id="node-input-multiple" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
+    </div>
+    <div class="form-row">
+        <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
+        <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
+    </div>
+    <div class="form-row">
+        <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
+        <input type="text" id="node-input-topic" style="width:70%" placeholder="optional msg.topic">
+        <input type="hidden" id="node-input-topicType">
+    </div>
+</script>

package/nodes/widgets/ui_dropdown.js

@@ -0,0 +1,19 @@
+module.exports = function (RED) {
+    function DropdownNode (config) {
+        // create node in Node-RED
+        RED.nodes.createNode(this, config)
+        const node = this
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        const evts = {
+            onChange: true
+        }
+
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config, evts)
+    }
+
+    RED.nodes.registerType('ui-dropdown', DropdownNode)
+}