poe-svelte-ui-lib 1.10.4 → 1.10.6

package/dist/Graph/Graph.svelte

@@ -1,4 +1,28 @@
 <!-- $lib/ElementsUI/Graph.svelte -->
+<script module lang="ts">
+  import type { IOption } from "../types"
+
+  /* Константы и настройки — экспортируются для переиспользования в GraphProps.svelte (редактор конструктора) */
+  export const REFRESH_OPTIONS: IOption[] = [
+    { id: "RefreshOption-AUTO", name: "AUTO", value: 0, class: "" },
+    { id: "RefreshOption-10", name: "10", value: 10, class: "" },
+    { id: "RefreshOption-25", name: "25", value: 25, class: "" },
+    { id: "RefreshOption-50", name: "50", value: 50, class: "" },
+    { id: "RefreshOption-100", name: "100", value: 100, class: "" },
+    { id: "RefreshOption-250", name: "250", value: 250, class: "" },
+    { id: "RefreshOption-500", name: "500", value: 500, class: "" },
+    { id: "RefreshOption-1000", name: "1000", value: 1000, class: "" },
+    { id: "RefreshOption-5000", name: "5000", value: 5000, class: "" },
+  ]
+  export const SCALE_OPTIONS: IOption[] = [
+    { id: "ScaleOption-50", name: "50", value: 50, class: "" },
+    { id: "ScaleOption-100", name: "100", value: 100, class: "" },
+    { id: "ScaleOption-500", name: "500", value: 500, class: "" },
+    { id: "ScaleOption-1000", name: "1000", value: 1000, class: "" },
+    { id: "ScaleOption-2000", name: "2000", value: 2000, class: "" },
+  ]
+</script>
+
 <script lang="ts">
   import { onMount } from "svelte"
   import Select from "../Select/Select.svelte"
@@ -9,8 +33,10 @@
     id = crypto.randomUUID(),
     wrapperClass = "",
     label = { name: "", class: "" },
-    streamingData = { data: [], timestamp: Date.now() },
+    streamingData = { data: [] },
     isTest = false,
+    refreshRate = 0,
+    scale = 100,
   }: IGraphProps = $props()
 
   /* Состояние компонента */
@@ -22,31 +48,15 @@
   let width = $state(600)
   let height = $state(125)
 
-  /* Константы и настройки */
-  const REFRESH_OPTIONS: IOption[] = [
-    { id: "RefreshOption-AUTO", name: "AUTO", value: 0, class: "" },
-    { id: "RefreshOption-10", name: "10", value: 10, class: "" },
-    { id: "RefreshOption-25", name: "25", value: 25, class: "" },
-    { id: "RefreshOption-50", name: "50", value: 50, class: "" },
-    { id: "RefreshOption-100", name: "100", value: 100, class: "" },
-    { id: "RefreshOption-250", name: "250", value: 250, class: "" },
-    { id: "RefreshOption-500", name: "500", value: 500, class: "" },
-    { id: "RefreshOption-1000", name: "1000", value: 1000, class: "" },
-    { id: "RefreshOption-5000", name: "5000", value: 5000, class: "" },
-  ]
-  const SCALE_OPTIONS: IOption[] = [
-    { id: "ScaleOption-50", name: "50", value: 50, class: "" },
-    { id: "ScaleOption-100", name: "100", value: 100, class: "" },
-    { id: "ScaleOption-500", name: "500", value: 500, class: "" },
-    { id: "ScaleOption-1000", name: "1000", value: 1000, class: "" },
-    { id: "ScaleOption-2000", name: "2000", value: 2000, class: "" },
-  ]
-  let selectedRefreshRate = $derived(isTest ? 50 : 0)
-  let selectedScale = $state(100)
+  /* selectedRefreshRate/selectedScale изначально берутся из пропов (сохраняются вместе с компонентом в конструкторе),
+     но остаются локально переключаемыми через Select ниже — присвоение этим $derived временно
+     переопределяет значение, пока не изменится refreshRate/scale/isTest (проп) */
+  let selectedRefreshRate = $derived(isTest ? 50 : (refreshRate ?? 0))
+  let selectedScale = $derived(scale ?? 100)
   const maxDataPoints = $derived(selectedRefreshRate == 0 ? 20 : 100)
   const defaultColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899"]
 
-  let previousDataTimestamp: number = $state(0)
+  let previousValues: number[] = $state([])
 
   /* Инициализация данных графиков */
   const initializeGraphData = () => {
@@ -56,6 +66,7 @@
     if (!streamingData.data || streamingData.data.length === 0) {
       graphData = []
       currentValues = []
+      previousValues = []
       return
     }
     const newGraphData = (streamingData.data as IGraphDataObject[]).slice(0, 6).map((d, i) => {
@@ -79,12 +90,18 @@
     initializeGraphData()
   })
 
-  /* Обработка входящих данных */
+  /* Обработка входящих данных.
+     ВАЖНО: streamingData читается только внутри колбэков setInterval (асинхронный контекст),
+     а не в теле $effect — иначе каждое новое сообщение (у нас до 10 Гц с устройства) делает
+     streamingData зависимостью эффекта, и он пересоздаёт таймер на каждый пакет: если Refresh
+     rate медленнее, чем частота входящих данных, setInterval убивается раньше, чем успевает
+     сработать хотя бы раз — график зависает. */
   let intervalId: ReturnType<typeof setInterval>
   $effect(() => {
     clearInterval(intervalId)
-    if (selectedRefreshRate > 0 && streamingData.data && streamingData.data.length > 0) {
+    if (selectedRefreshRate > 0) {
       intervalId = setInterval(() => {
+        if (!isTest && (!streamingData.data || streamingData.data.length === 0)) return
         let newValues
         if (isTest) newValues = graphData.map(() => Math.random() * 100 - 50)
         else newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
@@ -99,22 +116,26 @@
         })
         drawAllGraphs()
       }, selectedRefreshRate)
-    } else if (selectedRefreshRate == 0 && streamingData.data && streamingData.data.length > 0 && !isTest) {
+    } else if (selectedRefreshRate == 0 && !isTest) {
+      /* AUTO: streamingData не несёт признак "это новый пакет" (timestamp никем не передаётся —
+         DeviceStore хранит только последнее значение), поэтому опрашиваем каждые 10мс и рисуем
+         точку только когда сами значения реально изменились, а не на каждый тик поллинга. */
       intervalId = setInterval(() => {
-        if (previousDataTimestamp < (streamingData.timestamp ?? Date.now())) {
-          let newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
+        if (!streamingData.data || streamingData.data.length === 0) return
+        const newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
+        if (JSON.stringify(newValues) === JSON.stringify(previousValues)) return
+        previousValues = newValues
 
-          newValues.forEach((value, i) => {
-            if (!graphData[i]) return
-            graphData[i].points.push({ x: streamingData.timestamp ?? Date.now(), y: value })
-            if (graphData[i].points.length > maxDataPoints) {
-              graphData[i].points.shift()
-            }
-            currentValues[i] = value
-          })
-          drawAllGraphs()
-          previousDataTimestamp = streamingData.timestamp ?? Date.now()
-        }
+        const now = Date.now()
+        newValues.forEach((value, i) => {
+          if (!graphData[i]) return
+          graphData[i].points.push({ x: now, y: value })
+          if (graphData[i].points.length > maxDataPoints) {
+            graphData[i].points.shift()
+          }
+          currentValues[i] = value
+        })
+        drawAllGraphs()
       }, 10)
     }
     return () => clearInterval(intervalId)

package/dist/Graph/Graph.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { IOption } from "../types";
+export declare const REFRESH_OPTIONS: IOption[];
+export declare const SCALE_OPTIONS: IOption[];
 import type { IGraphProps } from "../types";
 declare const Graph: import("svelte").Component<IGraphProps, {}, "">;
 type Graph = ReturnType<typeof Graph>;

package/dist/Graph/GraphProps.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { getContext } from "svelte"
   import { T } from "../locales/i18n"
-  import { type UIComponent, type IGraphProps, updateProperty, type IUIComponentHandler } from "../types"
+  import { type UIComponent, type IGraphProps, type IOption, updateProperty, type IUIComponentHandler } from "../types"
   import * as UI from ".."
   import { optionsStore } from "../options"
   import { twMerge } from "tailwind-merge"
   import CommonSnippets from "../CommonSnippets.svelte"
+  import { REFRESH_OPTIONS, SCALE_OPTIONS } from "./Graph.svelte"
 
   const {
     component,
@@ -37,6 +38,21 @@
   />
 {/snippet}
 
+{#snippet GraphSettings()}
+  <UI.Select
+    label={{ name: $T("constructor.props.refreshrate") }}
+    options={REFRESH_OPTIONS}
+    value={REFRESH_OPTIONS.find((o) => o.value == (component.properties.refreshRate ?? 0))}
+    onUpdate={(value) => updateProperty("refreshRate", (value as IOption).value as number, component, onPropertyChange)}
+  />
+  <UI.Select
+    label={{ name: $T("constructor.props.scale") }}
+    options={SCALE_OPTIONS}
+    value={SCALE_OPTIONS.find((o) => o.value == (component.properties.scale ?? 100))}
+    onUpdate={(value) => updateProperty("scale", (value as IOption).value as number, component, onPropertyChange)}
+  />
+{/snippet}
+
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
@@ -49,6 +65,7 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render GraphIsTest()}
+      {@render GraphSettings()}
     </div>
   </div>
 {:else}
@@ -64,6 +81,7 @@
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
       {@render GraphIsTest()}
+      {@render GraphSettings()}
     </div>
   </div>
 {/if}

package/dist/locales/translations.js

@@ -140,6 +140,8 @@ const translations = {
         "constructor.props.disabled": "Отключить",
         "constructor.props.readonly": "Только чтение",
         "constructor.props.istest": "Тестовые данные",
+        "constructor.props.refreshrate": "Скорость обновления",
+        "constructor.props.scale": "Масштаб",
         "constructor.props.variable": "Имя переменной",
         "constructor.props.widthMode": "Ширина кнопок",
         "constructor.props.graphdata.title": "Начальные данные ",
@@ -303,6 +305,8 @@ const translations = {
         "common.select_tag": "Make a choice",
         "constructor.props.file.select": "Select a file",
         "constructor.props.file.notselected": "File is not selected",
+        "constructor.props.refreshrate": "Refresh rate",
+        "constructor.props.scale": "Scale",
     },
     zh: {},
 };

package/dist/types.d.ts

@@ -144,9 +144,10 @@ export interface IGraphProps {
     };
     streamingData?: {
         data: IGraphDataObject[] | null;
-        timestamp?: number;
     };
     isTest?: boolean;
+    refreshRate?: number;
+    scale?: number;
 }
 export interface IInputProps {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.10.4",
+  "version": "1.10.6",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -56,4 +56,4 @@
     "vite": "^8.1.0",
     "vite-plugin-compression": "^0.5.1"
   }
-}
+}