@flowfuse/node-red-dashboard 0.7.0

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

@@ -0,0 +1,59 @@
+<script type="text/markdown" data-help-name="ui-template">
+Provides a means to render custom content or a set of node-styles depending on scope.
+* HTML (including any <a href="https://vuetifyjs.com/en/components/all/" target="blank">
+  Vuetify component</a>) can be rendered in the Dashboard when the scope is set to **Widget in Group**
+* Custom CSS can be included in the Dashboard when the scope is set to **Page style** or **Site style**. 
+  If using this for CSS, you do not need to include any &lt;style&gt; tags, as these will be automatically added.
+
+### Details - Widget in Group
+When the scope is set to **Widget in Group**, the template will be rendered in the Dashboard as HTML.
+You can render dynamic content using any VueJS data-binding expressions, (e.g. `v-if`, `v-for`)
+  and access incoming data to the node via the `msg` object, e.g:
+```
+&lt;span&gt;{{ msg?.payload }}&lt;/span&gt;
+&lt;div v-if="msg?.payload === 'hello'"&gt;
+  I will be visible if msg.payload equals 'hello'
+&lt;/div&gt;
+```
+
+#### **send(msg)**
+The template comes with two built-in functions the first of which is a `send(msg)` function that
+  can be used to send a `msg` from the template, e.g:
+```html
+&lt;v-btn @click="send({'hello': 'world'})"&gt;&lt;/v-btn&gt;
+```
+
+#### **submit()**
+The second built-in function can be attached to a form. The `msg` sent will be an object
+  representation of the `FormData` from the attached form, e.g:
+```html
+&lt;form @submit.prevent="submit"&gt;
+    &lt;v-text-field name="first" label="First Name"&gt;&lt;/v-text-field&gt;
+    &lt;v-text-field name="last" label="Last Name"&gt;&lt;/v-text-field&gt;
+    &lt;v-btn type="submit"&gt;&lt;/v-btn&gt;
+&lt;/form&gt;
+```
+Would send the following `msg` when submitted:
+```js
+{ "first": <value>, "last": <value> }
+```
+
+### Details - Site Scoped Style
+When the scope is set to **Site Scoped Style**, the CSS in the template will be added to the `head` of all pages.
+e.g.
+```css
+.my-class {
+  color: red;
+}
+```
+
+### Details - Page Scoped Style
+When the scope is set to **Site Scoped Style**, the CSS in the template will be added to the `head` of the selected page.
+e.g.
+```css
+.my-page1-only-class {
+  color: green;
+}
+```
+
+</script>

package/nodes/widgets/locales/en-US/ui_template.json

@@ -0,0 +1,18 @@
+{
+    "ui-template": {
+        "label": {
+            "scope": "Type",
+            "local": "Widget",
+            "site-style": "CSS (All Pages)",
+            "page-style": "CSS (Single Page)",
+            "group": "Group",
+            "size": "Size",
+            "name": "Name",
+            "pass-through": "Pass through messages from input.",
+            "store-state": "Add output messages to stored state.",
+            "template": "Template",
+            "expand": "Expand",
+            "resend": "Reload last value on refresh."
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+<script type="text/html" data-help-name="ui-text">
+    <p>
+        Displays a non-editable text field on the user interface.
+        Each received <code>msg.payload</code> will update the value shown
+        alongside the (optional) label.
+    </p>
+    <p>
+        You can also customise the style of the text by enabling "Apply Custom Style".
+        This will show the following options:
+        <ul>
+            <li><b>Font:</b> Choose from a collection of pre-defined fonts.</li>
+            <li><b>Text Size:</b> Numerical value defining (in px) how big the text should display.</li>
+            <li><b>Text Color:</b> Color picker to define the color to display the text in.</li>
+        </ul>
+    </p>
+</script>

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

@@ -0,0 +1,19 @@
+<script type="text/html" data-help-name="ui-text-input">
+    <p>
+        Adds a single text input row to your dashboard, with a configurable "type" (text, password, etc).
+    </p>
+    <p>
+      Available modes include:
+      <ul>
+        <li><b>Text Input:</b> Standard text input field</li>
+        <li><b>E-Mail Address:</b> Offers validation on any input to ensure it's a valid e-mail address.</li>
+        <li><b>Password:</b> Hides the input from the user to offer protected input.</li>
+        <li><b>Number:</b> Adds an up/down selector to choose an integer.</li>
+        <li><b>Color Picker:</b> Displays a single block color selector</li>
+        <li><b>Time Picker:</b> HH:mm formatted time picker</li>
+        <li><b>Week Picker:</b> A Calendar widget to select a given full week, returns YYYY-W&lt;WW&gt;></li>
+        <li><b>Month Picker:</b> A Calendar widget to select a given month, returns YYYY-MM</li>
+        <li><b>Datetime Picker:</b> A Calendar widget to select full datetime value. Returns YYY-MM-DDTHH:mm</li>
+      </ul>
+    </p>
+  </script>

package/nodes/widgets/ui_button.html

@@ -0,0 +1,146 @@
+<script type="text/javascript">
+    (function () {
+        function hasProperty (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop)
+        }
+        RED.nodes.registerType('ui-button', {
+            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: 'button' },
+                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 },
+                tooltip: { value: '' },
+                color: { value: '' },
+                bgcolor: { value: '' },
+                className: { value: '' },
+                icon: { value: '' },
+                payload: { value: '', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('payloadType') : function (v) { return true }) },
+                payloadType: { value: 'str' },
+                topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
+                topicType: { value: 'msg' }
+            },
+            inputs: 1,
+            outputs: 1,
+            outputLabels: function () {
+                if (this.payloadType === 'str') {
+                    return this.payload
+                } else {
+                    return this.payloadType
+                }
+            },
+            icon: 'font-awesome/fa-hand-pointer-o',
+            paletteLabel: 'button',
+            label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'button' },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group'
+                })
+
+                $('#node-input-payload').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-payloadType'),
+                    types: ['str', 'num', 'bool', 'json', 'bin', 'date', 'flow', 'global']
+                })
+
+                $('#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
+                    }
+                })
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-button">
+    <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> <span data-i18n="ui-button.label.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-icon"><i class="fa fa-picture-o"></i> <span data-i18n="ui-button.label.icon"></label>
+        <input type="text" id="node-input-icon" data-i18n="[placeholder]ui-button.label.optionalIcon">
+    </div>-->
+    <div class="form-row">
+        <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
+        <input type="text" id="node-input-label" data-i18n="[placeholder]ui-button.label.optionalLabel">
+    </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> <span data-i18n="ui-button.label.tooltip"></label>
+        <input type="text" id="node-input-tooltip" data-i18n="[placeholder]ui-button.label.optionalTooltip">
+    </div>
+    <div class="form-row">
+        <label for="node-input-color"><i class="fa fa-tint"></i> <span data-i18n="ui-button.label.color"></label>
+        <input type="text" id="node-input-color" data-i18n="[placeholder]ui-button.label.optionalColor">
+    </div>
+    <div class="form-row">
+        <label for="node-input-bgcolor"><i class="fa fa-tint"></i>  <span data-i18n="ui-button.label.background"></label>
+        <input type="text" id="node-input-bgcolor" data-i18n="[placeholder]ui-button.label.optionalBackgroundColor">
+    </div>-->
+    <div class="form-row">
+        <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> <span data-i18n="ui-button.label.whenClicked"></label>
+    </div>
+    <div class="form-row">
+        <label for="node-input-payload" style="padding-left: 25px; margin-right: -25px"><span data-i18n="ui-button.label.payload"></label>
+        <input type="text" id="node-input-payload" style="width:70%">
+        <input type="hidden" id="node-input-payloadType">
+    </div>
+    <div class="form-row">
+        <label for="node-input-topic" style="padding-left: 25px; margin-right: -25px"><span data-i18n="ui-button.label.topic"></label>
+        <input type="text" id="node-input-topic" style="width:70%">
+        <input type="hidden" id="node-input-topicType">
+    </div>
+    <!--<div class="form-row">
+        <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> <span data-i18n="ui-button.label.emulateClick"></label>
+        <input type="checkbox" id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
+    </div>-->
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
+        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
+    </div>
+</script>

package/nodes/widgets/ui_button.js

@@ -0,0 +1,65 @@
+module.exports = function (RED) {
+    function ButtonNode (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 = {
+            onAction: true,
+            beforeSend: async function (msg) {
+                let error = null
+
+                // retrieve the payload we're sending from this button
+                let payloadType = config.payloadType
+                let payload = config.payload
+
+                if (payloadType === 'flow' || payloadType === 'global') {
+                    try {
+                        const parts = RED.util.normalisePropertyExpression(payload)
+                        if (parts.length === 0) {
+                            throw new Error()
+                        }
+                    } catch (err) {
+                        node.warn('Invalid payload property expression - defaulting to node id')
+                        payload = node.id
+                        payloadType = 'str'
+                    }
+                } else if (payloadType === 'date') {
+                    payload = Date.now()
+                } else {
+                    try {
+                        payload = RED.util.evaluateNodeProperty(payload, payloadType, node)
+                    } catch (err) {
+                        error = err
+                        if (payloadType === 'bin') {
+                            node.error('Badly formatted buffer')
+                        } else {
+                            node.error(err, payload)
+                        }
+                    }
+                }
+
+                msg.payload = payload
+
+                if (!error) {
+                    return msg
+                } else {
+                    node.error(error)
+                    return null
+                }
+            }
+        }
+
+        // inform the dashboard UI that we are adding this node
+        if (group) {
+            group.register(node, config, evts)
+        } else {
+            node.error('No group configured')
+        }
+    }
+
+    RED.nodes.registerType('ui-button', ButtonNode)
+}

package/nodes/widgets/ui_chart.html

@@ -0,0 +1,314 @@
+<style>
+    #ui-chart-colors input[type="color"] {
+        font-weight: bold;
+    }
+    #ui-chart-colors input[type="color"]::-webkit-color-swatch,
+    #ui-chart-colors input[type="color"]::-moz-color-swatch {
+        border: none;
+    }
+
+    .node-chart-properties {
+        display: inline-flex;
+        align-items: center;
+        width: 70%;
+        gap: 16px;
+        flex-wrap: wrap;
+    }
+    .node-chart-properties .red-ui-typedInput-container {
+        flex-grow: 1;
+    }
+    .node-chart-property {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        flex-grow: 1;
+    }
+    .node-chart-property label {
+        margin: 0;
+    }
+    .node-chart-property#node-container-category {
+        width: 100%;
+    }
+</style>
+
+<script type="text/javascript">
+    (function () {
+        function hexToRgb (hex) {
+            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+            return result
+                ? {
+                    r: parseInt(result[1], 16),
+                    g: parseInt(result[2], 16),
+                    b: parseInt(result[3], 16)
+                }
+                : null
+        }
+
+        RED.nodes.registerType('ui-chart', {
+            category: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.colors.medium'),
+            defaults: {
+                group: { type: 'ui-group', required: true },
+                name: { value: '' },
+                label: { value: 'chart' },
+                order: { value: Number.MAX_SAFE_INTEGER },
+                chartType: { value: 'line' },
+                category: { value: 'topic' },
+                categoryType: { value: 'msg' },
+                xAxisProperty: { value: null },
+                xAxisPropertyType: { value: 'msg' },
+                yAxisProperty: { value: null },
+                xAxisType: { value: 'time' },
+                showLegend: { value: true },
+                removeOlder: { value: 1, validate: RED.validators.number(), required: true },
+                removeOlderUnit: { value: '3600', required: true },
+                removeOlderPoints: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
+                colors: { value: ['#1F77B4', '#AEC7E8', '#FF7F0E', '#2CA02C', '#98DF8A', '#D62728', '#FF9896', '#9467BD', '#C5B0D5'] },
+                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 },
+                className: { value: '' }
+            },
+            inputs: 1,
+            outputs: 1,
+            inputLabels: function () { return this.chartType },
+            outputLabels: ['chart state'],
+            icon: 'font-awesome/fa-line-chart',
+            align: 'right',
+            paletteLabel: 'chart',
+            label: function () {
+                return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || this.mode + ' chart'
+            },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                const propertyType = { value: 'property', label: 'key:' }
+
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group'
+                })
+
+                // 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
+                    }
+                })
+
+                // set value options for chart's type
+                $('#node-input-chartType').typedInput({
+                    type: 'chartType',
+                    types: [{
+                        value: 'line',
+                        options: [
+                            { value: 'line', label: 'Line' },
+                            { value: 'bar', label: 'Bar' },
+                            { value: 'scatter', label: 'Scatter' }
+                        ]
+                    }],
+                    typeField: '#node-input-chartTypeType'
+                })
+
+                // line    = time, linear, log
+                // scatter = time, linear, log
+                // bar     = categorical (or just hide)
+
+                // provide options for x-axis type
+                $('#node-input-xAxisType').typedInput()
+
+                $('#node-input-category').typedInput({
+                    default: 'msg',
+                    typeField: $('#node-input-categoryType'),
+                    types: ['msg', 'str', propertyType]
+                })
+                $('#node-input-xAxisProperty').typedInput({
+                    default: propertyType.value,
+                    typeField: $('#node-input-xAxisPropertyType'),
+                    types: [propertyType]
+                })
+                $('#node-input-yAxisProperty').typedInput({
+                    default: propertyType.value,
+                    typeField: $('#node-input-yAxisPropertyType'),
+                    types: [propertyType]
+                })
+    
+                // handle event when chart's type is changed
+                $('#node-input-chartType').on('change', (evt) => {
+                    const value = $('#node-input-chartType').typedInput('value')
+
+                    if (value === 'line' || value === 'scatter') {
+                        // for line and scatter
+                        // types - time, linear
+                        $('#node-input-xAxisType').typedInput('types', [{
+                            value: 'linear',
+                            options: [
+                                { value: 'time', label: 'Timescale' },
+                                { value: 'linear', label: 'Linear' }
+                            ]
+                        }])
+                        $('#node-input-xAxisType').typedInput('type', 'time')
+                        // show x-axis property setting
+                        $('#node-container-xAxisProperty').show()
+                        // show x-axis limit options
+                        $('#x-axis-show').show()
+                    } else {
+                        // for bar
+                        // types - categorical
+                        $('#node-input-xAxisType').typedInput('types', [{
+                            value: 'linear',
+                            options: [
+                                { value: 'category', label: 'Categorical' }
+                            ]
+                        }])
+                        $('#node-input-xAxisType').typedInput('type', 'category')
+                        // show x-axis property setting
+                        $('#node-container-xAxisProperty').hide()
+                        // hide x-axis limit options
+                        $('#x-axis-show').hide()
+                    }
+                })
+
+                // Series Color Pickers
+                const setColor = function (id, value) {
+                    $(id).val(value)
+                    $(id).css('background-color', value)
+                    const rgb = hexToRgb(value)
+                    const level = ((rgb.r * 299) + (rgb.g * 587) + (rgb.b * 114)) / 1000
+                    const textColor = (level >= 128) ? '#111111' : '#eeeeee'
+                    $(id).css('color', textColor)
+                }
+                $('.series-color').on('change', function () {
+                    setColor('#' + $(this).attr('id'), $(this).val())
+                })
+                const defaultColors = ['#1F77B4', '#AEC7E8', '#FF7F0E', '#2CA02C', '#98DF8A', '#D62728', '#FF9896', '#9467BD', '#C5B0D5']
+
+                if (this.colors) {
+                    for (let i = 0; i < this.colors.length; i++) {
+                        const value = this.colors[i] || defaultColors[i]
+                        setColor('#node-input-color' + (i + 1), value)
+                    }
+                } else {
+                    for (let c = 0; c < defaultColors.length; c++) {
+                        setColor('#node-input-color' + (c + 1), defaultColors[c])
+                    }
+                }
+            },
+            oneditsave: function () {
+                const colors = []
+                for (let i = 0; i < 9; i++) {
+                    const color = $('#node-input-color' + (i + 1)).val()
+                    if (color) {
+                        colors.push(color)
+                    }
+                }
+                this.colors = colors
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-chart">
+    <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-i-cursor"></i> Label</label>
+        <input type="text" id="node-input-label" data-i18n="[placeholder]ui-chart.label.optionalChartTitle">
+    </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" style="display: flex; align-items: center; gap: 36px;">
+        <div>
+            <label for="node-input-chartType"><i class="fa fa-bookmark"></i> Type</label>
+            <input type="text" id="node-input-chartType">
+            <input type="hidden" id="node-input-chartTypeType">
+        </div>
+        <div>
+            <label style="width:auto" for="node-input-showLegend"><i class="fa fa-th-list"></i> Show Legend </label>
+            <input type="checkbox" checked id="node-input-showLegend" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
+        </div>
+    </div>
+    <div class="form-row">
+        <label for="node-input-xAxisType" data-i18n="ui-chart.label.xType"></label></label>
+        <input type="text" id="node-input-xAxisType">
+        <input type="hidden" id="node-input-xAxisTypeType">
+    </div>
+    <div class="form-row" id="x-axis-show">
+        <label for="node-input-removeOlder" data-i18n="ui-chart.label.xLimit"></label>
+        <label for="node-input-removeOlder" style="width:auto" data-i18n="ui-chart.label.last"></label>
+        <input type="text" id="node-input-removeOlder" style="width:50px;">
+        <select id="node-input-removeOlderUnit" style="width:100px;">
+            <option value="1" data-i18n="ui-chart.label.seconds"></option>
+            <option value="60" data-i18n="ui-chart.label.minutes"></option>
+            <option value="3600" data-i18n="ui-chart.label.hours"></option>
+            <option value="86400" data-i18n="ui-chart.label.days"></option>
+            <option value="604800" data-i18n="ui-chart.label.weeks"></option>
+        </select>
+        <label for="node-input-removeOlderPoints" style="width:auto; margin-left:10px; margin-right:10px;" data-i18n="ui-chart.label.or"></label>
+        <input type="text" id="node-input-removeOlderPoints" style="width:60px;" placeholder="1000">
+        <span style="margin-left:5px;" data-i18n="ui-chart.label.points"></span>
+    </div>
+    <div class="form-row">
+        <label>Properties</label>
+        <div id="node-container-axisKeys" class="node-chart-properties">
+            <div id="node-container-category" class="node-chart-property">
+                <label style="width: auto" for="node-input-category">Series:</label>
+                <input style="flex-grow: 1" type="text" id="node-input-category" placeholder="topic">
+                <input type="hidden" id="node-input-categoryType">
+            </div>
+            <div id="node-container-xAxisProperty" class="node-chart-property">
+                <label style="width: auto" for="node-input-xAxisProperty">X:</label>
+                <input style="flex-grow: 1" type="text" id="node-input-xAxisProperty" placeholder="msg.payload[key] or msg.payload[n][key]">
+            </div>
+            <div id="node-container-yAxisProperty" class="node-chart-property">
+                <label style="width: auto" for="node-input-yAxisProperty">Y:</label>
+                <input style="flex-grow: 1" type="text" id="node-input-yAxisProperty" placeholder="msg.payload[key] or msg.payload[n][key]">
+            </div>
+        </div>
+    </div>
+    <div class="form-row" id="ui-chart-colors">
+        <label for="node-input-color1" data-i18n="ui-chart.label.seriesColors"></label>
+        <input type="color" id="node-input-color1" class="series-color" style="width:100px;"/>
+        <input type="color" id="node-input-color2" class="series-color" style="width:100px;"/>
+        <input type="color" id="node-input-color3" class="series-color" style="width:100px;"/>
+        <div style="margin-top:5px; margin-left:104px;">
+            <input type="color" id="node-input-color4" class="series-color" style="width:100px;"/>
+            <input type="color" id="node-input-color5" class="series-color" style="width:100px;"/>
+            <input type="color" id="node-input-color6" class="series-color" style="width:100px;"/>
+        </div>
+        <div style="margin-top:5px; margin-left:104px;">
+            <input type="color" id="node-input-color7" class="series-color" style="width:100px;"/>
+            <input type="color" id="node-input-color8" class="series-color" style="width:100px;"/>
+            <input type="color" id="node-input-color9" class="series-color" style="width:100px;"/>
+        </div>
+    </div>
+</script>