Key Mapping in Dashboard 2.0

README.md

An example of how to use key-mapping with Dashboard 2.0's ui-chart node. It provides the option to parse data such as:

[
    {
        "time": "2023-11-14T19:00Z",
        "screenTemperature": 10.03,
        "maxScreenAirTemp": 10.4,
        "minScreenAirTemp": 9.99,
        "screenDewPointTemperature": 7.56,
        "feelsLikeTemperature": 8.09,
        "windSpeed10m": 3.86,
        "windDirectionFrom10m": 263,
        "windGustSpeed10m": 7.72,
        "max10mWindGust": 10.13,
        "visibility": 16258,
        "screenRelativeHumidity": 84.48,
        "mslp": 100360,
        "uvIndex": 0,
        "significantWeatherCode": 0,
        "precipitationRate": 0,
        "totalPrecipAmount": 0,
        "totalSnowAmount": 0,
        "probOfPrecipitation": 0
    }, ...
]

Without the need for data manipulation before rendering, as we can use the built-in "key" properties for the x/y axes.

For example in the first chart we render, we set:

Which will render each point of the array using (time, feelsLikeTemperature) as coordinates.

flow.json

[
    {
        "id": "fce77c1a380e8201",
        "type": "inject",
        "z": "e80e76260ef9846b",
        "name": "Sample Met Office Data",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"time\":\"2023-11-14T19:00Z\",\"screenTemperature\":10.03,\"maxScreenAirTemp\":10.4,\"minScreenAirTemp\":9.99,\"screenDewPointTemperature\":7.56,\"feelsLikeTemperature\":8.09,\"windSpeed10m\":3.86,\"windDirectionFrom10m\":263,\"windGustSpeed10m\":7.72,\"max10mWindGust\":10.13,\"visibility\":16258,\"screenRelativeHumidity\":84.48,\"mslp\":100360,\"uvIndex\":0,\"significantWeatherCode\":0,\"precipitationRate\":0,\"totalPrecipAmount\":0,\"totalSnowAmount\":0,\"probOfPrecipitation\":0},{\"time\":\"2023-11-15T19:00Z\",\"screenTemperature\":12.13,\"maxScreenAirTemp\":13.2,\"minScreenAirTemp\":9.9,\"screenDewPointTemperature\":7.56,\"feelsLikeTemperature\":10.1,\"windSpeed10m\":4.53,\"windDirectionFrom10m\":254,\"windGustSpeed10m\":8.4,\"max10mWindGust\":11.1,\"visibility\":16365,\"screenRelativeHumidity\":75.36,\"mslp\":100372,\"uvIndex\":0.1,\"significantWeatherCode\":0,\"precipitationRate\":0,\"totalPrecipAmount\":0,\"totalSnowAmount\":0,\"probOfPrecipitation\":0}]",
        "payloadType": "json",
        "x": 160,
        "y": 60,
        "wires": [
            [
                "c6624545f4820893",
                "eb1eb4ae3f46518e"
            ]
        ]
    },
    {
        "id": "c6624545f4820893",
        "type": "ui-chart",
        "z": "e80e76260ef9846b",
        "group": "e23512b61ee4b0a2",
        "name": "",
        "label": "Feel Like Temperature",
        "order": 9007199254740991,
        "chartType": "line",
        "category": "feels-like",
        "categoryType": "str",
        "xAxisProperty": "time",
        "xAxisPropertyType": "msg",
        "xAxisType": "time",
        "yAxisProperty": "feelsLikeTemperature",
        "ymin": "",
        "ymax": "",
        "showLegend": false,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "width": 6,
        "height": 8,
        "className": "",
        "x": 480,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "eb1eb4ae3f46518e",
        "type": "ui-chart",
        "z": "e80e76260ef9846b",
        "group": "e23512b61ee4b0a2",
        "name": "",
        "label": "Multiple Lines Example",
        "order": 9007199254740991,
        "chartType": "line",
        "category": "[\"screenTemperature\", \"feelsLikeTemperature\"]",
        "categoryType": "json",
        "xAxisProperty": "time",
        "xAxisPropertyType": "msg",
        "xAxisType": "time",
        "yAxisProperty": "",
        "ymin": "",
        "ymax": "",
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "width": 6,
        "height": 8,
        "className": "",
        "x": 490,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "8864477d6b15168d",
        "type": "inject",
        "z": "e80e76260ef9846b",
        "name": "Clear",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 210,
        "y": 100,
        "wires": [
            [
                "c6624545f4820893",
                "eb1eb4ae3f46518e"
            ]
        ]
    },
    {
        "id": "e23512b61ee4b0a2",
        "type": "ui-group",
        "name": "Chart Examples",
        "page": "22b5519aa675ad88",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": ""
    },
    {
        "id": "22b5519aa675ad88",
        "type": "ui-page",
        "name": "Discourse Forums",
        "ui": "c2e1aa56f50f03bd",
        "path": "/discourse",
        "layout": "grid",
        "theme": "129e99574def90a3",
        "order": -1,
        "className": ""
    },
    {
        "id": "c2e1aa56f50f03bd",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard"
    },
    {
        "id": "129e99574def90a3",
        "type": "ui-theme",
        "name": "Another Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]