Исправлен баг графиков

package-lock.json

@@ -249,13 +249,13 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.4.8",
+      "version": "10.4.11",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.8.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.11.tgz",
-      "integrity": "sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==",
+      "integrity": "sha512-5lHp6DgRodxlBLSkzHOTcufWFflH1ewfy2hvFQyjrblBFlP/0Yh4O/Wrg4ow8WRlN3AAUFFLAQwX8hTptzqVHg==",
       "dev": true,
       "requires": {
         "browserslist": "^4.21.3",
-        "caniuse-lite": "^1.0.30001373",
+        "caniuse-lite": "^1.0.30001399",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -294,15 +294,15 @@
       }
     },
     "browserslist": {
-      "version": "4.21.3",
+      "version": "4.21.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
-      "integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
+      "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001370",
+        "caniuse-lite": "^1.0.30001400",
-        "electron-to-chromium": "^1.4.202",
+        "electron-to-chromium": "^1.4.251",
         "node-releases": "^2.0.6",
-        "update-browserslist-db": "^1.0.5"
+        "update-browserslist-db": "^1.0.9"
       }
     },
     "buffer-crc32": {
@@ -342,9 +342,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001382",
+      "version": "1.0.30001402",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001382.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001402.tgz",
-      "integrity": "sha512-2rtJwDmSZ716Pxm1wCtbPvHtbDWAreTPxXbkc5RkKglow3Ig/4GNGazDI9/BVnXbG/wnv6r3B5FEbkfg9OcTGg==",
+      "integrity": "sha512-Mx4MlhXO5NwuvXGgVb+hg65HZ+bhUYsz8QtDGDo2QmaJS2GBX47Xfi2koL86lc8K+l+htXeTEB/Aeqvezoo6Ew==",
       "dev": true
     },
     "chalk": {
@@ -527,9 +527,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.4.227",
+      "version": "1.4.254",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.227.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.254.tgz",
-      "integrity": "sha512-I9VVajA3oswIJOUFg2PSBqrHLF5Y+ahIfjOV9+v6uYyBqFZutmPxA6fxocDUUmgwYevRWFu1VjLyVG3w45qa/g==",
+      "integrity": "sha512-Sh/7YsHqQYkA6ZHuHMy24e6TE4eX6KZVsZb9E/DvU1nQRIrH4BflO/4k+83tfdYvDl+MObvlqHPRICzEdC9c6Q==",
       "dev": true
     },
     "error-ex": {
@@ -1731,9 +1731,9 @@
       "dev": true
     },
     "update-browserslist-db": {
-      "version": "1.0.5",
+      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz",
-      "integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==",
+      "integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==",
       "dev": true,
       "requires": {
         "escalade": "^3.1.1",

package.json

@@ -10,7 +10,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
-    "autoprefixer": "^10.4.8",
+    "autoprefixer": "^10.4.11",
     "postcss": "^8.4.16",
     "postcss-load-config": "^3.1.4",
     "prettier": "^2.7.1",

src/App.svelte

@@ -92,6 +92,7 @@
 
   let layoutJson = [];
   let layoutJsonArrayParced = false;
+  let layoutReceivingCompleted = false;
 
   let settingsJson = {};
   let settingsJsonParced = false;
@@ -166,8 +167,6 @@
   router.subscribe(handleNavigation);
 
   function handleNavigation() {
-    console.log("[i]", "handle navigation");
-
     currentPageName = $router.path.toString();
 
     //не нужно очищать переменные когда переходим на страницу разработчика
@@ -276,7 +275,6 @@
   function wsEventAdd(ws) {
     if (socket[ws]) {
       let ip = getIP(ws);
-      if (debug) console.log("[i]", ip, ws, "web socket events added");
       socket[ws].addEventListener("open", function (event) {
         if (debug) console.log("[i]", ip, ws, "completed connecting");
         markDeviceStatus(ws, true);
@@ -357,7 +355,6 @@
             if (data.includes("/log|")) {
               data = data.replace("/log|", "");
               //let msg = data.toString();
-              if (debug) console.log("", data);
               addCoreMsg(data);
             }
 
@@ -377,7 +374,7 @@
                   scenarioJson = JSON.parse(scenarioJsonResult);
                   scenarioJson = scenarioJson;
                   scenarioJsonParced = true;
-                  if (debug) console.log("✔", "scenarioJson parced", scenarioJson);
+                  if (debug) console.log("✔", "scenarioJson parced");
                   onParced();
                 }
               };
@@ -445,9 +442,13 @@
           }
           //сборщик layoutJson пакетов
           if (data === "/st/layout.json") {
+            layoutReceivingCompleted = false;
           }
           if (data === "/end/layout.json") {
-            //createLayoutUnderLoading(ws);
+            console.log("[1]", ws, "blob package received");
+            //как только прилетел весь блоб мы начнем его читать ридером и заодно запросим json-ы всех параметров
+            combineLayoutsInOne(ws);
+            wsSendMsg(ws, "/statuses|"); ///params|
           }
           //сборщик paramsJson сообщений
           if (data.includes('"params":"')) {
@@ -458,18 +459,24 @@
                 ...JSON.parse(data),
               };
               paramsJson = paramsJson;
-              console.log("[i] paramsJson:", paramsJson);
+              console.log("[4]", ws, "collecting params");
-              createLayoutUnderLoading(ws);
+              updateAllStatuses(ws);
               onParced();
             }
           }
           //сборщик statusJson сообщений
-          if (data.includes('"status":')) {
+          if (data.includes('"status"')) {
             if (IsJsonParse(data)) {
               let statusJson = JSON.parse(data);
-              udateStatusOfWidget(statusJson);
+              if (Array.isArray(statusJson.status)) {
-              if (debug) console.log("[i] status", ip, ws, statusJson);
+                updateWidgetArr(statusJson);
+                if (debug) console.log("[i] status (arr)", ws, JSON.stringify(statusJson));
+              } else {
+                updateWidget(statusJson);
+                if (debug) console.log("[i] status (dgt)", ws, JSON.stringify(statusJson));
+              }
             }
+            //если сообщение является массивом
           }
         }
 
@@ -500,30 +507,71 @@
     }
   }
 
-  //функция создающая общий json всех виджетов под загрузкой (не имеющая события завершения)
+  //***********************************************************dashboard***************************************************************/
-  async function createLayoutUnderLoading(ws) {
+
+  //слияние layout-ов всех устройств в общий layout
+  async function combineLayoutsInOne(ws) {
     var bb = layoutJsonArray[ws].getBlob();
     let reader = new FileReader();
     reader.readAsText(bb);
+
     reader.onload = () => {
       let devLayout = JSON.parse(reader.result);
-      udateStatusOfDevWidgets(devLayout, ws);
       layoutJson = layoutJson.concat(devLayout);
+      console.log("[2]", ws, "blob package pushed to layout");
       sortingLayout();
     };
   }
 
-  //данная функция обновляет статусы виджетов одного устройства при загрузке страницы dashboard
+  function sortingLayout() {
-  function udateStatusOfDevWidgets(devLayout, ws) {
+    //сортируем весь layout по алфавиту
+    layoutJson.sort(function (a, b) {
+      if (a.descr < b.descr) {
+        return -1;
+      }
+      if (a.descr > b.descr) {
+        return 1;
+      }
+      return 0;
+    });
+    //формируем json всех карточек
+    pages = [];
+    const newPage = Array.from(new Set(Array.from(layoutJson, ({ page }) => page)));
+    newPage.forEach(function (item, i, arr) {
+      pages = [
+        ...pages,
+        JSON.parse(
+          JSON.stringify({
+            page: item,
+          })
+        ),
+      ];
+    });
+    //сортируем карточки по алфавиту
+    pages.sort(function (a, b) {
+      if (a.page < b.page) {
+        return -1;
+      }
+      if (a.page > b.page) {
+        return 1;
+      }
+      return 0;
+    });
+    layoutReceivingCompleted = true;
+    layoutJson = layoutJson;
+    console.log("[3]", "layout sort");
+  }
+
+  function updateAllStatuses(ws) {
     for (const [key, value] of Object.entries(paramsJson)) {
-      for (let i = 0; i < devLayout.length; i++) {
+      for (let i = 0; i < layoutJson.length; i++) {
-        let topic = devLayout[i].topic;
+        let topic = layoutJson[i].topic;
         if (topic) {
-          devLayout[i].ws = ws;
+          layoutJson[i].ws = ws;
           topic = topic.substring(topic.lastIndexOf("/") + 1, topic.length);
           if (key === topic) {
-            console.log("[i]", "updated " + topic, value);
+            console.log("[i]", "updated =>" + topic, value);
-            devLayout[i].status = value;
+            layoutJson[i].status = value;
             break;
           }
         }
@@ -531,13 +579,12 @@
     }
   }
 
-  //данная функция обновляет статусы всех виджетов хранящихся в layoutJson
+  //обработка интервально прилетающих статусов
-  function udateStatusOfWidget(newStatusJson) {
+  function updateWidget(newStatusJson) {
     for (let i = 0; i < layoutJson.length; i++) {
       let topic = layoutJson[i].topic;
       if (topic === newStatusJson.topic) {
         layoutJson[i] = jsonConcat(layoutJson[i], newStatusJson);
-        //layoutJson[i].status = newStatusJson.status;
         //получен ответ - выключаем красный цвет
         layoutJson[i].sent = false;
         break;
@@ -545,6 +592,37 @@
     }
   }
 
+  //если статус виджета это массив и его нужно накопить
+  function updateWidgetArr(newStatusJson) {
+    console.log("[i]", "collecting arrays");
+    let error = true;
+    if (layoutJson.length > 0) {
+      for (let i = 0; i < layoutJson.length; i++) {
+        let topic = layoutJson[i].topic;
+        if (topic === newStatusJson.topic) {
+          error = false;
+          layoutJson[i] = jsonConcatEx(layoutJson[i], newStatusJson);
+          let prevArr = layoutJson[i].status; //который был в layout
+          let newArr = newStatusJson.status; //тот что получили
+          if (prevArr) {
+            //если что то было в layout то делаем слияние
+            prevArr = [...prevArr, ...newArr];
+            layoutJson[i].status = prevArr;
+          } else {
+            //если ничего не было то просто запишем новый
+            layoutJson[i].status = newArr;
+          }
+
+          //получен ответ - выключаем красный цвет
+          layoutJson[i].sent = false;
+        }
+      }
+    } else {
+      console.log("[E]", "layoutJson missing");
+    }
+    if (error) console.log("[E]", "topic not found ", newStatusJson.topic);
+  }
+
   function jsonConcat(o1, o2) {
     for (var key in o2) {
       o1[key] = o2[key];
@@ -552,6 +630,16 @@
     return o1;
   }
 
+  //объединяем исклчая статус так как статус в данном случае накопительная переменная
+  function jsonConcatEx(o1, o2) {
+    for (var key in o2) {
+      if (key !== "status") {
+        o1[key] = o2[key];
+      }
+    }
+    return o1;
+  }
+
   async function onParced() {
     if (currentPageName === "/|") {
       clearParcedFlags();
@@ -579,7 +667,7 @@
       if (debug) console.log("✔✔", "system data parced");
       systemReady = true;
     }
-    if (currentPageName === "/dev|" && errorsJsonParced && settingsJsonParced && configJsonParced && itemsJsonParced) {
+    if (currentPageName === "/dev|" && errorsJsonParced && settingsJsonParced && configJsonParced && itemsJsonParced && paramsJsonParced) {
       clearParcedFlags();
       getVersionsList();
       if (debug) console.log("✔✔", "dev data parced");
@@ -598,7 +686,7 @@
 
   function saveSett() {
     var size = Object.keys(settingsJson).length;
-    console.log("[i]", "settingsJson length: " + size);
+    //console.log("[i]", "settingsJson length: " + size);
     if (size > 5) {
       jsonArrWrite(deviceList, "ip", getIP(selectedWs), "name", settingsJson.name);
       deviceList = deviceList;
@@ -616,7 +704,7 @@
 
   function saveMqtt() {
     var size = Object.keys(settingsJson).length;
-    console.log("[i]", "settingsJson length: " + size);
+    //console.log("[i]", "settingsJson length: " + size);
     if (size > 5) {
       wsSendMsg(selectedWs, "/sgnittes|" + JSON.stringify(settingsJson));
     } else {
@@ -667,7 +755,7 @@
             input.page = config.page;
             input.topic = settingsJson.root + "/" + config.id + "-date";
             input.descr = config.descr;
-            console.log("[i]", "topic ", widget.topic);
+            //console.log("[i]", "topic ", widget.topic);
             layout.push(input);
           }
           error = false;
@@ -676,9 +764,9 @@
           error = true;
         }
       }
-      if (error) console.log("[e]", "error, widget not found: " + setWidget);
+      if (error) console.log("[E]", "error, widget not found: " + setWidget);
     }
-    if (debug) console.log("[i] layout:", JSON.stringify(layout));
+    //if (debug) console.log("[i] layout:", JSON.stringify(layout));
     return layout;
   }
 
@@ -710,7 +798,7 @@
 
     clearParcedFlags();
 
-    if (debug) console.log("[i]", "all app data cleared");
+    //if (debug) console.log("[i]", "all app data cleared");
   }
 
   function clearParcedFlags() {
@@ -718,6 +806,7 @@
     widgetsJsonParced = false;
     itemsJsonParced = false;
     layoutJsonArrayParced = false;
+    layoutReceivingCompleted = false;
     settingsJsonParced = false;
     errorsJsonParced = false;
     ssidJsonParced = false;
@@ -780,43 +869,6 @@
     });
   }
 
-  //***********************************************************dashboard***************************************************************/
-  function sortingLayout() {
-    //сортируем весь layout по алфавиту
-    layoutJson.sort(function (a, b) {
-      if (a.descr < b.descr) {
-        return -1;
-      }
-      if (a.descr > b.descr) {
-        return 1;
-      }
-      return 0;
-    });
-    //формируем json всех карточек
-    pages = [];
-    const newPage = Array.from(new Set(Array.from(layoutJson, ({ page }) => page)));
-    newPage.forEach(function (item, i, arr) {
-      pages = [
-        ...pages,
-        JSON.parse(
-          JSON.stringify({
-            page: item,
-          })
-        ),
-      ];
-    });
-    //сортируем карточки по алфавиту
-    pages.sort(function (a, b) {
-      if (a.page < b.page) {
-        return -1;
-      }
-      if (a.page > b.page) {
-        return 1;
-      }
-      return 0;
-    });
-  }
-
   //***********************************************************logging******************************************************************/
   const addCoreMsg = (msg) => {
     if (coreMessages.length >= LOG_MAX_MESSAGES) {
@@ -1032,7 +1084,7 @@
 
   function onCheck() {
     let width = screen.width;
-    console.log("width", width);
+    //console.log("width", width);
     if (width < 900) {
       preventMove = true;
     } else {
@@ -1196,7 +1248,7 @@
           </Route>
           {#if devMode}
             <Route path="/dev">
-              <DevPage show={devReady} layoutJson={layoutJson} errorsJson={errorsJson} settingsJson={settingsJson} configJson={configJson} itemsJson={itemsJson} />
+              <DevPage show={devReady} layoutJson={layoutJson} errorsJson={errorsJson} settingsJson={settingsJson} configJson={configJson} itemsJson={itemsJson} paramsJson={paramsJson} />
             </Route>
             <Route path="/files">
               <FilesPage show={systemReady} />

src/pages/Dev.svelte

@@ -19,6 +19,7 @@
   export let settingsJson;
   export let configJson;
   export let itemsJson;
+  export let paramsJson;
 </script>
 
 <div class="grd-3col1">
@@ -37,4 +38,7 @@
   <Card title="itemsJson">
     <textarea on:input={itemsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(itemsJson))}</textarea>
   </Card>
+  <Card title="paramsJson">
+    <textarea on:input={paramsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(paramsJson))}</textarea>
+  </Card>
 </div>

src/widgets/Chart.svelte

@@ -8,50 +8,50 @@
 
   export let widget;
 
-  //необходимые по умолчанию значения из за тупости библиотеки
-  let labels = [0, 0];
-  let values = [0, 0];
-
   let datachart = {
-    labels: labels,
+    labels: [0, 0],
     datasets: [
       {
         name: widget.descr,
-        values: values,
+        values: [0, 0],
       },
     ],
   };
 
+  let prevStatus = {};
+
+  let firstTime = true;
+
+  let labels = [];
+  let values = [];
+
   let axisOptions = { xAxisMode: "tick", xIsSeries: true };
   let lineOptions;
-
-  let collectingDataArray = [];
-  let prevSatus = [];
-
   if (widget.pointRadius == "0") {
     lineOptions = { regionFill: 1, hideDots: 1, spline: 1 };
   } else {
     lineOptions = { regionFill: 1, dotSize: 3, spline: 1 };
   }
 
-  $: widget.status, collectDataToArr();
+  $: widget, collectDataToArr();
 
   function collectDataToArr() {
-    if (widget.status && Array.isArray(widget.status)) {
+    if (prevStatus !== widget.status && !firstTime) {
-      //отсекаем лишние события изменения переменной widget
+      if (Array.isArray(widget.status)) {
-      if (prevSatus !== widget.status) {
+        console.log("[i]", "=======================================================");
-        console.log("[i]", "collecting chart data to array, topic:", widget.topic);
+        prevStatus = widget.status;
-        let incomingDataArr = widget.status;
 
-        console.log("[i]", "array:", incomingDataArr);
+        for (let i = 0; i < widget.status.length; i++) {
-
+          if (i === 0) {
-        collectingDataArray = [...collectingDataArray, ...incomingDataArr];
+            labels[i] = getDDMM(widget.status[i].x);
-
+          } else {
-        for (let i = 0; i < collectingDataArray.length; i++) {
+            labels[i] = getHHMM(widget.status[i].x);
-          labels[i] = getHHMM(collectingDataArray[i].x);
+          }
-          values[i] = [collectingDataArray[i].y1];
+          values[i] = [widget.status[i].y1];
         }
 
+        //console.log("[i]", JSON.stringify(widget.status));
+
         if (widget.maxCount == 0 || widget.maxCount == "0") {
           clearCart();
           console.log("[i]", "clear cart data");
@@ -67,12 +67,9 @@
             },
           ],
         };
-        prevSatus = widget.status;
-        datachart = datachart;
       }
-    } else {
-      console.log("[i]", "skipping event, topic:", widget.topic);
     }
+    firstTime = false;
   }
 
   function getHHMM(timestamp) {
@@ -80,16 +77,26 @@
     return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
   }
 
+  function getDDMM(timestamp) {
+    var date = new Date(timestamp * 1000);
+    let day = date.getDate();
+    let month = date.getMonth() + 1;
+    let year = date.getFullYear();
+    return day + "." + month + "." + year;
+  }
+
   function clearCart() {
-    collectingDataArray = [];
+    widget.status = [];
-    labels = [0, 0];
+
-    values = [0, 0];
+    labels = [];
+    values = [];
+
     datachart = {
-      labels: [0],
+      labels: [0, 0],
       datasets: [
         {
           name: widget.descr,
-          values: [0],
+          values: [0, 0],
         },
       ],
     };
@@ -100,6 +107,5 @@
   <!-- svelte-ignore a11y-label-has-associated-control -->
   <label class="inline-block italic align-top text-center text-gray-500 txt-sz">{!widget.descr ? "" : widget.descr}</label>
 </div>
-<div hight="200">
+
-  <Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} />
+<Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} height="200" padding="0px" />
-</div>