графики с выбором даты

src/widgets/Chart.svelte

@@ -1,20 +1,13 @@
 <script>
   import Chart from "svelte-frappe-charts";
+  import { onMount } from "svelte";
+
+  onMount(async () => {
+    console.log("[i]", "chart component mounted");
+  });
 
   export let widget;
 
-  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 collectingDataArray = [];
-  let prevSatus = [];
-
   //необходимые по умолчанию значения из за тупости библиотеки
   let labels = [0, 0];
   let values = [0, 0];
@@ -29,6 +22,18 @@
     ],
   };
 
+  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();
 
   function collectDataToArr() {
@@ -38,7 +43,7 @@
         console.log("[i]", "collecting chart data to array, topic:", widget.topic);
         let incomingDataArr = widget.status;
 
-        console.log("[i]", "array:", incomingDataArr);
+        //console.log("[i]", "array:", incomingDataArr);
 
         collectingDataArray = [...collectingDataArray, ...incomingDataArr];
 
@@ -47,6 +52,12 @@
           values[i] = [collectingDataArray[i].y1];
         }
 
+        if (widget.maxCount == 0 || widget.maxCount == "0") {
+          clearCart();
+          console.log("[i]", "clear cart data");
+          return;
+        }
+
         datachart = {
           labels: labels,
           datasets: [
@@ -68,10 +79,22 @@
     var date = new Date(timestamp * 1000);
     return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
   }
+
+  function clearCart() {
+    datachart = {
+      labels: [0],
+      datasets: [
+        {
+          name: widget.descr,
+          values: [0],
+        },
+      ],
+    };
+  }
 </script>
 
 <div class="text-center">
   <!-- 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>
-<Chart class="h-24" data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} />
+<Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} />

src/widgets/Input.svelte

@@ -1,6 +1,53 @@
 <script>
   export let widget;
   export let wsPush = (ws, topic, status) => {};
+  //let newFormat;
+
+  //$: widget.status, calc();
+
+  function selectFromMarkerToMarker(str, tofind, number) {
+    if (str.indexOf(tofind) == -1) {
+      return "not found";
+    }
+    str += tofind;
+    let i = 0;
+    do {
+      if (i == number) {
+        return selectToMarker(str, tofind);
+      }
+      str = deleteBeforeDelimiter(str, tofind);
+      i++;
+    } while (str.length != 0);
+
+    return "not found";
+  }
+
+  function selectToMarker(str, found) {
+    let p = str.indexOf(found);
+    return str.substring(0, p);
+  }
+
+  function deleteBeforeDelimiter(str, found) {
+    let p = str.indexOf(found) + found.length;
+    return str.substring(p);
+  }
+
+  let bindValue;
+
+  //данная функция вызывается когда в вебе поменяли значение и его нужно отправить в сокеты
+  //а также периписать в переменной виджета
+  function changeFomatTo() {
+    widget.status = selectFromMarkerToMarker(bindValue, "-", 2) + "." + selectFromMarkerToMarker(bindValue, "-", 1) + "." + selectFromMarkerToMarker(bindValue, "-", 0);
+    wsPush(widget.ws, widget.topic, widget.status);
+  }
+
+  $: widget.status, changeFomatFrom();
+
+  //данная функция вызывается когда кто то из вне переписал переменную widget
+  function changeFomatFrom() {
+    let value = widget.status;
+    bindValue = selectFromMarkerToMarker(value, ".", 2) + "-" + selectFromMarkerToMarker(value, ".", 1) + "-" + selectFromMarkerToMarker(value, ".", 0);
+  }
 </script>
 
 <div class="crd-itm-psn">
@@ -16,7 +63,7 @@
       <input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="text" />
     {/if}
     {#if widget.type == "date"}
-      <input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="date" />
+      <input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), changeFomatTo())} bind:value={bindValue} type="date" />
     {/if}
     {#if widget.type == "time"}
       <input class={widget.sent ? "ipt-rnd text-right border-red-500" : "ipt-rnd text-right focus:border-indigo-500"} on:change={() => ((widget.sent = true), wsPush(widget.ws, widget.topic, widget.status))} bind:value={widget.status} type="time" />