Test de velocidad `- Grafico UIBuilder - ApexCharts
Los datos generados por un flujo que realiza el test de velocidad (ookla speed test) de internet (bajada,subida,ping,jitter), se almacenan en variables que permiten crean un gráfico con los valores almacenados, a medida que llegan nuevos valores son almacenados y agregados al gráfico permitiendo mostrar las últimas 72 hs.
[{"id":"6b29276392c4dfa4","type":"function","z":"f5b03843686efa28","name":"init","func":"//var arr = global.get('grafico');\n//msg.humedad = arr[1];\n//msg.temperatura = arr[0];\n//.hora = arr[2];\n//msg.bajada = global.get('lbdata');\nmsg.bajada = flow.get('bajada');\nmsg.subida = flow.get('subida');\nmsg.ping = flow.get('ping');\nmsg.jitter = flow.get('jitter');\nmsg.payload = flow.get('date');\nmsg.topic = \"init\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":270,"wires":[["318b2e5f1bbe7161"]]},{"id":"a0d8c22ade0c37b3","type":"inject","z":"f5b03843686efa28","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":200,"y":270,"wires":[["6b29276392c4dfa4"]]},{"id":"318b2e5f1bbe7161","type":"uibuilder","z":"f5b03843686efa28","name":"","topic":"","url":"graficas","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"6.0.0","x":570,"y":180,"wires":[[],["510a8656b35fa681"]]},{"id":"54d94f9ea081e25d","type":"link in","z":"f5b03843686efa28","name":"in_grafica","links":["960951f6635d0bc2","851be85b92524580"],"x":215,"y":200,"wires":[["05103a1c53593c52"]]},{"id":"4503fe4bb2023027","type":"comment","z":"f5b03843686efa28","name":"speed","info":"","x":130,"y":200,"wires":[]},{"id":"05103a1c53593c52","type":"function","z":"f5b03843686efa28","name":"speed","func":"let date = new Date(msg.payload);\nnode.status(date.toString());\nvar arr = flow.get('bajada');\narr.push(msg.bajada);\nif (arr.length > 72) {\n arr.splice(0, 1);\n}\nflow.set('bajada', arr);\narr = flow.get('subida');\narr.push(msg.subida);\nif (arr.length > 72) {\n arr.splice(0, 1);\n}\nflow.set('subida', arr);\narr = flow.get('ping');\narr.push(msg.ping);\nif (arr.length > 72) {\n arr.splice(0, 1);\n}\nflow.set('ping', arr);\narr = flow.get('jitter');\narr.push(msg.jitter);\nif (arr.length > 72) {\n arr.splice(0, 1);\n}\nflow.set('jitter', arr);\nmsg.payload = date.getHours() + \":\" + date.getMinutes();\narr = flow.get('date');\narr.push(msg.payload);\nif (arr.length > 72) {\n arr.splice(0, 1);\n}\nflow.set('date', arr);\nmsg.topic = \"speed\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"// Code added here will be run once\n// whenever the node is started.\nflow.set('bajada',[]);\nflow.set('subida',[]);\nflow.set('ping',[]);\nflow.set('jitter',[]);\nflow.set('date', []);","finalize":"","libs":[],"x":340,"y":195,"wires":[["318b2e5f1bbe7161"]]},{"id":"510a8656b35fa681","type":"switch","z":"f5b03843686efa28","name":"client connect ?","property":"uibuilderCtrl","propertyType":"msg","rules":[{"t":"eq","v":"client connect","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":820,"y":220,"wires":[["3a8f51e710cfb88f"]]},{"id":"3a8f51e710cfb88f","type":"change","z":"f5b03843686efa28","name":"cliente","rules":[{"t":"delete","p":"uibuilderCtrl","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":990,"y":220,"wires":[["6b29276392c4dfa4"]]},{"id":"37dafce3cd0e470b","type":"comment","z":"f5b03843686efa28","name":"payload: 1680467893897, bajada: 25, subida: 2, ping: 30, jitter: 3","info":"","x":310,"y":140,"wires":[]},{"id":"46a8582fe8bfac47","type":"comment","z":"f5b03843686efa28","name":"Java Script","info":"//\n// danojpa 2023\n//\n// se grafica los datos del flujo de test de velocidad : bajada, subida, ping, jitter\n// se muestrea cada hora y el gráfico representa las últimas 72 hs\n//\n\n'use strict'\n\nVue.component('apexchart', VueApexCharts)\n\nconst lbdata = []\nconst lsdata = []\nconst lpdata = []\nconst ljdata = []\nconst axis = []\n\nconst app1 = new Vue({\n el: '#app',\n data() {\n return {\n series: [{\n name: \"bajada\",\n data: lbdata\n },\n {\n name: \"subida\",\n data: lsdata\n },\n {\n name: \"ping\",\n data: lpdata\n },\n {\n name: \"jitter\",\n data: ljdata\n }],\n options: {\n xaxis: {\n categories: axis,\n },\n }\n }\n },\n computed: {\n },\n methods: {\n init(msg) {\n msg.bajada.forEach(function (element) { lbdata.push(element) })\n msg.subida.forEach(function (element) { lsdata.push(element) })\n msg.ping.forEach(function (element) { lpdata.push(element) })\n msg.jitter.forEach(function (element) { ljdata.push(element) })\n msg.payload.forEach(function (element) { axis.push(element) })\n this.series = [{ data: lbdata }, { data: lsdata }, { data: lpdata }, { data: ljdata}]\n this.options = { xaxis: { categories: axis } }\n },\n updl(msg) {\n lbdata.push(msg.bajada)\n lsdata.push(msg.subida)\n lpdata.push(msg.ping)\n ljdata.push(msg.jitter)\n this.series = [{ data: lbdata }, { data: lsdata }, { data: lpdata }, { data: ljdata }]\n axis.push(msg.payload)\n this.options = { xaxis: { categories: axis } }\n if (axis.length >= 72) {\n lbdata.shift()\n lsdata.shift()\n lpdata.shift()\n ljdata.shift()\n axis.shift()\n }\n }\n },\n mounted: function () {\n\n uibuilder.start()\n const app = this\n\n uibuilder.onChange('msg', (msg) => {\n if (msg.topic === 'init') {\n app.init(msg)\n }\n else if (msg.topic === 'speed') {\n app.updl(msg)\n }\n })\n\n },\n})","x":640,"y":80,"wires":[]},{"id":"4182021e9a2c3f30","type":"comment","z":"f5b03843686efa28","name":"HMTL","info":"<!doctype html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes\">\n\n <link rel=\"icon\" href=\"./images/node-blue.ico\">\n\n <link type=\"text/css\" rel=\"stylesheet\" href=\"../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css\" />\n <link type=\"text/css\" rel=\"stylesheet\" href=\"../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css\" />\n\n <link rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n</head>\n\n<body>\n\n <div id=\"app\">\n <b-container id=\"app_container\">\n \n <br><br>\n\n <b-row>\n <b-card col header=\"Ping / Jitter / Bajada / Subida\" border-variant=\"primary\" header-bg-variant=\"primary\"\n header-text-variant=\"white\" align=\"center\">\n <div id=\"chart\">\n <apexchart type=\"line\" :options=\"options\" :series=\"series\"></apexchart>\n </div>\n </b-card>\n </b-row>\n\n </b-container>\n </div>\n\n <script src=\"../uibuilder/vendor/socket.io/socket.io.js\"></script>\n <script src=\"../uibuilder/vendor/vue/dist/vue.min.js\"></script>\n <script src=\"../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js\"></script>\n\n <!-- Loading from CDN, use uibuilder to install packages and change to vendor links -->\n <script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/vue-apexcharts\"></script>\n\n <script src=\"./uibuilderfe.min.js\"></script> <!-- //prod version -->\n <script src=\"./index.js\"></script>\n\n</body>\n\n</html>","x":490,"y":80,"wires":[]}]
