diff --git a/docs/en/nodes/widgets/ui-chart.md b/docs/en/nodes/widgets/ui-chart.md index a7b3a37ac..82dd02b66 100644 --- a/docs/en/nodes/widgets/ui-chart.md +++ b/docs/en/nodes/widgets/ui-chart.md @@ -16,7 +16,7 @@ props: X-Axis Format: {HH}:{mm}:{ss} | {HH}:{mm} | {yyyy}-{M}-{d} | {d}/{M} | {ee} {HH}:{mm} | Custom | Auto Defines how the values are displayed on the axis, when X-Axis type is 'timescale'. See here for an overview of the available format types. - 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. + 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. The time based limit may be disabled by setting the value to 0. Properties: Series: Controls how you want to set the Series of data stream into this widget. The default is msg.topic, where separate topics will render to a new line/bar in their respective plots.
X: Defines which data to use when rendering the x-value of any data point.
diff --git a/examples/full-example.json b/examples/full-example.json index d7c805f5f..d56c6015a 100644 --- a/examples/full-example.json +++ b/examples/full-example.json @@ -553,7 +553,7 @@ "category": "location", "categoryType": "property", "xAxisProperty": "datestamp", - "xAxisPropertyType": "msg", + "xAxisPropertyType": "property", "xAxisType": "time", "yAxisProperty": "temp", "ymin": "", @@ -562,7 +562,7 @@ "pointShape": "circle", "pointRadius": 4, "showLegend": true, - "removeOlder": 1, + "removeOlder": 0, "removeOlderUnit": "3600", "removeOlderPoints": "", "colors": [ @@ -699,7 +699,7 @@ "category": "", "categoryType": "str", "xAxisProperty": "x", - "xAxisPropertyType": "msg", + "xAxisPropertyType": "property", "xAxisType": "linear", "yAxisProperty": "y", "ymin": "", diff --git a/examples/line-chart.json b/examples/line-chart.json index 89cd16150..0dd35e676 100644 --- a/examples/line-chart.json +++ b/examples/line-chart.json @@ -26,7 +26,7 @@ "pointShape": "circle", "pointRadius": 4, "showLegend": true, - "removeOlder": 1, + "removeOlder": 0, "removeOlderUnit": "3600", "removeOlderPoints": "", "colors": [ diff --git a/nodes/widgets/locales/en-US/ui_chart.html b/nodes/widgets/locales/en-US/ui_chart.html index aeebdfe39..5f1b97140 100644 --- a/nodes/widgets/locales/en-US/ui_chart.html +++ b/nodes/widgets/locales/en-US/ui_chart.html @@ -31,6 +31,15 @@

Properties

Defines how the values are displayed on the axis, when X-Axis type is 'timescale'. See here for an overview of the available format types.
+ +
X-Axis Limit
+
When the X-Axis Type is Timescale these properties define under what circumstances to remove old data from the chart. + For example setting this to last 5 minutes will cause data to be removed from the chart when it is greater than 5 minutes old. + To disable time based removal of data (for example if displaying historical data) set last to 0. + In addition a data points limit can be applied, in which case old data will be removed when there are more than the specified number of points on the chart + If both a time limit and points limit are specified then both will be applied. +
+
Properties string

Series: Controls how you want to set the Series of data stream into this widget. The default is msg.topic, 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.

diff --git a/nodes/widgets/ui_chart.js b/nodes/widgets/ui_chart.js index eb73b012b..7110b1bef 100644 --- a/nodes/widgets/ui_chart.js +++ b/nodes/widgets/ui_chart.js @@ -51,18 +51,21 @@ module.exports = function (RED) { */ function clearOldPoints () { const removeOlder = parseFloat(config.removeOlder) - const removeOlderUnit = parseFloat(config.removeOlderUnit) - const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago - const cutoff = (new Date()).getTime() - ago - const _msg = datastore.get(node.id).filter((msg) => { - let timestamp = msg._datapoint.x - // is x already a millisecond timestamp? - if (typeof (msg._datapoint.x) === 'string') { - timestamp = (new Date(msg._datapoint.x)).getTime() - } - return timestamp > cutoff - }) - datastore.save(base, node, _msg) + // only prune if removeOlder > 0 + if (removeOlder > 0) { + const removeOlderUnit = parseFloat(config.removeOlderUnit) + const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago + const cutoff = (new Date()).getTime() - ago + const _msg = datastore.get(node.id).filter((msg) => { + let timestamp = msg._datapoint.x + // is x already a millisecond timestamp? + if (typeof (msg._datapoint.x) === 'string') { + timestamp = (new Date(msg._datapoint.x)).getTime() + } + return timestamp > cutoff + }) + datastore.save(base, node, _msg) + } } // ensure sane defaults diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue index b754b68ee..3e3803f8e 100644 --- a/ui/src/widgets/ui-chart/UIChart.vue +++ b/ui/src/widgets/ui-chart/UIChart.vue @@ -698,9 +698,12 @@ export default { let points = null if (this.props.xAxisType === 'time' && this.props.removeOlder && this.props.removeOlderUnit) { const removeOlder = parseFloat(this.props.removeOlder) - const removeOlderUnit = parseFloat(this.props.removeOlderUnit) - const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago - cutoff = (new Date()).getTime() - ago + // only prune if removeOlder > 0 + if (removeOlder > 0) { + const removeOlderUnit = parseFloat(this.props.removeOlderUnit) + const ago = (removeOlder * removeOlderUnit) * 1000 // milliseconds ago + cutoff = (new Date()).getTime() - ago + } } if (this.props.removeOlderPoints) { @@ -715,7 +718,7 @@ export default { for (let i = 0; i < series.length; i++) { const length = series[i].data.length // check how much data there is in this series series[i].data = series[i].data.filter((d, i) => { - if (cutoff && d.x < cutoff) { + if (cutoff && d[0] < cutoff) { return false } else if (points && (i < length - points)) { return false