New Widget: UI Gauge

docs/.vitepress/config.js

@@ -88,6 +88,7 @@ export default ({ mode }) => {
                 { text: 'ui-dropdown', link: '/nodes/widgets/ui-dropdown' },
                 { text: 'ui-event', link: '/nodes/widgets/ui-event' },
                 { text: 'ui-form', link: '/nodes/widgets/ui-form' },
+                { text: 'ui-gauge', link: '/nodes/widgets/ui-gauge' },
                 { text: 'ui-markdown', link: '/nodes/widgets/ui-markdown' },
                 { text: 'ui-notification', link: '/nodes/widgets/ui-notification' },
                 { text: 'ui-radio-group', link: '/nodes/widgets/ui-radio-group' },

docs/nodes/widgets/ui-gauge.md

@@ -0,0 +1,69 @@
+---
+props:
+    Group: Defines which group of the UI Dashboard this widget will render in.
+    Size: Controls the width of the dropdown with respect to the parent group. Maximum value is the width of the group.
+    Type: Defines the shape of the gauge, "Half Gauge" or "3/4 Gauge"
+    Style: Defines the style of arc rendered, "Needle" or "Rounded"
+    Range (min): The smallest value that can be shown on the gauge
+    Range (max): The largest value that can be shown on the gauge
+    Segments: Defines the barriers by which the arc is color coded. These segments can also be shown on the gauge.
+    Label: Text shown above the gauge, labelling what the gauge is showing.
+    Prefix: Text to be added _before_ the value in the middle of the gauge.
+    Suffix: Text to be shown _after_ the value in the middle of the gauge.
+    Units: Small text to be shown below the value in the middle of the gauge.
+    Sizes (Gauge): (px) How thick the arc and backdrop of the gauge are rendered.
+    Sizes (Gap): (px) How big the gap/padding is between the Gauge and the "Segments"
+    Sizes (Segments): (px) How thick the segments are rendered.
+---
+
+
+<script setup>
+    import AddedIn from '../../components/AddedIn.vue';
+</script>
+
+# Gauge `ui-gauge` <AddedIn version="1.1.0"/>
+
+Adds a Guage Chart to your Dashboard. This can be configured with custom types (half, 3/4), styles (rounded, needle) and segmentation with examples detailed [below](#examples).
+
+## Properties
+
+<PropsTable/>
+
+## Examples
+
+### Half Gauge - Rounded
+
+| Type | Style | Size (Gauge) | Size (Gap) | Size (Segments) |
+| --- | --- | --- | --- | --- |
+| Half Gauge | Rounded | 16 | 2 | 8 |
+
+![Example of a Half Gauge, showing a rounded arc](/images/node-examples/ui-gauge-half-rounded.png "Example of a Half Gauge, showing a rounded arc"){data-zoomable}
+*Example of a Half Gauge, showing a rounded arc.*
+
+### Half Gauge - Needle
+
+| Type | Style | Suffix | Size (Gauge) | Size (Gap) | Size (Segments) |
+| --- | --- | --- | --- | --- | --- |
+| Half Gauge | Needle | % | 0 | 0 | 32 |
+
+![Example of a Half Gauge, showing a needle with segments-only](/images/node-examples/ui-gauge-half-needle.png "Example of a Half Gauge, showing a needle with segments-only"){data-zoomable}
+*Example of a Half Gauge, showing a needle with segments-only.*
+
+### 3/4 Gauge - Rounded
+
+| Type | Style | Size (Gauge) | Size (Gap) | Size (Segments) |
+| --- | --- | --- | --- | --- |
+| 3/4 Gauge | Rounded | 16 | 0 | 0 |
+
+![Example of a 3/4 Gauge, showing a rounded arc with no segments](/images/node-examples/ui-gauge-34-rounded.png "Example of a 3/4 Gauge, showing a rounded arc with no segments"){data-zoomable}
+*Example of a 3/4 Gauge, showing a rounded arc with no segments.*
+
+### 3/4 Gauge - Needle
+
+| Type | Style | Size (Gauge) | Size (Gap) | Size (Segments) |
+| --- | --- | --- | --- | --- |
+| 3/4 Gauge | Needle | 32 | 2 | 6 |
+
+![Example of a 3/4 Gauge, showing a needle with segments and an arc](/images/node-examples/ui-gauge-34-needle.png "Example of a 3/4 Gauge, showing a needle with segments and an arc"){data-zoomable}
+*Example of a 3/4 Gauge, showing a needle with segments and an arc.*
+

docs/user/migration.md

@@ -7,6 +7,7 @@
     import uiControl from './migration/ui_control.json'
     import uiDropdown from './migration/ui_dropdown.json'
     import uiForm from './migration/ui_form.json'
+    import uiGauge from './migration/ui_gauge.json'
     import uiSlider from './migration/ui_slider.json'
     import uiSwitch from './migration/ui_switch.json'
     import uiTemplate from './migration/ui_template.json'
@@ -20,6 +21,7 @@
         'ui_control': uiControl,
         'ui_dropdown': uiDropdown,
         'ui_form': uiForm,
+        'ui_gauge': uiGauge,
         'ui_slider': uiSlider,
         'ui_switch': uiSwitch,
         'ui_template': uiTemplate,
@@ -170,8 +172,6 @@ There has also been a [request](https://github.com/FlowFuse/node-red-dashboard/i
 
 <MigrationWidgetProfile :profile="widgets['ui_gauge']" />
 
-You can track progress of this development effort here: [Issue #12](https://github.com/FlowFuse/node-red-dashboard/issues/12)
-
 ### `ui_link`
 
 <MigrationWidgetProfile :profile="widgets['ui_link']" />

docs/user/migration/ui_gauge.json

@@ -0,0 +1,83 @@
+{
+    "node": "ui_dropdown",
+    "properties": [
+        {
+            "property": "name",
+            "changes": null,
+            "notes": null
+        },
+        {
+            "property": "group",
+            "changes": null,
+            "notes": null
+        },
+        {
+            "property": "size",
+            "changes": null,
+            "notes": null
+        },
+        {
+            "property": "title",
+            "changes": null,
+            "notes": null
+        },
+        {
+            "property": "gtype",
+            "changes": -2,
+            "notes": "Half Gauges and 3/4 Gauages are supported, currently no support for 'Compass', 'Levels' and 'Donut'"
+        },
+        {
+            "property": "label",
+            "changes": null,
+            "notes": "Changed to 'units'"
+        },
+        {
+            "property": "format",
+            "changes": -3,
+            "notes": "Replaced with 'prefix' and 'suffix' options"
+        },
+        {
+            "property": "seg1",
+            "changes": -3,
+            "notes": "Replaced with more flexible segments systems"
+        },
+        {
+            "property": "seg2",
+            "changes": -3,
+            "notes": "Replaced with more flexible segments systems"
+        },
+        {
+            "property": "colors",
+            "changes": -3,
+            "notes": "Replaced with more flexible segments systems"
+        },
+        {
+            "property": "diff",
+            "changes": -3,
+            "notes": ""
+        },
+        {
+            "property": "class",
+            "changes": null,
+            "notes": null
+        }
+    ],
+    "new_properties": [
+        {
+            "property": "gstyle",
+            "notes": "Allows for control over whether the arc is rounded or a 'needle' style"
+        },
+        {
+            "property": "prefix",
+            "notes": "Text shown before the value in the center of the gauge"
+        },
+        {
+            "property": "suffix",
+            "notes": "Text shown after the value in the center of the gauge"
+        },
+        {
+            "property": "segments",
+            "notes": "Array of objects that define the segments of the gauge"
+        }
+    ]
+}

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>

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."
+        }
+    }
+  }