poe-svelte-ui-lib 1.31.1 → 1.31.3

package/dist/Graph/Graph.svelte

@@ -301,26 +301,35 @@
     drawAllGraphs()
   }
 
+  /* Прозрачность линий сетки — общая с PeriodChart (border-(--faint-color)/40) */
+  const GRID_ALPHA = 0.4
+
   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"
-    ctx.fillStyle = "#777"
-    ctx.lineWidth = 0.5
+    /* Сетка в стиле PeriodChart: пунктир цветом --faint-color темы, подписи тем же цветом без прозрачности */
+    const gridColor = getComputedStyle(canvas).getPropertyValue("--faint-color").trim() || "#8b93a1"
+    ctx.strokeStyle = gridColor
+    ctx.fillStyle = gridColor
+    ctx.lineWidth = 1
+    ctx.setLineDash([3, 3])
     ctx.font = "10px monospace"
+
+    /* Сетка X */
     ctx.textAlign = "center"
 
     for (let i = 0; i <= 10; i++) {
       const t = minX + (i / 10) * timeSpan
       const x = getX(t)
+      ctx.globalAlpha = GRID_ALPHA
       ctx.beginPath()
       ctx.moveTo(x, padding.top)
       ctx.lineTo(x, height - padding.bottom)
       ctx.stroke()
+      ctx.globalAlpha = 1
       ctx.textBaseline = "top"
       ctx.fillText(formatAxisLabel(t, timeSpan), x, height - padding.bottom + 2)
     }
@@ -332,12 +341,15 @@
     for (let i = 0; i <= ySteps; i++) {
       const yVal = yMax - (i * (yMax - yMin)) / ySteps
       const y = getY(yVal)
+      ctx.globalAlpha = GRID_ALPHA
       ctx.beginPath()
       ctx.moveTo(padding.left, y)
       ctx.lineTo(width - padding.right, y)
       ctx.stroke()
+      ctx.globalAlpha = 1
       ctx.fillText(yVal.toFixed(1), padding.left - 5, y)
     }
+    ctx.setLineDash([])
 
     /* Отрисовка графиков */
     ctx.lineWidth = 2

package/dist/PeriodChart/PeriodChart.svelte

@@ -80,23 +80,25 @@
     <h5 class={twMerge("w-full text-[13px] font-semibold text-(--muted-color)", label.class)}>{label.name}</h5>
   {/if}
 
-  <!-- Сегментированный переключатель уровней -->
-  <div class="flex w-full items-center gap-0.5 rounded-[10px] bg-(--container-color) p-[3px]">
-    {#each levels as level, index (level.name)}
-      <button
-        type="button"
-        class={twMerge(
-          "flex-1 cursor-pointer rounded-[7px] px-3 py-1.5 text-[13px] transition-colors duration-150",
-          index === currentLevelIndex
-            ? "bg-(--back-color) font-semibold text-(--font-color) shadow-(--elevation-1)"
-            : "font-medium text-(--muted-color) hover:text-(--font-color)",
-        )}
-        onclick={() => selectLevel(index)}
-      >
-        {level.name}
-      </button>
-    {/each}
-  </div>
+  <!-- Сегментированный переключатель уровней: при одном уровне переключать нечего -->
+  {#if levels.length > 1}
+    <div class="flex w-full items-center gap-0.5 rounded-[10px] bg-(--container-color) p-[3px]">
+      {#each levels as level, index (level.name)}
+        <button
+          type="button"
+          class={twMerge(
+            "flex-1 cursor-pointer rounded-[7px] px-3 py-1.5 text-[13px] transition-colors duration-150",
+            index === currentLevelIndex
+              ? "bg-(--back-color) font-semibold text-(--font-color) shadow-(--elevation-1)"
+              : "font-medium text-(--muted-color) hover:text-(--font-color)",
+          )}
+          onclick={() => selectLevel(index)}
+        >
+          {level.name}
+        </button>
+      {/each}
+    </div>
+  {/if}
 
   <!-- Столбчатый график -->
   <div class="relative flex w-full flex-col gap-1.5 rounded-[12px] border border-(--hairline-color) bg-(--back-color) p-3.5">
@@ -117,9 +119,7 @@
           <div class="relative flex h-40 w-full items-end gap-1">
             {#each axis.ticks as tick}
               <div
-                class="pointer-events-none absolute inset-x-0 border-t {tick === 0
-                  ? 'border-(--hairline-color)'
-                  : 'border-dashed border-(--hairline-color)/60'}"
+                class="pointer-events-none absolute inset-x-0 border-t {tick === 0 ? 'border-(--faint-color)/60' : 'border-dashed border-(--faint-color)/40'}"
                 style="bottom: {(tick / axis.top) * 100}%"
               ></div>
             {/each}

package/dist/PeriodChart/README.md

@@ -13,9 +13,9 @@
 | Название            | Тип                                                 | По умолчанию                        | Описание                                                                                                                                                                  |
 | ------------------- | --------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `id`                | `string`                                            | `crypto.randomUUID()`               | Уникальный идентификатор компонента                                                                                                                                       |
-| `wrapperClass`      | `string`                                            | `""`                                 | CSS-классы обёртки — через `bg-*` задаёт цвет переключателя и столбиков (по умолчанию нейтрально, без декоративной заливки)                                              |
+| `wrapperClass`      | `string`                                            | `""`                                | CSS-классы обёртки — через `bg-*` задаёт цвет переключателя и столбиков (по умолчанию нейтрально, без декоративной заливки)                                               |
 | `label`             | `{ name?: string; class?: string }`                 | `{ name: "", class: "" }`           | Заголовок над графиком                                                                                                                                                    |
-| `levels`            | `IPeriodChartLevel[]`                               | 4 демо-уровня со случайными данными | Уровни детализации, порядок = порядок вкладок переключателя; открывается всегда на первом (индекс 0)                                                                      |
+| `levels`            | `IPeriodChartLevel[]`                               | 4 демо-уровня со случайными данными | Уровни детализации, порядок = порядок вкладок переключателя; открывается всегда на первом (индекс 0); при одном уровне переключатель не показывается                      |
 | `levels[].name`     | `string`                                            | `-`                                 | Подпись вкладки, напр. `"Час"`                                                                                                                                            |
 | `levels[].variable` | `string`                                            | `undefined`                         | Имя переменной устройства, откуда берутся `data` этого уровня, напр. `"PWR.EHour"` — используется конструктором для подписки, сам компонент по нему ничего не запрашивает |
 | `levels[].data`     | `number[]`                                          | `-`                                 | Значения — длина массива = число столбиков, ничем не ограничена                                                                                                           |

package/package.json

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