.

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 values = [0, 0];
+  let axisOptions = { xAxisMode: "tick", xIsSeries: true };
+  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);
-        let hhmm = ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
-        labels[i] = hhmm;
-        values[i] = dataArr[i].y1;
+        chartRef.addDataPoint(getHHMM(dataArr[i].x), [dataArr[i].y1]);
       }
-
-      datachart = {
-        labels: labels,
-        datasets: [
-          {
-            values: values,
-          },
-        ],
-      };
-
-      //console.log("chart data: ", JSON.stringify(datachart));
+      console.log("-------------------------calc-------------------------");
     }
   }
 
-  function convert() {
-    // Months array
-    var months_arr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-    // 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);
+  function getHHMM(timestamp) {
+    var date = new Date(timestamp * 1000);
+    return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
   }
 </script>
 
-<div class="text-center">
-  <!-- svelte-ignore a11y-label-has-associated-control -->
-  <label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr} </label>
-</div>
-<Chart data={datachart} type="line" />
+<!--<div class="text-center">-->
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<!--<label class="wgt-dscr-stl">{!widget.descr ? "" : widget.descr} </label>-->
+<!--</div>-->
+
+<Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} bind:this={chartRef} />