Merge pull request #468 from FlowFuse/447-ui-chart-dotsize

UI Chart - Add point shape & radius options
FlowFuse · Jan 3, 2024 · 2165d42 · 2165d42
2 parents ddddcd6 + 7361be2
commit 2165d42
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 3 deletions.
diff --git a/docs/nodes/widgets/ui-chart.md b/docs/nodes/widgets/ui-chart.md
@@ -6,6 +6,8 @@ props:
     Class: The text shown within the button.
     Chart Type: <code>Line</code> | <code>Bar</code> | <code>Scatter</code>
     Show Legend: Defines whether or not a legend is shown between the title and the chart. Each label is driven by <code>msg.topic</code>.
+    Point Shape: Define the shape of the point shown in Scatter & Line charts.
+    Point Radius: Define the radius (in pixels) of each point rendered onto a Scatter or Line chart.
     X-Axis Type: <code>Timescale</code> | <code>Linear</code> | <code>Categorical</code>
     X-Axis Limit: Any data that is before the specific time limit (for time charts) or where there are more data points than the limit specified will be removed from the chart.
     Properties:

diff --git a/docs/user/migration/ui_chart.json b/docs/user/migration/ui_chart.json
@@ -32,6 +32,11 @@
             "changes": null,
             "notes": null
         },
+        {
+            "property": "cutout",
+            "changes": "improved",
+            "notes": "We now support both the 'size' and 'shape' of dots in a Scater and Line chart."
+        },
         {
             "property": "interpolate",
             "changes": -1,

diff --git a/nodes/widgets/locales/en-US/ui_chart.json b/nodes/widgets/locales/en-US/ui_chart.json
@@ -14,7 +14,10 @@
             "last": "last",
             "yAxis": "Y-Axis",
             "min": "min.",
-            "max": "max."
+            "max": "max.",
+            "pointStyle": "Point Style",
+            "pointShape": "Shape",
+            "pointRadius": "Radius (px)"
         }
     }
   }
diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html
@@ -61,6 +61,8 @@
                 yAxisProperty: { value: null },
                 ymin: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
                 ymax: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
+                pointShape: { value: 'circle' },
+                pointRadius: { value: 4 },
                 showLegend: { value: true },
                 removeOlder: { value: 1, validate: RED.validators.number(), required: true },
                 removeOlderUnit: { value: '3600', required: true },
@@ -144,6 +146,29 @@
                     typeField: $('#node-input-yAxisPropertyType'),
                     types: [propertyType]
                 })
+
+                $('#node-input-pointShape').typedInput({
+                    type: 'pointShape',
+                    default: 'circle',
+                    typeField: $('#node-input-pointShapeType'),
+                    types: [{
+                        value: 'circle',
+                        options: [
+                            { value: 'circle', label: 'Circle' },
+                            { value: 'cross', label: 'Cross' },
+                            { value: 'crossRot', label: 'Cross Rotated' },
+                            { value: 'crossRot', label: 'Cross Rotated' },
+                            { value: 'dash', label: 'Dash' },
+                            { value: 'line', label: 'Line' },
+                            { value: 'rect', label: 'Rectangle' },
+                            { value: 'rectRounded', label: 'Rounded Rectangle' },
+                            { value: 'rectRot', label: 'Rotated Rectangle' },
+                            { value: 'star', label: 'Star' },
+                            { value: 'triangle', label: 'Triangle' },
+                            { value: false, label: 'None' }
+                        ]
+                    }]
+                })
 
                 // handle event when chart's type is changed
                 $('#node-input-chartType').on('change', (evt) => {
@@ -162,8 +187,9 @@
                         $('#node-input-xAxisType').typedInput('type', 'time')
                         // show x-axis property setting
                         $('#node-container-xAxisProperty').show()
-                        // show x-axis limit options
+                        // show x-axis limit options & points sizing
                         $('#x-axis-show').show()
+                        $('#point-radius-show').show()
                     } else {
                         // for bar
                         // types - categorical
@@ -176,8 +202,9 @@
                         $('#node-input-xAxisType').typedInput('type', 'category')
                         // show x-axis property setting
                         $('#node-container-xAxisProperty').hide()
-                        // hide x-axis limit options
+                        // hide x-axis limit options & points sizing
                         $('#x-axis-show').hide()
+                        $('#point-radius-show').hide()
                     }
                 })
 
@@ -271,6 +298,18 @@
             <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 form-row-flex" id="point-radius-show">
+        <label for="node-input-pointRadius" data-i18n="ui-chart.label.pointStyle"></label>
+        <div style="margin-right: 6px;">
+            <label for="node-input-pointShape" style="width: auto;" data-i18n="ui-chart.label.pointShape"></label>
+            <input type="text" id="node-input-pointShape">
+            <input type="hidden" id="node-input-pointShapeType">
+        </div>
+        <div>
+            <label for="node-input-pointRadius" style="width: auto;" data-i18n="ui-chart.label.pointRadius"></label>
+            <input type="number" id="node-input-pointRadius">
+        </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">

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
@@ -242,8 +242,12 @@ export default {
             const index = datalabels?.indexOf(label)
             // the chart is empty, we're adding a new series
             if (index === -1) {
+                const radius = this.props.pointRadius ? this.props.pointRadius : 4
                 this.chart.data.datasets.push({
                     borderColor: this.props.colors[datalabels.length],
+                    pointStyle: this.props.pointShape || 'circle',
+                    pointRadius: radius,
+                    pointHoverRadius: radius * 1.25,
                     label,
                     data: [datapoint]
                 })