UK (Mt Office) Pollen Forecast Mark 2

Some while ago some kind soul (smcgann99) uploaded a flow (small f so not a Flow tab) that got the next fours days pollen forecast from the UK met office website (UK (Met Office) Pollen forecast). This flow used Dashboard 1.

I have refactored the flow to use Dashboard 2. The relevant 2 character codes for areas of the UK are in the Region Codes comment node.

Hope it is of interest to someone

[{"id":"6c85b7d07496770e","type":"http request","z":"0d6460c4fc08592d","name":"Call Met Office","method":"GET","ret":"txt","paytoqs":"ignore","url":"https://www.metoffice.gov.uk/weather/warnings-and-advice/seasonal-advice/pollen-forecast#","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":620,"y":1040,"wires":[["fa39f1f9bbc70b56","917f9ad9b898fb29"]]},{"id":"41c759e20cde83a9","type":"inject","z":"0d6460c4fc08592d","name":"Region Code","props":[{"p":"payload"}],"repeat":"","crontab":"00 03 * * *","once":false,"onceDelay":0.1,"topic":"","payload":"st","payloadType":"str","x":270,"y":1040,"wires":[["34d98eaf7430f805"]]},{"id":"8777621758419d26","type":"html","z":"0d6460c4fc08592d","name":"Pollen Type","property":"payload","outproperty":"payload","tag":"","ret":"text","as":"single","chr":"","x":1030,"y":960,"wires":[["98a66f8d04fb2301"]]},{"id":"cb9dd7a58550cb39","type":"html","z":"0d6460c4fc08592d","name":"Pollen Level","property":"payload","outproperty":"payload","tag":"","ret":"text","as":"multi","x":1030,"y":1040,"wires":[["b9848fddb9dd6a6b"]]},{"id":"dc94d419246932c1","type":"join","z":"0d6460c4fc08592d","name":"Join Level \\n by Day","mode":"auto","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","useparts":true,"accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":1340,"y":1040,"wires":[["332d54cc7b4841fa","488179cabe36b887"]]},{"id":"ac62b43e83e19f9f","type":"switch","z":"0d6460c4fc08592d","name":"Is There \\n Data","property":"payload.length","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1340,"y":960,"wires":[["4a06328ba5a6140f"],["7e1e63625c04c3db"]]},{"id":"4a06328ba5a6140f","type":"change","z":"0d6460c4fc08592d","name":"Blank on \\n No Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1520,"y":920,"wires":[["a845eb497e1eca58"]]},{"id":"34d98eaf7430f805","type":"change","z":"0d6460c4fc08592d","name":"Set Region \\n to Flow","rules":[{"t":"set","p":"region","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":1040,"wires":[["6c85b7d07496770e"]]},{"id":"fa39f1f9bbc70b56","type":"function","z":"0d6460c4fc08592d","name":"Add Region \\n to Select Data","func":"let region = flow.get(\"region\")\n\nlet msg1 = {\n    \"payload\": msg.payload,\n    \"select\": \"#\" + region + \"-paras\"\n}\n\nlet msg2 = {\n    \"payload\": msg.payload,\n    \"select\": \"#\" + region + \" td\"\n}\n\nlet msg3 = {\n    \"payload\": msg.payload,\n    \"select\": \"#\" + region\n}\n\nreturn [msg1, msg2, msg3];","outputs":3,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":820,"y":1040,"wires":[["8777621758419d26"],["cb9dd7a58550cb39"],["fd7bbb57b2446745"]]},{"id":"1d0e8be48718c52f","type":"change","z":"0d6460c4fc08592d","name":"Region Code","rules":[{"t":"set","p":"payload","pt":"msg","to":"st","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":1160,"wires":[["0c5918bf26cc434d","34d98eaf7430f805"]]},{"id":"0c5918bf26cc434d","type":"debug","z":"0d6460c4fc08592d","name":"Event Message","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":800,"y":1160,"wires":[]},{"id":"917f9ad9b898fb29","type":"debug","z":"0d6460c4fc08592d","name":"HTTP Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":790,"y":900,"wires":[]},{"id":"b9848fddb9dd6a6b","type":"string","z":"0d6460c4fc08592d","name":"Remove \\n Whitespace","methods":[{"name":"collapseWhitespace","params":[]},{"name":"stripPunctuation","params":[]}],"prop":"payload","propout":"payload","object":"msg","objectout":"msg","x":1190,"y":1040,"wires":[["dc94d419246932c1"]]},{"id":"98a66f8d04fb2301","type":"string","z":"0d6460c4fc08592d","name":"Remove \\n Whitespace","methods":[{"name":"collapseWhitespace","params":[]}],"prop":"payload","propout":"payload","object":"msg","objectout":"msg","x":1190,"y":960,"wires":[["ac62b43e83e19f9f","10879fbb0b0479a7"]]},{"id":"26a0bdc6a245cfd2","type":"debug","z":"0d6460c4fc08592d","name":"Pollen Region","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":1740,"y":1180,"wires":[]},{"id":"fd7bbb57b2446745","type":"html","z":"0d6460c4fc08592d","name":"Pollen Region","property":"payload","outproperty":"payload","tag":"","ret":"text","as":"single","chr":"","x":1040,"y":1140,"wires":[["c7a4418f75d43e06"]]},{"id":"c7a4418f75d43e06","type":"function","z":"0d6460c4fc08592d","name":"Find Region","func":"const str = msg.payload[0]\nconst region = str.split(/\\r?\\n/)[1]\n\nmsg.payload = region\n\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1530,"y":1140,"wires":[["0c7aefcfdd87a58c","26a0bdc6a245cfd2"]]},{"id":"332d54cc7b4841fa","type":"function","z":"0d6460c4fc08592d","name":"Build Table Data","func":"/**\n * \n * Day names are calculated, predicated on the fact that the pollen data starts from the current day\n * \n */\n\nlet pollen = {}\nlet count = 0\nconst dayNames = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"]\n\nfor (let index = 0; index < msg.payload.length; index++) {\n    let level = ''\n    if (msg.payload[index] === 'V') {\n        level = 'VH'\n        index++\n\n    } else {\n         level = msg.payload[index]\n\n    }\n\n    const dayName = dayNames[(new Date().getDay() + count) % 7]\n\n    pollen = { ...pollen, [dayName]: level }\n    count++\n}\n\nmsg.payload = pollen\n\nreturn msg","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":1540,"y":1040,"wires":[["4c497c73f7858ac8"]]},{"id":"4c497c73f7858ac8","type":"ui-template","z":"0d6460c4fc08592d","group":"77f64559d02636fb","page":"","ui":"","name":"Pollen Level","order":3,"width":0,"height":1,"head":"","format":"<template>\n    <table id=\"pollen_table\">\n        <thead>\n            <tr>\n                <th v-for=\"data in pollenData\" :key=\"data.day\">  {{data.day}}  </th>\n\n            </tr>\n\n        </thead>\n\n        <tbody>\n            <tr>\n                <td v-for=\"data in pollenData\" :key=\"data.day\">\n                    <span id=\"pollen\" :class=\"levelClass(data.level)\">  {{data.level}} </span>\n                </td>\n            </tr>\n\n        </tbody>\n\n    </table>\n\n</template>\n\n<script>\n    export default {\n        data() {\n            // define variables available component-wide\n            // (in <template> and component functions)\n            return {\n                pollenData: [{day: 'Sun', level: 'L'}, \n                             {day: 'Mon', level: 'L'},\n                             {day: 'Tue', level: 'L'},\n                             {day: 'Wed', level: 'L'},\n                             {day: 'Thu', level: 'M'},\n                            ],\n                pollenLevel: {'VH': 'vhigh',\n                              'H': 'high',\n                              'M': 'med',\n                              'L': 'low'},\n\n            }\n        },\n\n        watch: {\n            // watch for any changes of \"count\"\n\n        },\n\n        computed: {\n            // automatically compute this variable\n            // whenever VueJS deems appropriate\n\n        },\n\n        methods: {\n            // expose a method to our <template> and Vue Application\n            levelClass: function (level) {\n                return this.pollenLevel[level]\n\n            }\n        },\n\n        mounted() {\n            // code here when the component is first loaded\n        },\n\n        unmounted() {\n            // code here when the component is removed from the Dashboard\n            // i.e. when the user navigates away from the page\n        }\n\n    }\n\n</script>\n\n<style>\n    #pollen_table {\n        table-layout: fixed;\n        text-align: center;\n    }\n\n    #pollen {\n        display: inline-block;\n        border: 2px solid black;\n        border-radius: 50%;\n        line-height: 2.4em;\n        font-weight: 700;\n        height: 40px;\n        width: 40px;\n    }\n\n    .vhigh {\n        color: white;\n        background-color: red;\n    }\n\n    .high {\n        color: black;\n        background-color: #ff950c;\n    }\n\n    .med {\n        color: black;\n        background-color: #f8e71c;\n    }\n\n    .low {\n        color: black;\n        background-color: #71b466;\n    }\n\n\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1730,"y":1040,"wires":[[]],"info":"     <tr v-for=\"name in info\" :key=\"name.Country\">\r\n        <td>{{name.Country}}</td>\r\n        <td>{{name.Value}}</td>\r\n      </tr>"},{"id":"10879fbb0b0479a7","type":"debug","z":"0d6460c4fc08592d","name":"Pollen Type","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1310,"y":900,"wires":[]},{"id":"0c7aefcfdd87a58c","type":"ui-text","z":"0d6460c4fc08592d","group":"77f64559d02636fb","order":1,"width":"3","height":"1","name":"Pollen Region","label":"Pollen Region","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":1740,"y":1140,"wires":[]},{"id":"a845eb497e1eca58","type":"ui-text","z":"0d6460c4fc08592d","group":"77f64559d02636fb","order":2,"width":"3","height":1,"name":"Pollen Type","label":"","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":1730,"y":980,"wires":[]},{"id":"9652e1a1a1a6b157","type":"ui-control","z":"0d6460c4fc08592d","name":"On Event","ui":"9f12f8f779619bc6","events":"all","x":260,"y":1160,"wires":[["1d0e8be48718c52f"]]},{"id":"488179cabe36b887","type":"debug","z":"0d6460c4fc08592d","name":"Pollen Level","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1530,"y":1080,"wires":[]},{"id":"8ec4584bf794505d","type":"comment","z":"0d6460c4fc08592d","name":"Region Codes","info":"os Orkney & Shetland\nhe Highlands & Eilean Siar\ngr Grampian\nta Central, Tayside & Fife\nst Strathclyde\ndg Dumfries, Galloway, Lothian & Borders\nne North East England\nni Northern Ireland\nyh Yorkshire & Humber\nnw North West England\nem East Midlands\nwm West Midlands\nwl Wales\nee East of England\nsw South West England\n\nVisit https://www.metoffice.gov.uk/weather/warnings-and-advice/seasonal-advice/pollen-forecast#\nfor more information","x":250,"y":920,"wires":[]},{"id":"7e1e63625c04c3db","type":"junction","z":"0d6460c4fc08592d","x":1460,"y":980,"wires":[["a845eb497e1eca58"]]},{"id":"77f64559d02636fb","type":"ui-group","name":"Pollen Data","page":"3b058e459d3f1a5e","width":"3","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"9f12f8f779619bc6","type":"ui-base","name":"Environment","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"3b058e459d3f1a5e","type":"ui-page","name":"Outside Environment","ui":"9f12f8f779619bc6","path":"/page1","icon":"home","layout":"grid","theme":"7eb5efa694bf8401","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"7eb5efa694bf8401","type":"ui-theme","name":"Environment","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"5px","widgetGap":"12px"}}]
4 Likes

As an added bonus (thanks to jbudd) the height of the group can be aligned to other widgets on the same row (assuming that height of said widgets is larger)

With a ui-template node create a class (height100) - I have included an example below - then edit the ui_group of the Pollen group to include the class height100 (Note class can actually be called whatever you fancy)

[{"id":"8ec25571ee4e03b2","type":"ui-template","z":"0d6460c4fc08592d","group":"","page":"3b058e459d3f1a5e","ui":"","name":"Align Group Height","order":0,"width":0,"height":0,"head":"","format":".height100 .v-card {\n    min-height: 100% !important;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":1710,"y":820,"wires":[[]]},{"id":"3b058e459d3f1a5e","type":"ui-page","name":"Outside Environment","ui":"9f12f8f779619bc6","path":"/page1","icon":"home","layout":"grid","theme":"7eb5efa694bf8401","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"9f12f8f779619bc6","type":"ui-base","name":"Environment","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"7eb5efa694bf8401","type":"ui-theme","name":"Environment","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"5px","widgetGap":"12px"}}]

As a reminder, the ui-page node is set to Outside Environment, so will require amending to suit

To clarify, it does not seem to be necessary to decide which group is shortest.

Give each group the custom class then all groups on the row should occupy the same height as the tallest.

So is this the Node-RED Hay fever sub-group :sneezing_face:

5 Likes

Well that's embarrassing; in my haste to publish I forgot to add the extras to get data into the table. All there is in the original is static data. :flushed_face:

This version actually updates from the web page.

[{"id":"6c85b7d07496770e","type":"http request","z":"0d6460c4fc08592d","name":"Call Met Office","method":"GET","ret":"txt","paytoqs":"ignore","url":"https://www.metoffice.gov.uk/weather/warnings-and-advice/seasonal-advice/pollen-forecast#","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":620,"y":1040,"wires":[["fa39f1f9bbc70b56","917f9ad9b898fb29"]]},{"id":"41c759e20cde83a9","type":"inject","z":"0d6460c4fc08592d","name":"Region Code","props":[{"p":"payload"}],"repeat":"","crontab":"00 03 * * *","once":false,"onceDelay":0.1,"topic":"","payload":"st","payloadType":"str","x":270,"y":1040,"wires":[["34d98eaf7430f805"]]},{"id":"8777621758419d26","type":"html","z":"0d6460c4fc08592d","name":"Pollen Type","property":"payload","outproperty":"payload","tag":"","ret":"text","as":"single","chr":"","x":1030,"y":960,"wires":[["98a66f8d04fb2301"]]},{"id":"cb9dd7a58550cb39","type":"html","z":"0d6460c4fc08592d","name":"Pollen Level","property":"payload","outproperty":"payload","tag":"","ret":"text","as":"multi","x":1030,"y":1040,"wires":[["b9848fddb9dd6a6b"]]},{"id":"dc94d419246932c1","type":"join","z":"0d6460c4fc08592d","name":"Join Level \\n by Day","mode":"auto","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","useparts":true,"accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":1340,"y":1040,"wires":[["332d54cc7b4841fa"]]},{"id":"ac62b43e83e19f9f","type":"switch","z":"0d6460c4fc08592d","name":"Is There \\n Data","property":"payload.length","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":1340,"y":960,"wires":[["4a06328ba5a6140f"],["7e1e63625c04c3db"]]},{"id":"4a06328ba5a6140f","type":"change","z":"0d6460c4fc08592d","name":"Blank on \\n No Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1520,"y":920,"wires":[["a845eb497e1eca58"]]},{"id":"34d98eaf7430f805","type":"change","z":"0d6460c4fc08592d","name":"Set Region \\n to Flow","rules":[{"t":"set","p":"region","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":1040,"wires":[["6c85b7d07496770e"]]},{"id":"fa39f1f9bbc70b56","type":"function","z":"0d6460c4fc08592d","name":"Add Region \\n to Select Data","func":"let region = flow.get(\"region\")\n\nlet msg1 = {\n    \"payload\": msg.payload,\n    \"select\": \"#\" + region + \"-paras\"\n}\n\nlet msg2 = {\n    \"payload\": msg.payload,\n    \"select\": \"#\" + region + \" td\"\n}\n\nlet msg3 = {\n    \"payload\": msg.payload,\n    \"select\": \"#\" + region\n}\n\nreturn [msg1, msg2, msg3];","outputs":3,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":820,"y":1040,"wires":[["8777621758419d26"],["cb9dd7a58550cb39"],["fd7bbb57b2446745"]]},{"id":"1d0e8be48718c52f","type":"change","z":"0d6460c4fc08592d","name":"Region Code","rules":[{"t":"set","p":"payload","pt":"msg","to":"st","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":450,"y":1160,"wires":[["0c5918bf26cc434d","34d98eaf7430f805"]]},{"id":"0c5918bf26cc434d","type":"debug","z":"0d6460c4fc08592d","name":"Event Message","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":800,"y":1160,"wires":[]},{"id":"917f9ad9b898fb29","type":"debug","z":"0d6460c4fc08592d","name":"HTTP Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":790,"y":900,"wires":[]},{"id":"b9848fddb9dd6a6b","type":"string","z":"0d6460c4fc08592d","name":"Remove \\n Whitespace","methods":[{"name":"collapseWhitespace","params":[]},{"name":"stripPunctuation","params":[]}],"prop":"payload","propout":"payload","object":"msg","objectout":"msg","x":1190,"y":1040,"wires":[["dc94d419246932c1"]]},{"id":"98a66f8d04fb2301","type":"string","z":"0d6460c4fc08592d","name":"Remove \\n Whitespace","methods":[{"name":"collapseWhitespace","params":[]}],"prop":"payload","propout":"payload","object":"msg","objectout":"msg","x":1190,"y":960,"wires":[["ac62b43e83e19f9f","10879fbb0b0479a7"]]},{"id":"26a0bdc6a245cfd2","type":"debug","z":"0d6460c4fc08592d","name":"Pollen Region","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":1740,"y":1180,"wires":[]},{"id":"fd7bbb57b2446745","type":"html","z":"0d6460c4fc08592d","name":"Pollen Region","property":"payload","outproperty":"payload","tag":"","ret":"text","as":"single","chr":"","x":1040,"y":1140,"wires":[["c7a4418f75d43e06"]]},{"id":"c7a4418f75d43e06","type":"function","z":"0d6460c4fc08592d","name":"Find Region","func":"const str = msg.payload[0]\nconst region = str.split(/\\r?\\n/)[1]\n\nmsg.payload = region\n\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1530,"y":1140,"wires":[["0c7aefcfdd87a58c","26a0bdc6a245cfd2"]]},{"id":"332d54cc7b4841fa","type":"function","z":"0d6460c4fc08592d","name":"Build Table Data","func":"/**\n * \n * Day names are calculated, predicated on the fact that the pollen data starts from the current day\n * \n */\n\nlet pollen = []\nlet count = 0\nconst dayNames = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"]\n\nfor (let index = 0; index < msg.payload.length; index++) {\n    let level = ''\n    if (msg.payload[index] === 'V') {\n        level = 'VH'\n        index++\n\n    } else {\n         level = msg.payload[index]\n\n    }\n\n    const dayName = dayNames[(new Date().getDay() + count) % 7]\n\n    pollen.push({day: dayName, level })\n    count++\n}\n\nmsg.payload = pollen\n\nreturn msg","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":1540,"y":1040,"wires":[["4c497c73f7858ac8","488179cabe36b887"]]},{"id":"4c497c73f7858ac8","type":"ui-template","z":"0d6460c4fc08592d","group":"77f64559d02636fb","page":"","ui":"","name":"Pollen Level","order":3,"width":0,"height":1,"head":"","format":"<template>\n    <table id=\"pollen_table\">\n        <thead>\n            <tr>\n                <th v-for=\"data in pollenData\" :key=\"data.day\">  {{data.day}}  </th>\n\n            </tr>\n\n        </thead>\n\n        <tbody>\n            <tr>\n                <td v-for=\"data in pollenData\" :key=\"data.day\">\n                    <span id=\"pollen\" :class=\"levelClass(data.level)\">  {{data.level}} </span>\n                </td>\n            </tr>\n\n        </tbody>\n\n    </table>\n\n</template>\n\n<script>\n    export default {\n        data() {\n            // define variables available component-wide\n            // (in <template> and component functions)\n            return {\n                pollenData: [ ],\n                pollenLevel: {'VH': 'vhigh',\n                              'H': 'high',\n                              'M': 'med',\n                              'L': 'low'},\n\n            }\n        },\n\n        watch: {\n            // watch for any changes of \"count\"\n            msg: function () {\n                if ( Object.hasOwn(this.msg, 'payload') ) {\n                    this.pollenData = this.msg.payload\n\n                }\n\n            }\n\n        },\n\n        computed: {\n            // automatically compute this variable\n            // whenever VueJS deems appropriate\n\n        },\n\n        methods: {\n            // expose a method to our <template> and Vue Application\n            levelClass: function (level) {\n                return this.pollenLevel[level]\n\n            }\n        },\n\n        mounted() {\n            // code here when the component is first loaded\n        },\n\n        unmounted() {\n            // code here when the component is removed from the Dashboard\n            // i.e. when the user navigates away from the page\n        }\n\n    }\n\n</script>\n\n<style>\n    #pollen_table {\n        table-layout: fixed;\n        text-align: center;\n    }\n\n    #pollen {\n        display: inline-block;\n        border: 2px solid black;\n        border-radius: 50%;\n        line-height: 2.4em;\n        font-weight: 700;\n        height: 40px;\n        width: 40px;\n    }\n\n    .vhigh {\n        color: white;\n        background-color: red;\n    }\n\n    .high {\n        color: black;\n        background-color: #ff950c;\n    }\n\n    .med {\n        color: black;\n        background-color: #f8e71c;\n    }\n\n    .low {\n        color: black;\n        background-color: #71b466;\n    }\n\n\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1730,"y":1040,"wires":[[]],"info":"     <tr v-for=\"name in info\" :key=\"name.Country\">\r\n        <td>{{name.Country}}</td>\r\n        <td>{{name.Value}}</td>\r\n      </tr>"},{"id":"10879fbb0b0479a7","type":"debug","z":"0d6460c4fc08592d","name":"Pollen Type","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1310,"y":900,"wires":[]},{"id":"0c7aefcfdd87a58c","type":"ui-text","z":"0d6460c4fc08592d","group":"77f64559d02636fb","order":1,"width":"3","height":"1","name":"Pollen Region","label":"Pollen Region","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":1740,"y":1140,"wires":[]},{"id":"a845eb497e1eca58","type":"ui-text","z":"0d6460c4fc08592d","group":"77f64559d02636fb","order":2,"width":"3","height":1,"name":"Pollen Type","label":"","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":1730,"y":980,"wires":[]},{"id":"9652e1a1a1a6b157","type":"ui-control","z":"0d6460c4fc08592d","name":"On Event","ui":"9f12f8f779619bc6","events":"all","x":260,"y":1160,"wires":[["1d0e8be48718c52f"]]},{"id":"488179cabe36b887","type":"debug","z":"0d6460c4fc08592d","name":"Pollen Level","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1730,"y":1080,"wires":[]},{"id":"8ec4584bf794505d","type":"comment","z":"0d6460c4fc08592d","name":"Region Codes","info":"os Orkney & Shetland\nhe Highlands & Eilean Siar\ngr Grampian\nta Central, Tayside & Fife\nst Strathclyde\ndg Dumfries, Galloway, Lothian & Borders\nne North East England\nni Northern Ireland\nyh Yorkshire & Humber\nnw North West England\nem East Midlands\nwm West Midlands\nwl Wales\nee East of England\nsw South West England\n\nVisit https://www.metoffice.gov.uk/weather/warnings-and-advice/seasonal-advice/pollen-forecast#\nfor more information","x":250,"y":920,"wires":[]},{"id":"8ec25571ee4e03b2","type":"ui-template","z":"0d6460c4fc08592d","group":"","page":"3b058e459d3f1a5e","ui":"","name":"Align Group Height","order":0,"width":0,"height":0,"head":"","format":".height100 .v-card {\n    min-height: 100% !important;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":1710,"y":820,"wires":[[]]},{"id":"7e1e63625c04c3db","type":"junction","z":"0d6460c4fc08592d","x":1460,"y":980,"wires":[["a845eb497e1eca58"]]},{"id":"77f64559d02636fb","type":"ui-group","name":"Pollen Data","page":"3b058e459d3f1a5e","width":"3","height":1,"order":1,"showTitle":true,"className":"height100","visible":"true","disabled":"false","groupType":"default"},{"id":"9f12f8f779619bc6","type":"ui-base","name":"Environment","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default"},{"id":"3b058e459d3f1a5e","type":"ui-page","name":"Outside Environment","ui":"9f12f8f779619bc6","path":"/page1","icon":"home","layout":"grid","theme":"7eb5efa694bf8401","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"7eb5efa694bf8401","type":"ui-theme","name":"Environment","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"5px","widgetGap":"12px"}}]