@flowfuse/node-red-dashboard 1.0.2 → 1.0.3-47c1aa0-202402080954.0

package/README.md

@@ -62,7 +62,7 @@ The new `ui-markdown` widget allows you to build rich, interactive applications
 
 As an open-source project, Node-RED Dashboard 2.0 openly welcomes all forms of contributions, whether those are ideas, bug reports, or code contributions through Pull Requests. 
 
-We strongly believe in the power of community. If you have suggestions, feedback, or features you'd like to see, please open a [Github issue](https://github.com/FlowFuse/node-red-dashboard/issues/new/choose). We also highly encourage open-source contributions.
+We strongly believe in the power of community. If you have suggestions, feedback, or features you'd like to see, please open a [GitHub issue](https://github.com/FlowFuse/node-red-dashboard/issues/new/choose). We also highly encourage open-source contributions.
 
 ### Roadmap
 

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

@@ -1,20 +1,20 @@
 {
-    "ui-group" : {
-        "label" : {
-            "name" : "Name",
-            "tab" : "Tab",
-            "width" : "Width",
-            "default" : "Default",
-            "group" : "Group",
-            "unassigned" : "unassigned",
+    "ui-group": {
+        "label": {
+            "name": "Name",
+            "page": "Page",
+            "size": "Size",
+            "display-name": "Display group name",
             "className": "Class",
-            "classNamePlaceholder": "Optional CSS class name(s) for widget",
+            "classNamePlaceholder": "Optional CSS class name(s) for group",
+            "defaultState": "Default State",
+            "visibility": "Visibility",
             "visible": "Visible",
             "hidden": "Hidden",
+            "interactivity": "Interactivity",
             "active": "Active",
-            "disabled": "Disabled"
-        },
-        "display-name" : "Display group name",
-        "collapse-name" : "Allow group to be collapsed"
+            "disabled": "Disabled",
+            "openDashboardSidebar": "Open Dashboard 2.0 Sidebar"
+        }
     }
 }

package/nodes/config/locales/en-US/ui_page.html

@@ -15,14 +15,14 @@
             <span class="property-type">ui-base</span>
         </dt>
         <dd>
-            Description of "Name"
+            Description of "UI"
         </dd>
         <dt>
             Path
             <span class="property-type">string</span>
         </dt>
         <dd>
-            Description of "Name"
+            Description of "Path"
         </dd>
         <dt>
             Icon
@@ -43,7 +43,7 @@
         </dd>
         <dt>
             Layout
-            <span class="property-type">grid | fixed | notebook</span>
+            <span class="property-type">Grid | Fixed | Notebook</span>
         </dt>
         <dd>
             Choose form one of the available Dashboard Layouts.

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

@@ -1,10 +1,25 @@
 {
-    "ui-page" : {
+    "ui-page": {
         "label": {
+            "name": "Name",
+            "ui": "UI",
+            "path": "Path",
+            "icon": "Icon",
+            "theme": "Theme",
+            "layout": "Layout",
+            "grid": "Grid",
+            "fixed": "Fixed",
+            "notebook": "Notebook",
+            "class": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s) for page",
+            "defaultState": "Default State",
+            "visibility": "Visibility",
             "visible": "Visible",
             "hidden": "Hidden",
+            "interactivity": "Interactivity",
             "active": "Active",
-            "disabled": "Disabled"
+            "disabled": "Disabled",
+            "openDashboardSidebar": "Open Dashboard 2.0 Sidebar"
         }
     }
 }

package/nodes/config/locales/ja/ui_base.json

@@ -0,0 +1,23 @@
+{
+    "ui-base": {
+        "auto": "自動",
+        "label": {
+            "category": "ダッシュボード2",
+            "layout": "配置",
+            "theming": "テーマ",
+            "settings": "設定",
+            "sidebar": "サイドバーの設定",
+            "showPath": "ラベルにページのパスを含める"
+        },
+        "layout": {
+            "pages": "ページ",
+            "edit": "編集",
+            "focus": "焦点を当てる",
+            "collapse": "折り畳む",
+            "expand": "展開"
+        },
+        "themes": {
+            "header": "テーマ"
+        }
+    }
+}

package/nodes/config/locales/ja/ui_group.html

@@ -0,0 +1,4 @@
+<script type="text/html" data-help-name="ui-group">
+    <p>グループ</p>
+    <p>もし<b>クラス</b>を指定している場合は、 親のカードに追加されます。この方法でカスタムCSSを用いてカードとその中の要素の様式を設定できます。<code>msg.className</code> の文字列プロパティを用いることで、クラスを実行時に設定することもできます。</p>
+</script>

package/nodes/config/locales/ja/ui_group.json

@@ -0,0 +1,20 @@
+{
+    "ui-group": {
+        "label": {
+            "name": "名前",
+            "page": "ページ",
+            "size": "サイズ",
+            "display-name": "グループ名を表示",
+            "className": "クラス",
+            "classNamePlaceholder": "グループのための任意のCSSクラス名",
+            "defaultState": "標準状態",
+            "visibility": "画面表示",
+            "visible": "表示",
+            "hidden": "非表示",
+            "interactivity": "画面操作",
+            "active": "有効",
+            "disabled": "無効",
+            "openDashboardSidebar": "ダッシュボード2.0のサイドバーを開く"
+        }
+    }
+}

package/nodes/config/locales/ja/ui_page.html

@@ -0,0 +1,58 @@
+<script type="text/html" data-help-name="ui-page">
+    <p>UIページ</p>
+    <p>ダッシュボード内のコンテンツの単一画面</p>
+    <h3>プロパティ</h3>
+    <dl class="message-properties">
+        <dt>
+            名前
+            <span class="property-type">string</span>
+        </dt>
+        <dd>
+            Description of "Name"
+        </dd>
+        <dt>
+            UI
+            <span class="property-type">ui-base</span>
+        </dt>
+        <dd>
+            Description of "UI"
+        </dd>
+        <dt>
+            パス
+            <span class="property-type">string</span>
+        </dt>
+        <dd>
+            Description of "Path"
+        </dd>
+        <dt>
+            アイコン
+            <span class="property-type">string</span>
+        </dt>
+        <dd>
+            サイドバーUIのページ名の横に表示されるアイコン。
+            マテリアルデザインアイコンを使用でき、利用できるアイコンの全て一覧は、<a href="https://pictogrammers.com/library/mdi/">ここ</a> から参照できます。
+            `mdi-`の接頭語を含める必要はなく、アイコン名を用いてください。
+        </dd>
+        <dt>
+            テーマ
+            <span class="property-type">ui-theme</span>
+        </dt>
+        <dd>
+            ページのために利用可能なテーマを1つ選択します。独自のテーマを作成して設定することもできます。
+        </dd>
+        <dt>
+            配置
+            <span class="property-type">グリッド | 固定 | ノートブック</span>
+        </dt>
+        <dd>
+            利用可能なダッシュボード様式から1つを選択します。様式の詳細については、<a href="https://dashboard.flowfuse.com/layouts/grid.html">ここ</a> を参照してください。
+        </dd>
+        <dt>
+            クラス
+            <span class="property-type">string</span>
+        </dt>
+        <dd>
+            レンダグリング時にページの様式に追加するカスタムCSSクラス
+        </dd>
+    </dl>
+</script>

package/nodes/config/locales/ja/ui_page.json

@@ -0,0 +1,25 @@
+{
+    "ui-page": {
+        "label": {
+            "name": "名前",
+            "ui": "UI",
+            "path": "パス",
+            "icon": "アイコン",
+            "theme": "テーマ",
+            "layout": "配置",
+            "grid": "グリッド",
+            "fixed": "固定",
+            "notebook": "ノートブック",
+            "class": "クラス",
+            "classNamePlaceholder": "ページのための任意のCSSクラス名",
+            "defaultState": "標準状態",
+            "visibility": "画面表示",
+            "visible": "表示",
+            "hidden": "非表示",
+            "interactivity": "画面操作",
+            "active": "有効",
+            "disabled": "無効",
+            "openDashboardSidebar": "ダッシュボード2.0のサイドバーを開く"
+        }
+    }
+}

package/nodes/config/ui_group.html

@@ -28,7 +28,7 @@
                 height: '#node-config-input-height',
                 auto: false
             })
-    
+
             // backwards compatibility
             if (this.visible === undefined || this.visible === true) {
                 this.visible = true
@@ -54,7 +54,7 @@
             } else {
                 this.visible = false
             }
-    
+
             // convert string to boolean
             const disabled = $('#node-config-input-disabled').val()
             if (disabled === 'true') {
@@ -63,38 +63,38 @@
                 this.disabled = false
             }
         }
-})
+    })
 </script>
 
 <script type="text/html" data-template-name="ui-group">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
+        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> <span data-i18n="ui-group.label.name"></label>
         <input type="text" id="node-config-input-name">
     </div>
     <div class="form-row">
-        <label for="node-config-input-page"><i class="fa fa-bookmark"></i> Page</label>
+        <label for="node-config-input-page"><i class="fa fa-bookmark"></i> <span data-i18n="ui-group.label.page"></label>
         <input type="text" id="node-config-input-page">
     </div>
     <div class="form-row">
-        <label for="node-config-input-size"><i class="fa fa-arrows-h"></i> Size</label>
+        <label for="node-config-input-size"><i class="fa fa-arrows-h"></i> <span data-i18n="ui-group.label.size"></label>
         <input type="hidden" id="node-config-input-width">
         <input type="hidden" id="node-config-input-height">
         <button class="editor-button" id="node-config-input-size"></button>
     </div>
     <div class="form-row">
         <input style="margin:8px 0 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-showTitle">
-        <label style="width:auto" for="node-config-input-showTitle"><span data-i18n="ui-group.display-name"></span></label>
+        <label style="width:auto" for="node-config-input-showTitle"><span data-i18n="ui-group.label.display-name"></span></label>
     </div>
     <div class="form-row" id="text-row-class">
-        <label for="node-config-input-className"><i class="fa fa-code"></i> Class</label>
-        <input type="text" id="node-config-input-className" placeholder="Optional CSS class name(s) for group"/>
+        <label for="node-config-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-group.label.className"></span></label>
+        <input type="text" id="node-config-input-className" data-i18n="[placeholder]ui-group.label.classNamePlaceholder"/>
     </div>
     <div class="form-row" style="font-weight: 600;">
-        <i class="w-16 fa fa-eye"></i> Default State
+        <i class="w-16 fa fa-eye"></i> <span data-i18n="ui-group.label.defaultState"></span>
     </div>
     <div class="form-row">
         <div style="display: flex; align-items: center; gap: 2px;">
-            <label for="node-config-input-visible" style="margin-bottom: 0">Visibility</label>
+            <label for="node-config-input-visible" style="margin-bottom: 0" data-i18n="ui-group.label.visibility"></label>
             <select id="node-config-input-visible" style="width: 150px;">
                 <option value="true" data-i18n="ui-group.label.visible"></option>
                 <option value="false" data-i18n="ui-group.label.hidden"></option>
@@ -103,7 +103,7 @@
     </div>
     <div class="form-row">
         <div style="display: flex; align-items: center; gap: 2px;">
-            <label for="node-config-input-disabled" style="margin-bottom: 0">Interactivity</label>
+            <label for="node-config-input-disabled" style="margin-bottom: 0" data-i18n="ui-group.label.interactivity"></label>
             <select id="node-config-input-disabled" style="width: 150px;">
                 <option value="false" data-i18n="ui-group.label.active"></option>
                 <option value="true" data-i18n="ui-group.label.disabled"></option>
@@ -111,6 +111,6 @@
         </div>
     </div>
     <div class="form-row">
-        <button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small">Open Dashboard 2.0 Sidebar</button>
+        <button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small" data-i18n="ui-group.label.openDashboardSidebar"></button>
     </div>
 </script>

package/nodes/config/ui_page.html

@@ -52,9 +52,9 @@
                 types: [{
                     value: 'layout',
                     options: [
-                        { value: 'grid', label: 'Grid' },
-                        { value: 'flex', label: 'Fixed' },
-                        { value: 'notebook', label: 'Notebook' }
+                        { value: 'grid', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.grid') },
+                        { value: 'flex', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.fixed') },
+                        { value: 'notebook', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.notebook') }
                     ]
                 }],
                 typeField: '#node-input-layoutType'
@@ -79,7 +79,7 @@
             } else {
                 this.visible = false
             }
-    
+
             // convert string to boolean
             const disabled = $('#node-config-input-disabled').val()
             if (disabled === 'true') {
@@ -99,40 +99,40 @@
 
 <script type="text/html" data-template-name="ui-page">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="w-16 fa fa-bookmark"></i> Name</label>
+        <label for="node-config-input-name"><i class="w-16 fa fa-bookmark"></i> <span data-i18n="ui-page.label.name"></label>
         <input type="text" id="node-config-input-name">
     </div>
     <div class="form-row">
-        <label for="node-config-input-ui"><i class="w-16 fa fa-sitemap"></i> UI</label>
+        <label for="node-config-input-ui"><i class="w-16 fa fa-sitemap"></i> <span data-i18n="ui-page.label.ui"></label>
         <input type="text" id="node-config-input-ui">
     </div>
     <div class="form-row">
-        <label for="node-config-input-path"><i class="w-16 fa fa-link"></i> Path</label>
+        <label for="node-config-input-path"><i class="w-16 fa fa-link"></i> <span data-i18n="ui-page.label.path"></label>
         <input type="text" id="node-config-input-path">
     </div>
     <div class="form-row">
-        <label for="node-config-input-icon"><i class="w-16 fa fa-home"></i> Icon</label>
+        <label for="node-config-input-icon"><i class="w-16 fa fa-home"></i> <span data-i18n="ui-page.label.icon"></label>
         <input type="text" id="node-config-input-icon">
     </div>
     <div class="form-row">
-        <label for="node-config-input-theme"><i class="w-16 fa fa-paint-brush"></i> Theme</label>
+        <label for="node-config-input-theme"><i class="w-16 fa fa-paint-brush"></i> <span data-i18n="ui-page.label.theme"></label>
         <input type="text" id="node-config-input-theme">
     </div>
     <div class="form-row">
-        <label for="node-config-input-layout"><i class="w-16 fa fa-th"></i> Layout</label>
+        <label for="node-config-input-layout"><i class="w-16 fa fa-th"></i> <span data-i18n="ui-page.label.layout"></label>
         <input type="text" id="node-config-input-layout">
         <input type="hidden" id="node-config-input-layoutType">
     </div>
     <div class="form-row" id="text-row-class">
-        <label for="node-config-input-className"><i class="w-16 fa fa-code"></i> Class</label>
-        <input type="text" id="node-config-input-className" placeholder="Optional CSS class name(s) for page"/>
+        <label for="node-config-input-className"><i class="w-16 fa fa-code"></i> <span data-i18n="ui-page.label.class"></label>
+        <input type="text" id="node-config-input-className" data-i18n="[placeholder]ui-page.label.classNamePlaceholder"/>
     </div>
     <div class="form-row" style="font-weight: 600;">
-        <i class="w-16 fa fa-eye"></i> Default State
+        <i class="w-16 fa fa-eye"></i> <span data-i18n="ui-page.label.defaultState">
     </div>
     <div class="form-row">
         <div style="display: flex; align-items: center; gap: 2px;">
-            <label for="node-config-input-visible" style="margin-bottom: 0">Visibility</label>
+            <label for="node-config-input-visible" style="margin-bottom: 0" data-i18n="ui-page.label.visibility"></label>
             <select id="node-config-input-visible" style="width: 150px;">
                 <option value="true" data-i18n="ui-page.label.visible"></option>
                 <option value="false" data-i18n="ui-page.label.hidden"></option>
@@ -141,7 +141,7 @@
     </div>
     <div class="form-row">
         <div style="display: flex; align-items: center; gap: 2px;">
-            <label for="node-config-input-disabled" style="margin-bottom: 0">Interactivity</label>
+            <label for="node-config-input-disabled" style="margin-bottom: 0" data-i18n="ui-page.label.interactivity"></label>
             <select id="node-config-input-disabled" style="width: 150px;">
                 <option value="false" data-i18n="ui-page.label.active"></option>
                 <option value="true" data-i18n="ui-page.label.disabled"></option>
@@ -149,7 +149,7 @@
         </div>
     </div>
     <div class="form-row">
-        <button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small">Open Dashboard 2.0 Sidebar</button>
+        <button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small" data-i18n="ui-page.label.openDashboardSidebar"></button>
     </div>
 
 </script>

package/nodes/widgets/icons/ui-gauge.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="200 200 800 800" xmlns="http://www.w3.org/2000/svg">
+    <path fill="white" d="m600 405.17c137.38 0 249.39 112.01 249.39 249.39 0 51.934-16.117 100.28-43.453 140.28l-47.23-37.316c19.168-29.574 30.23-64.938 30.23-102.96 0-104.7-84.227-188.93-188.93-188.93-104.7 0-188.93 84.23-188.93 188.93 0 38.031 11.059 73.395 30.23 102.96l-47.23 37.312c-27.344-40-43.457-88.34-43.457-140.28 0-137.37 112.01-249.39 249.38-249.39zm-133.67 176.18 160.35 106.98c14.758 14.758 14.758 38.617 0 53.371-14.758 14.758-38.617 14.758-53.371 0l-106.98-160.35z"/>
+</svg>

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

@@ -1,50 +1,51 @@
-
 <script type="text/html" data-help-name="ui-chart">
     <h3>Properties</h3>
     <dl class="message-properties">
-        <dt>Label <span class="property-type">str</span></dt>
+        <dt>Label <span class="property-type">string</span></dt>
         <dd>Text shown above the rendered chart in the Dashboard.</dd>
-        <dt>Type <span class="property-type">line | bar | scatter</span></dt>
+        <dt>Type <span class="property-type">Line | Bar | Scatter</span></dt>
         <dd>Choose the type of graph that you wish to render data with. Note
             that different data structures are accepted for different chart types.</dd>
-        <dt>Show Legend <span class="property-type">bool</span></dt>
+        <dt>Show Legend <span class="property-type">boolean</span></dt>
         <dd>Defines whether or not a legend is shown between the title and the chart. Each label is driven by <code>msg.topic</code>.</dd>
-        <dt>Action <span class="property-type">append | replace</span></dt>
+        <dt>Action <span class="property-type">Append | Replace</span></dt>
         <dd>
             Define how new data is added to the Chart. "Append" will keep
             existing data, "Replace" will remove all existing data.
         </dd>
-        <dt>X-Axis Type <span class="property-type">linear | categorical | time</span></dt>
+        <dt>X-Axis Type <span class="property-type">Linear | Categorical | Timescale</span></dt>
         <dd>
-            For charts with an x-axis, this option allows customisation
+            For charts with an X-axis, this option allows customisation
             of the type of axis to render.
         </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. 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>
+            <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>
     </dl>
     <h3>Input</h3>
     <p>Data can be passed into the Chart node in a variety of formats,
-    depending on the "X-Axis Type" (e.g. linear, categorical, time).</p>
+    depending on the "X-Axis Type" (e.g. Linear, Categorical, Timescale).</p>
     <dl class="message-properties">
-        <dt>Numerical <span class="property-type">linear | categorical | time</span></dt>
+        <dt>Numerical <span class="property-type">Linear | Categorical | Timescale</span></dt>
         <dd><pre>msg.payload = 5</pre> A single value, that will be plotted
-            in the y-axis, and the current time of injection as the x-value.</dd>
-        <dt>Series <span class="property-type">linear | categorical | time</span></dt>
+            in the Y-axis, and the current time of injection as the X-value.</dd>
+        <dt>Series <span class="property-type">Linear | Categorical | Timescale</span></dt>
         <dd><pre>msg.topic = 'Series 1'</pre> Multiple series can
-            be shown on the same chart by using a different msg.topic value on each
+            be shown on the same chart by using a different <code>msg.topic</code> value on each
             input message.</dd>
-        <dt>Object <span class="property-type">linear</span></dt>
+        <dt>Object <span class="property-type">Linear</span></dt>
         <dd><pre>msg.payload = {x: 10, y: 15}</pre>This type of data is only
             supported on linear plots, e.g. "Line" or "Scatter" charts.</dd>
     </dl>
     <h3>Dynamic Proeprties</h3>
-    <dt>msg.action <span class="property-type">append | replace</span></dt>
-    <dd>
-        Can be used to override the default action property set in the node's configuration.
-        Use this if sometimes you want to "append" data, and sometimes you want to "replace" it.
-    </dd>
+    <dl class="message-properties">
+        <dt>msg.action <span class="property-type">append | replace</span></dt>
+        <dd>
+            Can be used to override the default action property set in the node's configuration.
+            Use this if sometimes you want to "append" data, and sometimes you want to "replace" it.
+        </dd>
+    </dl>
 </script>

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

@@ -1,6 +1,31 @@
 {
     "ui-chart": {
         "label": {
+            "line": "Line",
+            "bar": "Bar",
+            "scatter": "Scatter",
+            "circle": "Circle",
+            "cross": "Cross",
+            "crossRotated": "Cross Rotated",
+            "dash": "Dash",
+            "line2": "Line",
+            "rectangle": "Rectangle",
+            "roundedRectangle": "Rounded Rectangle",
+            "rotatedRectangle": "Rotated Rectangle",
+            "star": "Star",
+            "triangle": "Triangle",
+            "none": "None",
+            "timescale": "Timescale",
+            "linear": "Linear",
+            "categorical": "Categorical",
+            "group": "Group",
+            "size": "Size",
+            "label": "Label",
+            "optionalChartTitle": "optional chart title",
+            "class": "Class",
+            "optionalCssClassNames": "Optional CSS class name(s)",
+            "type": "Type",
+            "showLegend": "Show Legend",
             "seriesColors": "Series Colors",
             "seconds": "Seconds",
             "minutes": "Minutes",
@@ -15,6 +40,10 @@
             "yAxis": "Y-Axis",
             "min": "min.",
             "max": "max.",
+            "properties": "Properties",
+            "series": "Series:",
+            "key": "key:",
+            "propertyPlaceholder": "msg.payload[key] or msg.payload[n][key]",
             "pointStyle": "Point Style",
             "pointShape": "Shape",
             "pointRadius": "Radius (px)",
@@ -23,4 +52,4 @@
             "replace": "Replace"
         }
     }
-  }
+}

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

@@ -0,0 +1,28 @@
+
+<script type="text/html" data-help-name="ui-gauge">
+    <h3>Properties</h3>
+    <dl class="message-properties">
+        <dt>Type <span class="property-type">half | 3/4</span></dt>
+        <dd>Defines the shape of the gauge, "Half Gauge" or "3/4 Gauge".</dd>
+        <dt>Style <span class="property-type">rounded | needle</span></dt>
+        <dd>Defines the style of arc rendered, "Needle" or "Rounded"</dd>
+        <dt>Range <span class="property-type">number</span></dt>
+        <dd>The smallest and largest values that can be rendered on the gauge</dd>
+        <dt>Segments <span class="property-type">list</span></dt>
+        <dd>Collection of objects that defines each coloured segment on the gauge</dd>
+        <dt>Label <span class="property-type">list</span></dt>
+        <dd>The title text shown above the gauge</dd>
+        <dt>Prefix <span class="property-type">str</span></dt>
+        <dd>Text to be added <i>before</i> the value in the middle of the gauge.</dd>
+        <dt>Suffix <span class="property-type">str</span></dt>
+        <dd>Text to be added <i>after</i> the value in the middle of the gauge.</dd>
+        <dt>Units <span class="property-type">str</span></dt>
+        <dd>Small text to be shown below the value in the middle of the gauge.</dd>
+        <dt>Sizes (Gauge) <span class="property-type">number</span></dt>
+        <dd>A numerical value, in pixels, that defines the thickness of the arc and backdrop rendered.</dd>
+        <dt>Sizes (Gap) <span class="property-type">number</span></dt>
+        <dd>A numerical value, in pixels, that defines the gap between the arc and the segments.</dd>
+        <dt>Sizes (Segments) <span class="property-type">number</span></dt>
+        <dd>A numerical value, in pixels, that defines the thickness of the segments rendered in the gauge.</dd>
+    </dl>
+</script>

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

@@ -0,0 +1,32 @@
+{
+    "ui-gauge": {
+        "label": {
+            "name": "Name",
+            "group": "Group",
+            "size": "Size",
+            "type": "Type",
+            "style": "Style",
+            "gaugeHalf": "Half Gauge",
+            "gauge34": "3/4 Gauge",
+            "needle": "Needle",
+            "rounded": "Rounded",
+            "limits": "Limits",
+            "range": "Range",
+            "min": "min.",
+            "max": "max.",
+            "segments": "Segments",
+            "labelling": "Labelling",
+            "label": "Label",
+            "prefix": "Prefix",
+            "suffix": "Suffix",
+            "sizes": "Sizes",
+            "gauge": "Gauge",
+            "gap": "Gap",
+            "styling": "Styling",
+            "class": "Class"
+        },
+        "errors": {
+            "unique": "All 'from' values must be unique."
+        }
+    }
+  }