Add msg support for y axis type #1325

Steve-Mcl · 2024-09-24T20:10:44Z

closes #1253

Description

adds

support for y-axis key and msg. (could not think how str would work!

fixes

fixes x-axis msg.xxx evaluation. Previously it was using the simple getProperty and trying to get msg.payload.payload.x now it uses the RED util function to correctly evaluate the prop
y-axis not being hidden when series is set to JSON type
string type for x-axis not working as expected
- e.g. on < v1.17.0, import the bar chart example and set the x-axis to string "USA" - we get a timestamp number
line chart example
- was configured to use msg.datestamp
- now that evaluating msg. is fixed, this breaks the example (it was working by accident)
scatter chart example
- was configured to use msg.x but now that evaluating msg. is fixed, this breaks the example (it was working by accident)
bar chart example:
- is configured to use msg.category (should really be key: category)
- now that evaluating msg. is fixed, this breaks the example (it was working by accident)
Other
- included a Clear inject on all three examples (save questions on the forum)
- remove duplicate payload+datapoint merges when processing an array of points

Related Issue(s)

#1253

Checklist

I have read the contribution guidelines
Suitable unit/system level tests have been added and they pass
Documentation has been updated
- Upgrade instructions
- Configuration details
- Concepts
Changes flowforge.yml?
- Issue/PR raised on FlowFuse/helm to update ConfigMap Template
- Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

Includes a DB migration? -> add the area:migration label

Steve-Mcl · 2024-09-25T08:26:11Z

switching to draft until I can add "before tests" - want to ensure no breaking changes (apart from where something is fixed)

joepavitt · 2024-10-04T12:36:20Z

Tying this, no data shows:

Example flow.json


[
    {
        "id": "453ffa5d8e76d3c4",
        "type": "ui-slider",
        "z": "28aca5b1020ec1a4",
        "group": "6c8f43b2f408eafe",
        "name": "",
        "label": "Slider 1",
        "tooltip": "",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": false,
        "outs": "all",
        "topic": "slider-1",
        "topicType": "str",
        "thumbLabel": "true",
        "showTicks": "always",
        "min": 0,
        "max": 10,
        "step": 1,
        "className": "",
        "iconPrepend": "",
        "iconAppend": "",
        "color": "",
        "colorTrack": "",
        "colorThumb": "",
        "x": 240,
        "y": 860,
        "wires": [
            [
                "e98d8a5e53d47b6a"
            ]
        ]
    },
    {
        "id": "e98d8a5e53d47b6a",
        "type": "function",
        "z": "28aca5b1020ec1a4",
        "name": "function 5",
        "func": "msg.payload = {\n    property: msg.topic,\n    y: msg.payload\n}\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 400,
        "y": 880,
        "wires": [
            [
                "acbe10ea9939c615",
                "996bd94ec0679207"
            ]
        ]
    },
    {
        "id": "43aef7526f600f5f",
        "type": "ui-slider",
        "z": "28aca5b1020ec1a4",
        "group": "6c8f43b2f408eafe",
        "name": "",
        "label": "Slider 2",
        "tooltip": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": false,
        "outs": "all",
        "topic": "slider-2",
        "topicType": "str",
        "thumbLabel": "true",
        "showTicks": "always",
        "min": 0,
        "max": 10,
        "step": 1,
        "className": "",
        "iconPrepend": "",
        "iconAppend": "",
        "color": "",
        "colorTrack": "",
        "colorThumb": "",
        "x": 240,
        "y": 900,
        "wires": [
            [
                "e98d8a5e53d47b6a"
            ]
        ]
    },
    {
        "id": "c0ab386dfae3e05c",
        "type": "ui-slider",
        "z": "28aca5b1020ec1a4",
        "group": "6c8f43b2f408eafe",
        "name": "",
        "label": "Slider 3",
        "tooltip": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": false,
        "outs": "all",
        "topic": "slider-3",
        "topicType": "str",
        "thumbLabel": "true",
        "showTicks": "always",
        "min": 0,
        "max": 10,
        "step": 1,
        "className": "",
        "iconPrepend": "",
        "iconAppend": "",
        "color": "",
        "colorTrack": "",
        "colorThumb": "",
        "x": 240,
        "y": 940,
        "wires": [
            [
                "e98d8a5e53d47b6a"
            ]
        ]
    },
    {
        "id": "acbe10ea9939c615",
        "type": "debug",
        "z": "28aca5b1020ec1a4",
        "name": "debug 389",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 570,
        "y": 840,
        "wires": []
    },
    {
        "id": "996bd94ec0679207",
        "type": "ui-chart",
        "z": "28aca5b1020ec1a4",
        "group": "6c8f43b2f408eafe",
        "name": "Time Bar Chart",
        "label": "X - key.property, Series - static string",
        "order": 4,
        "chartType": "bar",
        "category": "My Data",
        "categoryType": "str",
        "xAxisLabel": "",
        "xAxisProperty": "property",
        "xAxisPropertyType": "property",
        "xAxisType": "category",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "yAxisLabel": "",
        "yAxisProperty": "",
        "ymin": "",
        "ymax": "",
        "action": "append",
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "width": 6,
        "height": 8,
        "className": "",
        "x": 580,
        "y": 880,
        "wires": [
            []
        ]
    },
    {
        "id": "7b083a13745e44e3",
        "type": "inject",
        "z": "28aca5b1020ec1a4",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 410,
        "y": 920,
        "wires": [
            [
                "996bd94ec0679207"
            ]
        ]
    },
    {
        "id": "6c8f43b2f408eafe",
        "type": "ui-group",
        "name": "Bar Chart - X Properties",
        "page": "d0621b8f20aee671",
        "width": "6",
        "height": "1",
        "order": 4,
        "showTitle": true,
        "className": "",
        "visible": true,
        "disabled": "false"
    },
    {
        "id": "d0621b8f20aee671",
        "type": "ui-page",
        "name": "Charts",
        "ui": "c2e1aa56f50f03bd",
        "path": "/charts",
        "icon": "home",
        "layout": "notebook",
        "theme": "5075a7d8e4947586",
        "order": 33,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "c2e1aa56f50f03bd",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-control",
            "ui-notification"
        ],
        "showPathInSidebar": false,
        "showPageTitle": false,
        "navigationStyle": "icon",
        "titleBarStyle": "default"
    },
    {
        "id": "5075a7d8e4947586",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

joepavitt

Details left in comment above

Steve-Mcl · 2024-10-04T12:44:58Z

your demo flow works perfect for me

joepavitt · 2024-10-04T12:47:07Z

Hmmm.... I see these errors in the NR Debug Panel. Definitely running your branch, and have re-built, restarted, etc.

Steve-Mcl · 2024-10-04T12:57:59Z

Hmmm.... I see these errors in the NR Debug Panel. Definitely running your branch, and have re-built, restarted, etc.

Weird. I'm looking now

I'd like get this merged today if possible.

joepavitt · 2024-10-04T13:02:10Z

Ah, my fault, the example I shared is broken (did you change it to get it working?), it should have marked the y property as key: y, and it did not.

Steve-Mcl · 2024-10-04T13:03:56Z

Ah, my fault, the example I shared is broken (did you change it to get it working?), it should have marked the y property as key: y, and it did not.

I changed the examples in the examples folder (as noted in the OP) because they were wrongly setting msg.y as the property. They only worked by accident because we never evaluated the msg props for the y axis.

Steve-Mcl · 2024-10-04T13:06:06Z

Ah, my fault, the example I shared is broken (did you change it to get it working?)

Re-read - no i didnt, but i did open it and "look" at its config.

I'll try once more, plain import and deploy...

Steve-Mcl · 2024-10-04T13:08:05Z

Ah, my fault, the example I shared is broken (did you change it to get it working?)

Re-read - no i didnt, but i did open it and "look" at its config.

I'll try once more, plain import and deploy...

All good

Steve-Mcl added 10 commits September 24, 2024 20:58

fix broken show/hide of y-axis

eb5fa76

add typed input option msg to y-axis

c52ab78

rename array for clarity

f24a698

ensure sane values

6e86a0b

fix data point evaluation for msg types

52ce831

better dx

081dbc9

ensure parsing key is not set for key type

a514f93

if no mapping key set, use server side datapoint.x/y

a2ed6c2

dont merge payload+datapoint twice

71f6b33

fix built-in examples

913ee57

Steve-Mcl marked this pull request as draft September 25, 2024 08:26

Steve-Mcl mentioned this pull request Sep 25, 2024

Charts e2e tests (mvp) #1331

Merged

10 tasks

Steve-Mcl requested review from cstns and removed request for cstns September 26, 2024 10:31

Steve-Mcl marked this pull request as ready for review October 1, 2024 09:53

joepavitt self-requested a review October 4, 2024 08:23

joepavitt requested changes Oct 4, 2024

View reviewed changes

joepavitt self-requested a review October 4, 2024 13:03

joepavitt approved these changes Oct 4, 2024

View reviewed changes

joepavitt merged commit a0b468b into main Oct 4, 2024
1 of 2 checks passed

joepavitt deleted the 1253-y-axis-type branch October 4, 2024 13:03

Steve-Mcl mentioned this pull request Oct 12, 2024

V1.18.0: Line charts with comple data in payload no more working #1383

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add msg support for y axis type #1325

Add msg support for y axis type #1325

Steve-Mcl commented Sep 24, 2024

Steve-Mcl commented Sep 25, 2024

joepavitt commented Oct 4, 2024 •

edited

Loading

joepavitt left a comment

Steve-Mcl commented Oct 4, 2024

joepavitt commented Oct 4, 2024

Steve-Mcl commented Oct 4, 2024

joepavitt commented Oct 4, 2024 •

edited

Loading

Steve-Mcl commented Oct 4, 2024

Steve-Mcl commented Oct 4, 2024

Steve-Mcl commented Oct 4, 2024

Add msg support for y axis type #1325

Add msg support for y axis type #1325

Conversation

Steve-Mcl commented Sep 24, 2024

Description

adds

fixes

Related Issue(s)

Checklist

Labels

Steve-Mcl commented Sep 25, 2024

joepavitt commented Oct 4, 2024 • edited Loading

joepavitt left a comment

Choose a reason for hiding this comment

Steve-Mcl commented Oct 4, 2024

joepavitt commented Oct 4, 2024

Steve-Mcl commented Oct 4, 2024

joepavitt commented Oct 4, 2024 • edited Loading

Steve-Mcl commented Oct 4, 2024

Steve-Mcl commented Oct 4, 2024

Steve-Mcl commented Oct 4, 2024

joepavitt commented Oct 4, 2024 •

edited

Loading

joepavitt commented Oct 4, 2024 •

edited

Loading