wenay-react2 1.0.1

package/lib/common/src/menu/menuR.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { tMenuReact } from "./menu";
+export declare function GetMenuR(): {
+    /**
+     * Управление глобальной переменной `bb`, предотвращающей множественное
+     * открытие меню.
+     */
+    bb(b?: boolean): boolean | undefined;
+    MenuR: ({ children, other, statusOn, onUnClick, zIndex, className }: {
+        children: React.ReactElement;
+        zIndex?: number;
+        other?: () => (tMenuReact)[];
+        statusOn?: boolean;
+        onUnClick?: (e: boolean) => void;
+        className?: (active?: boolean) => string;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/lib/common/src/menu/menuR.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { MenuBase } from "./menu";
+import { DivOutsideClick } from "../hooks";
+// Функция-обёртка для создания компонента MenuR и управления глобальной переменной `bb`
+export function GetMenuR() {
+    let bb = false; // Глобальная переменная, предотвращающая множественное открытие меню (флаг активности)
+    // Основной компонент MenuR
+    function MenuR({ children, other = () => [], statusOn = true, onUnClick, zIndex, className }) {
+        const data = { x: 0, y: 0 }; // Текущая позиция элемента, где происходит взаимодействие
+        const [show, setShow] = React.useState({ status: false });
+        useEffect(() => {
+            return () => {
+                bb = false; // Сбрасываем флаг активности при размонтировании компонента
+            };
+        }, []);
+        const timeEvent = useRef(Date.now()); // Временная метка для отслеживания двойных кликов
+        let x = 0, y = 0; // Текущие координаты касания
+        const touchTime = useRef(null); // Время начала касания
+        return (_jsxs("div", { className: "maxSize", style: { position: "relative" }, 
+            // Для отключения стандартного контекстного меню
+            onContextMenu: e => {
+                if (statusOn) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }, 
+            // Определение позиции взаимодействия для текущего элемента (например, контейнера)
+            ref: (e) => {
+                if (e) {
+                    const r = e.getBoundingClientRect();
+                    data.x = r.x;
+                    data.y = r.y;
+                }
+            }, 
+            // Запоминаем начальные координаты касания
+            onTouchStart: (e) => {
+                if (x == 0)
+                    x = e.touches[0].screenX;
+                if (y == 0)
+                    y = e.touches[0].screenY;
+                touchTime.current = Date.now();
+            }, 
+            // Проверка на значительное смещение (чтобы не показывать меню при скролле)
+            onTouchMove: (e) => {
+                let x2 = e.touches[0].screenX;
+                let y2 = e.touches[0].screenY;
+                let pX = e.touches[0].pageX;
+                let pY = e.touches[0].pageY;
+                if ((Math.abs(x2 - x) / pX > 0.05) || (Math.abs(y2 - y) / pY > 0.05)) {
+                    touchTime.current = null; // Если смещение слишком большое, отключаем показ меню
+                }
+            }, 
+            // Определяем долгое касание для вызова контекстного меню
+            onTouchEnd: (e) => {
+                if (statusOn) {
+                    if (touchTime.current && Date.now() - touchTime.current > 300) {
+                        // Если прошло больше 300 мс — считываем как долгое нажатие
+                        touchTime.current = null;
+                        x = y = 0;
+                        if (bb)
+                            return; // Если меню уже активно, выходим
+                        bb = true;
+                        setShow({
+                            status: true,
+                            // Устанавливаем координаты меню относительно элемента
+                            coordinate: {
+                                x: e.changedTouches[0].clientX - data.x,
+                                y: e.changedTouches[0].clientY - data.y
+                            }
+                        });
+                    }
+                }
+            }, 
+            // Отслеживаем двойной клик
+            onDoubleClick: (event) => {
+                timeEvent.current = Date.now();
+            }, 
+            // Обрабатываем клик правой кнопкой мыши или двойной клик
+            onMouseUp: (event) => {
+                if (statusOn) {
+                    if (event.button == 2 || Date.now() - timeEvent.current < 300) {
+                        if (bb)
+                            return; // Если меню уже активно, ничего не делаем
+                        bb = true;
+                        setShow({ status: true, coordinate: { x: event.clientX - data.x, y: event.clientY - data.y } });
+                    }
+                }
+            }, children: [children /* Дочерний элемент, внутри которого отслеживаются события */, show.status && statusOn && (
+                // Показываем контекстное меню
+                _jsx(DivOutsideClick, { outsideClick: () => {
+                        onUnClick?.(false); // Вызов обработчика при закрытии меню
+                        if (!bb)
+                            return;
+                        bb = false; // Меню больше не активно
+                        setShow({ status: false }); // Скрываем меню
+                    }, children: _jsx(MenuBase, { className: className, data: [
+                            ...(show.plusMenu ?? []),
+                            ...other().filter(e => e)
+                        ], coordinate: { ...show.coordinate }, zIndex: zIndex }) }))] }));
+    }
+    return {
+        /**
+         * Управление глобальной переменной `bb`, предотвращающей множественное
+         * открытие меню.
+         */
+        bb(b) {
+            if (b != undefined) {
+                bb = b;
+            }
+            else
+                return bb;
+        },
+        MenuR // Возвращаем созданный компонент
+    };
+}

package/lib/common/src/myChart/1/myChart.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Точка на графике: время (time) и цена (price).
+ */
+export interface IChartPoint {
+    time: number;
+    price: number;
+}
+/**
+ * Настройки канваса.
+ */
+export interface IChartConfig {
+    container: HTMLElement;
+    width?: number;
+    height?: number;
+    autoScaleY?: boolean;
+    showTimeAxis?: boolean;
+    showPriceAxis?: boolean;
+}
+/**
+ * Интерфейс объекта, который возвращает createChartCanvas:
+ * методы управления зумом, прокруткой и т.д.
+ */
+export interface IChartCanvas {
+    appendData(points: IChartPoint | IChartPoint[]): void;
+    clearData(): void;
+    scrollX(deltaPx: number): void;
+    zoomX(factor: number, centerPx?: number): void;
+    jumpToStart(): void;
+    jumpToEnd(): void;
+    jumpToIndex(i: number): void;
+    setAutoScaleY(enabled: boolean): void;
+    setShowTimeAxis(enabled: boolean): void;
+    setShowPriceAxis(enabled: boolean): void;
+    draw(): void;
+    destroy(): void;
+}
+/**
+ * Создаём функциональный канвас с возможностью зума колёсиком.
+ */
+export declare function createChartCanvas(config: IChartConfig): IChartCanvas;

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

@@ -0,0 +1,306 @@
+/**
+ * Создаём функциональный канвас с возможностью зума колёсиком.
+ */
+export function createChartCanvas(config) {
+    // Создаём <canvas> и вставляем в container
+    const canvas = document.createElement("canvas");
+    config.container.appendChild(canvas);
+    // Состояние (state) в замыкании
+    let state = {
+        width: (config.width ?? config.container.offsetWidth) || 800,
+        height: (config.height ?? config.container.offsetHeight) || 400,
+        data: [],
+        offsetX: 0,
+        scaleX: 5, // пикселей на «шаг» (индекс точки)
+        autoScaleY: config.autoScaleY ?? true,
+        showTimeAxis: config.showTimeAxis ?? true,
+        showPriceAxis: config.showPriceAxis ?? true,
+        needsRender: true,
+        isDragging: false,
+        lastDragX: 0,
+    };
+    const ctx = canvas.getContext("2d");
+    function resizeCanvas() {
+        state.width = (config.width ?? config.container.offsetWidth) || 800;
+        state.height = (config.height ?? config.container.offsetHeight) || 400;
+        canvas.width = state.width;
+        canvas.height = state.height;
+        state.needsRender = true;
+    }
+    resizeCanvas();
+    // ~~~ Отрисовка ~~~
+    function draw() {
+        if (!state.needsRender)
+            return;
+        state.needsRender = false;
+        ctx.clearRect(0, 0, state.width, state.height);
+        if (state.data.length === 0) {
+            drawAxes();
+            return;
+        }
+        // Рассчитываем, какие индексы данных видны на экране
+        const minIndex = Math.floor(-state.offsetX / state.scaleX);
+        const maxIndex = Math.ceil((state.width - state.offsetX) / state.scaleX);
+        const startIndex = Math.max(0, minIndex);
+        const endIndex = Math.min(state.data.length - 1, maxIndex);
+        if (startIndex > endIndex) {
+            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;
+        }
+        const rangeY = maxY - minY || 1;
+        const marginTop = 20;
+        const marginBottom = state.showTimeAxis ? 20 : 0;
+        const chartHeight = state.height - marginTop - marginBottom;
+        function toScreenX(i) {
+            return i * state.scaleX + state.offsetX;
+        }
+        function toScreenY(price) {
+            return marginTop + chartHeight - ((price - minY) / rangeY) * chartHeight;
+        }
+        // Рисуем линию
+        ctx.beginPath();
+        let first = true;
+        for (let i = startIndex; i <= endIndex; i++) {
+            const p = state.data[i];
+            const x = toScreenX(i);
+            const y = toScreenY(p.price);
+            if (first) {
+                ctx.moveTo(x, y);
+                first = false;
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+        }
+        ctx.strokeStyle = "rgb(0,180,0)";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        // Рисуем оси и подписи
+        drawAxes(minY, maxY, startIndex, endIndex, toScreenX, toScreenY);
+    }
+    function drawAxes(minY, maxY, startIndex, endIndex, toX, toY) {
+        ctx.save();
+        ctx.strokeStyle = "rgba(0,0,0,0.4)";
+        ctx.fillStyle = "rgba(0,0,0,0.6)";
+        ctx.font = "12px sans-serif";
+        // Ось X (внизу)
+        if (state.showTimeAxis) {
+            ctx.beginPath();
+            ctx.moveTo(0, state.height - 0.5);
+            ctx.lineTo(state.width, state.height - 0.5);
+            ctx.stroke();
+            // Подписи времени
+            if (startIndex != null && endIndex != null && toX) {
+                const step = Math.max(1, Math.floor((endIndex - startIndex) / 5));
+                for (let i = startIndex; i <= endIndex; i += step) {
+                    const p = state.data[i];
+                    const x = toX(i);
+                    if (x < 0 || x > state.width)
+                        continue;
+                    const dateStr = new Date(p.time).toLocaleTimeString();
+                    ctx.fillText(dateStr, x, state.height - 5);
+                    ctx.beginPath();
+                    ctx.moveTo(x, state.height - 15);
+                    ctx.lineTo(x, state.height);
+                    ctx.stroke();
+                }
+            }
+        }
+        // Ось Y (слева)
+        if (state.showPriceAxis) {
+            ctx.beginPath();
+            ctx.moveTo(0.5, 0);
+            ctx.lineTo(0.5, state.height);
+            ctx.stroke();
+            if (minY !== undefined && maxY !== undefined && toY) {
+                const yMin = toY(minY);
+                const yMax = toY(maxY);
+                ctx.fillText(String(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.beginPath();
+                ctx.moveTo(0, yMax);
+                ctx.lineTo(5, yMax);
+                ctx.stroke();
+            }
+        }
+        ctx.restore();
+    }
+    let animationFrameId = null;
+    let destroyed = false;
+    let docListenersActive = false;
+    function animate() {
+        if (destroyed)
+            return;
+        if (!canvas.isConnected) {
+            destroy();
+            return;
+        }
+        if (state.needsRender) {
+            draw();
+        }
+        animationFrameId = requestAnimationFrame(animate);
+    }
+    animate();
+    // ~~~ Методы API ~~~
+    function appendData(points) {
+        if (!Array.isArray(points))
+            points = [points];
+        state.data.push(...points);
+        state.needsRender = true;
+    }
+    function clearData() {
+        state.data = [];
+        state.offsetX = 0;
+        state.needsRender = true;
+    }
+    function scrollX(deltaPx) {
+        state.offsetX += deltaPx;
+        state.needsRender = true;
+    }
+    function zoomX(factor, centerPx = state.width / 2) {
+        // Определяем, какой индекс сейчас под centerPx
+        const i = (centerPx - state.offsetX) / state.scaleX;
+        state.scaleX *= factor;
+        // Ограничиваем масштаб
+        if (state.scaleX < 0.1)
+            state.scaleX = 0.1;
+        if (state.scaleX > 2000)
+            state.scaleX = 2000;
+        // Сдвигаем offsetX так, чтобы та же точка осталась под курсором
+        state.offsetX = centerPx - i * state.scaleX;
+        state.needsRender = true;
+    }
+    function jumpToStart() {
+        state.offsetX = 0;
+        state.needsRender = true;
+    }
+    function jumpToEnd() {
+        const i = state.data.length - 1;
+        if (i < 0)
+            return;
+        const desiredX = state.width * 0.9;
+        state.offsetX = desiredX - i * state.scaleX;
+        state.needsRender = true;
+    }
+    function jumpToIndex(i) {
+        if (i < 0 || i >= state.data.length)
+            return;
+        const centerPx = state.width / 2;
+        state.offsetX = centerPx - i * state.scaleX;
+        state.needsRender = true;
+    }
+    function setAutoScaleY(enabled) {
+        state.autoScaleY = enabled;
+        state.needsRender = true;
+    }
+    function setShowTimeAxis(enabled) {
+        state.showTimeAxis = enabled;
+        state.needsRender = true;
+    }
+    function setShowPriceAxis(enabled) {
+        state.showPriceAxis = enabled;
+        state.needsRender = true;
+    }
+    function drawManually() {
+        // Принудительный вызов отрисовки
+        state.needsRender = true;
+        draw();
+    }
+    // ~~~ События мыши ~~~
+    const addDocListeners = () => {
+        if (docListenersActive)
+            return;
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        docListenersActive = true;
+    };
+    const removeDocListeners = () => {
+        if (!docListenersActive)
+            return;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        docListenersActive = false;
+    };
+    const onMouseDown = (e) => {
+        state.isDragging = true;
+        state.lastDragX = e.clientX;
+        addDocListeners();
+    };
+    const onMouseMove = (e) => {
+        if (state.isDragging) {
+            const dx = e.clientX - state.lastDragX;
+            state.lastDragX = e.clientX;
+            scrollX(dx); // тянем график
+        }
+    };
+    const onMouseUp = () => {
+        state.isDragging = false;
+        removeDocListeners();
+    };
+    // ===> Привязка зума к скроллу мышки <===
+    const onWheel = (e) => {
+        e.preventDefault();
+        // e.deltaY > 0 => крутим вниз => factor < 1 => отдаляем
+        // e.deltaY < 0 => крутим вверх => factor > 1 => приближаем
+        const factor = e.deltaY < 0 ? 1.1 : 0.9;
+        const rect = canvas.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        zoomX(factor, mouseX);
+    };
+    canvas.addEventListener("mousedown", onMouseDown);
+    canvas.addEventListener("wheel", onWheel, { passive: false });
+    function destroy() {
+        if (destroyed)
+            return;
+        destroyed = true;
+        canvas.removeEventListener("mousedown", onMouseDown);
+        removeDocListeners();
+        canvas.removeEventListener("wheel", onWheel);
+        if (animationFrameId !== null) {
+            cancelAnimationFrame(animationFrameId);
+            animationFrameId = null;
+        }
+        if (canvas.parentElement) {
+            canvas.parentElement.removeChild(canvas);
+        }
+    }
+    // Собираем и возвращаем API
+    return {
+        appendData,
+        clearData,
+        scrollX,
+        zoomX,
+        jumpToStart,
+        jumpToEnd,
+        jumpToIndex,
+        setAutoScaleY,
+        setShowTimeAxis,
+        setShowPriceAxis,
+        draw: drawManually,
+        destroy,
+    };
+}

package/lib/common/src/myChart/1/myChartTest.d.ts

@@ -0,0 +1 @@
+export declare function ChartDemo(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { createChartCanvas } from "./myChart";
+export function ChartDemo() {
+    const chartRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        // Создаём график
+        const chart = createChartCanvas({
+            container: containerRef.current,
+            width: 600,
+            height: 300,
+            autoScaleY: true,
+            showTimeAxis: true,
+            showPriceAxis: true,
+        });
+        chartRef.current = chart;
+        // Добавим тестовые данные
+        const now = Date.now();
+        const demoData = [];
+        for (let i = 0; i < 50; i++) {
+            demoData.push({
+                time: now + i * 1000,
+                price: 100 + Math.sin(i / 5) * 10,
+            });
+        }
+        chart.appendData(demoData);
+        chart.jumpToEnd();
+        // Пример «потокового» добавления новых точек
+        const timer = setInterval(() => {
+            const last = demoData[demoData.length - 1];
+            const newPoint = {
+                time: last.time + 1000,
+                price: last.price + (Math.random() - 0.5) * 2,
+            };
+            demoData.push(newPoint);
+            chart.appendData(newPoint);
+            // optional: chart.jumpToEnd();
+        }, 2000);
+        return () => clearInterval(timer);
+    }, []);
+    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

@@ -0,0 +1,164 @@
+/*************************************************************
+ * chartEngine.tsx
+ * Обновлённый пример, где:
+ *  - Ширина панелей = 100% от Canvas
+ *  - Высота панелей задаётся в процентах (heightPct)
+ *  - Последняя панель всегда "дотягивает" до 100%
+ *************************************************************/
+import React from 'react';
+/**
+ * Базовые типы данных
+ */
+export interface DataPoint {
+    x: number;
+    y: number;
+}
+export type ChartType = 'line' | 'bar';
+export interface DataSetStyle {
+    strokeColor?: string;
+    fillColor?: string;
+    barColor?: string;
+    lineWidth?: number;
+    gradientFill?: boolean;
+}
+export interface MinMaxChunk {
+    xStart: number;
+    xEnd: number;
+    minY: number;
+    maxY: number;
+}
+export interface DataSet {
+    id: string;
+    type: ChartType;
+    data: DataPoint[];
+    style: DataSetStyle;
+    chunkSize: number;
+    minMaxChunks: MinMaxChunk[];
+    getMinMaxInRange(rangeX1: number, rangeX2: number): {
+        minY: number;
+        maxY: number;
+    };
+    addData(newPoints: DataPoint | DataPoint[]): void;
+}
+export interface CreateDataSetParams {
+    id: string;
+    type?: ChartType;
+    data?: DataPoint[];
+    style?: DataSetStyle;
+    chunkSize?: number;
+}
+/**
+ * Фабрика DataSet
+ */
+export declare function createDataSet(params: CreateDataSetParams): DataSet;
+/**
+ * DataModel
+ */
+export interface DataModel {
+    addDataSet(params: CreateDataSetParams): DataSet;
+    getAllDataSets(): DataSet[];
+    getGlobalMinMaxY(x1: number, x2: number, filterFn?: (ds: DataSet) => boolean): {
+        minY: number;
+        maxY: number;
+    };
+}
+export declare function createDataModel(): DataModel;
+/**
+ * PanelManager
+ * Вместо pixel-высоты, используем heightPct (процент).
+ */
+export interface Panel {
+    id: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    heightPct: number;
+    dataSets: DataSet[];
+    verticalRange: {
+        minY: number;
+        maxY: number;
+    };
+    autoFocusY: boolean;
+    resizable?: boolean;
+}
+export interface PanelManager {
+    panels: Panel[];
+    addPanel(config: {
+        id: string;
+        /** Процент высоты: 0..100, последняя панель добирает остаток */
+        heightPct?: number;
+        dataSets: DataSet[];
+        autoFocusY?: boolean;
+        resizable?: boolean;
+    }): void;
+    layoutPanels(containerWidth: number, containerHeight: number): void;
+    resizePanel(panelId: string, deltaPx: number, containerHeight: number): void;
+}
+export declare function createPanelManager(): PanelManager;
+/**
+ * Renderer (ось Y справа, LOD для линий)
+ */
+export interface Renderer {
+    drawPanel(ctx: CanvasRenderingContext2D, panel: Panel, transform: Transform, globalTimeRange: {
+        xMin: number;
+        xMax: number;
+    }, crosshair: {
+        x: number;
+        y: number;
+    } | null, isYRightAxis: boolean): void;
+}
+export interface Transform {
+    offsetX: number;
+    scaleX: number;
+    offsetY?: number;
+    scaleY?: number;
+}
+export declare function createRenderer(): Renderer;
+/**
+ * Interaction
+ */
+export interface Interaction {
+    initEvents(canvas: HTMLCanvasElement): void;
+    getCrosshairPos(): {
+        x: number;
+        y: number;
+    } | null;
+    destroy(): void;
+}
+export declare function createInteraction(canvas: HTMLCanvasElement, getTransform: () => Transform, setTransform: (t: Transform) => void, getPanels: () => Panel[], onTransformChanged: () => void, onToggleAutoFocusY: (panel: Panel) => void, panelManager: PanelManager, getContainerSize: () => {
+    width: number;
+    height: number;
+}): Interaction;
+/**
+ * ChartEngine
+ */
+export interface ChartEngine {
+    init(): void;
+    destroy(): void;
+    attachToContainer(container: HTMLElement): void;
+    createDataSet(params: CreateDataSetParams): DataSet;
+    addPanel(config: {
+        id: string;
+        dataSets: DataSet[];
+        heightPct?: number;
+        autoFocusY?: boolean;
+        resizable?: boolean;
+    }): void;
+    canvas: HTMLCanvasElement;
+    dataModel: DataModel;
+    panelManager: PanelManager;
+    renderer: Renderer;
+}
+/**
+ * Фабричная функция движка
+ */
+export declare function createChartEngine(canvas: HTMLCanvasElement): ChartEngine;
+/**
+ * Пример генерации данных
+ */
+export declare function generateIncrementalData(startX: number, count: number, startY: number, maxDelta: number): DataPoint[];
+/**
+ * Пример React-компонента MyChart
+ */
+export declare const MyChartEngine: React.FC;