.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "iotm-web",
-  "version": "4.1.8",
+  "version": "4.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -30,6 +30,55 @@
         "js-tokens": "^4.0.0"
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz",
+      "integrity": "sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -151,12 +200,6 @@
         "@types/node": "*"
       }
     },
-    "@zerodevx/svelte-toast": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.7.2.tgz",
-      "integrity": "sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==",
-      "dev": true
-    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -924,9 +967,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.5",
+      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
     "mkdirp": {
@@ -1259,9 +1302,9 @@
       }
     },
     "rollup": {
-      "version": "2.78.1",
+      "version": "2.79.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.0.tgz",
-      "integrity": "sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==",
+      "integrity": "sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -1432,9 +1475,9 @@
       }
     },
     "source-map": {
-      "version": "0.7.3",
+      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true
     },
     "source-map-js": {
@@ -1444,21 +1487,13 @@
       "dev": true
     },
     "source-map-support": {
-      "version": "0.5.19",
+      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
       }
     },
     "sourcemap-codec": {
@@ -1488,8 +1523,7 @@
     "svelte": {
       "version": "3.49.0",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA=="
-      "dev": true
     },
     "svelte-frappe-charts": {
       "version": "1.9.2",
@@ -1498,13 +1532,6 @@
       "requires": {
         "frappe-charts": "^1.6.2",
         "svelte": "^3.48.0"
-      },
-      "dependencies": {
-        "svelte": {
-          "version": "3.49.0",
-          "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
-          "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA=="
-        }
       }
     },
     "svelte-preprocess": {
@@ -1633,14 +1660,23 @@
       }
     },
     "terser": {
-      "version": "5.7.1",
+      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.0.tgz",
-      "integrity": "sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==",
+      "integrity": "sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==",
       "dev": true,
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
+        "source-map-support": "~0.5.20"
-        "source-map-support": "~0.5.19"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.8.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
+          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+          "dev": true
+        }
       }
     },
     "tinro": {

package.json

@@ -15,7 +15,7 @@
     "postcss-load-config": "^3.1.4",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
-    "rollup": "^2.78.1",
+    "rollup": "^2.79.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
@@ -28,6 +28,6 @@
   "dependencies": {
     "daisyui": "^1.25.4",
     "sirv-cli": "^1.0.14",
-    "svelte-frappe-charts": "^1.9.1"
+    "svelte-frappe-charts": "^1.9.2"
   }
 }

src/App.svelte

@@ -26,6 +26,7 @@
   //import AboutPage from "./pages/About.svelte";
 
   import CloudIcon from "./svg/Cloud.svelte";
+  import BookIcon from "./svg/Book.svelte";
 
   //****************************************************constants section*********************************************************/
   //******************************************************************************************************************************/
@@ -42,7 +43,7 @@
   //****************************************************variable section**********************************************************/
   //******************************************************************************************************************************/
   let myip = document.location.hostname;
-  if (devMode) myip = "192.168.88.221";
+  if (devMode) myip = "192.168.88.225";
 
   //Flags
   let firstDevListRequest = true;
@@ -1092,6 +1093,9 @@
           {/each}
         </select>
       </div>
+      <!--<div class="pl-4 pr-1 py-1">-->
+      <!--<BookIcon color={socketConnected === true ? "text-green-500" : "text-red-500"} />-->
+      <!--</div>-->
       <div class="pl-4 pr-4 py-1">
         <CloudIcon color={socketConnected === true ? "text-green-500" : "text-red-500"} />
       </div>

src/pages/Dashboard.svelte

@@ -16,7 +16,7 @@
 </script>
 
 {#if show}
-  <div class="grd-3col1">
+  <div class="grd-1col1">
     {#if layoutJson === []}
       <Card title={"Ваша панель управления пуста, вначале добавьте новые элементы в конфигураторе!"} />
     {/if}

src/svg/Book.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let color;
+  export let x = 0;
+  export let y = 0;
+</script>
+
+<svg class="h-8 w-8 {color}" width="8" height="8" viewBox="{x} {y} 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <rect x="4" y="4" width="16" height="16" rx="2" /> <line x1="4" y1="12" x2="20" y2="12" /> <line x1="12" y1="4" x2="12" y2="20" /></svg>

src/widgets/Chart.svelte

@@ -1,15 +1,37 @@
 <script>
+  import { onMount } from "svelte";
   import Chart from "svelte-frappe-charts";
 
+  onMount(async () => {
+    console.log("[i]", "------------chart mounted--------------");
+  });
+
+  let chartRef;
+
   export let widget;
 
-  let labels = [0, 0];
+  let axisOptions = { xAxisMode: "tick", xIsSeries: true };
-  let values = [0, 0];
+  let lineOptions;
+
+  if (widget.pointRadius == "0") {
+    lineOptions = { regionFill: 1, hideDots: 1, spline: 1 };
+  } else {
+    lineOptions = { regionFill: 1, dotSize: 3, spline: 1 };
+  }
+
+  let labels = ["", ""];
+  let values = ["", ""];
+
+  //let datachart = {
+  //  labels: [],
+  //  datasets: [],
+  //};
 
   let datachart = {
     labels: labels,
     datasets: [
       {
+        name: widget.descr,
         values: values,
       },
     ],
@@ -21,49 +43,21 @@
     if (widget.status) {
       let dataArr = widget.status;
       for (let i = 0; i < dataArr.length; i++) {
-        var date = new Date(dataArr[i].x * 1000);
+        chartRef.addDataPoint(getHHMM(dataArr[i].x), [dataArr[i].y1]);
-        let hhmm = ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
-        labels[i] = hhmm;
-        values[i] = dataArr[i].y1;
       }
-
+      console.log("-------------------------calc-------------------------");
-      datachart = {
-        labels: labels,
-        datasets: [
-          {
-            values: values,
-          },
-        ],
-      };
-
-      //console.log("chart data: ", JSON.stringify(datachart));
     }
   }
 
-  function convert() {
+  function getHHMM(timestamp) {
-    // Months array
+    var date = new Date(timestamp * 1000);
-    var months_arr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
-    // Convert timestamp to milliseconds
-    var date = new Date(unixtimestamp * 1000);
-    // Year
-    var year = date.getFullYear();
-    // Month
-    var month = months_arr[date.getMonth()];
-    // Day
-    var day = date.getDate();
-    // Hours
-    var hours = date.getHours();
-    // Minutes
-    var minutes = "0" + date.getMinutes();
-    // Seconds
-    var seconds = "0" + date.getSeconds();
-    // Display date time in MM-dd-yyyy h:m:s format
-    var convdataTime = month + "-" + day + "-" + year + " " + hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
   }
 </script>
 
-<div class="text-center">
+<!--<div class="text-center">-->
 <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr} </label>
+<!--<label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr} </label>-->
-</div>
+<!--</div>-->
-<Chart data={datachart} type="line" />
+
+<Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} bind:this={chartRef} />