From 1198d6c45e842de9b7dd2730507238b251cdcc33 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Wed, 3 Jan 2024 14:04:28 +0000 Subject: [PATCH 1/3] UI Chart - Add point shape & radius options --- nodes/widgets/locales/en-US/ui_chart.json | 5 ++- nodes/widgets/ui_chart.html | 43 +++++++++++++++++++++-- ui/src/widgets/ui-chart/UIChart.vue | 4 +++ 3 files changed, 49 insertions(+), 3 deletions(-) diff --git a/nodes/widgets/locales/en-US/ui_chart.json b/nodes/widgets/locales/en-US/ui_chart.json index 075d033d9..2b599dd6f 100644 --- 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)" } } } \ No newline at end of file diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html index bce9e443b..c33e0734e 100644 --- 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: 3 }, 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 @@ +
+ +
+ + + +
+
+ + +
+
diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue index 4fac69a07..58b314363 100644 --- 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] }) From 877cdc851df321c162803430e1856862a6bc07d4 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Wed, 3 Jan 2024 14:09:13 +0000 Subject: [PATCH 2/3] Update ui-chart & migration docs --- docs/nodes/widgets/ui-chart.md | 2 ++ docs/user/migration/ui_chart.json | 5 +++++ 2 files changed, 7 insertions(+) diff --git a/docs/nodes/widgets/ui-chart.md b/docs/nodes/widgets/ui-chart.md index 7d9863eb9..0a5cc05e8 100644 --- 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: Line | Bar | Scatter Show Legend: Defines whether or not a legend is shown between the title and the chart. Each label is driven by msg.topic. + 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: Timescale | Linear | Categorical 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 index 52b4251b1..5d46553f3 100644 --- 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, From 7361be2a5754772b758b91480b2f4d1fea4810c2 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Wed, 3 Jan 2024 14:10:44 +0000 Subject: [PATCH 3/3] Change radius default --- nodes/widgets/ui_chart.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html index c33e0734e..1fbd10b30 100644 --- a/nodes/widgets/ui_chart.html +++ b/nodes/widgets/ui_chart.html @@ -62,7 +62,7 @@ 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: 3 }, + pointRadius: { value: 4 }, showLegend: { value: true }, removeOlder: { value: 1, validate: RED.validators.number(), required: true }, removeOlderUnit: { value: '3600', required: true },