Merge pull request #951 from bartbutenaers/chart-x-axis-format

Chart x axis format
FlowFuse · Jun 12, 2024 · ee1529e · ee1529e
2 parents 76c898a + 47a27ba
commit ee1529e
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 7 deletions.
diff --git a/docs/nodes/widgets/ui-chart.md b/docs/nodes/widgets/ui-chart.md
@@ -13,6 +13,9 @@ props:
     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 Format: <code>HH:mm:ss</code> | <code>HH:mm</code> | <code>YYYY-MM-DD</code> | <code>DD/MM</code> | <code>dd HH:mm</code> | <code>Custom</code> | <code>Auto</code>
+        Defines how the values are displayed on the axis, when X-Axis type is <code>'timescale'</code>.
+        See <a target="_blank" href="https://moment.github.io/luxon/#/formatting?id=table-of-tokens">here</a> for an overview of all available Luxon tokens.
     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:
         <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.</br>
@@ -426,4 +429,4 @@ const msg = {
 }
 ```
 
-This would render two bars, one labelled `value` with a value of `34`, and one labelled `nested.value` with a value of `12`.
+This would render two bars, one labelled `value` with a value of `34`, and one labelled `nested.value` with a value of `12`.
diff --git a/nodes/widgets/locales/en-US/ui_chart.html b/nodes/widgets/locales/en-US/ui_chart.html
@@ -18,6 +18,10 @@ <h3>Properties</h3>
             For charts with an X-axis, this option allows customisation
             of the type of axis to render.
         </dd>
+        <dt>X-Axis Format <span class="property-type">HH:mm:ss | HH:mm | YYYY-MM-DD | DD/MM | dd HH:mm | custom | auto</span></dt>
+        <dd>Defines how the values are displayed on the axis, when X-Axis type is <code>'timescale'</code>.
+            See <a target="_blank" href="https://moment.github.io/luxon/#/formatting?id=table-of-tokens">here</a> for an overview of all available Luxon tokens.  
+        </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>
@@ -48,4 +52,4 @@ <h3>Dynamic Properties</h3>
             Use this if sometimes you want to "append" data, and sometimes you want to "replace" it.
         </dd>
     </dl>
-</script>
+</script>
diff --git a/nodes/widgets/locales/en-US/ui_chart.json b/nodes/widgets/locales/en-US/ui_chart.json
@@ -51,7 +51,15 @@
             "pointRadius": "Radius (px)",
             "action": "Action",
             "append": "Append",
-            "replace": "Replace"
+            "replace": "Replace",
+            "xFormat": "Format",
+            "HHmmss": "HH:mm:ss",
+            "HHmm": "HH:mm",
+            "yLd": "y-L-d",
+            "dL": "d/L",
+            "cccHHmm": "ccc HH:mm",
+            "custom": "Custom",
+            "auto": "Automatic" 
         }
     }
-}
+}
diff --git a/nodes/widgets/ui_chart.html b/nodes/widgets/ui_chart.html
@@ -59,6 +59,8 @@
                 xAxisProperty: { value: null },
                 xAxisPropertyType: { value: 'msg' },
                 xAxisType: { value: 'time' },
+                xAxisFormat: { value: '' },
+                xAxisFormatType: { value: 'auto' },
                 yAxisLabel: { value: '' },
                 yAxisProperty: { value: null },
                 ymin: { value: '', validate: function (value) { return value === '' || RED.validators.number() } },
@@ -147,6 +149,31 @@
                 // provide options for x-axis type
                 $('#node-input-xAxisType').typedInput()
 
+                // handle event when x axis type is changed
+                $('#node-input-xAxisType').on('change', (evt) => {
+                    const value = $('#node-input-xAxisType').typedInput('value')
+
+                    if (value === 'time') {
+                        $('#x-axis-format').show()
+                    } else {
+                        $('#x-axis-format').hide()
+                    }
+                })
+
+                $('#node-input-xAxisFormat').typedInput({
+                    default: 'auto',
+                    typeField: $('#node-input-xAxisFormatType'),
+                    types: [
+                        {value: 'HH:mm:ss', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.HHmmss'), hasValue: false},
+                        {value: 'HH:mm', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.HHmm'), hasValue: false},
+                        {value: 'y-L-d', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.yLd'), hasValue: false},
+                        {value: 'd/L', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.dL'), hasValue: false},
+                        {value: 'ccc HH:mm', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.cccHHmm'), hasValue: false},
+                        {value: 'custom', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.custom'), icon: "fa fa-font"},
+                        {value: 'auto', label: RED._('@flowfuse/node-red-dashboard/ui-chart:ui-chart.label.auto'), hasValue: false}
+                    ]
+                })
+
                 $('#node-input-category').typedInput({
                     default: 'msg',
                     typeField: $('#node-input-categoryType'),
@@ -347,6 +374,11 @@
         <input type="text" id="node-input-xAxisType">
         <input type="hidden" id="node-input-xAxisTypeType">
     </div>
+    <div class="form-row" id="x-axis-format">
+        <label for="node-input-xAxisFormat" data-i18n="ui-chart.label.xFormat"></label></label>
+        <input type="text" id="node-input-xAxisFormat">
+        <input type="hidden" id="node-input-xAxisFormatType">
+    </div>
     <div class="form-row">
         <label for="node-input-xAxisLabel" data-i18n="ui-chart.label.xLabel"></label></label>
         <input type="text" id="node-input-xAxisLabel">

diff --git a/ui/src/widgets/ui-chart/UIChart.vue b/ui/src/widgets/ui-chart/UIChart.vue
@@ -38,6 +38,10 @@ export default {
         'props.xAxisType': function (value) {
             this.chart.options.scales.x.type = value
             this.chart.update()
+        },
+        'props.xAxisFormatType': function (value) {
+            this.chart.options.scales.x.time.displayFormats = this.getXDisplayFormats(value)
+            this.chart.update()
         }
     },
     created () {
@@ -100,9 +104,7 @@ export default {
                             text: this.props.xAxisLabel
                         },
                         time: {
-                            displayFormats: {
-                                millisecond: 'HH:mm:ss'
-                            }
+                            displayFormats: this.getXDisplayFormats(this.props.xAxisFormatType)
                         }
                     },
                     y: yOptions
@@ -163,6 +165,36 @@ export default {
                 this.add(msg)
             }
         },
+        getXDisplayFormats (xAxisFormatType) {
+            const xDisplayFormats = {}
+            if (xAxisFormatType === 'auto' || !xAxisFormatType || xAxisFormatType === '') {
+                // If automatic format or no format (backwards compatibility for older nodes)
+                xDisplayFormats.millisecond = 'HH:mm:ss'
+            } else if (xAxisFormatType === 'custom') {
+                // For the custom format, the entered format is stored by the typedInput in its value field
+                xDisplayFormats.millisecond = this.props.xAxisFormat
+                xDisplayFormats.second = this.props.xAxisFormat
+                xDisplayFormats.minute = this.props.xAxisFormat
+                xDisplayFormats.hour = this.props.xAxisFormat
+                xDisplayFormats.day = this.props.xAxisFormat
+                xDisplayFormats.week = this.props.xAxisFormat
+                xDisplayFormats.month = this.props.xAxisFormat
+                xDisplayFormats.quarter = this.props.xAxisFormat
+                xDisplayFormats.year = this.props.xAxisFormat
+            } else {
+                // For all other formats, the format is stored by the typedInput in the type field
+                xDisplayFormats.millisecond = xAxisFormatType
+                xDisplayFormats.second = xAxisFormatType
+                xDisplayFormats.minute = xAxisFormatType
+                xDisplayFormats.hour = xAxisFormatType
+                xDisplayFormats.day = xAxisFormatType
+                xDisplayFormats.week = xAxisFormatType
+                xDisplayFormats.month = xAxisFormatType
+                xDisplayFormats.quarter = xAxisFormatType
+                xDisplayFormats.year = xAxisFormatType
+            }
+            return xDisplayFormats
+        },
         clear () {
             this.chart.data.labels = []
             this.chart.data.datasets = []