poe-svelte-ui-lib 1.10.5 → 1.10.7

package/dist/Graph/Graph.svelte

@@ -1,18 +1,41 @@
 <!-- $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: "" },
+  ]
+</script>
+
 <script lang="ts">
   import { onMount } from "svelte"
   import Select from "../Select/Select.svelte"
-  import type { IGraphDataObject, IGraphProps, IOption } from "../types"
+  import type { IGraphDataObject, IGraphProps } from "../types"
 
   /* Инициализация пропсов с дефолтными значениями */
   let {
     id = crypto.randomUUID(),
     wrapperClass = "",
     label = { name: "", class: "" },
-    streamingData = { data: [], timestamp: Date.now() },
+    streamingData = { data: [] },
     isTest = false,
+    refreshRate = 0,
+    historyData = [],
   }: IGraphProps = $props()
 
+  /* Статический режим: historyData передан целиком с реальными timestamp (Unix-эпоха в мс) —
+     компонент рисует весь массив разом, без интервалов/AUTO; streamingData/refreshRate игнорируются */
+  const isHistoryMode = $derived(!!historyData && historyData.length > 0)
+
   /* Состояние компонента */
   let graphData = $state<{ id: string; points: { x: number; y: number }[]; color: string; name: string }[]>([])
   let currentValues = $state<number[]>([])
@@ -22,40 +45,60 @@
   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 изначально берётся из пропа (сохраняется вместе с компонентом в конструкторе),
+     но остаётся локально переключаемым через Select ниже — присвоение этому $derived временно
+     переопределяет значение, пока не изменится refreshRate/isTest (проп) */
+  let selectedRefreshRate = $derived(isTest ? 50 : (refreshRate ?? 0))
   const maxDataPoints = $derived(selectedRefreshRate == 0 ? 20 : 100)
   const defaultColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899"]
 
-  let previousDataTimestamp: number = $state(0)
+  let previousValues: number[] = $state([])
 
-  /* Инициализация данных графиков */
+  /* Автомасштаб Y для живого режима: диапазон плавно "подъезжает" к фактическому min/max буфера
+     (±10% отступ), пересчитывается один раз за тик (не за кадр/mousemove) и сглаживается —
+     иначе ось дёргалась бы на каждый новый семпл */
+  let liveYRange = $state<{ min: number; max: number } | null>(null)
+
+  const computeAutoYRange = (values: number[]): { min: number; max: number } => {
+    if (values.length === 0) return { min: -1, max: 1 }
+    const rawMin = Math.min(...values)
+    const rawMax = Math.max(...values)
+    const pad = (rawMax - rawMin) * 0.1 || Math.abs(rawMax) * 0.1 || 1
+    return { min: rawMin - pad, max: rawMax + pad }
+  }
+
+  const updateLiveYRange = () => {
+    const target = computeAutoYRange(graphData.flatMap((g) => g.points.map((p) => p.y)))
+    if (!liveYRange) {
+      liveYRange = target
+      return
+    }
+    const smoothing = 0.15
+    liveYRange = {
+      min: liveYRange.min + (target.min - liveYRange.min) * smoothing,
+      max: liveYRange.max + (target.max - liveYRange.max) * smoothing,
+    }
+  }
+
+  /* Тултип при наведении — время и значения всех серий в ближайшей к курсору точке */
+  let tooltip = $state<{ visible: boolean; x: number; y: number; time: number; items: { name: string; value: number; color: string }[] }>({
+    visible: false,
+    x: 0,
+    y: 0,
+    time: 0,
+    items: [],
+  })
+
+  /* Инициализация данных графиков (потоковый режим) */
   const initializeGraphData = () => {
+    if (isHistoryMode) return
     if (typeof streamingData === "string") {
       streamingData = JSON.parse(streamingData)
     }
     if (!streamingData.data || streamingData.data.length === 0) {
       graphData = []
       currentValues = []
+      previousValues = []
       return
     }
     const newGraphData = (streamingData.data as IGraphDataObject[]).slice(0, 6).map((d, i) => {
@@ -79,7 +122,25 @@
     initializeGraphData()
   })
 
-  /* Обработка входящих данных.
+  /* Статический режим: строим graphData один раз (и заново при каждой смене historyData) —
+     x = реальный timestamp точки, "текущее" значение в панели Values — последняя (по времени) точка серии */
+  $effect(() => {
+    if (!isHistoryMode) return
+    const series = historyData.slice(0, 6).map((s, i) => {
+      const sortedPoints = [...s.points].sort((a, b) => a.timestamp - b.timestamp).map((p) => ({ x: p.timestamp, y: p.value }))
+      return {
+        id: crypto.randomUUID(),
+        points: sortedPoints,
+        color: defaultColors[i % defaultColors.length],
+        name: s.name || `Value ${i}`,
+      }
+    })
+    graphData = series
+    currentValues = series.map((s) => (s.points.length ? s.points[s.points.length - 1].y : 0))
+    drawAllGraphs()
+  })
+
+  /* Обработка входящих потоковых данных.
      ВАЖНО: streamingData читается только внутри колбэков setInterval (асинхронный контекст),
      а не в теле $effect — иначе каждое новое сообщение (у нас до 10 Гц с устройства) делает
      streamingData зависимостью эффекта, и он пересоздаёт таймер на каждый пакет: если Refresh
@@ -88,6 +149,7 @@
   let intervalId: ReturnType<typeof setInterval>
   $effect(() => {
     clearInterval(intervalId)
+    if (isHistoryMode) return
     if (selectedRefreshRate > 0) {
       intervalId = setInterval(() => {
         if (!isTest && (!streamingData.data || streamingData.data.length === 0)) return
@@ -103,25 +165,30 @@
           }
           currentValues[i] = value
         })
+        updateLiveYRange()
         drawAllGraphs()
       }, selectedRefreshRate)
     } else if (selectedRefreshRate == 0 && !isTest) {
+      /* AUTO: streamingData не несёт признак "это новый пакет" (метки времени тут нет —
+         DeviceStore хранит только последнее значение), поэтому опрашиваем каждые 10мс и рисуем
+         точку только когда сами значения реально изменились, а не на каждый тик поллинга. */
       intervalId = setInterval(() => {
         if (!streamingData.data || streamingData.data.length === 0) return
-        if (previousDataTimestamp < (streamingData.timestamp ?? Date.now())) {
-          let newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
-
-          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 newValues = (streamingData.data as IGraphDataObject[]).map((dataset) => dataset.value)
+        if (JSON.stringify(newValues) === JSON.stringify(previousValues)) return
+        previousValues = newValues
+
+        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
+        })
+        updateLiveYRange()
+        drawAllGraphs()
       }, 10)
     }
     return () => clearInterval(intervalId)
@@ -147,28 +214,117 @@
     return () => resizeObserver.disconnect()
   })
 
-  const drawAllGraphs = () => {
-    if (!ctx) return
-    ctx.clearRect(0, 0, width, height)
-
-    const padding = {
-      top: 10,
-      right: 10,
-      bottom: 20,
-      left: 35,
-    }
-
+  /* Общая геометрия осей — переиспользуется отрисовкой и обработчиком наведения мыши, чтобы не дублировать формулы */
+  const computeGeometry = () => {
+    const padding = { top: 10, right: 10, bottom: 20, left: 35 }
     const graphWidth = width - padding.left - padding.right
     const graphHeight = height - padding.top - padding.bottom
 
     const allPoints = graphData.flatMap((g) => g.points)
-    const minX = Math.min(...allPoints.map((p) => p.x))
-    const maxX = Math.max(...allPoints.map((p) => p.x))
+    const minX = allPoints.length ? Math.min(...allPoints.map((p) => p.x)) : 0
+    const maxX = allPoints.length ? Math.max(...allPoints.map((p) => p.x)) : 1
     const timeSpan = maxX - minX || 1
 
-    // Функции преобразования координат с учетом отступов
+    /* Оба режима — авто-масштаб по фактическим данным (±10% отступ, не обязательно симметрично относительно нуля):
+       в статическом считается разово по всему массиву, в живом — используется сглаженный liveYRange
+       (обновляется отдельно, в updateLiveYRange, чтобы не дёргаться на каждый кадр/mousemove) */
+    let yMin: number
+    let yMax: number
+    if (isHistoryMode) {
+      const values = allPoints.map((p) => p.y)
+      const range = computeAutoYRange(values)
+      yMin = range.min
+      yMax = range.max
+    } else {
+      const range = liveYRange ?? computeAutoYRange(allPoints.map((p) => p.y))
+      yMin = range.min
+      yMax = range.max
+    }
+    const ySpan = yMax - yMin || 1
+
     const getX = (x: number) => padding.left + ((x - minX) / timeSpan) * graphWidth
-    const getY = (y: number) => padding.top + graphHeight - (((y / selectedScale) * graphHeight) / 2 + graphHeight / 2)
+    const getY = (y: number) => padding.top + graphHeight - ((y - yMin) / ySpan) * graphHeight
+
+    return { padding, graphWidth, graphHeight, minX, maxX, timeSpan, yMin, yMax, ySpan, getX, getY }
+  }
+
+  /* Бинарный поиск ближайшей по времени точки — точки в graphData всегда отсортированы по x (по построению) */
+  const findNearestPoint = (points: { x: number; y: number }[], t: number): { x: number; y: number } | null => {
+    if (points.length === 0) return null
+    let lo = 0
+    let hi = points.length - 1
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1
+      if (points[mid].x < t) lo = mid + 1
+      else hi = mid
+    }
+    if (lo > 0 && Math.abs(points[lo - 1].x - t) < Math.abs(points[lo].x - t)) return points[lo - 1]
+    return points[lo]
+  }
+
+  const pad2 = (n: number) => String(n).padStart(2, "0")
+
+  /* Компактная адаптивная подпись сетки по оси X: относительное время для живого режима, дата/время — для статического */
+  const formatAxisLabel = (t: number, spanMs: number): string => {
+    if (!isHistoryMode) return `${((t - Date.now()) / 1000).toFixed(0)}s`
+    const d = new Date(t)
+    const hhmm = `${pad2(d.getHours())}:${pad2(d.getMinutes())}`
+    if (spanMs < 24 * 60 * 60 * 1000) return hhmm
+    const ddmm = `${pad2(d.getDate())}.${pad2(d.getMonth() + 1)}`
+    if (spanMs < 365 * 24 * 60 * 60 * 1000) return `${ddmm} ${hhmm}`
+    return `${ddmm}.${d.getFullYear()}`
+  }
+
+  /* Полная подпись времени в тултипе */
+  const formatTooltipTime = (t: number): string => {
+    if (!isHistoryMode) return `${((t - Date.now()) / 1000).toFixed(1)}s`
+    const d = new Date(t)
+    return `${pad2(d.getDate())}.${pad2(d.getMonth() + 1)}.${d.getFullYear()} ${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`
+  }
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!canvas || graphData.length === 0) return
+    const rect = canvas.getBoundingClientRect()
+    const mouseX = e.clientX - rect.left
+    const mouseY = e.clientY - rect.top
+    const { padding, graphWidth, minX, timeSpan } = computeGeometry()
+
+    if (mouseX < padding.left || mouseX > width - padding.right) {
+      if (tooltip.visible) {
+        tooltip = { ...tooltip, visible: false }
+        drawAllGraphs()
+      }
+      return
+    }
+
+    const t = minX + ((mouseX - padding.left) / graphWidth) * timeSpan
+    const items = graphData
+      .map((g) => {
+        const nearest = findNearestPoint(g.points, t)
+        return nearest ? { name: g.name, value: nearest.y, color: g.color, time: nearest.x } : null
+      })
+      .filter((v): v is { name: string; value: number; color: string; time: number } => v !== null)
+
+    if (items.length === 0) {
+      tooltip = { ...tooltip, visible: false }
+      return
+    }
+
+    tooltip = { visible: true, x: mouseX, y: mouseY, time: items[0].time, items }
+    drawAllGraphs()
+  }
+
+  const handleMouseLeave = () => {
+    if (!tooltip.visible) return
+    tooltip = { ...tooltip, visible: false }
+    drawAllGraphs()
+  }
+
+  const drawAllGraphs = () => {
+    if (!ctx) return
+    ctx.clearRect(0, 0, width, height)
+
+    const { padding, graphWidth, graphHeight, minX, timeSpan, yMin, yMax, getX, getY } = computeGeometry()
 
     /* Сетка X */
     ctx.strokeStyle = "#777"
@@ -177,17 +333,15 @@
     ctx.font = "10px monospace"
     ctx.textAlign = "center"
 
-    const now = Date.now()
     for (let i = 0; i <= 10; i++) {
       const t = minX + (i / 10) * timeSpan
       const x = getX(t)
-      const secondsAgo = ((t - now) / 1000).toFixed(0)
       ctx.beginPath()
       ctx.moveTo(x, padding.top)
       ctx.lineTo(x, height - padding.bottom)
       ctx.stroke()
       ctx.textBaseline = "top"
-      ctx.fillText(`${secondsAgo}s`, x, height - padding.bottom + 2)
+      ctx.fillText(formatAxisLabel(t, timeSpan), x, height - padding.bottom + 2)
     }
 
     /* Сетка Y */
@@ -195,13 +349,13 @@
     ctx.textBaseline = "middle"
     const ySteps = 8
     for (let i = 0; i <= ySteps; i++) {
-      const yVal = selectedScale - (i * 2 * selectedScale) / ySteps
+      const yVal = yMax - (i * (yMax - yMin)) / ySteps
       const y = getY(yVal)
       ctx.beginPath()
       ctx.moveTo(padding.left, y)
       ctx.lineTo(width - padding.right, y)
       ctx.stroke()
-      ctx.fillText(`${yVal.toFixed(0)}`, padding.left - 5, y)
+      ctx.fillText(yVal.toFixed(1), padding.left - 5, y)
     }
 
     /* Отрисовка графиков */
@@ -222,6 +376,17 @@
       ctx.lineTo(getX(last.x), getY(last.y))
       ctx.stroke()
     })
+
+    /* Вертикальная линия-указатель под тултипом */
+    if (tooltip.visible) {
+      const x = getX(tooltip.time)
+      ctx.strokeStyle = "rgba(120, 120, 120, 0.6)"
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      ctx.moveTo(x, padding.top)
+      ctx.lineTo(x, height - padding.bottom)
+      ctx.stroke()
+    }
   }
 </script>
 
@@ -232,38 +397,53 @@
 
   <div class="flex w-full flex-row gap-4">
     <!-- График -->
-    <div bind:this={container} class="h-64 grow overflow-hidden rounded-xl border border-gray-200 shadow-sm">
-      <canvas class="h-full w-full bg-(--back-color)" bind:this={canvas}></canvas>
+    <div bind:this={container} class="relative h-64 grow overflow-hidden rounded-xl border border-gray-200 shadow-sm">
+      <canvas
+        class="h-full w-full bg-(--back-color)"
+        bind:this={canvas}
+        onmousemove={handleMouseMove}
+        onmouseleave={handleMouseLeave}
+      ></canvas>
+
+      {#if tooltip.visible}
+        <div
+          class="pointer-events-none absolute z-10 rounded-lg border border-(--border-color) bg-(--back-color) px-2 py-1 text-xs whitespace-nowrap shadow-lg"
+          style="left: {Math.min(tooltip.x + 12, width - 150)}px; top: {Math.min(tooltip.y + 12, height - 16 - tooltip.items.length * 16)}px;"
+        >
+          <div class="mb-1 font-semibold">{formatTooltipTime(tooltip.time)}</div>
+          {#each tooltip.items as item (item.name)}
+            <div class="flex items-center gap-1.5">
+              <span class="h-2 w-2 shrink-0 rounded-full" style="background-color: {item.color}"></span>
+              <span>{item.name}:</span>
+              <span class="font-semibold">{item.value.toFixed(2)}</span>
+            </div>
+          {/each}
+        </div>
+      {/if}
     </div>
 
     <!-- Панель настроек -->
     <div class="flex w-48 flex-col gap-2">
-      <!-- Развертка по горизонтали -->
-      <Select
-        label={{ name: "Refresh rate", class: "" }}
-        options={REFRESH_OPTIONS}
-        value={REFRESH_OPTIONS.find((o) => o.value == selectedRefreshRate)}
-        onUpdate={(value) => (selectedRefreshRate = (value as IOption).value as number)}
-      />
-
-      <!-- Масштаб по вертикали -->
-      <Select
-        label={{ name: "Scale" }}
-        options={SCALE_OPTIONS}
-        value={SCALE_OPTIONS.find((o) => o.value == selectedScale)}
-        onUpdate={(value) => (selectedScale = (value as IOption).value as number)}
-      />
+      {#if !isHistoryMode}
+        <!-- Развертка по горизонтали -->
+        <Select
+          label={{ name: "Refresh Rate", class: "" }}
+          options={REFRESH_OPTIONS}
+          value={REFRESH_OPTIONS.find((o) => o.value == selectedRefreshRate)}
+          onUpdate={(value) => (selectedRefreshRate = (value as IOption).value as number)}
+        />
+      {/if}
 
       <!-- Переменные и их значение -->
       <div>
         <h5 class="px-4">Values</h5>
         <table class="w-full font-mono text-sm">
           <tbody>
-            {#each graphData as data, i (i)}
+            {#each graphData as data, i (data.id)}
               <tr>
                 <td><div class="mr-2 h-4 w-4 rounded-full" style="background-color: {data.color}"></div></td>
-                <td class="w-24 truncate text-left font-semibold">{(streamingData.data as IGraphDataObject[])?.[i]?.name}</td>
-                <td class="w-16 text-right">{currentValues[i].toFixed(2)}</td>
+                <td class="w-24 truncate text-left font-semibold">{data.name}</td>
+                <td class="w-16 text-right">{currentValues[i]?.toFixed(2)}</td>
               </tr>
             {/each}
           </tbody>

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

@@ -1,3 +1,5 @@
+import type { IOption } from "../types";
+export declare const REFRESH_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 } from "./Graph.svelte"
 
   const {
     component,
@@ -37,6 +38,15 @@
   />
 {/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)}
+  />
+{/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 +59,7 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render GraphIsTest()}
+      {@render GraphSettings()}
     </div>
   </div>
 {:else}
@@ -64,6 +75,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/Graph/README.md

@@ -2,17 +2,28 @@
 
 ## Описание
 
-График - это UI-компонент, который позволяет визуализировать данные в виде динамических графиков. Компонент поддерживает потоковую передачу данных, настройку частоты обновления, масштаба отображения и другие параметры через систему пропсов.
+График - это UI-компонент, который позволяет визуализировать данные в виде динамических графиков. Компонент поддерживает два режима работы:
+
+- **Живой (потоковый) режим** — точки добавляются по одной по мере поступления `streamingData`, X-ось показывает "N секунд назад" относительно текущего момента.
+- **Статический (исторический) режим** — компонент получает уже готовый массив точек через `historyData` (каждая со своим реальным `timestamp`) и рисует весь ряд разом, используя настоящие дату/время на оси X.
+
+Режим определяется автоматически: если проп `historyData` задан и непустой, компонент переходит в статический режим (`streamingData`/`refreshRate` в этом случае игнорируются).
+
+Отдельного пропа для масштаба вертикальной оси нет — в обоих режимах Y-ось масштабируется автоматически по фактическим данным (±10% отступ). В живом режиме диапазон плавно "подъезжает" к новому min/max буфера (сглаживание), а не пересчитывается резко на каждый семпл, чтобы сетка не дёргалась.
 
 ## Пропсы
 
-| Название      | Тип                                                             | По умолчанию                        | Описание                                         |
-| ------------- | --------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------ |
-| id            | string                                                          | crypto.randomUUID()                 | Уникальный идентификатор компонента              |
-| wrapperClass  | string                                                          | ""                                  | Дополнительные CSS-классы для обертки компонента |
-| label         | { name?: string; class?: string }                               | { name: "", class: "" }             | Настройки заголовка компонента                   |
-| streamingData | { data: { name: string; value: number }[]; timestamp?: number } | { data: [], timestamp: Date.now() } | Потоковые данные для отображения на графике      |
-| isTest        | boolean                                                         | false                               | Режим тестирования (генерация случайных данных)  |
+| Название      | Тип                                                                | По умолчанию            | Описание                                                                                                                      |
+| ------------- | ------------------------------------------------------------------ | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| id            | string                                                             | crypto.randomUUID()     | Уникальный идентификатор компонента                                                                                           |
+| wrapperClass  | string                                                             | ""                      | Дополнительные CSS-классы для обертки компонента                                                                              |
+| label         | { name?: string; class?: string }                                  | { name: "", class: "" } | Настройки заголовка компонента                                                                                                |
+| streamingData | { data: { name: string; value: number }[] \| null }                | { data: [] }            | Потоковые данные для живого режима                                                                                            |
+| isTest        | boolean                                                            | false                   | Режим тестирования (генерация случайных данных); также форсирует `refreshRate` = 50мс                                         |
+| refreshRate   | number                                                             | 0                       | Интервал отрисовки точки в живом режиме, мс. `0` = **AUTO** — точка рисуется, когда значения реально изменились (без таймера) |
+| historyData   | { name: string; points: { value: number; timestamp: number }[] }[] | []                      | Готовый исторический ряд — если задан (непустой), включает статический режим (см. ниже)                                       |
+
+`refreshRate` относится только к живому режиму и сохраняется вместе с компонентом при сборке интерфейса в конструкторе (редактируется через `GraphProps.svelte`, см. ниже) — это стартовое значение при монтировании; остаётся переключаемым "на лету" прямо на самом графике через встроенный `Select`. В статическом режиме (`historyData`) этот селект скрыт, так как не имеет эффекта.
 
 ### Вложенные типы
 
@@ -25,10 +36,20 @@
 
 #### StreamingData
 
-| Название  | Тип                               | По умолчанию | Описание                                     |
-| --------- | --------------------------------- | ------------ | -------------------------------------------- |
-| data      | { name: string; value: number }[] | []           | Массив данных для отображения                |
-| timestamp | number                            | Date.now()   | Временная метка последнего обновления данных |
+| Название | Тип                                       | По умолчанию | Описание                      |
+| -------- | ----------------------------------------- | ------------ | ----------------------------- |
+| data     | { name: string; value: number }[] \| null | []           | Массив данных для отображения |
+
+Режим AUTO (`refreshRate: 0`) определяет появление новых данных сравнением самих значений с предыдущим пакетом, а не по временной метке.
+
+#### HistoryData
+
+| Название | Тип                  | По умолчанию | Описание                                                     |
+| -------- | -------------------- | ------------ | ------------------------------------------------------------ |
+| name     | string               | -            | Имя серии (отображается в подписи и в таблице значений)      |
+| points   | IGraphHistoryPoint[] | -            | Точки серии, каждая — `{ value: number; timestamp: number }` |
+
+`timestamp` — Unix-эпоха в миллисекундах (как `Date.now()`). Точки сортируются компонентом по `timestamp` при построении графика — исходный порядок в массиве не важен.
 
 ## События
 
@@ -64,10 +85,10 @@
       { name: "Humidity", value: 60 },
       { name: "Pressure", value: 1013 },
     ],
-    timestamp: Date.now(),
   })
 
-  // Обновление данных в реальном времени
+  // Обновление данных в реальном времени — при refreshRate: 0 (AUTO) новая точка
+  // рисуется на каждое изменение значений, без привязки к частоте setInterval здесь
   setInterval(() => {
     data = {
       data: [
@@ -75,22 +96,51 @@
         { name: "Humidity", value: Math.random() * 100 },
         { name: "Pressure", value: 1000 + Math.random() * 50 },
       ],
-      timestamp: Date.now(),
     }
   }, 1000)
 </script>
 
-<UI.Graph label={{ name: "График с потоковыми данными" }} {streamingData} />
+<UI.Graph label={{ name: "График с потоковыми данными" }} streamingData={data} refreshRate={0} />
 ```
 
+### Статический режим (historyData)
+
+```svelte
+<script>
+  import * as UI from "poe-svelte-ui-lib"
+
+  const now = Date.now()
+  const hourMs = 60 * 60 * 1000
+
+  // Готовый исторический ряд, например потребление электроэнергии за сутки с шагом в час
+  const historyExample = [
+    {
+      name: "P, кВт·ч",
+      points: Array.from({ length: 24 }, (_, i) => ({
+        timestamp: now - (23 - i) * hourMs,
+        value: 30 + Math.round(Math.sin(i / 3) * 20),
+      })),
+    },
+  ]
+</script>
+
+<UI.Graph label={{ name: "Потребление за сутки" }} historyData={historyExample} />
+```
+
+При наведении курсора на график появляется всплывающая подсказка с точным временем и значениями всех серий в ближайшей к курсору временной точке.
+
 ## Внутренняя архитектура
 
 ### Реактивность
 
-- Переменная `graphData` хранит точки графиков для отображения
-- Переменная `currentValues` хранит текущие значения переменных
-- Переменные `selectedRefreshRate` и `selectedScale` управляют частотой обновления и масштабом
-- Объекты `REFRESH_OPTIONS` и `SCALE_OPTIONS` определяют доступные настройки
+- Переменная `graphData` хранит точки графиков для отображения (в обоих режимах)
+- Переменная `currentValues` хранит текущие значения переменных — в живом режиме это последний полученный пакет, в статическом — последняя точка каждой серии из `historyData`
+- Переменная `previousValues` хранит значения предыдущего пакета — используется в режиме AUTO, чтобы отличить "пришли новые данные" от повторного опроса
+- Переменная `isHistoryMode` — `$derived` от наличия непустого `historyData`; определяет режим работы компонента целиком (без отдельного булевого пропа)
+- Переменная `selectedRefreshRate` — `$derived` от пропа `refreshRate` (и `isTest`); присвоение через встроенный `Select` временно переопределяет значение, пока не изменится сам проп; в статическом режиме `Select` скрыт
+- Переменная `liveYRange` хранит текущий (сглаженный) диапазон Y-оси живого режима; обновляется функцией `updateLiveYRange()`, вызываемой один раз за тик (после добавления новой точки в интервале), а не за кадр — целевой диапазон берётся из фактических min/max буфера (±10% отступ, `computeAutoYRange()`) и приближается к нему экспоненциальным сглаживанием (коэффициент 0.15), чтобы сетка не дёргалась на каждый семпл. В статическом режиме диапазон считается разово по всему массиву той же `computeAutoYRange()`
+- Объект `REFRESH_OPTIONS` экспортируется из `<script module>` компонента — переиспользуется в `GraphProps.svelte`, чтобы не дублировать список вариантов
+- Переменная `tooltip` хранит состояние всплывающей подсказки (позиция, время, значения серий); обновляется по `onmousemove`/`onmouseleave` канваса, поиск ближайшей точки — бинарным поиском по отсортированному массиву точек серии
 
 ### Сторы и зависимости
 
@@ -124,7 +174,7 @@
 
 ### Особенности конструктора
 
-- Предоставляет визуальные элементы управления для всех доступных свойств
+- Предоставляет визуальные элементы управления для всех доступных свойств, включая `refreshRate` (`constructor.props.refreshrate`) через `Select` с теми же вариантами, что и на самом графике (`REFRESH_OPTIONS` из `Graph.svelte`)
 - Поддерживает настройку переменной для отображения
 - Включает переключатель для режима тестирования
 - Имеет различные наборы полей в зависимости от режима (`forConstructor`)
@@ -142,7 +192,8 @@
 
 - Компонент ограничен максимальным количеством отображаемых графиков (6)
 - При отсутствии данных график остается пустым
-- Частота обновления влияет на производительность при большом объеме данных
+- Частота обновления влияет на производительность при большом объеме данных (актуально только для живого режима)
+- В статическом режиме (`historyData`) данные рисуются один раз при получении массива — последующие изменения `historyData` (например, замена на новый массив) перестраивают график заново, инкрементального добавления точек нет
 
 ### Производительность
 

package/dist/locales/translations.js

@@ -140,6 +140,7 @@ const translations = {
         "constructor.props.disabled": "Отключить",
         "constructor.props.readonly": "Только чтение",
         "constructor.props.istest": "Тестовые данные",
+        "constructor.props.refreshrate": "Скорость обновления",
         "constructor.props.variable": "Имя переменной",
         "constructor.props.widthMode": "Ширина кнопок",
         "constructor.props.graphdata.title": "Начальные данные ",
@@ -303,6 +304,7 @@ 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",
     },
     zh: {},
 };

package/dist/types.d.ts

@@ -133,7 +133,14 @@ export interface IFileAttachProps {
 export interface IGraphDataObject {
     name: string;
     value: number;
-    timestamp?: Date;
+}
+export interface IGraphHistoryPoint {
+    value: number;
+    timestamp: number;
+}
+export interface IGraphHistorySeries {
+    name: string;
+    points: IGraphHistoryPoint[];
 }
 export interface IGraphProps {
     id?: string;
@@ -144,9 +151,10 @@ export interface IGraphProps {
     };
     streamingData?: {
         data: IGraphDataObject[] | null;
-        timestamp?: number;
     };
     isTest?: boolean;
+    refreshRate?: number;
+    historyData?: IGraphHistorySeries[];
 }
 export interface IInputProps {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.10.5",
+  "version": "1.10.7",
   "license": "MIT",
   "type": "module",
   "scripts": {