[
{
"id": "3d54326a34d7b285",
"type": "comment",
"z": "7f6e6cb859163193",
"name": "egal in welcher gruppe, wirkt für alle Tabellen dieser Seite",
"info": "",
"x": 550,
"y": 220,
"wires": []
},
{
"id": "cad117ac93c02a8a",
"type": "ui_template",
"z": "7f6e6cb859163193",
"group": "866e364cfd7328d1",
"name": "load tsbulstor.js/.css",
"order": 1,
"width": 0,
"height": 0,
"format": "<link href=\"https://unpkg.com/tabulator-tables@5.4/dist/css/tabulator.min.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\" src=\"https://unpkg.com/tabulator-tables@5.4/dist/js/tabulator.min.js\"></script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 440,
"y": 300,
"wires": [
[]
]
},
{
"id": "357fbc37c1b58e1a",
"type": "comment",
"z": "7f6e6cb859163193",
"name": "nur einmal für die komplette site nötig",
"info": "",
"x": 490,
"y": 260,
"wires": []
},
{
"id": "365d1147f14c9f81",
"type": "comment",
"z": "7f6e6cb859163193",
"name": "externe libs/css",
"info": "",
"x": 660,
"y": 300,
"wires": []
},
{
"id": "8d802595263190fa",
"type": "inject",
"z": "7f6e6cb859163193",
"name": "sample data in payload",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "[{\"Name\":\"na sowas\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]",
"payloadType": "json",
"x": 170,
"y": 480,
"wires": [
[
"d22d110ea73b8fa6"
]
]
},
{
"id": "d22d110ea73b8fa6",
"type": "ui_template",
"z": "7f6e6cb859163193",
"group": "d38200b70febfed9",
"name": "tabulator html/script",
"order": 1,
"width": "0",
"height": "0",
"format": "<!-- \n Tabulator js/css is only needes if this the only table on this site \n <script type=\"text/javascript\" src=https://unpkg.com/tabulator-tables@5.4/dist/js/tabulator.min.js></script>\n <link rel=\"stylesheet\" href=https://unpkg.com/tabulator-tables@5.4/dist/css/tabulator.min.css />\n//-->\n\n<!-- \n for syntax see https://tabulator.info\n\n//-->\n\n<div id=\"example-table\"></div>\n<script>\n var table = new Tabulator(\"#example-table\", {\n height:\"500px\",\n placeholder:\"Keine Daten verfügbar!\",\n layout:\"fitColumns\",\n columns:[\n {title:\"Name\", field:\"Name\", width:200},\n {title:\"Age\", field:\"Age\" },\n {title:\"web\", field:\"web\", formatter: \"link\"}, \n ],\n });\n\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if(msg) {\n var tabledata = msg.payload;\n table.replaceData(tabledata);\n }\n });\n })(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 440,
"y": 480,
"wires": [
[]
]
},
{
"id": "c0c06c204207e4be",
"type": "comment",
"z": "7f6e6cb859163193",
"name": "simple table without ui-table node",
"info": "",
"x": 480,
"y": 440,
"wires": []
},
{
"id": "33be1b745f019cbf",
"type": "inject",
"z": "7f6e6cb859163193",
"name": "sample data in payload",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "[{\"window\":\"Zwischentür_vorn\",\"status\":\"closed\",\"ts\":\"10.10.22 08:04:02\",\"ort\":\"Aussen\"},{\"window\":\"Zwischentür_Hof\",\"status\":\"closed\",\"ts\":\"10.10.22 08:04:00\",\"ort\":\"Aussen\"},{\"window\":\"Büro_WGn\",\"status\":\"closed\",\"ts\":\"10.10.22 11:39:31\",\"ort\":\"EG\"},{\"window\":\"Haustür\",\"status\":\"closed\",\"ts\":\"10.10.22 08:03:04\",\"ort\":\"EG\"},{\"window\":\"Fenster_Gäste_WC\",\"status\":\"closed\",\"ts\":\"10.10.22 06:43:40\",\"ort\":\"EG\"},{\"window\":\"WG_Fenster_rechts\",\"status\":\"closed\",\"ts\":\"10.10.22 06:33:56\",\"ort\":\"EG\"},{\"window\":\"WG_Fenster_links\",\"status\":\"closed\",\"ts\":\"10.10.22 06:33:32\",\"ort\":\"EG\"},{\"window\":\"WG_Schiebetuer\",\"status\":\"closed\",\"ts\":\"10.10.22 06:27:30\",\"ort\":\"EG\"},{\"window\":\"WGTuer\",\"status\":\"closed\",\"ts\":\"10.10.22 06:26:57\",\"ort\":\"EG\"},{\"window\":\"Wirtschaftsraum_Fenster\",\"status\":\"closed\",\"ts\":\"03.10.22 02:04:44\",\"ort\":\"EG\"},{\"window\":\"Kellerküche_Fenster\",\"status\":\"open\",\"ts\":\"30.09.22 11:16:50\",\"ort\":\"Keller\"},{\"window\":\"Keller\",\"status\":\"closed\",\"ts\":\"10.10.22 12:29:44\",\"ort\":\"Keller\"},{\"window\":\"Sportraum_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 08:27:42\",\"ort\":\"Keller\"},{\"window\":\"Billard_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 08:27:26\",\"ort\":\"Keller\"},{\"window\":\"Vorratsraum_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 08:27:07\",\"ort\":\"Keller\"},{\"window\":\"EWerkstatt_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 04:50:57\",\"ort\":\"Keller\"},{\"window\":\"Safe\",\"status\":\"closed\",\"ts\":\"10.10.22 04:26:58\",\"ort\":\"Keller\"},{\"window\":\"Schlafstube_Fenster_links\",\"status\":\"open\",\"ts\":\"10.10.22 09:11:13\",\"ort\":\"OG\"},{\"window\":\"Schlafstube_Fenster_rechts\",\"status\":\"closed\",\"ts\":\"10.10.22 10:29:38\",\"ort\":\"OG\"},{\"window\":\"OG_Kinderzimmer_Fenster\",\"status\":\"closed\",\"ts\":\"10.10.22 02:41:40\",\"ort\":\"OG\"}]",
"payloadType": "json",
"x": 170,
"y": 620,
"wires": [
[
"d15cf69494e15f3f"
]
]
},
{
"id": "d15cf69494e15f3f",
"type": "ui_template",
"z": "7f6e6cb859163193",
"group": "d38200b70febfed9",
"name": "tabulator html/script",
"order": 1,
"width": "0",
"height": "0",
"format": "<!-- \n Tabulator js/css is only needes if this the only table on this site \n <script type=\"text/javascript\" src=https://unpkg.com/tabulator-tables@5.4/dist/js/tabulator.min.js></script>\n <link rel=\"stylesheet\" href=https://unpkg.com/tabulator-tables@5.4/dist/css/tabulator.min.css />\n//-->\n\n<!-- \n for syntax see https://tabulator.info\n\n//-->\n<div id=\"openWindowsTable\"></div>\n<script>\n var openWindowsTable = new Tabulator(\"#openWindowsTable\", {\n height:\"700px\" ,\n placeholder:\"Keine Daten verfügbar!\",\n layout: \"fitDataStretch\",\n /*fit columns to width of table*/\n \n //pagination: \"local\",\n /*paginate the data*/\n \n //paginationSize: 40,\n /*allow 40 rows per page of data*/\n \n movableColumns: true,\n /*allow column order to be changed*/\n \n /*colums format definitions*/\n columns: [{\n title: \"Fenster\",\n field: \"window\",\n width: 250\n },\n {\n title: \"Status\",\n field: \"status\",\n formatter: function(cell, formatterParams, onRendered){\n //cell - the cell component\n //formatterParams - parameters set for the column\n //onRendered - function to call when the formatter has been rendered\n return \"<span style='color:Black; font-weight:bold;'>\" + cell.getValue() + \"</span>\"\n },\n },\n {\n title: \"Zeit\",\n field: \"ts\",\n //sorter: \"date\"\n /* need moment.js\n see https://github.com/olifolkerd/tabulator/issues/1631#issuecomment-716460821\n */\n },\n ],\n \n columnDefaults:{ \n tooltip:true,\n },\n \n /*initial sorting */\n initialSort:[\n {column:\"status\", dir:\"desc\"}, //sort by this first\n {column:\"ts\", dir:\"desc\"}, //then sort by this second\n ],\n \n /* group by ort*/\n groupBy: \"ort\",\n groupStartOpen: true,\n\n /* format groupHeader */\n groupHeader: function(value, count, data, group) {\n var r = \"<span style='color:black; margin-left:10px;'>(\" + count + \" Fenster)</span>\";\n return value + r;\n },\n \n /*format individal cell*/\n rowFormatter: function(row) {\n const cl = row.getCells();\n cl[1].getElement().style.backgroundColor = (cl[1]._cell.value === 'open' ? '#F1948A' : '#82E0AA');\n },\n\n });\n\n /* events */\n \n openWindowsTable.on(\"renderComplete\",function() {\n let data = openWindowsTable.getData();\n let groupHeaderList = document.querySelectorAll(\".tabulator-row.tabulator-group\");\n let groups = Array.from(groupHeaderList, (group) => group.outerText.split('(')[0]);\n \n for (let i = 0; i < groups.length; i++) { const group=groups[i]; const statusOpen=data.some(g=> g.ort === group &&\n g.status === 'open');\n groupHeaderList[i].style.backgroundColor = (statusOpen) ? '#E74C3C' : '#2ECC71';\n }\n });\n\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if(msg) {\n var tabledata = msg.payload;\n openWindowsTable.replaceData(tabledata);\n }\n });\n })(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 440,
"y": 620,
"wires": [
[]
]
},
{
"id": "86051fbedf8a9049",
"type": "comment",
"z": "7f6e6cb859163193",
"name": "table with events and groups",
"info": "",
"x": 460,
"y": 580,
"wires": []
},
{
"id": "866e364cfd7328d1",
"type": "ui_group",
"name": "helpers",
"tab": "464d85dfac9971a2",
"order": 4,
"disp": false,
"width": "1",
"collapse": false,
"className": "helperGroup"
},
{
"id": "d38200b70febfed9",
"type": "ui_group",
"name": "simple table",
"tab": "702f174cb9f60360",
"order": 1,
"disp": true,
"width": "10",
"collapse": false,
"className": ""
},
{
"id": "464d85dfac9971a2",
"type": "ui_tab",
"d": true,
"name": "Listen",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
},
{
"id": "702f174cb9f60360",
"type": "ui_tab",
"name": "simpleTable",
"icon": "fa-thin fa-table",
"order": 3,
"disabled": false,
"hidden": false
}
]
Ich versuche das nochmal nachzustellen. Inzwischen habe ich da ein eigenes Custom Chart mit Echart gebastelt, weil ich da ein paar Sachen haben wollte, die ich mit dem Standard-Chart nicht hin bekommen habe (Y-Achse links und rechts bei 2 Kurven, min/max Markline)
