wenay-react2 1.0.20 → 1.0.21

package/lib/common/src/myChart/1/myChart.js

@@ -1,17 +1,21 @@
+// Chart margins and line color (same values, extracted from the render body)
+const CHART_MARGIN_TOP = 20;
+const CHART_MARGIN_BOTTOM = 20;
+const CHART_LINE_COLOR = "rgb(0,180,0)";
 /**
- * Создаём функциональный канвас с возможностью зума колёсиком.
+ * Creates a functional canvas with wheel zoom support.
  */
 export function createChartCanvas(config) {
-    // Создаём <canvas> и вставляем в container
+    // Create <canvas> and insert it into container
     const canvas = document.createElement("canvas");
     config.container.appendChild(canvas);
-    // Состояние (state) в замыкании
+    // State captured in the closure
     let state = {
         width: (config.width ?? config.container.offsetWidth) || 800,
         height: (config.height ?? config.container.offsetHeight) || 400,
         data: [],
         offsetX: 0,
-        scaleX: 5, // пикселей на «шаг» (индекс точки)
+        scaleX: 5, // pixels per step (point index)
         autoScaleY: config.autoScaleY ?? true,
         showTimeAxis: config.showTimeAxis ?? true,
         showPriceAxis: config.showPriceAxis ?? true,
@@ -28,7 +32,7 @@ export function createChartCanvas(config) {
         state.needsRender = true;
     }
     resizeCanvas();
-    // ~~~ Отрисовка ~~~
+    // ~~~ Rendering ~~~
     function draw() {
         if (!state.needsRender)
             return;
@@ -38,7 +42,7 @@ export function createChartCanvas(config) {
             drawAxes();
             return;
         }
-        // Рассчитываем, какие индексы данных видны на экране
+        // Calculate which data indexes are visible on screen
         const minIndex = Math.floor(-state.offsetX / state.scaleX);
         const maxIndex = Math.ceil((state.width - state.offsetX) / state.scaleX);
         const startIndex = Math.max(0, minIndex);
@@ -47,29 +51,23 @@ export function createChartCanvas(config) {
             drawAxes();
             return;
         }
-        // Ищем minY и maxY для видимых точек (если autoScaleY=true)
-        let minY = Infinity;
-        let maxY = -Infinity;
-        for (let i = startIndex; i <= endIndex; i++) {
-            const p = state.data[i];
-            if (p.price < minY)
-                minY = p.price;
-            if (p.price > maxY)
-                maxY = p.price;
-        }
-        if (minY === Infinity) {
-            // Нет видимых точек
-            drawAxes();
-            return;
-        }
-        if (!state.autoScaleY) {
-            // Допустим, зафиксируем 0..100, если не хотим авто
-            minY = 0;
-            maxY = 100;
+        // Fixed 0..100 range unless auto scaling; the scan runs only when its result is used
+        let minY = 0;
+        let maxY = 100;
+        if (state.autoScaleY) {
+            minY = Infinity;
+            maxY = -Infinity;
+            for (let i = startIndex; i <= endIndex; i++) {
+                const p = state.data[i];
+                if (p.price < minY)
+                    minY = p.price;
+                if (p.price > maxY)
+                    maxY = p.price;
+            }
         }
         const rangeY = maxY - minY || 1;
-        const marginTop = 20;
-        const marginBottom = state.showTimeAxis ? 20 : 0;
+        const marginTop = CHART_MARGIN_TOP;
+        const marginBottom = state.showTimeAxis ? CHART_MARGIN_BOTTOM : 0;
         const chartHeight = state.height - marginTop - marginBottom;
         function toScreenX(i) {
             return i * state.scaleX + state.offsetX;
@@ -77,7 +75,7 @@ export function createChartCanvas(config) {
         function toScreenY(price) {
             return marginTop + chartHeight - ((price - minY) / rangeY) * chartHeight;
         }
-        // Рисуем линию
+        // Draw the line
         ctx.beginPath();
         let first = true;
         for (let i = startIndex; i <= endIndex; i++) {
@@ -92,10 +90,10 @@ export function createChartCanvas(config) {
                 ctx.lineTo(x, y);
             }
         }
-        ctx.strokeStyle = "rgb(0,180,0)";
+        ctx.strokeStyle = CHART_LINE_COLOR;
         ctx.lineWidth = 2;
         ctx.stroke();
-        // Рисуем оси и подписи
+        // Draw axes and labels
         drawAxes(minY, maxY, startIndex, endIndex, toScreenX, toScreenY);
     }
     function drawAxes(minY, maxY, startIndex, endIndex, toX, toY) {
@@ -103,13 +101,13 @@ export function createChartCanvas(config) {
         ctx.strokeStyle = "rgba(0,0,0,0.4)";
         ctx.fillStyle = "rgba(0,0,0,0.6)";
         ctx.font = "12px sans-serif";
-        // Ось X (внизу)
+        // X axis (bottom)
         if (state.showTimeAxis) {
             ctx.beginPath();
             ctx.moveTo(0, state.height - 0.5);
             ctx.lineTo(state.width, state.height - 0.5);
             ctx.stroke();
-            // Подписи времени
+            // Time labels
             if (startIndex != null && endIndex != null && toX) {
                 const step = Math.max(1, Math.floor((endIndex - startIndex) / 5));
                 for (let i = startIndex; i <= endIndex; i += step) {
@@ -126,7 +124,7 @@ export function createChartCanvas(config) {
                 }
             }
         }
-        // Ось Y (слева)
+        // Y axis (left)
         if (state.showPriceAxis) {
             ctx.beginPath();
             ctx.moveTo(0.5, 0);
@@ -135,12 +133,12 @@ export function createChartCanvas(config) {
             if (minY !== undefined && maxY !== undefined && toY) {
                 const yMin = toY(minY);
                 const yMax = toY(maxY);
-                ctx.fillText(String(minY.toFixed(2)), 5, yMin - 2);
+                ctx.fillText(minY.toFixed(2), 5, yMin - 2);
                 ctx.beginPath();
                 ctx.moveTo(0, yMin);
                 ctx.lineTo(5, yMin);
                 ctx.stroke();
-                ctx.fillText(String(maxY.toFixed(2)), 5, yMax - 2);
+                ctx.fillText(maxY.toFixed(2), 5, yMax - 2);
                 ctx.beginPath();
                 ctx.moveTo(0, yMax);
                 ctx.lineTo(5, yMax);
@@ -152,20 +150,33 @@ export function createChartCanvas(config) {
     let animationFrameId = null;
     let destroyed = false;
     let docListenersActive = false;
+    // temp-detach (portal, node move) is not a reason to self-destroy: wait for reconnect
+    // with a grace period; a real unmount without destroy() is handled by timeout auto-cleanup
+    const DETACH_DESTROY_MS = 10_000;
+    let disconnectedSince = null;
     function animate() {
         if (destroyed)
             return;
         if (!canvas.isConnected) {
-            destroy();
+            disconnectedSince ??= performance.now();
+            if (performance.now() - disconnectedSince > DETACH_DESTROY_MS) {
+                destroy();
+                return;
+            }
+            animationFrameId = requestAnimationFrame(animate);
             return;
         }
+        if (disconnectedSince != null) {
+            disconnectedSince = null;
+            state.needsRender = true; // force redraw after reconnect
+        }
         if (state.needsRender) {
             draw();
         }
         animationFrameId = requestAnimationFrame(animate);
     }
     animate();
-    // ~~~ Методы API ~~~
+    // ~~~ API methods ~~~
     function appendData(points) {
         if (!Array.isArray(points))
             points = [points];
@@ -182,15 +193,15 @@ export function createChartCanvas(config) {
         state.needsRender = true;
     }
     function zoomX(factor, centerPx = state.width / 2) {
-        // Определяем, какой индекс сейчас под centerPx
+        // Determine which index is currently under centerPx
         const i = (centerPx - state.offsetX) / state.scaleX;
         state.scaleX *= factor;
-        // Ограничиваем масштаб
+        // Clamp scale
         if (state.scaleX < 0.1)
             state.scaleX = 0.1;
         if (state.scaleX > 2000)
             state.scaleX = 2000;
-        // Сдвигаем offsetX так, чтобы та же точка осталась под курсором
+        // Shift offsetX so the same point stays under the cursor
         state.offsetX = centerPx - i * state.scaleX;
         state.needsRender = true;
     }
@@ -226,11 +237,11 @@ export function createChartCanvas(config) {
         state.needsRender = true;
     }
     function drawManually() {
-        // Принудительный вызов отрисовки
+        // Force render call
         state.needsRender = true;
         draw();
     }
-    // ~~~ События мыши ~~~
+    // ~~~ Mouse events ~~~
     const addDocListeners = () => {
         if (docListenersActive)
             return;
@@ -254,18 +265,18 @@ export function createChartCanvas(config) {
         if (state.isDragging) {
             const dx = e.clientX - state.lastDragX;
             state.lastDragX = e.clientX;
-            scrollX(dx); // тянем график
+            scrollX(dx); // drag the chart
         }
     };
     const onMouseUp = () => {
         state.isDragging = false;
         removeDocListeners();
     };
-    // ===> Привязка зума к скроллу мышки <===
+    // ===> Bind zoom to mouse wheel <===
     const onWheel = (e) => {
         e.preventDefault();
-        // e.deltaY > 0 => крутим вниз => factor < 1 => отдаляем
-        // e.deltaY < 0 => крутим вверх => factor > 1 => приближаем
+        // e.deltaY > 0 => wheel down => factor < 1 => zoom out
+        // e.deltaY < 0 => wheel up => factor > 1 => zoom in
         const factor = e.deltaY < 0 ? 1.1 : 0.9;
         const rect = canvas.getBoundingClientRect();
         const mouseX = e.clientX - rect.left;
@@ -288,7 +299,7 @@ export function createChartCanvas(config) {
             canvas.parentElement.removeChild(canvas);
         }
     }
-    // Собираем и возвращаем API
+    // Build and return API
     return {
         appendData,
         clearData,

package/lib/common/src/myChart/1/myChartTest.js

@@ -7,7 +7,7 @@ export function ChartDemo() {
     useEffect(() => {
         if (!containerRef.current)
             return;
-        // Создаём график
+        // Create chart
         const chart = createChartCanvas({
             container: containerRef.current,
             width: 600,
@@ -17,7 +17,7 @@ export function ChartDemo() {
             showPriceAxis: true,
         });
         chartRef.current = chart;
-        // Добавим тестовые данные
+        // Add test data
         const now = Date.now();
         const demoData = [];
         for (let i = 0; i < 50; i++) {
@@ -28,7 +28,7 @@ export function ChartDemo() {
         }
         chart.appendData(demoData);
         chart.jumpToEnd();
-        // Пример «потокового» добавления новых точек
+        // Example of streaming new points
         const timer = setInterval(() => {
             const last = demoData[demoData.length - 1];
             const newPoint = {
@@ -39,7 +39,11 @@ export function ChartDemo() {
             chart.appendData(newPoint);
             // optional: chart.jumpToEnd();
         }, 2000);
-        return () => clearInterval(timer);
+        return () => {
+            clearInterval(timer);
+            chart.destroy();
+            chartRef.current = null;
+        };
     }, []);
     return (_jsxs("div", { style: { padding: 20 }, children: [_jsx("h2", { children: "Chart with Wheel Zoom" }), _jsx("div", { ref: containerRef, style: { border: "1px solid black", width: 620, height: 320 } }), _jsxs("div", { style: { marginTop: 10 }, children: [_jsx("button", { onClick: () => chartRef.current?.zoomX(1.1), children: "Zoom In" }), _jsx("button", { onClick: () => chartRef.current?.zoomX(0.9), children: "Zoom Out" }), _jsx("button", { onClick: () => chartRef.current?.scrollX(50), children: "Scroll Left" }), _jsx("button", { onClick: () => chartRef.current?.scrollX(-50), children: "Scroll Right" }), _jsx("button", { onClick: () => chartRef.current?.jumpToStart(), children: "Start" }), _jsx("button", { onClick: () => chartRef.current?.jumpToEnd(), children: "End" })] })] }));
 }

package/lib/common/src/myChart/chartEngine/chartEngineReact.d.ts

@@ -1,13 +1,13 @@
 /*************************************************************
  * chartEngine.tsx
- * Обновлённый пример, где:
- *  - Ширина панелей = 100% от Canvas
- *  - Высота панелей задаётся в процентах (heightPct)
- *  - Последняя панель всегда "дотягивает" до 100%
+ * Updated example where:
+ *  - Panel width = 100% of Canvas
+ *  - Panel height is defined in percent (heightPct)
+ *  - The last panel always fills up to 100%
  *************************************************************/
 import React from 'react';
 /**
- * Базовые типы данных
+ * Base data types
  */
 export interface DataPoint {
     x: number;
@@ -48,7 +48,7 @@ export interface CreateDataSetParams {
     chunkSize?: number;
 }
 /**
- * Фабрика DataSet
+ * DataSet factory
  */
 export declare function createDataSet(params: CreateDataSetParams): DataSet;
 /**
@@ -65,7 +65,7 @@ export interface DataModel {
 export declare function createDataModel(): DataModel;
 /**
  * PanelManager
- * Вместо pixel-высоты, используем heightPct (процент).
+ * Use heightPct (percent) instead of pixel height.
  */
 export interface Panel {
     id: string;
@@ -82,22 +82,23 @@ export interface Panel {
     autoFocusY: boolean;
     resizable?: boolean;
 }
+export interface PanelConfig {
+    id: string;
+    /** Height percent: 0..100; the last panel fills the remainder */
+    heightPct?: number;
+    dataSets: DataSet[];
+    autoFocusY?: boolean;
+    resizable?: boolean;
+}
 export interface PanelManager {
     panels: Panel[];
-    addPanel(config: {
-        id: string;
-        /** Процент высоты: 0..100, последняя панель добирает остаток */
-        heightPct?: number;
-        dataSets: DataSet[];
-        autoFocusY?: boolean;
-        resizable?: boolean;
-    }): void;
+    addPanel(config: PanelConfig): void;
     layoutPanels(containerWidth: number, containerHeight: number): void;
     resizePanel(panelId: string, deltaPx: number, containerHeight: number): void;
 }
 export declare function createPanelManager(): PanelManager;
 /**
- * Renderer (ось Y справа, LOD для линий)
+ * Renderer (right Y axis, LOD for lines)
  */
 export interface Renderer {
     drawPanel(ctx: CanvasRenderingContext2D, panel: Panel, transform: Transform, globalTimeRange: {
@@ -138,27 +139,23 @@ export interface ChartEngine {
     destroy(): void;
     attachToContainer(container: HTMLElement): void;
     createDataSet(params: CreateDataSetParams): DataSet;
-    addPanel(config: {
-        id: string;
-        dataSets: DataSet[];
-        heightPct?: number;
-        autoFocusY?: boolean;
-        resizable?: boolean;
-    }): void;
+    addPanel(config: PanelConfig): void;
     canvas: HTMLCanvasElement;
     dataModel: DataModel;
     panelManager: PanelManager;
     renderer: Renderer;
 }
 /**
- * Фабричная функция движка
+ * Engine factory function
  */
 export declare function createChartEngine(canvas: HTMLCanvasElement): ChartEngine;
 /**
- * Пример генерации данных
+ * Data generation example
  */
 export declare function generateIncrementalData(startX: number, count: number, startY: number, maxDelta: number): DataPoint[];
 /**
- * Пример React-компонента MyChart
+ * MyChart React component example
  */
-export declare const MyChartEngine: React.FC;
+export declare const MyChartEngine: React.FC<{
+    style?: React.CSSProperties;
+}>;