From 8f7bcae0e3753902bc11b487b75b2544ac26de5e Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Wed, 31 Aug 2022 02:14:16 +0200
Subject: [PATCH] =?UTF-8?q?=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Dashboard.svelte |  4 +++
 src/widgets/Chart.svelte   | 69 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 src/widgets/Chart.svelte

diff --git a/src/pages/Dashboard.svelte b/src/pages/Dashboard.svelte
index 352623c..9dbe1a2 100644
--- a/src/pages/Dashboard.svelte
+++ b/src/pages/Dashboard.svelte
@@ -2,6 +2,7 @@
   import Card from "../components/Card.svelte";
   import Input from "../widgets/Input.svelte";
   import Range from "../widgets/Range.svelte";
+  import Chart from "../widgets/Chart.svelte";
   import Toggle from "../widgets/Toggle.svelte";
   import Anydata from "../widgets/Anydata.svelte";
   import Alarm from "../components/Alarm.svelte";
@@ -35,6 +36,9 @@
             {#if widget.widget === "range"}
               <Range bind:value={widget.status} widget={widget} wsPush={(ws, topic, status) => wsPush(ws, topic, status)} />
             {/if}
+            {#if widget.widget === "chart"}
+              <Chart bind:value={widget.status} widget={widget} />
+            {/if}
           {/if}
         {/each}
       </Card>
diff --git a/src/widgets/Chart.svelte b/src/widgets/Chart.svelte
new file mode 100644
index 0000000..d2f182b
--- /dev/null
+++ b/src/widgets/Chart.svelte
@@ -0,0 +1,69 @@
+<script>
+  import Chart from "svelte-frappe-charts";
+
+  export let widget;
+
+  let labels = [0, 0];
+  let values = [0, 0];
+
+  let datachart = {
+    labels: labels,
+    datasets: [
+      {
+        values: values,
+      },
+    ],
+  };
+
+  $: widget.status, calc();
+
+  function calc() {
+    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;
+      }
+
+      datachart = {
+        labels: labels,
+        datasets: [
+          {
+            values: values,
+          },
+        ],
+      };
+
+      //console.log("chart data: ", JSON.stringify(datachart));
+    }
+  }
+
+  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);
+  }
+</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" />