poe-svelte-ui-lib 1.16.5 → 1.17.2

package/dist/CommonSnippets.svelte

@@ -65,7 +65,8 @@
     component.type === "ProgressBar" ||
     component.type === "TextField" ||
     component.type === "Graph" ||
-    component.type === "Map"
+    component.type === "Map" ||
+    component.type === "PeriodChart"
       ? $optionsStore.ACCESS_OPTION.filter((o) => o.value !== "viewOnly")
       : $optionsStore.ACCESS_OPTION}
     value={$optionsStore.ACCESS_OPTION.find((o) => o.value === component.access)}

package/dist/PeriodChart/PeriodChart.svelte

@@ -0,0 +1,107 @@
+<!-- $lib/ElementsUI/PeriodChart.svelte -->
+<script module lang="ts">
+  import type { IPeriodChartLevel } from "../types"
+
+  /* Демо-данные по умолчанию — компонент выглядит осмысленно уже без пропсов, как у Tabs/Switch */
+  const randomLevelData = (n: number) => Array.from({ length: n }, () => Math.round(Math.random() * 100))
+
+  export const DEFAULT_LEVELS: IPeriodChartLevel[] = [
+    { name: "Год", data: randomLevelData(12) },
+    { name: "Месяц", data: randomLevelData(31) },
+    { name: "Сутки", data: randomLevelData(24) },
+    { name: "Час", data: randomLevelData(6) },
+  ]
+</script>
+
+<script lang="ts">
+  import { twMerge } from "tailwind-merge"
+  import type { IPeriodChartProps } from "../types"
+
+  let {
+    id = crypto.randomUUID(),
+    wrapperClass = "bg-blue",
+    label = { name: "", class: "" },
+    levels = DEFAULT_LEVELS,
+    unit = "",
+    onLevelChange = () => {},
+  }: IPeriodChartProps = $props()
+
+  let currentLevelIndex = $state(0)
+  $effect(() => {
+    if (currentLevelIndex >= levels.length) currentLevelIndex = 0
+  })
+
+  const currentLevel = $derived<IPeriodChartLevel | undefined>(levels[currentLevelIndex])
+  const values = $derived(currentLevel?.data ?? [])
+  const maxValue = $derived(values.length ? Math.max(...values, 0) * 1.1 || 1 : 1)
+
+  const selectLevel = (index: number) => {
+    if (index === currentLevelIndex) return
+    currentLevelIndex = index
+    onLevelChange(index, levels[index])
+  }
+
+  const barLabel = (i: number) => currentLevel?.labels?.[i] ?? String(i + 1)
+  const barHeightPercent = (value: number) => Math.max((value / maxValue) * 100, value > 0 ? 2 : 0)
+
+  /* Высота зоны столбиков — h-40 (10rem = 160px по умолчанию), должна совпадать с классом ниже.
+   * Если бар ниже этого порога, число физически не влезает внутрь (обрежется overflow-hidden) —
+   * рисуем его НАД столбиком вместо "внутри". */
+  const BAR_ZONE_PX = 160
+  const MIN_LABEL_PX = 18
+  const isSmallBar = (value: number) => (barHeightPercent(value) / 100) * BAR_ZONE_PX < MIN_LABEL_PX
+</script>
+
+<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge("relative flex w-full flex-col items-center justify-center gap-2", wrapperClass)}>
+  {#if label.name}
+    <h5 class={twMerge("w-full px-4 text-center", label.class)}>{label.name}</h5>
+  {/if}
+
+  <!-- Переключатель уровней детализации -->
+  <div class="flex w-full items-center justify-center gap-1 rounded-xl bg-(--bg-color) p-1">
+    {#each levels as level, index (level.name)}
+      <button
+        type="button"
+        class={twMerge(
+          "flex-1 cursor-pointer rounded-lg px-3 py-1.5 text-sm font-semibold transition-colors duration-150",
+          index === currentLevelIndex ? "bg-(--back-color) shadow-sm" : "text-(--shadow-color)/75 hover:text-(--shadow-color)",
+        )}
+        onclick={() => selectLevel(index)}
+      >
+        {level.name}
+      </button>
+    {/each}
+  </div>
+
+  <!-- Столбчатый график текущего уровня -->
+  <div class="relative flex w-full flex-col rounded-xl border border-(--border-color) bg-(--back-color) p-3">
+    {#if values.length === 0}
+      <div class="flex h-48 w-full items-center justify-center text-(--shadow-color)/60">Нет данных</div>
+    {:else}
+      <div class="flex h-40 w-full items-end gap-1">
+        {#each values as value, i}
+          <div class="relative flex h-full flex-1 flex-col items-center justify-end" role="img" aria-label={`${barLabel(i)}: ${value}${unit}`}>
+            {#if isSmallBar(value)}
+              <span class="mb-0.5 text-xs font-semibold text-(--shadow-color)">{Math.round(value)}</span>
+            {/if}
+            <div
+              class="flex w-full items-center justify-center overflow-hidden rounded-t-sm bg-(--bg-color) transition-[height] duration-150"
+              style="height: {barHeightPercent(value)}%"
+            >
+              {#if !isSmallBar(value)}
+                <span class="px-0.5 text-xs font-semibold text-white">{Math.round(value)}</span>
+              {/if}
+            </div>
+          </div>
+        {/each}
+      </div>
+
+      <!-- Подписи по оси X — всегда видны, без наведения -->
+      <div class="mt-1 flex w-full gap-1">
+        {#each values as _, i}
+          <div class="flex-1 truncate text-center text-[10px] font-bold text-(--shadow-color)/75">{barLabel(i)}</div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/PeriodChart/PeriodChart.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { IPeriodChartLevel } from "../types";
+export declare const DEFAULT_LEVELS: IPeriodChartLevel[];
+import type { IPeriodChartProps } from "../types";
+declare const PeriodChart: import("svelte").Component<IPeriodChartProps, {}, "">;
+type PeriodChart = ReturnType<typeof PeriodChart>;
+export default PeriodChart;

package/dist/PeriodChart/PeriodChartProps.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import { getContext } from "svelte"
+  import { T } from "../locales/i18n"
+  import { updateProperty, type IOption, type IPeriodChartLevel, type IPeriodChartProps, type IUIComponentHandler, type UIComponent } from "../types"
+  import * as UI from ".."
+  import { optionsStore } from "../options"
+  import ButtonAdd from "../libIcons/ButtonAdd.svelte"
+  import ButtonDelete from "../libIcons/ButtonDelete.svelte"
+  import CommonSnippets from "../CommonSnippets.svelte"
+
+  const {
+    component,
+    onPropertyChange,
+    forConstructor = true,
+  } = $props<{
+    component: UIComponent & { properties: Partial<IPeriodChartProps> }
+    onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
+    forConstructor?: boolean
+  }>()
+
+  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
+  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
+
+  let itemsContainer: HTMLDivElement | null = $state(null)
+
+  const initialColor = $derived(
+    $optionsStore.COLOR_OPTIONS.find((c) =>
+      (c.value as string).includes(component.properties.wrapperClass?.split(" ").find((cls: string) => cls.startsWith("bg-"))),
+    ),
+  )
+
+  /* levels[].data/labels хранятся как number[]/string[], редактируются одной строкой через запятую (fallback для литеральных демо-данных) */
+  const parseNumbers = (text: string): number[] =>
+    text
+      .split(",")
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0)
+      .map(Number)
+      .filter((n) => !Number.isNaN(n))
+  const formatNumbers = (arr: number[] | undefined): string => (arr || []).join(", ")
+  const parseStrings = (text: string): string[] =>
+    text
+      .split(",")
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0)
+  const formatStrings = (arr: string[] | undefined): string => (arr || []).join(", ")
+
+  /* eventHandler.Variables — список всех PWR.*-переменных со всех уровней, чтобы рантайм подписался на них разом */
+  const updateLevels = (levels: IPeriodChartLevel[]) => {
+    updateProperty("levels", levels, component, onPropertyChange)
+    onPropertyChange({ eventHandler: { Variables: levels.map((l) => l.variable).filter((v): v is string => !!v) } })
+  }
+</script>
+
+{#snippet PeriodChartUnit()}
+  <UI.Input
+    label={{ name: $T("constructor.props.units") }}
+    value={component.properties.unit}
+    onUpdate={(value) => updateProperty("unit", value, component, onPropertyChange)}
+  />
+{/snippet}
+
+{#snippet PeriodChartLevels()}
+  <hr class="border-gray-400" />
+
+  <div class="space-y-4" bind:this={itemsContainer}>
+    <div class="m-0 flex items-center justify-center gap-2">
+      <h4>{$T("constructor.props.periodchart.title")}</h4>
+      <UI.Button
+        wrapperClass="w-8"
+        content={{ icon: ButtonAdd }}
+        onClick={() => {
+          const newLevel: IPeriodChartLevel = { name: `Level ${(component.properties?.levels?.length ?? 0) + 1}`, data: [] }
+          const levels = [...(component.properties?.levels || []), newLevel]
+          updateLevels(levels)
+        }}
+      />
+    </div>
+
+    {#each component.properties.levels || [] as level, index}
+      <div id="item-{index}" class="m-0 flex items-end justify-around gap-2 border-gray-400">
+        <UI.Dragging
+          wrapperClass="w-9"
+          container={itemsContainer}
+          array={component.properties.levels}
+          elementIndex={index}
+          onUpdate={(updatedArray) => updateLevels(updatedArray)}
+        />
+        <UI.Input
+          label={{ name: $T("constructor.props.optionname") }}
+          wrapperClass="w-1/5"
+          value={level.name}
+          onUpdate={(value) => {
+            const levels = [...(component.properties?.levels || [])]
+            levels[index] = { ...levels[index], name: value as string }
+            updateLevels(levels)
+          }}
+        />
+        <UI.Select
+          label={{ name: $T("constructor.props.variable") }}
+          wrapperClass="w-1/5"
+          type="input"
+          options={VARIABLE_OPTIONS}
+          value={VARIABLE_OPTIONS.find((opt) => opt.value === level.variable)}
+          onUpdate={(value) => {
+            const levels = [...(component.properties?.levels || [])]
+            levels[index] = { ...levels[index], variable: (value as IOption).value as string }
+            updateLevels(levels)
+          }}
+        />
+        <UI.Input
+          label={{ name: $T("constructor.props.periodchart.data") }}
+          wrapperClass="w-1/5"
+          value={formatNumbers(level.data)}
+          onUpdate={(value) => {
+            const levels = [...(component.properties?.levels || [])]
+            levels[index] = { ...levels[index], data: parseNumbers(value as string) }
+            updateLevels(levels)
+          }}
+        />
+        <UI.Input
+          label={{ name: $T("constructor.props.periodchart.labels") }}
+          wrapperClass="w-1/5"
+          value={formatStrings(level.labels)}
+          onUpdate={(value) => {
+            const levels = [...(component.properties?.levels || [])]
+            levels[index] = { ...levels[index], labels: parseStrings(value as string) }
+            updateLevels(levels)
+          }}
+        />
+
+        {#if (component.properties.levels?.length ?? 0) > 1}
+          <UI.Button
+            wrapperClass="w-8"
+            content={{ icon: ButtonDelete }}
+            onClick={() => {
+              const levels = [...(component.properties?.levels || [])]
+              levels.splice(index, 1)
+              updateLevels(levels)
+            }}
+          />
+        {/if}
+      </div>
+    {/each}
+    <div id="item-{component.properties.levels?.length ?? 0}" class="min-h-4"></div>
+  </div>
+{/snippet}
+
+{#if forConstructor}
+  <div class="relative mb-4 flex flex-row items-start justify-center">
+    <div class="flex w-1/2 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Colors" initialValue={{ color: initialColor, uselessColors: ["bg-max"] }} {component} {onPropertyChange} />
+      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+    </div>
+    <div class="flex w-1/2 flex-col px-2">
+      {@render PeriodChartUnit()}
+    </div>
+  </div>
+  {@render PeriodChartLevels()}
+{:else}
+  <div class="relative mb-4 flex flex-row items-start justify-center">
+    <div class="flex w-1/2 flex-col px-2">
+      <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Label" {component} {onPropertyChange} />
+    </div>
+    <div class="flex w-1/2 flex-col px-2">
+      <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Colors" initialValue={{ color: initialColor, uselessColors: ["bg-max"] }} {component} {onPropertyChange} />
+      {@render PeriodChartUnit()}
+    </div>
+  </div>
+  {@render PeriodChartLevels()}
+{/if}

package/dist/PeriodChart/PeriodChartProps.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type IPeriodChartProps, type IUIComponentHandler, type UIComponent } from "../types";
+type $$ComponentProps = {
+    component: UIComponent & {
+        properties: Partial<IPeriodChartProps>;
+    };
+    onPropertyChange: (updates: Partial<{
+        properties?: string | object;
+        name?: string;
+        access?: string;
+        eventHandler?: IUIComponentHandler;
+    }>) => void;
+    forConstructor?: boolean;
+};
+declare const PeriodChartProps: import("svelte").Component<$$ComponentProps, {}, "">;
+type PeriodChartProps = ReturnType<typeof PeriodChartProps>;
+export default PeriodChartProps;

package/dist/PeriodChart/README.md

@@ -0,0 +1,163 @@
+# PeriodChart Component
+
+## Описание
+
+Столбчатый график с переключателем уровней детализации (например Год / Месяц / Сутки / Час) —
+универсальный компонент общего назначения, не привязан к конкретному домену данных. Принимает
+набор уровней (`levels`), каждый со своим массивом значений и подписей столбиков; переключение
+между уровнями меняет только то, какой массив рисуется — сам компонент ничего не запрашивает,
+данные всех уровней передаются через пропсы целиком (как `historyData`/`streamingData` у `Graph`).
+
+## Пропсы
+
+| Название         | Тип                                                  | По умолчанию           | Описание                                                                  |
+| ----------------- | ----------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------- |
+| `id`              | `string`                                               | `crypto.randomUUID()`   | Уникальный идентификатор компонента                                        |
+| `wrapperClass`    | `string`                                               | `"bg-blue"`              | CSS-классы обёртки — через `bg-*` задаёт цвет переключателя и столбиков   |
+| `label`           | `{ name?: string; class?: string }`                    | `{ name: "", class: "" }` | Заголовок над графиком                                                    |
+| `levels`          | `IPeriodChartLevel[]`                                  | 4 демо-уровня со случайными данными | Уровни детализации, порядок = порядок вкладок переключателя; открывается всегда на первом (индекс 0) |
+| `levels[].name`   | `string`                                               | `-`                      | Подпись вкладки, напр. `"Час"`                                            |
+| `levels[].variable` | `string`                                             | `undefined`               | Имя переменной устройства, откуда берутся `data` этого уровня, напр. `"PWR.EHour"` — используется конструктором для подписки, сам компонент по нему ничего не запрашивает |
+| `levels[].data`   | `number[]`                                             | `-`                      | Значения — длина массива = число столбиков, ничем не ограничена          |
+| `levels[].labels` | `string[]`                                             | `undefined`               | Подписи столбиков по X; если не заданы — используется индекс+1           |
+| `unit`            | `string`                                               | `""`                     | Единицы измерения, добавляются к значению в `aria-label`, напр. `"Вт·ч"`  |
+| `onLevelChange`   | `(index: number, level: IPeriodChartLevel) => void`    | `() => {}`               | Вызывается при переключении вкладки — только уведомление, без фетча внутри |
+
+## События
+
+Компонент не генерирует DOM-события — используйте колбэк `onLevelChange` для реакции на смену
+уровня (например чтобы догрузить свежие данные для только что выбранного уровня).
+
+## Примеры
+
+### Базовое использование (демо-данные)
+
+```svelte
+<script>
+  import * as UI from "poe-svelte-ui-lib"
+</script>
+
+<UI.PeriodChart label={{ name: "Расход энергии" }} />
+```
+
+### Реальные данные с устройства (например BL0910: PWR.EYear/EMonth/EDay/EHour)
+
+`variable` в каждом уровне — это имя Cfg-ключа устройства (`PWR.EHour` и т.п.), по которому
+конструктор облака подписывается через `eventHandler.Variables` и подставляет актуальный `data`;
+сам компонент значение `variable` не читает, только рисует уже готовый `data`.
+
+```svelte
+<script>
+  import * as UI from "poe-svelte-ui-lib"
+
+  let levels = [
+    { name: "Год", variable: "PWR.EYear", data: deviceData.EYear, labels: ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"] },
+    { name: "Месяц", variable: "PWR.EMonth", data: deviceData.EMonth },
+    { name: "Сутки", variable: "PWR.EDay", data: deviceData.EDay },
+    { name: "Час", variable: "PWR.EHour", data: deviceData.EHour, labels: ["0-10", "10-20", "20-30", "30-40", "40-50", "50-60"] },
+  ]
+</script>
+
+<UI.PeriodChart {levels} unit=" Вт·ч" onLevelChange={(index, level) => console.log("Переключились на", level.name)} />
+```
+
+## Внутренняя архитектура
+
+### Реактивность
+
+- `currentLevelIndex` (`$state`) — индекс активной вкладки, всегда инициализируется `0` (первый уровень)
+- `currentLevel`/`values` (`$derived`) — текущий уровень и его массив значений
+- `maxValue` (`$derived`) — максимум текущего массива с отступом ×1.1 для автомасштаба высоты столбиков
+
+### Сторы и зависимости
+
+- Используется `twMerge` для объединения Tailwind CSS классов
+
+### Директивы
+
+- `#each` для отображения вкладок переключателя, столбиков графика и подписей по X
+- `#if` для пустого состояния (уровень без данных)
+
+### Слоты
+
+- Компонент не использует внешних слотов
+
+## Заметки
+
+### Адаптивность
+
+- Столбики растягиваются на всю ширину контейнера (`flex-1` на каждый), высота — в процентах от
+  зоны столбиков фиксированной высоты (`h-40`); значение (округлено до целого, `Math.round`)
+  выводится прямо внутри столбика, по центру — видно всегда, без наведения. Для маленьких значений
+  столбик слишком низкий, чтобы число влезло внутрь (`overflow-hidden` его обрежет) — если высота
+  столбика меньше `MIN_LABEL_PX` (18px из `BAR_ZONE_PX`=160px = `h-40`), число рисуется НАД
+  столбиком вместо "внутри". Подписи (`labels[i]`/индекс+1) выводятся отдельной строкой под этой
+  зоной, тоже без наведения
+- Никакого тултипа — компонент не реагирует на hover вообще
+- Полностью на CSS-переменных темы (`--back-color`, `--border-color`, `--shadow-color`,
+  `--bg-color` через `wrapperClass`) — тёмная/светлая тема не требует отдельной настройки
+
+### Ограничения
+
+- Компонент презентационный — не хранит историю, не опрашивает устройство сам; при смене
+  `levels` извне (например после ответа на `onLevelChange`) график перерисовывается автоматически
+- Значение внутри столбика округляется до целого только для отображения (`Math.round`) — исходные
+  дробные данные в `levels[].data` не изменяются; `unit` в самом столбике не показывается (мало
+  места), только в `aria-label` для доступности
+
+### Производительность
+
+- Никакого `<canvas>` — чистый HTML/CSS, подходит для умеренного числа столбиков (проверено на
+  вплоть до 31); для сотен/тысяч точек стоит использовать `Graph`
+
+## Конструктор свойств (PeriodChartProps.svelte)
+
+### Описание
+
+Компонент `PeriodChartProps.svelte` предоставляет визуальный интерфейс для редактирования свойств
+`PeriodChart`. Поддерживает два режима отображения: для конструктора и для редактирования —
+идентично остальным компонентам библиотеки (`ProgressBarProps`, `TabsProps`).
+
+### Пропсы конструктора
+
+| Название           | Тип                                                                                                                                 | По умолчанию | Описание                                                |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ------------ | --------------------------------------------------------- |
+| `component`        | `UIComponent & { properties: Partial<IPeriodChartProps> }`                                                                           | `-`          | Объект компонента с его свойствами                        |
+| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-`          | Коллбэк для обновления свойств компонента                 |
+| `forConstructor`   | `boolean`                                                                                                                             | `true`       | Режим отображения (для конструктора или редактирования)   |
+
+### Особенности конструктора
+
+- Общие поля через `CommonSnippets`: `Access` (без `viewOnly` — компонент чисто отображающий, как
+  `Graph`/`Tabs`/`ProgressBar`), `Colors` (пишет в `wrapperClass`, тот же цвет уходит на
+  переключатель и столбики), `Label`; в режиме редактирования дополнительно `Identificator`,
+  `WrapperClass`
+- `unit` — отдельное текстовое поле ввода
+- Редактор уровней (`levels[]`) — тот же паттерн повторяющегося списка, что у `TabsSettings`/
+  `ProgressBarOptions`: перетаскивание (`UI.Dragging`) для порядка вкладок, добавление/удаление
+  через `ButtonAdd`/`ButtonDelete`, на каждый уровень — поля `name`, `variable`, `data` и
+  `labels`. `variable` — тот же `Select` по списку переменных устройства (`DeviceVariables` из
+  контекста), что и у `Graph`/`CommonSnippets.Variable`, только по одному на каждый уровень; при
+  любом изменении списка уровней редактор пересобирает `eventHandler.Variables` как объединение
+  всех непустых `variable` со всех уровней — так рантайм подписывается сразу на все нужные ключи.
+  `data`/`labels` остаются полями для литеральных демо-данных — массивы чисел/строк вводятся одной
+  строкой через запятую (`"10, 20, 30"`) и парсятся на лету
+
+### Использование
+
+```svelte
+<script>
+  import * as UI from "poe-svelte-ui-lib"
+
+  let component = $state({
+    id: crypto.randomUUID(),
+    type: "PeriodChart",
+    access: "full",
+    properties: { levels: [{ name: "Час", data: [1, 2, 3, 4, 5, 6] }] },
+    position: { row: 0, col: 0, width: 0, height: 0 },
+    parentId: "",
+  })
+</script>
+
+<UI.PeriodChartProps {component} onPropertyChange={(updates) => (component = { ...component, ...updates })} forConstructor={true} />
+```

package/dist/Slider/Slider.svelte

@@ -54,10 +54,10 @@
 
   $effect(() => {
     if (Array.isArray(value)) {
-      lowerValue = value[0]
-      upperValue = value[1]
+      lowerValue = roundToClean(value[0])
+      upperValue = roundToClean(value[1])
     } else if (typeof value === "number") {
-      singleValue = value
+      singleValue = roundToClean(value)
     }
   })
 

package/dist/VideoViewer/VideoViewer.svelte

@@ -128,7 +128,7 @@
       remoteImgSrc = null
       return
     }
-    const blob = frame instanceof Blob ? frame : new Blob([frame], { type: "image/jpeg" })
+    const blob = frame instanceof Blob ? frame : new Blob([new Uint8Array(frame)], { type: "image/jpeg" })
     const url = URL.createObjectURL(blob)
     remoteImgSrc = url
     return () => URL.revokeObjectURL(url)

package/dist/index.d.ts

@@ -19,6 +19,8 @@ export { default as JoystickProps } from "./Joystick/JoystickProps.svelte";
 export { default as Modal } from "./Modal.svelte";
 export { default as Map } from "./Map/Map.svelte";
 export { default as MapProps } from "./Map/MapProps.svelte";
+export { default as PeriodChart } from "./PeriodChart/PeriodChart.svelte";
+export { default as PeriodChartProps } from "./PeriodChart/PeriodChartProps.svelte";
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
 export { default as ProgressBarProps } from "./ProgressBar/ProgressBarProps.svelte";
 export { default as Select } from "./Select/Select.svelte";
@@ -40,4 +42,4 @@ export { default as WidgetProps } from "./Widget/WidgetProps.svelte";
 export * from "./locales/i18n";
 export * from "./locales/translations";
 export * from "./ModalStackStore";
-export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, } from "./types";
+export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type IOption, type ISwitchProps, type IColorPickerProps, type IDividerProps, type ISliderProps, type ITextFieldProps, type IMapProps, type IProgressBarProps, type IWidgetProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, type ITabsProps, type IJoystickProps, type IFileAttachProps, type IDeviceGNSS, type ICarouselProps, type IReceivingDataObject, type IVideoViewerProps, type IPeriodChartProps, type IPeriodChartLevel, } from "./types";

package/dist/index.js

@@ -20,6 +20,8 @@ export { default as JoystickProps } from "./Joystick/JoystickProps.svelte";
 export { default as Modal } from "./Modal.svelte";
 export { default as Map } from "./Map/Map.svelte";
 export { default as MapProps } from "./Map/MapProps.svelte";
+export { default as PeriodChart } from "./PeriodChart/PeriodChart.svelte";
+export { default as PeriodChartProps } from "./PeriodChart/PeriodChartProps.svelte";
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
 export { default as ProgressBarProps } from "./ProgressBar/ProgressBarProps.svelte";
 export { default as Select } from "./Select/Select.svelte";

package/dist/locales/FlagEn.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"
   ><clipPath id="svgIDa"><circle cx="256" cy="256" r="256" /></clipPath><g clip-path="url(#svgIDa)"
     ><path

package/dist/locales/FlagEn.svelte.d.ts

@@ -1,18 +1,5 @@
-export default FlagEn;
-type FlagEn = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const FlagEn: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const FlagEn: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlagEn = InstanceType<typeof FlagEn>;
+export default FlagEn;

package/dist/locales/FlagRu.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"
   ><mask id="circleFlagsRu0"><circle cx="256" cy="256" r="256" fill="#fff" /></mask><g mask="url(#circleFlagsRu0)"
     ><path fill="#0052b4" d="M512 170v172l-256 32L0 342V170l256-32z" /><path fill="#eee" d="M512 0v170H0V0Z" /><path

package/dist/locales/FlagRu.svelte.d.ts

@@ -1,18 +1,5 @@
-export default FlagRu;
-type FlagRu = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const FlagRu: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const FlagRu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlagRu = InstanceType<typeof FlagRu>;
+export default FlagRu;

package/dist/locales/FlagZh.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"
   ><mask id="circleFlagsCn0"><circle cx="256" cy="256" r="256" fill="#fff" /></mask><g mask="url(#circleFlagsCn0)"
     ><path fill="#d80027" d="M0 0h512v512H0z" /><path

package/dist/locales/FlagZh.svelte.d.ts

@@ -1,18 +1,5 @@
-export default FlagZh;
-type FlagZh = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const FlagZh: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const FlagZh: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlagZh = InstanceType<typeof FlagZh>;
+export default FlagZh;

package/dist/locales/translations.js

@@ -183,6 +183,9 @@ const translations = {
     "constructor.props.progressbar.title": ["Полосы прогресса", "Progress bars", "进度条"],
     "constructor.props.bits.title": ["Биты", "Bits", "位"],
     "constructor.props.tabs.title": ["Вкладки меню", "Menu tabs", "菜单标签"],
+    "constructor.props.periodchart.title": ["Уровни детализации", "Detail levels", "详细级别"],
+    "constructor.props.periodchart.data": ["Данные (через запятую)", "Data (comma-separated)", "数据（逗号分隔）"],
+    "constructor.props.periodchart.labels": ["Подписи столбиков (через запятую)", "Bar labels (comma-separated)", "柱标签（逗号分隔）"],
     "constructor.props.valuetype": ["Тип значения", "Value type", "值类型"],
     "constructor.props.action": ["Действие при переключении", "Action on switch", "切换时的操作"],
     "constructor.props.caption.left": ["Надпись слева", "Left caption", "左侧标题"],

package/dist/types.d.ts

@@ -16,10 +16,10 @@ export declare const updateComponent: (component: UIComponent, updates: Partial<
 }>) => {
     access: "full" | "viewOnly" | "hidden" | undefined;
     name: string | undefined;
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps<unknown> | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
     eventHandler: IUIComponentHandler | undefined;
     id: string;
-    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget";
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget";
     position: Required<Position>;
     parentId: string;
 };
@@ -27,8 +27,8 @@ export interface UIComponent {
     id: string;
     name?: string;
     access?: "full" | "viewOnly" | "hidden";
-    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget";
-    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
+    type: "Accordion" | "Button" | "ColorPicker" | "Divider" | "FileAttach" | "Graph" | "Input" | "Joystick" | "Map" | "PeriodChart" | "ProgressBar" | "Select" | "Slider" | "Switch" | "Table" | "Tabs" | "TextField" | "VideoViewer" | "Widget";
+    properties: IAccordionProps | IButtonProps | IColorPickerProps | IDividerProps | IFileAttachProps | IGraphProps | IInputProps | IJoystickProps | IMapProps | IPeriodChartProps | IProgressBarProps | ISelectProps | ISliderProps | ISwitchProps | ITableProps<object> | ITabsProps | ITextFieldProps | IWidgetProps;
     position: Required<Position>;
     parentId: string;
     eventHandler?: IUIComponentHandler;
@@ -164,6 +164,23 @@ export interface IGraphProps {
     refreshRate?: number;
     historyData?: IGraphHistorySeries[];
 }
+export interface IPeriodChartLevel {
+    name: string;
+    variable?: string;
+    data: number[];
+    labels?: string[];
+}
+export interface IPeriodChartProps {
+    id?: string;
+    wrapperClass?: string;
+    label?: {
+        name?: string;
+        class?: string;
+    };
+    levels?: IPeriodChartLevel[];
+    unit?: string;
+    onLevelChange?: (index: number, level: IPeriodChartLevel) => void;
+}
 export interface IInputProps {
     id?: string;
     type?: "text" | "password" | "number" | "text-area" | "bitMode";

package/package.json

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

package/dist/locales/i18n.d.ts

@@ -1,10 +0,0 @@
-import { type Readable } from "svelte/store";
-export declare const Language: import("svelte/store").Writable<string>;
-export declare function setLanguage(newLang: string): void;
-export declare const LOCALES: {
-    id: string;
-    name: string;
-    value: string;
-    component: import("svelte/legacy").LegacyComponentType;
-}[];
-export declare const T: Readable<(key: string) => string>;