chuijs 4.0.2 → 4.0.4

package/framework/components/chui_graphs/graphs.js

@@ -1,19 +1,21 @@
-const { Notification } = require('../chui_notification/notification');
-const { setStyles, optionOr } = require('../../modules/chui_functions');
-const { I18n } = require('../../modules/chui_i18n/chui_i18n');
-
-const STYLES_ID = 'chUiJS_Canvas';
-const AXIS_COLOR = '#8e8e93';
-const LABEL_FONT = 'bold 14px Arial';
+const { Notification } = require("../chui_notification/notification");
+const { setStyles, optionOr } = require("../../modules/chui_functions");
+const { I18n } = require("../../modules/chui_i18n/chui_i18n");
+const { animate } = require("../../modules/chui_animations/motion");
+const { paletteColor } = require("../../modules/chui_palette/palette");
+
+const STYLES_ID = "chUiJS_Canvas";
+const AXIS_COLOR = paletteColor("gray");
+const LABEL_FONT = "bold 14px Arial";
 const Y_AXIS_STEPS = 4;
 const PLOT_HEIGHT = 240;
 const CATEGORY_WIDTH = 150;
 const BAR_WIDTH = 75;
-const BAR_FALLBACK_COLOR = '#1676f3';
+const BAR_FALLBACK_COLOR = paletteColor("blue");
 const PADDING = { top: 20, right: 20, bottom: 50, left: 50 };
 const PIE_SIZE = 400;
-const GRID_COLOR = "rgba(142, 142, 147, 0.25)";
-const LINE_FALLBACK_COLOR = "#1676f3";
+const GRID_COLOR = paletteColor("gray", { alpha: 0.25 });
+const LINE_FALLBACK_COLOR = paletteColor("blue");
 const LINE_POINT_RADIUS = 4;
 const POINT_HOVER_DISTANCE = 30;
 const SCATTER_PLOT_WIDTH = 460;
@@ -24,9 +26,9 @@ const GAUGE_THICKNESS = 20;
 const GAUGE_START_ANGLE = 135;
 const GAUGE_SWEEP = 270;
 const GAUGE_TICKS = 6;
-const GAUGE_FALLBACK_COLOR = "#1676f3";
-const GAUGE_TRACK_COLOR = "rgba(142, 142, 147, 0.25)";
-const GAUGE_THRESHOLD_COLORS = ["#34c759", "#ff9f0a", "#ff3b30"];
+const GAUGE_FALLBACK_COLOR = paletteColor("blue");
+const GAUGE_TRACK_COLOR = paletteColor("gray", { alpha: 0.25 });
+const GAUGE_THRESHOLD_COLORS = [paletteColor("green"), paletteColor("orange"), paletteColor("red")];
 const SPARKLINE_WIDTH = 160;
 const SPARKLINE_HEIGHT = 40;
 const SPARKLINE_INSET = 3;
@@ -42,7 +44,7 @@ const HEATMAP_GAP = 4;
 const HEATMAP_LABEL_WIDTH = 70;
 const HEATMAP_LABEL_HEIGHT = 24;
 const HEATMAP_PADDING = 10;
-const HEATMAP_EMPTY_COLOR = "rgba(142, 142, 147, 0.18)";
+const HEATMAP_EMPTY_COLOR = paletteColor("gray", { alpha: 0.18 });
 // Самая бледная клетка с данными: пустая заливка остаётся светлее
 const HEATMAP_ALPHA_MIN = 0.2;
 
@@ -82,9 +84,9 @@ function prepareCanvas(canvas, cssWidth, cssHeight) {
     const ratio = window.devicePixelRatio || 1;
     canvas.width = cssWidth * ratio;
     canvas.height = cssHeight * ratio;
-    canvas.style.width = cssWidth + 'px';
-    canvas.style.height = cssHeight + 'px';
-    const ctx = canvas.getContext('2d');
+    canvas.style.width = cssWidth + "px";
+    canvas.style.height = cssHeight + "px";
+    const ctx = canvas.getContext("2d");
     ctx.scale(ratio, ratio);
     return ctx;
 }
@@ -104,8 +106,8 @@ function drawAxesGrid(ctx, plotWidth, scale) {
     ctx.stroke();
 
     ctx.font = LABEL_FONT;
-    ctx.textAlign = 'right';
-    ctx.textBaseline = 'middle';
+    ctx.textAlign = "right";
+    ctx.textBaseline = "middle";
     for (let i = 0; i <= Y_AXIS_STEPS; i++) {
         const y = bottomY - (i / Y_AXIS_STEPS) * PLOT_HEIGHT;
         ctx.strokeStyle = AXIS_COLOR;
@@ -139,36 +141,51 @@ function createTooltip(container) {
         element: tooltip,
         show(text, x, y) {
             tooltip.innerText = text;
+            // Незавершённый уход отменяется: подсказка снова на месте
+            tooltip.classList.remove("chui_chart_tooltip_leaving");
             tooltip.style.display = "block";
             tooltip.style.left = Math.round(x) + "px";
             tooltip.style.top = Math.round(y) + "px";
         },
         hide() {
-            tooltip.style.display = "none";
+            // Уход — движением: подсказка гаснет, а узел прячется по концу кадра
+            if (getComputedStyle(tooltip).display === "none") return;
+            if (tooltip.classList.contains("chui_chart_tooltip_leaving")) return;
+            tooltip.classList.add("chui_chart_tooltip_leaving");
+            const done = (event) => {
+                if (event.target !== tooltip) return;
+                tooltip.removeEventListener("animationend", done);
+                // Показ за время ухода — узел остаётся на месте
+                if (tooltip.classList.contains("chui_chart_tooltip_leaving") === false) return;
+                tooltip.classList.remove("chui_chart_tooltip_leaving");
+                tooltip.style.display = "none";
+            };
+            tooltip.addEventListener("animationend", done);
         },
     };
 }
 
+/** Уменьшенное движение: диаграмма строится сразу, без роста */
 class BarGraph {
-    #canvas = document.createElement('canvas');
-    #main = document.createElement('chui_bar_graph');
+    #canvas = document.createElement("canvas");
+    #main = document.createElement("chui_bar_graph");
     #options = undefined;
     #bars = [];
     #active = undefined;
     #tooltip = undefined;
 
     constructor(options = {}) {
-        setStyles(__dirname + '/styles.css', STYLES_ID);
+        setStyles(__dirname + "/styles.css", STYLES_ID);
         this.#options = options;
         this.#main.appendChild(this.#canvas);
         this.#tooltip = createTooltip(this.#main);
-        this.#draw();
+        animate((growth) => this.#draw(growth));
         this.#bindPointer();
         // Доступная альтернатива канвасу: та же таблица данных рядом с графиком
         this.#main.appendChild(buildDataTable(this.#options.data || {}));
     }
 
-    #draw() {
+    #draw(growth = 1) {
         const data = this.#options.data || {};
         const colors = this.#options.colors || [];
         const labels = Object.keys(data);
@@ -181,18 +198,18 @@ class BarGraph {
         const ctx = prepareCanvas(this.#canvas, cssWidth, cssHeight);
 
         drawAxesGrid(ctx, plotWidth, scale);
-        this.#drawBars(ctx, labels, values, scale, colors);
+        this.#drawBars(ctx, labels, values, scale, colors, growth);
     }
 
-    #drawBars(ctx, labels, values, scale, colors) {
+    #drawBars(ctx, labels, values, scale, colors, growth = 1) {
         const bottomY = PADDING.top + PLOT_HEIGHT;
         this.#bars = [];
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
+        ctx.textAlign = "center";
+        ctx.textBaseline = "top";
         for (let i = 0; i < labels.length; i++) {
             // Отрицательное значение — это ноль на оси, которая начинается с нуля:
             // иначе столбец уходил бы вниз, на подписи категорий (как у RadarGraph и HeatmapGraph)
-            const barHeight = Math.max(0, (values[i] / scale.max) * PLOT_HEIGHT);
+            const barHeight = Math.max(0, (values[i] / scale.max) * PLOT_HEIGHT * growth);
             const x = PADDING.left + i * CATEGORY_WIDTH + (CATEGORY_WIDTH - BAR_WIDTH) / 2;
             const bar = { index: i, x: x, y: bottomY - barHeight, w: BAR_WIDTH, h: barHeight };
             this.#bars.push(bar);
@@ -217,18 +234,21 @@ class BarGraph {
         this.#canvas.setAttribute("role", "img");
         this.#canvas.setAttribute("tabindex", "0");
         this.#canvas.setAttribute("aria-label", describeData(I18n.t("graphics.barChart"), this.#options.data || {}));
-        this.#canvas.addEventListener('click', (event) => {
+        this.#canvas.addEventListener("click", (event) => {
             const bar = this.#findBar(event);
             if (bar === null) return;
             this.#announce(bar.index);
         });
         // Наведение: подсказка с категорией и значением
-        this.#canvas.addEventListener('mousemove', (event) => {
+        this.#canvas.addEventListener("mousemove", (event) => {
             const bar = this.#findBar(event);
-            if (bar === null) { this.#tooltip.hide(); return; }
+            if (bar === null) {
+                this.#tooltip.hide();
+                return;
+            }
             this.#showTooltip(bar.index);
         });
-        this.#canvas.addEventListener('mouseleave', () => {
+        this.#canvas.addEventListener("mouseleave", () => {
             if (this.#active === undefined) this.#tooltip.hide();
         });
         // Клавиатура: ←/→ ходят по столбцам, Enter показывает значение (как клик мышью)
@@ -241,10 +261,13 @@ class BarGraph {
                 if (next > this.#bars.length - 1) next = 0;
                 this.#active = next;
                 this.#draw();
-                this.#canvas.setAttribute("aria-label", I18n.t("graphics.selected", {
-                    summary: describeData(I18n.t("graphics.barChart"), this.#options.data || {}),
-                    value: this.#label(this.#active)
-                }));
+                this.#canvas.setAttribute(
+                    "aria-label",
+                    I18n.t("graphics.selected", {
+                        summary: describeData(I18n.t("graphics.barChart"), this.#options.data || {}),
+                        value: this.#label(this.#active),
+                    })
+                );
                 this.#showTooltip(this.#active);
             } else if (event.key === "Enter" || event.key === " ") {
                 if (this.#active === undefined) return;
@@ -276,7 +299,7 @@ class BarGraph {
         const rect = this.#canvas.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const y = event.clientY - rect.top;
-        for (let bar of this.#bars) {
+        for (const bar of this.#bars) {
             if (x >= bar.x && x <= bar.x + bar.w && y >= bar.y && y <= bar.y + bar.h) return bar;
         }
         return null;
@@ -288,24 +311,28 @@ class BarGraph {
 }
 
 class PieGraph {
-    #chui_piechart = document.createElement('chui_piechart');
-    #canvas = document.createElement('canvas');
+    #chuiPiechart = document.createElement("chui_piechart");
+    #canvas = document.createElement("canvas");
     #options = undefined;
 
     constructor(options = {}) {
-        setStyles(__dirname + '/styles.css', STYLES_ID);
+        setStyles(__dirname + "/styles.css", STYLES_ID);
         this.#options = options;
-        const ctx = prepareCanvas(this.#canvas, PIE_SIZE, PIE_SIZE);
-        this.#drawSlices(ctx);
+        animate((growth) => this.#draw(growth));
         this.#canvas.setAttribute("role", "img");
         this.#canvas.setAttribute("aria-label", describeData(I18n.t("graphics.pieChart"), options.data || {}));
-        this.#chui_piechart.appendChild(this.#canvas);
-        if (options.legend) this.#chui_piechart.appendChild(this.#buildLegend());
+        this.#chuiPiechart.appendChild(this.#canvas);
+        if (options.legend) this.#chuiPiechart.appendChild(this.#buildLegend());
         // Доступная альтернатива канвасу: та же таблица данных рядом с графиком
-        this.#chui_piechart.appendChild(buildDataTable(options.data || {}));
+        this.#chuiPiechart.appendChild(buildDataTable(options.data || {}));
+    }
+
+    #draw(growth = 1) {
+        const ctx = prepareCanvas(this.#canvas, PIE_SIZE, PIE_SIZE);
+        this.#drawSlices(ctx, growth);
     }
 
-    #drawSlices(ctx) {
+    #drawSlices(ctx, growth = 1) {
         const data = this.#options.data || {};
         const colors = this.#options.colors || [];
         const labels = Object.keys(data);
@@ -316,12 +343,17 @@ class PieGraph {
         if (total <= 0) return;
 
         const center = PIE_SIZE / 2;
+        // Построение: секторы прочерчиваются по кругу. Подписи процентов встают на место,
+        // когда круг замкнулся, — иначе они ехали бы вслед за незакрытым сектором
+        const limit = 2 * Math.PI * growth;
         let startAngle = 0;
         for (let i = 0; i < labels.length; i++) {
             const value = values[i];
-            const sliceAngle = 2 * Math.PI * value / total;
+            const remainder = limit - startAngle;
+            if (remainder <= 0) break;
+            const sliceAngle = Math.min((2 * Math.PI * value) / total, remainder);
             drawPieSlice(ctx, center, center, center, startAngle, startAngle + sliceAngle, colors[i % colors.length]);
-            this.#drawPercentage(ctx, center, startAngle, sliceAngle, value, total);
+            if (growth >= 1) this.#drawPercentage(ctx, center, startAngle, sliceAngle, value, total);
             startAngle += sliceAngle;
         }
         this.#drawDoughnutHole(ctx, center);
@@ -330,18 +362,22 @@ class PieGraph {
     #drawPercentage(ctx, center, startAngle, sliceAngle, value, total) {
         const labelRadius = center * 0.65;
         const angle = startAngle + sliceAngle / 2;
-        ctx.fillStyle = 'white';
+        ctx.fillStyle = "white";
         ctx.font = LABEL_FONT;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-        ctx.fillText(`${Math.round(100 * value / total)}%`, center + labelRadius * Math.cos(angle), center + labelRadius * Math.sin(angle));
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(
+            `${Math.round((100 * value) / total)}%`,
+            center + labelRadius * Math.cos(angle),
+            center + labelRadius * Math.sin(angle)
+        );
     }
 
     #drawDoughnutHole(ctx, center) {
         const holeSize = this.#options.doughnutHoleSize;
         if (!(holeSize > 0) || holeSize >= 1) return;
         ctx.save();
-        ctx.globalCompositeOperation = 'destination-out';
+        ctx.globalCompositeOperation = "destination-out";
         ctx.beginPath();
         ctx.arc(center, center, center * holeSize, 0, 2 * Math.PI);
         ctx.closePath();
@@ -352,28 +388,30 @@ class PieGraph {
     #buildLegend() {
         const data = this.#options.data || {};
         const colors = this.#options.colors || [];
-        return buildLegend(Object.keys(data).map((label, index) => ({ title: label, color: colors[index % colors.length] })));
+        return buildLegend(
+            Object.keys(data).map((label, index) => ({ title: label, color: colors[index % colors.length] }))
+        );
     }
 
     set() {
-        return this.#chui_piechart;
+        return this.#chuiPiechart;
     }
 }
 
 class LineGraph {
-    #canvas = document.createElement('canvas');
-    #main = document.createElement('chui_line_graph');
+    #canvas = document.createElement("canvas");
+    #main = document.createElement("chui_line_graph");
     #options = undefined;
     #points = [];
     #active = undefined;
     #tooltip = undefined;
 
     constructor(options = {}) {
-        setStyles(__dirname + '/styles.css', STYLES_ID);
+        setStyles(__dirname + "/styles.css", STYLES_ID);
         this.#options = options;
         this.#main.appendChild(this.#canvas);
         this.#tooltip = createTooltip(this.#main);
-        this.#draw();
+        animate((growth) => this.#draw(growth));
         this.#bindPointer();
         // Доступная альтернатива канвасу
         this.#main.appendChild(buildDataTable(options.data || {}));
@@ -383,7 +421,7 @@ class LineGraph {
         return (this.#options.colors || [])[0] || LINE_FALLBACK_COLOR;
     }
 
-    #draw() {
+    #draw(growth = 1) {
         const data = this.#options.data || {};
         const labels = Object.keys(data);
         const values = labels.map((label) => Number(data[label]) || 0);
@@ -404,12 +442,17 @@ class LineGraph {
         }));
 
         // Заливка под линией (AreaGraph): градиент только для hex-цветов
+        // Построение: линия прочерчивается слева направо — поле приоткрывается по мере роста
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, 0, PADDING.left + plotWidth * growth, cssHeight);
+        ctx.clip();
         if (this.#options.area === true && this.#points.length > 0) {
             ctx.fillStyle = this.#color;
-            if (this.#color.startsWith('#')) {
+            if (this.#color.startsWith("#")) {
                 const gradient = ctx.createLinearGradient(0, PADDING.top, 0, bottomY);
-                gradient.addColorStop(0, this.#color + '66');
-                gradient.addColorStop(1, this.#color + '00');
+                gradient.addColorStop(0, this.#color + "66");
+                gradient.addColorStop(1, this.#color + "00");
                 ctx.fillStyle = gradient;
             }
             ctx.beginPath();
@@ -445,10 +488,11 @@ class LineGraph {
                 ctx.stroke();
             }
             ctx.fillStyle = AXIS_COLOR;
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'top';
+            ctx.textAlign = "center";
+            ctx.textBaseline = "top";
             ctx.fillText(labels[point.index], point.x, bottomY + 10);
         }
+        ctx.restore();
     }
 
     #bindPointer() {
@@ -456,17 +500,20 @@ class LineGraph {
         this.#canvas.setAttribute("role", "img");
         this.#canvas.setAttribute("tabindex", "0");
         this.#canvas.setAttribute("aria-label", describeData(I18n.t("graphics.lineChart"), this.#options.data || {}));
-        this.#canvas.addEventListener('click', (event) => {
+        this.#canvas.addEventListener("click", (event) => {
             const point = this.#findPoint(event);
             if (point !== null) this.#announce(point.index);
         });
         // Наведение: подсказка у ближайшей точки
-        this.#canvas.addEventListener('mousemove', (event) => {
+        this.#canvas.addEventListener("mousemove", (event) => {
             const point = this.#findPoint(event);
-            if (point === null) { this.#tooltip.hide(); return; }
+            if (point === null) {
+                this.#tooltip.hide();
+                return;
+            }
             this.#select(point.index);
         });
-        this.#canvas.addEventListener('mouseleave', () => {
+        this.#canvas.addEventListener("mouseleave", () => {
             if (this.#active === undefined) this.#tooltip.hide();
         });
         // Клавиатура: ←/→ ходят по точкам, Enter показывает значение
@@ -504,10 +551,13 @@ class LineGraph {
         const label = labels[index];
         const point = this.#points[index];
         if (point !== undefined) this.#tooltip.show(`${label}: ${this.#options.data[label]}`, point.x, point.y);
-        this.#canvas.setAttribute("aria-label", I18n.t("graphics.selected", {
-            summary: describeData(I18n.t("graphics.lineChart"), this.#options.data || {}),
-            value: `${label}: ${this.#options.data[label]}`
-        }));
+        this.#canvas.setAttribute(
+            "aria-label",
+            I18n.t("graphics.selected", {
+                summary: describeData(I18n.t("graphics.lineChart"), this.#options.data || {}),
+                value: `${label}: ${this.#options.data[label]}`,
+            })
+        );
         this.#draw();
     }
 
@@ -570,8 +620,8 @@ function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color
  * ```
  */
 class ScatterGraph {
-    #canvas = document.createElement('canvas');
-    #main = document.createElement('chui_scatter_graph');
+    #canvas = document.createElement("canvas");
+    #main = document.createElement("chui_scatter_graph");
     #options = undefined;
     #series = [];
     /** Плоский список точек с экранными координатами — общий для мыши и клавиатуры */
@@ -580,17 +630,19 @@ class ScatterGraph {
     #tooltip = undefined;
 
     constructor(options = {}) {
-        setStyles(__dirname + '/styles.css', STYLES_ID);
+        setStyles(__dirname + "/styles.css", STYLES_ID);
         this.#options = options;
         this.#series = ScatterGraph.#normalize(options.series, options.colors);
         this.#main.appendChild(this.#canvas);
         this.#tooltip = createTooltip(this.#main);
-        this.#draw();
+        animate((growth) => this.#draw(growth));
         // Легенда нужна только когда серий больше одной: у одной подпись есть в подсказке
         if (options.legend !== false && this.#series.length > 1) {
-            this.#main.appendChild(buildLegend(this.#series.map((serie) => ({ title: serie.title, color: serie.color }))));
+            this.#main.appendChild(
+                buildLegend(this.#series.map((serie) => ({ title: serie.title, color: serie.color })))
+            );
         }
-        this.#main.appendChild(buildTable([I18n.t("graphics.seriesColumn"), 'X', 'Y'], this.#tableRows()));
+        this.#main.appendChild(buildTable([I18n.t("graphics.seriesColumn"), "X", "Y"], this.#tableRows()));
         this.#bindPointer();
     }
 
@@ -623,15 +675,19 @@ class ScatterGraph {
         const list = Array.isArray(series) ? series : [];
         const palette = Array.isArray(colors) ? colors : [];
         return list.map((item, index) => {
-            const entry = item === null || typeof item !== 'object' ? {} : item;
+            const entry = item === null || typeof item !== "object" ? {} : item;
             const points = (Array.isArray(entry.points) ? entry.points : []).map((point) => {
                 if (Array.isArray(point)) return { x: Number(point[0]) || 0, y: Number(point[1]) || 0 };
-                if (point === null || typeof point !== 'object') return { x: 0, y: 0 };
+                if (point === null || typeof point !== "object") return { x: 0, y: 0 };
                 return { x: Number(point.x) || 0, y: Number(point.y) || 0 };
             });
             return {
-                title: entry.title === undefined ? I18n.t("graphics.series", {index: index + 1}) : String(entry.title),
-                color: entry.color === undefined ? (palette[index % palette.length] || LINE_FALLBACK_COLOR) : String(entry.color),
+                title:
+                    entry.title === undefined ? I18n.t("graphics.series", { index: index + 1 }) : String(entry.title),
+                color:
+                    entry.color === undefined
+                        ? palette[index % palette.length] || LINE_FALLBACK_COLOR
+                        : String(entry.color),
                 points: points,
             };
         });
@@ -645,12 +701,18 @@ class ScatterGraph {
         return rows;
     }
 
-    #draw() {
+    #draw(growth = 1) {
         const points = this.#series.reduce((list, serie) => list.concat(serie.points), []);
         const xs = points.map((point) => point.x);
         const ys = points.map((point) => point.y);
-        const xScale = getRangeScale(xs.length ? Math.min.apply(null, xs) : 0, xs.length ? Math.max.apply(null, xs) : 0);
-        const yScale = getRangeScale(ys.length ? Math.min.apply(null, ys) : 0, ys.length ? Math.max.apply(null, ys) : 0);
+        const xScale = getRangeScale(
+            xs.length ? Math.min.apply(null, xs) : 0,
+            xs.length ? Math.max.apply(null, xs) : 0
+        );
+        const yScale = getRangeScale(
+            ys.length ? Math.min.apply(null, ys) : 0,
+            ys.length ? Math.max.apply(null, ys) : 0
+        );
         const xTitle = this.#options.xTitle;
         const yTitle = this.#options.yTitle;
         // Подписи делений оси Y и её название стоят слева: под них и расширяем отступ
@@ -684,8 +746,8 @@ class ScatterGraph {
             ctx.lineTo(x, bottom + 5);
             ctx.stroke();
             ctx.fillStyle = AXIS_COLOR;
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'top';
+            ctx.textAlign = "center";
+            ctx.textBaseline = "top";
             ctx.fillText(formatAxisLabel(xScale.min + i * xScale.step), x, bottom + 8);
         }
         for (let i = 0; i <= yScale.count; i++) {
@@ -705,8 +767,8 @@ class ScatterGraph {
             ctx.lineTo(left - 5, y);
             ctx.stroke();
             ctx.fillStyle = AXIS_COLOR;
-            ctx.textAlign = 'right';
-            ctx.textBaseline = 'middle';
+            ctx.textAlign = "right";
+            ctx.textBaseline = "middle";
             ctx.fillText(formatAxisLabel(yScale.min + i * yScale.step), left - 6, y);
         }
         // Оси рисуются по краям поля данных
@@ -724,15 +786,15 @@ class ScatterGraph {
             ctx.translate(14, PADDING.top + PLOT_HEIGHT / 2);
             ctx.rotate(-Math.PI / 2);
             ctx.fillStyle = AXIS_COLOR;
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
             ctx.fillText(String(yTitle), 0, 0);
             ctx.restore();
         }
         if (xTitle !== undefined) {
             ctx.fillStyle = AXIS_COLOR;
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'top';
+            ctx.textAlign = "center";
+            ctx.textBaseline = "top";
             ctx.fillText(String(xTitle), left + plotWidth / 2, bottom + 30);
         }
 
@@ -743,10 +805,19 @@ class ScatterGraph {
                 const x = toX(point.x);
                 const y = toY(point.y);
                 const index = this.#points.length;
-                this.#points.push({ index: index, x: x, y: y, serie: serie.title, color: serie.color, xValue: point.x, yValue: point.y });
+                this.#points.push({
+                    index: index,
+                    x: x,
+                    y: y,
+                    serie: serie.title,
+                    color: serie.color,
+                    xValue: point.x,
+                    yValue: point.y,
+                });
                 ctx.fillStyle = serie.color;
                 ctx.beginPath();
-                ctx.arc(x, y, SCATTER_POINT_RADIUS, 0, 2 * Math.PI);
+                // Точки растут из нуля: появление серии читается, как её набор
+                ctx.arc(x, y, Math.max(0.5, SCATTER_POINT_RADIUS * growth), 0, 2 * Math.PI);
                 ctx.fill();
                 if (index === this.#active) {
                     ctx.strokeStyle = serie.color;
@@ -761,15 +832,15 @@ class ScatterGraph {
 
     #bindPointer() {
         this.#canvas.classList.add("graph_interactive");
-        this.#canvas.setAttribute('role', 'img');
-        this.#canvas.setAttribute('tabindex', '0');
-        this.#canvas.setAttribute('aria-label', this.#describe());
-        this.#canvas.addEventListener('click', (event) => {
+        this.#canvas.setAttribute("role", "img");
+        this.#canvas.setAttribute("tabindex", "0");
+        this.#canvas.setAttribute("aria-label", this.#describe());
+        this.#canvas.addEventListener("click", (event) => {
             const point = this.#findPoint(event);
             if (point !== null) this.#announce(point.index);
         });
         // Наведение: подсказка у ближайшей точки
-        this.#canvas.addEventListener('mousemove', (event) => {
+        this.#canvas.addEventListener("mousemove", (event) => {
             const point = this.#findPoint(event);
             if (point === null) {
                 this.#tooltip.hide();
@@ -777,20 +848,20 @@ class ScatterGraph {
             }
             this.#select(point.index);
         });
-        this.#canvas.addEventListener('mouseleave', () => {
+        this.#canvas.addEventListener("mouseleave", () => {
             if (this.#active === undefined) this.#tooltip.hide();
         });
         // Клавиатура: ←/→ водят по точкам, Enter показывает значение (как клик мышью)
-        this.#canvas.addEventListener('keydown', (event) => {
+        this.#canvas.addEventListener("keydown", (event) => {
             if (this.#points.length === 0) return;
-            if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
                 event.preventDefault();
-                let next = this.#active === undefined ? 0 : this.#active + (event.key === 'ArrowRight' ? 1 : -1);
+                let next = this.#active === undefined ? 0 : this.#active + (event.key === "ArrowRight" ? 1 : -1);
                 if (next < 0) next = this.#points.length - 1;
                 if (next > this.#points.length - 1) next = 0;
                 this.#draw();
                 this.#select(next);
-            } else if (event.key === 'Enter' || event.key === ' ') {
+            } else if (event.key === "Enter" || event.key === " ") {
                 if (this.#active === undefined) return;
                 event.preventDefault();
                 this.#announce(this.#active);
@@ -815,7 +886,10 @@ class ScatterGraph {
         const point = this.#points[index];
         if (point === undefined) return;
         this.#tooltip.show(this.#pointText(point), point.x, point.y);
-        this.#canvas.setAttribute('aria-label', I18n.t("graphics.selected", {summary: this.#describe(), value: this.#pointText(point)}));
+        this.#canvas.setAttribute(
+            "aria-label",
+            I18n.t("graphics.selected", { summary: this.#describe(), value: this.#pointText(point) })
+        );
         this.#draw();
     }
 
@@ -837,7 +911,7 @@ class ScatterGraph {
         if (parts.length === 0) return I18n.t("graphics.scatterChart");
         const total = this.#series.reduce((sum, serie) => sum + serie.points.length, 0);
         const rest = total - parts.length;
-        return `${I18n.t("graphics.scatterChart")}: ${parts.join(', ')}${rest > 0 ? `, и ещё ${rest}` : ""}`;
+        return `${I18n.t("graphics.scatterChart")}: ${parts.join(", ")}${rest > 0 ? `, и ещё ${rest}` : ""}`;
     }
 
     #announce(index) {
@@ -879,40 +953,40 @@ class Gauge {
     static DEFAULT_THICKNESS = GAUGE_THICKNESS;
     static #counter = 0;
 
-    #root = document.createElement('chui_gauge');
-    #canvas = document.createElement('canvas');
-    #value_text = document.createElement('gauge_value');
-    #status = document.createElement('chui_gauge_status');
+    #root = document.createElement("chui_gauge");
+    #canvas = document.createElement("canvas");
+    #valueText = document.createElement("gauge_value");
+    #status = document.createElement("chui_gauge_status");
     #id = undefined;
     #value = 0;
     #min = 0;
     #max = 100;
-    #unit = '';
+    #unit = "";
     #label = I18n.t("graphics.gauge");
     #format = undefined;
-    #show_value = true;
+    #showValue = true;
     #size = GAUGE_SIZE;
     #thickness = GAUGE_THICKNESS;
-    #start_angle = GAUGE_START_ANGLE;
+    #startAngle = GAUGE_START_ANGLE;
     #sweep = GAUGE_SWEEP;
     #ticks = GAUGE_TICKS;
     #color = undefined;
     #thresholds = [];
 
     constructor(options = {}) {
-        setStyles(__dirname + '/styles.css', STYLES_ID);
+        setStyles(__dirname + "/styles.css", STYLES_ID);
         Gauge.#counter += 1;
         this.#id = options.id === undefined ? `chui_gauge_${Gauge.#counter}` : options.id;
         this.#root.id = this.#id;
-        this.#root.setAttribute('role', 'meter');
-        this.#canvas.setAttribute('aria-hidden', 'true');
-        this.#value_text.className = 'gauge_value';
-        this.#value_text.setAttribute('aria-hidden', 'true');
-        this.#status.className = 'gauge_status chui_visually_hidden';
-        this.#status.setAttribute('role', 'status');
-        this.#status.setAttribute('aria-live', 'polite');
+        this.#root.setAttribute("role", "meter");
+        this.#canvas.setAttribute("aria-hidden", "true");
+        this.#valueText.className = "gauge_value";
+        this.#valueText.setAttribute("aria-hidden", "true");
+        this.#status.className = "gauge_status chui_visually_hidden";
+        this.#status.setAttribute("role", "status");
+        this.#status.setAttribute("aria-live", "polite");
         this.#root.appendChild(this.#canvas);
-        this.#root.appendChild(this.#value_text);
+        this.#root.appendChild(this.#valueText);
         this.#root.appendChild(this.#status);
         if (options.min !== undefined) this.#min = Number(options.min) || 0;
         if (options.max !== undefined) this.#max = Number(options.max) || 0;
@@ -920,17 +994,20 @@ class Gauge {
         if (options.unit !== undefined) this.#unit = String(options.unit);
         if (options.size !== undefined) this.#size = Number(options.size) || GAUGE_SIZE;
         if (options.thickness !== undefined) this.#thickness = Number(options.thickness) || GAUGE_THICKNESS;
-        if (options.startAngle !== undefined) this.#start_angle = Number(options.startAngle) || 0;
+        if (options.startAngle !== undefined) this.#startAngle = Number(options.startAngle) || 0;
         if (options.sweep !== undefined) this.#sweep = Number(options.sweep) || GAUGE_SWEEP;
         if (options.ticks !== undefined) this.#ticks = Math.max(1, Number(options.ticks) || GAUGE_TICKS);
         if (options.color !== undefined) this.#color = String(options.color);
         this.#format = options.format;
-        this.#show_value = options.showValue !== false;
-        this.setLabel(optionOr(options.label, I18n.t('graphics.gauge')));
-        if (options.thresholds !== undefined) this.#thresholds = Gauge.#normalizeThresholds(options.thresholds, this.#max);
+        this.#showValue = options.showValue !== false;
+        this.setLabel(optionOr(options.label, I18n.t("graphics.gauge")));
+        if (options.thresholds !== undefined)
+            this.#thresholds = Gauge.#normalizeThresholds(options.thresholds, this.#max);
         // Значение ставим последним: оно уже знает про min/max и пороги
         this.#value = this.#min;
         this.setValue(options.value === undefined ? this.#min : options.value, true);
+        // Построение: дуга идёт от начала шкалы к значению
+        animate((growth) => this.#render(growth));
     }
 
     // GET
@@ -959,7 +1036,7 @@ class Gauge {
     getValueText() {
         if (this.#format !== undefined) return String(this.#format(this.#value, this.#max));
         const text = formatAxisLabel(this.#value);
-        return this.#unit === '' ? text : `${text} ${this.#unit}`;
+        return this.#unit === "" ? text : `${text} ${this.#unit}`;
     }
 
     getUnit() {
@@ -989,7 +1066,7 @@ class Gauge {
     }
 
     isValueVisible() {
-        return this.#show_value;
+        return this.#showValue;
     }
 
     // SET
@@ -1025,14 +1102,14 @@ class Gauge {
     }
 
     setUnit(unit = String()) {
-        this.#unit = unit === undefined ? '' : String(unit);
+        this.#unit = unit === undefined ? "" : String(unit);
         return this.#render();
     }
 
     /** Доступное имя индикатора */
     setLabel(text = String()) {
         this.#label = text;
-        this.#root.setAttribute('aria-label', text === undefined ? I18n.t('graphics.gauge') : String(text));
+        this.#root.setAttribute("aria-label", text === undefined ? I18n.t("graphics.gauge") : String(text));
         return this;
     }
 
@@ -1059,7 +1136,7 @@ class Gauge {
 
     /** Показывать ли значение в центре шкалы */
     setShowValue(visible = Boolean()) {
-        this.#show_value = visible === true;
+        this.#showValue = visible === true;
         return this.#render();
     }
 
@@ -1081,13 +1158,14 @@ class Gauge {
     static #normalizeThresholds(list = Array(), max = Number()) {
         const source = Array.isArray(list) ? list : [];
         return source.map((item, index) => {
-            const entry = item === null || typeof item !== 'object' ? {} : item;
+            const entry = item === null || typeof item !== "object" ? {} : item;
             const to = Number(entry.to);
             return {
                 to: Number.isFinite(to) ? to : max,
-                color: entry.color === undefined
-                    ? GAUGE_THRESHOLD_COLORS[index % GAUGE_THRESHOLD_COLORS.length]
-                    : String(entry.color),
+                color:
+                    entry.color === undefined
+                        ? GAUGE_THRESHOLD_COLORS[index % GAUGE_THRESHOLD_COLORS.length]
+                        : String(entry.color),
             };
         });
     }
@@ -1100,18 +1178,19 @@ class Gauge {
         return this.#color === undefined ? GAUGE_FALLBACK_COLOR : this.#color;
     }
 
-    #render() {
-        const start = (this.#start_angle * Math.PI) / 180;
-        const end = ((this.#start_angle + this.#sweep) * Math.PI) / 180;
-        const ratio = Math.max(0, Math.min(1, this.getRatio()));
+    #render(growth = 1) {
+        const start = (this.#startAngle * Math.PI) / 180;
+        const end = ((this.#startAngle + this.#sweep) * Math.PI) / 180;
+        // Рост — только у построения: смена значения и настроек рисуется полной дугой
+        const ratio = Math.max(0, Math.min(1, this.getRatio())) * growth;
         const color = this.#zoneColor();
         // Размер шкалы виден и подписи значения: её кегль считается от него в CSS
-        this.#root.style.setProperty('--gauge_size', `${this.#size}px`);
+        this.#root.style.setProperty("--gauge_size", `${this.#size}px`);
         const ctx = prepareCanvas(this.#canvas, this.#size, this.#size);
         const center = this.#size / 2;
         // Запас по краю — под деления и их подписи
         const radius = Math.max(10, center - this.#thickness / 2 - 12);
-        ctx.lineCap = 'round';
+        ctx.lineCap = "round";
 
         // Дорожка шкалы: видно, куда значение может дойти
         ctx.strokeStyle = GAUGE_TRACK_COLOR;
@@ -1141,9 +1220,13 @@ class Gauge {
             ctx.lineTo(center + cos * (outer + 5), center + sin * (outer + 5));
             ctx.stroke();
             ctx.fillStyle = AXIS_COLOR;
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText(formatAxisLabel(this.#min + ((this.#max - this.#min) * i) / this.#ticks), center + cos * (outer + 18), center + sin * (outer + 18));
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(
+                formatAxisLabel(this.#min + ((this.#max - this.#min) * i) / this.#ticks),
+                center + cos * (outer + 18),
+                center + sin * (outer + 18)
+            );
         }
 
         // Стрелка с осью в центре шкалы
@@ -1160,12 +1243,12 @@ class Gauge {
         ctx.arc(center, center, 5, 0, 2 * Math.PI);
         ctx.fill();
 
-        this.#value_text.hidden = !this.#show_value;
-        this.#value_text.innerText = this.#show_value ? this.getValueText() : '';
-        this.#root.setAttribute('aria-valuemin', String(this.#min));
-        this.#root.setAttribute('aria-valuemax', String(this.#max));
-        this.#root.setAttribute('aria-valuenow', String(this.#value));
-        this.#root.setAttribute('aria-valuetext', this.getValueText());
+        this.#valueText.hidden = !this.#showValue;
+        this.#valueText.innerText = this.#showValue ? this.getValueText() : "";
+        this.#root.setAttribute("aria-valuemin", String(this.#min));
+        this.#root.setAttribute("aria-valuemax", String(this.#max));
+        this.#root.setAttribute("aria-valuenow", String(this.#value));
+        this.#root.setAttribute("aria-valuetext", this.getValueText());
         return this;
     }
 
@@ -1190,13 +1273,13 @@ class Gauge {
  * ```
  */
 class Sparkline {
-    #canvas = document.createElement('canvas');
-    #main = document.createElement('chui_sparkline');
+    #canvas = document.createElement("canvas");
+    #main = document.createElement("chui_sparkline");
     #options = undefined;
     #points = [];
 
     constructor(options = {}) {
-        setStyles(__dirname + '/styles.css', STYLES_ID);
+        setStyles(__dirname + "/styles.css", STYLES_ID);
         this.#options = options;
         this.#main.appendChild(this.#canvas);
         this.#draw();
@@ -1214,7 +1297,7 @@ class Sparkline {
 
     /** Экранные точки — по ним видно, что именно нарисовано */
     getPoints() {
-        return this.#points.map((point) => ({label: point.label, value: point.value, x: point.x, y: point.y}));
+        return this.#points.map((point) => ({ label: point.label, value: point.value, x: point.x, y: point.y }));
     }
 
     set() {
@@ -1235,9 +1318,10 @@ class Sparkline {
         const max = values.length ? Math.max.apply(null, values) : 0;
         const span = max - min;
         const stepX = labels.length > 1 ? (width - 2 * SPARKLINE_INSET) / (labels.length - 1) : 0;
-        const toY = (value) => span === 0
-            ? height / 2
-            : height - SPARKLINE_INSET - ((value - min) / span) * (height - 2 * SPARKLINE_INSET);
+        const toY = (value) =>
+            span === 0
+                ? height / 2
+                : height - SPARKLINE_INSET - ((value - min) / span) * (height - 2 * SPARKLINE_INSET);
         this.#points = labels.map((label, index) => ({
             label: label,
             value: values[index],
@@ -1248,10 +1332,10 @@ class Sparkline {
         // Заливка под линией: градиент только для hex-цвета — как у AreaGraph
         if (this.#options.area === true && this.#points.length > 0) {
             ctx.fillStyle = color;
-            if (color.startsWith('#')) {
+            if (color.startsWith("#")) {
                 const gradient = ctx.createLinearGradient(0, 0, 0, height);
-                gradient.addColorStop(0, color + '66');
-                gradient.addColorStop(1, color + '00');
+                gradient.addColorStop(0, color + "66");
+                gradient.addColorStop(1, color + "00");
                 ctx.fillStyle = gradient;
             }
             ctx.beginPath();
@@ -1265,7 +1349,7 @@ class Sparkline {
         if (this.#points.length > 1) {
             ctx.strokeStyle = color;
             ctx.lineWidth = 2;
-            ctx.lineJoin = 'round';
+            ctx.lineJoin = "round";
             ctx.beginPath();
             ctx.moveTo(this.#points[0].x, this.#points[0].y);
             for (const point of this.#points.slice(1)) ctx.lineTo(point.x, point.y);
@@ -1281,8 +1365,8 @@ class Sparkline {
             ctx.fill();
         }
 
-        this.#canvas.setAttribute('role', 'img');
-        this.#canvas.setAttribute('aria-label', describeData(I18n.t('graphics.sparkline'), data));
+        this.#canvas.setAttribute("role", "img");
+        this.#canvas.setAttribute("aria-label", describeData(I18n.t("graphics.sparkline"), data));
     }
 }
 
@@ -1307,8 +1391,8 @@ class Sparkline {
  * ```
  */
 class RadarGraph {
-    #canvas = document.createElement('canvas');
-    #main = document.createElement('chui_radar_graph');
+    #canvas = document.createElement("canvas");
+    #main = document.createElement("chui_radar_graph");
     #axes = [];
     #series = [];
     /** Плоский список точек с экранными координатами — общий для мыши и клавиатуры */
@@ -1317,7 +1401,7 @@ class RadarGraph {
     #tooltip = undefined;
 
     constructor(options = {}) {
-        setStyles(__dirname + '/styles.css', STYLES_ID);
+        setStyles(__dirname + "/styles.css", STYLES_ID);
         this.#axes = RadarGraph.#normalizeAxes(options.axes);
         this.#series = RadarGraph.#normalizeSeries(options.series, options.colors, this.#axes.length);
         this.#main.appendChild(this.#canvas);
@@ -1325,14 +1409,21 @@ class RadarGraph {
         this.#draw();
         // Легенда нужна только когда серий больше одной: у одной подпись есть в подсказке
         if (options.legend !== false && this.#series.length > 1) {
-            this.#main.appendChild(buildLegend(this.#series.map((serie) => ({title: serie.title, color: serie.color}))));
+            this.#main.appendChild(
+                buildLegend(this.#series.map((serie) => ({ title: serie.title, color: serie.color })))
+            );
         }
-        this.#main.appendChild(buildTable([I18n.t('graphics.seriesColumn'), I18n.t('graphics.axisColumn'), I18n.t('graphics.valueColumn')], this.#tableRows()));
+        this.#main.appendChild(
+            buildTable(
+                [I18n.t("graphics.seriesColumn"), I18n.t("graphics.axisColumn"), I18n.t("graphics.valueColumn")],
+                this.#tableRows()
+            )
+        );
         this.#bindPointer();
     }
 
     getAxes() {
-        return this.#axes.map((axis) => ({key: axis.key, title: axis.title}));
+        return this.#axes.map((axis) => ({ key: axis.key, title: axis.title }));
     }
 
     /** Серии с их цветами и значениями (копии — наружу отдаём данные, а не состояние) */
@@ -1363,14 +1454,18 @@ class RadarGraph {
     static #normalizeAxes(axes = Array()) {
         const list = Array.isArray(axes) ? axes : [];
         return list.map((item, index) => {
-            if (item === null || typeof item !== 'object') {
-                const title = item === undefined || item === null ? I18n.t('graphics.axis', {index: index + 1}) : String(item);
-                return {key: title, title: title};
+            if (item === null || typeof item !== "object") {
+                const title =
+                    item === undefined || item === null ? I18n.t("graphics.axis", { index: index + 1 }) : String(item);
+                return { key: title, title: title };
             }
-            const title = item.title === undefined
-                ? (item.key === undefined ? I18n.t('graphics.axis', {index: index + 1}) : String(item.key))
-                : String(item.title);
-            return {key: item.key === undefined ? title : String(item.key), title: title};
+            const title =
+                item.title === undefined
+                    ? item.key === undefined
+                        ? I18n.t("graphics.axis", { index: index + 1 })
+                        : String(item.key)
+                    : String(item.title);
+            return { key: item.key === undefined ? title : String(item.key), title: title };
         });
     }
 
@@ -1378,20 +1473,26 @@ class RadarGraph {
         const list = Array.isArray(series) ? series : [];
         const palette = Array.isArray(colors) ? colors : [];
         return list.map((item, index) => {
-            const entry = item === null || typeof item !== 'object' ? {} : item;
+            const entry = item === null || typeof item !== "object" ? {} : item;
             const source = Array.isArray(entry.values) ? entry.values : [];
             const values = [];
             for (let i = 0; i < axesCount; i++) values.push(Number(source[i]) || 0);
             return {
-                title: entry.title === undefined ? I18n.t('graphics.series', {index: index + 1}) : String(entry.title),
-                color: entry.color === undefined ? (palette[index % palette.length] || LINE_FALLBACK_COLOR) : String(entry.color),
+                title:
+                    entry.title === undefined ? I18n.t("graphics.series", { index: index + 1 }) : String(entry.title),
+                color:
+                    entry.color === undefined
+                        ? palette[index % palette.length] || LINE_FALLBACK_COLOR
+                        : String(entry.color),
                 values: values,
             };
         });
     }
 
     #axisTitle(index) {
-        return this.#axes[index] === undefined ? I18n.t('graphics.axis', {index: index + 1}) : this.#axes[index].title;
+        return this.#axes[index] === undefined
+            ? I18n.t("graphics.axis", { index: index + 1 })
+            : this.#axes[index].title;
     }
 
     #tableRows() {
@@ -1413,10 +1514,10 @@ class RadarGraph {
             }
             if (parts.length === SUMMARY_LIMIT) break;
         }
-        if (parts.length === 0) return I18n.t('graphics.radarChart');
+        if (parts.length === 0) return I18n.t("graphics.radarChart");
         const total = this.#series.reduce((sum, serie) => sum + serie.values.length, 0);
         const rest = total - parts.length;
-        return `${I18n.t('graphics.radarChart')}: ${parts.join(', ')}${rest > 0 ? `, и ещё ${rest}` : ""}`;
+        return `${I18n.t("graphics.radarChart")}: ${parts.join(", ")}${rest > 0 ? `, и ещё ${rest}` : ""}`;
     }
 
     #draw() {
@@ -1462,8 +1563,8 @@ class RadarGraph {
         // Значения уровней — вдоль верхней оси, названия осей — снаружи вершин
         const top = pointAt(0, 1);
         ctx.fillStyle = AXIS_COLOR;
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'middle';
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
         for (let level = 1; level <= Y_AXIS_STEPS; level++) {
             ctx.fillText(formatAxisLabel(scale.step * level), top.x + 4, center - radius * (level / Y_AXIS_STEPS));
         }
@@ -1471,8 +1572,8 @@ class RadarGraph {
             const cos = Math.cos(angleOf(index));
             const sin = Math.sin(angleOf(index));
             ctx.fillStyle = AXIS_COLOR;
-            ctx.textAlign = cos > 0.2 ? 'left' : cos < -0.2 ? 'right' : 'center';
-            ctx.textBaseline = sin > 0.2 ? 'top' : sin < -0.2 ? 'bottom' : 'middle';
+            ctx.textAlign = cos > 0.2 ? "left" : cos < -0.2 ? "right" : "center";
+            ctx.textBaseline = sin > 0.2 ? "top" : sin < -0.2 ? "bottom" : "middle";
             // Подпись оси не выходит за канву: длинное имя слева обрезалось её краем
             // («Анимация» читалась как «ментация») — якорь поджимается по ширине текста
             const title = String(axis.title);
@@ -1480,28 +1581,38 @@ class RadarGraph {
             const anchor = center + cos * (radius + 14);
             const align = ctx.textAlign;
             let labelX;
-            if (align === 'left') labelX = Math.min(anchor, cssSize - RADAR_LABEL_INSET - titleWidth);
-            else if (align === 'right') labelX = Math.max(anchor, RADAR_LABEL_INSET + titleWidth);
-            else labelX = Math.min(Math.max(anchor, RADAR_LABEL_INSET + titleWidth / 2), cssSize - RADAR_LABEL_INSET - titleWidth / 2);
+            if (align === "left") labelX = Math.min(anchor, cssSize - RADAR_LABEL_INSET - titleWidth);
+            else if (align === "right") labelX = Math.max(anchor, RADAR_LABEL_INSET + titleWidth);
+            else
+                labelX = Math.min(
+                    Math.max(anchor, RADAR_LABEL_INSET + titleWidth / 2),
+                    cssSize - RADAR_LABEL_INSET - titleWidth / 2
+                );
             ctx.fillText(title, labelX, center + sin * (radius + 10));
         });
 
         // Серии: полупрозрачная заливка, контур и точки
         this.#points = [];
         for (const serie of this.#series) {
-            const coords = serie.values.map((value, index) => pointAt(index, scale.max > 0 ? Math.max(0, Math.min(1, value / scale.max)) : 0));
+            const coords = serie.values.map((value, index) =>
+                pointAt(index, scale.max > 0 ? Math.max(0, Math.min(1, value / scale.max)) : 0)
+            );
             if (coords.length > 1) {
                 ctx.fillStyle = serie.color;
                 ctx.globalAlpha = 0.18;
                 ctx.beginPath();
-                coords.forEach((point, index) => (index === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y)));
+                coords.forEach((point, index) =>
+                    index === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y)
+                );
                 ctx.closePath();
                 ctx.fill();
                 ctx.globalAlpha = 1;
                 ctx.strokeStyle = serie.color;
                 ctx.lineWidth = 2.5;
                 ctx.beginPath();
-                coords.forEach((point, index) => (index === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y)));
+                coords.forEach((point, index) =>
+                    index === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y)
+                );
                 ctx.closePath();
                 ctx.stroke();
             }
@@ -1533,15 +1644,15 @@ class RadarGraph {
 
     #bindPointer() {
         this.#canvas.classList.add("graph_interactive");
-        this.#canvas.setAttribute('role', 'img');
-        this.#canvas.setAttribute('tabindex', '0');
-        this.#canvas.setAttribute('aria-label', this.#describe());
-        this.#canvas.addEventListener('click', (event) => {
+        this.#canvas.setAttribute("role", "img");
+        this.#canvas.setAttribute("tabindex", "0");
+        this.#canvas.setAttribute("aria-label", this.#describe());
+        this.#canvas.addEventListener("click", (event) => {
             const point = this.#findPoint(event);
             if (point !== null) this.#announce(point.index);
         });
         // Наведение: подсказка у ближайшей точки
-        this.#canvas.addEventListener('mousemove', (event) => {
+        this.#canvas.addEventListener("mousemove", (event) => {
             const point = this.#findPoint(event);
             if (point === null) {
                 this.#tooltip.hide();
@@ -1549,20 +1660,20 @@ class RadarGraph {
             }
             this.#select(point.index);
         });
-        this.#canvas.addEventListener('mouseleave', () => {
+        this.#canvas.addEventListener("mouseleave", () => {
             if (this.#active === undefined) this.#tooltip.hide();
         });
         // Клавиатура: ←/→ водят по точкам, Enter показывает значение (как клик мышью)
-        this.#canvas.addEventListener('keydown', (event) => {
+        this.#canvas.addEventListener("keydown", (event) => {
             if (this.#points.length === 0) return;
-            if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
                 event.preventDefault();
-                let next = this.#active === undefined ? 0 : this.#active + (event.key === 'ArrowRight' ? 1 : -1);
+                let next = this.#active === undefined ? 0 : this.#active + (event.key === "ArrowRight" ? 1 : -1);
                 if (next < 0) next = this.#points.length - 1;
                 if (next > this.#points.length - 1) next = 0;
                 this.#draw();
                 this.#select(next);
-            } else if (event.key === 'Enter' || event.key === ' ') {
+            } else if (event.key === "Enter" || event.key === " ") {
                 if (this.#active === undefined) return;
                 event.preventDefault();
                 this.#announce(this.#active);
@@ -1577,7 +1688,7 @@ class RadarGraph {
         let nearest = null;
         for (const point of this.#points) {
             const distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
-            if (nearest === null || distance < nearest.distance) nearest = {point: point, distance: distance};
+            if (nearest === null || distance < nearest.distance) nearest = { point: point, distance: distance };
         }
         return nearest !== null && nearest.distance <= RADAR_HOVER_DISTANCE ? nearest.point : null;
     }
@@ -1591,7 +1702,10 @@ class RadarGraph {
         const point = this.#points[index];
         if (point === undefined) return;
         this.#tooltip.show(this.#pointText(point), point.x, point.y);
-        this.#canvas.setAttribute('aria-label', I18n.t("graphics.selected", {summary: this.#describe(), value: this.#pointText(point)}));
+        this.#canvas.setAttribute(
+            "aria-label",
+            I18n.t("graphics.selected", { summary: this.#describe(), value: this.#pointText(point) })
+        );
         this.#draw();
     }
 
@@ -1631,8 +1745,8 @@ class RadarGraph {
  * ```
  */
 class HeatmapGraph {
-    #canvas = document.createElement('canvas');
-    #main = document.createElement('chui_heatmap_graph');
+    #canvas = document.createElement("canvas");
+    #main = document.createElement("chui_heatmap_graph");
     #options = undefined;
     #rows = [];
     #columns = [];
@@ -1644,17 +1758,22 @@ class HeatmapGraph {
     #tooltip = undefined;
 
     constructor(options = {}) {
-        setStyles(__dirname + '/styles.css', STYLES_ID);
+        setStyles(__dirname + "/styles.css", STYLES_ID);
         this.#options = options;
         this.#values = HeatmapGraph.#normalizeValues(options.values);
         const columns = this.#values.length === 0 ? 0 : this.#values[0].length;
-        this.#rows = HeatmapGraph.#normalizeLabels(options.rows, this.#values.length, I18n.t('graphics.rowColumn'));
-        this.#columns = HeatmapGraph.#normalizeLabels(options.columns, columns, I18n.t('graphics.columnColumn'));
+        this.#rows = HeatmapGraph.#normalizeLabels(options.rows, this.#values.length, I18n.t("graphics.rowColumn"));
+        this.#columns = HeatmapGraph.#normalizeLabels(options.columns, columns, I18n.t("graphics.columnColumn"));
         this.#max = Number.isFinite(Number(options.max)) ? Number(options.max) : this.#maxOfValues();
         this.#main.appendChild(this.#canvas);
         this.#tooltip = createTooltip(this.#main);
         this.#draw();
-        this.#main.appendChild(buildTable([I18n.t('graphics.rowColumn'), I18n.t('graphics.columnColumn'), I18n.t('graphics.valueColumn')], this.#tableRows()));
+        this.#main.appendChild(
+            buildTable(
+                [I18n.t("graphics.rowColumn"), I18n.t("graphics.columnColumn"), I18n.t("graphics.valueColumn")],
+                this.#tableRows()
+            )
+        );
         this.#bindPointer();
     }
 
@@ -1670,7 +1789,7 @@ class HeatmapGraph {
     /** Выбранная клетка; `undefined` — ничего не выбрано */
     getActive() {
         const cell = this.#cells[this.#active];
-        return cell === undefined ? undefined : {row: cell.row, column: cell.column, value: cell.value};
+        return cell === undefined ? undefined : { row: cell.row, column: cell.column, value: cell.value };
     }
 
     /** Фокус на канвас: с него работают стрелки и Enter */
@@ -1693,7 +1812,9 @@ class HeatmapGraph {
             for (let index = 0; index < width; index++) {
                 const value = Number(cells[index]);
                 // Пропуск и нечисло — пустая клетка: карта честно показывает «данных нет»
-                result.push(cells[index] === undefined || cells[index] === null || Number.isNaN(value) ? undefined : value);
+                result.push(
+                    cells[index] === undefined || cells[index] === null || Number.isNaN(value) ? undefined : value
+                );
             }
             return result;
         });
@@ -1742,7 +1863,7 @@ class HeatmapGraph {
     #tableRows() {
         const rows = [];
         for (const cell of this.#renderableCells()) {
-            rows.push([this.#rows[cell.row], this.#columns[cell.column], cell.value === undefined ? '' : cell.value]);
+            rows.push([this.#rows[cell.row], this.#columns[cell.column], cell.value === undefined ? "" : cell.value]);
         }
         return rows;
     }
@@ -1751,21 +1872,27 @@ class HeatmapGraph {
         const cells = [];
         for (let row = 0; row < this.#values.length; row++) {
             for (let column = 0; column < this.#columns.length; column++) {
-                cells.push({row: row, column: column, value: this.#values[row][column]});
+                cells.push({ row: row, column: column, value: this.#values[row][column] });
             }
         }
         return cells;
     }
 
     #cellText(cell) {
-        const value = cell.value === undefined ? I18n.t('graphics.noData') : String(cell.value);
+        const value = cell.value === undefined ? I18n.t("graphics.noData") : String(cell.value);
         return `${this.#rows[cell.row]} · ${this.#columns[cell.column]}: ${value}`;
     }
 
     #describe() {
-        const base = I18n.t("graphics.heatmapSummary", {rows: this.#rows.length, columns: this.#columns.length, max: formatAxisLabel(this.#max)});
+        const base = I18n.t("graphics.heatmapSummary", {
+            rows: this.#rows.length,
+            columns: this.#columns.length,
+            max: formatAxisLabel(this.#max),
+        });
         const cell = this.#cells[this.#active];
-        return cell === undefined ? base : I18n.t("graphics.selectedCell", {summary: base, value: this.#cellText(cell)});
+        return cell === undefined
+            ? base
+            : I18n.t("graphics.selectedCell", { summary: base, value: this.#cellText(cell) });
     }
 
     #draw() {
@@ -1775,14 +1902,18 @@ class HeatmapGraph {
         // Слева место под подписи строк, сверху — под подписи столбцов
         const left = columns === 0 ? HEATMAP_PADDING : HEATMAP_LABEL_WIDTH;
         const top = HEATMAP_LABEL_HEIGHT;
-        const ctx = prepareCanvas(this.#canvas, left + columns * step + HEATMAP_PADDING, top + rows * step + HEATMAP_PADDING);
+        const ctx = prepareCanvas(
+            this.#canvas,
+            left + columns * step + HEATMAP_PADDING,
+            top + rows * step + HEATMAP_PADDING
+        );
         ctx.font = LABEL_FONT;
         this.#cells = [];
 
         for (let row = 0; row < rows; row++) {
             ctx.fillStyle = AXIS_COLOR;
-            ctx.textAlign = 'right';
-            ctx.textBaseline = 'middle';
+            ctx.textAlign = "right";
+            ctx.textBaseline = "middle";
             ctx.fillText(this.#rows[row], left - HEATMAP_GAP - 4, top + row * step + HEATMAP_CELL / 2);
             for (let column = 0; column < columns; column++) {
                 const value = this.#values[row][column];
@@ -1791,7 +1922,7 @@ class HeatmapGraph {
                 ctx.fillStyle = this.#cellColor(value);
                 ctx.fillRect(x, y, HEATMAP_CELL, HEATMAP_CELL);
                 const index = this.#cells.length;
-                this.#cells.push({index: index, x: x, y: y, row: row, column: column, value: value});
+                this.#cells.push({ index: index, x: x, y: y, row: row, column: column, value: value });
                 if (index === this.#active) {
                     ctx.strokeStyle = AXIS_COLOR;
                     ctx.lineWidth = 2;
@@ -1802,25 +1933,25 @@ class HeatmapGraph {
 
         // Подписи столбцов — над сеткой
         ctx.fillStyle = AXIS_COLOR;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'bottom';
+        ctx.textAlign = "center";
+        ctx.textBaseline = "bottom";
         for (let column = 0; column < columns; column++) {
             ctx.fillText(this.#columns[column], left + column * step + HEATMAP_CELL / 2, top - HEATMAP_GAP);
         }
 
-        this.#canvas.setAttribute('role', 'img');
-        this.#canvas.setAttribute('tabindex', '0');
-        this.#canvas.setAttribute('aria-label', this.#describe());
+        this.#canvas.setAttribute("role", "img");
+        this.#canvas.setAttribute("tabindex", "0");
+        this.#canvas.setAttribute("aria-label", this.#describe());
     }
 
     #bindPointer() {
         this.#canvas.classList.add("graph_interactive");
-        this.#canvas.addEventListener('click', (event) => {
+        this.#canvas.addEventListener("click", (event) => {
             const cell = this.#findCell(event);
             if (cell !== null) this.#announce(cell.index);
         });
         // Наведение: подсказка над клеткой
-        this.#canvas.addEventListener('mousemove', (event) => {
+        this.#canvas.addEventListener("mousemove", (event) => {
             const cell = this.#findCell(event);
             if (cell === null) {
                 this.#tooltip.hide();
@@ -1828,21 +1959,27 @@ class HeatmapGraph {
             }
             this.#select(cell.index);
         });
-        this.#canvas.addEventListener('mouseleave', () => {
+        this.#canvas.addEventListener("mouseleave", () => {
             if (this.#active === undefined) this.#tooltip.hide();
         });
         // Клавиатура: стрелки водят по клеткам и на краю останавливаются, Enter показывает значение
-        this.#canvas.addEventListener('keydown', (event) => {
+        this.#canvas.addEventListener("keydown", (event) => {
             if (this.#cells.length === 0) return;
-            const moves = {ArrowRight: [0, 1], ArrowLeft: [0, -1], ArrowDown: [1, 0], ArrowUp: [-1, 0]};
+            const moves = { ArrowRight: [0, 1], ArrowLeft: [0, -1], ArrowDown: [1, 0], ArrowUp: [-1, 0] };
             const move = moves[event.key];
             if (move !== undefined) {
                 event.preventDefault();
                 const current = this.#cells[this.#active];
-                const row = Math.max(0, Math.min(this.#rows.length - 1, (current === undefined ? 0 : current.row) + move[0]));
-                const column = Math.max(0, Math.min(this.#columns.length - 1, (current === undefined ? 0 : current.column) + move[1]));
+                const row = Math.max(
+                    0,
+                    Math.min(this.#rows.length - 1, (current === undefined ? 0 : current.row) + move[0])
+                );
+                const column = Math.max(
+                    0,
+                    Math.min(this.#columns.length - 1, (current === undefined ? 0 : current.column) + move[1])
+                );
                 this.#select(row * this.#columns.length + column);
-            } else if (event.key === 'Enter' || event.key === ' ') {
+            } else if (event.key === "Enter" || event.key === " ") {
                 if (this.#active === undefined) return;
                 event.preventDefault();
                 this.#announce(this.#active);
@@ -1873,7 +2010,7 @@ class HeatmapGraph {
         if (cell === undefined) return;
         new Notification({
             title: `${this.#rows[cell.row]} · ${this.#columns[cell.column]}`,
-            text: cell.value === undefined ? I18n.t('graphics.noData') : String(cell.value),
+            text: cell.value === undefined ? I18n.t("graphics.noData") : String(cell.value),
             showTime: 3000,
         }).show();
     }