init

src/App.tsx

@@ -4,108 +4,186 @@ import './App.css';
 
 
 function App() {
+    const yMax = 490;
+    const yMin = 10;
+
+    const xMin = 10;
+    const xMax = 990;
+
+    // let resData: number[] = [30, 160, 30, 160, 30, 160, 30, 160, 30, 160];
+    let resData: number[] = [50, 16, 10, 160, 90, 160, 30, 160, 30, 160];
+    let fullState = true;
 
     const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
 
+
     useEffect(() => {
 
+
         setCanvas(refCanvas.current!);
     }, []);
 
     const refCanvas = useRef<HTMLCanvasElement>(null);
 
-
     const ctx: CanvasRenderingContext2D = canvas?.getContext('2d')!;
-    useEffect(() => {
 
+    useEffect(() => {
+        resData = resData.map((value) => value + (yMax / 2))
 
         if (ctx && canvas) {
-
+            printCoords();
-            ctx.clearRect(0, 0, canvas?.width, canvas?.height)
+            printDots(resData);
-            // ctx.fillRect(1, 2, 50, 50);
+            printLines(resData);
-            ctx.fillStyle = "black"; // Задаём чёрный цвет для линий
-            ctx.lineWidth = 2.0; // Ширина линии
-
-            ctx.beginPath(); // Запускает путь
-            ctx.moveTo(100, 10); // Указываем начальный путь
-            ctx.lineTo(100, 400); // Перемешаем указатель
-            ctx.lineTo(800, 400); // Ещё раз перемешаем указатель
-            ctx.stroke(); // Делаем контур
-
-            // ctx.strokeRect(150, 200, 300, 200)
-
-            // Цвет для рисования
-            ctx.fillStyle = "black";
-            // Цикл для отображения значений по Y
-            for (let i = 0; i < 6; i++) {
-                ctx.fillText((5 - i) * 20 + "", 4, i * 100 + 60);
-                ctx.beginPath();
-                ctx.moveTo(25, i * 80 + 60);
-                ctx.lineTo(30, i * 80 + 60);
-                ctx.stroke();
-            }
-            //
-            // Массив с меткам месяцев
-            let labels = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL",];
-
-            // // Выводим метки
-            for (let i = 0; i < labels.length; i++) {
-                ctx.fillText(labels[i], 50 + i * 100, 475);
-            }
-
-            // Назначаем зелёный цвет для графика
-            ctx.fillStyle = "green";
-            // Цикл для от рисовки графиков
-            // for (var i = 0; i < data.length; i++) {
-            //     var dp = data[i];
-            //     ctx.fillRect(40 + i * 100, 460 - dp * 5, 50, dp * 5);
-            // }
-            print(resData);
         }
 
     }, [canvas]);
 
-    const resData: number[] = [20, 30, 40, 50, 90, 10, 6, 44, 90, 10];
+     function printCoords() {
-
+        ctx.fillStyle = "black"; // Задаём чёрный цвет для линий
-
-
-    const print = (array: number[]) => {
-
-        const countArrValue = array.length;
-        const gap = 800 / countArrValue;
-
-        ctx.fillStyle = "red"; // Задаём чёрный цвет для линий
         ctx.lineWidth = 2.0; // Ширина линии
 
         ctx.beginPath(); // Запускает путь
+        ctx.moveTo(xMin, yMin);
+        ctx.lineTo(xMin, yMax);
+        ctx.lineTo(xMax, yMax);
+        ctx.stroke(); // Делаем контур
+        // ctx.closePath()
+
+
+    }
+
+    function printDots(array: number[]) {
+
+
+        const countArrValue = array.length;
+        const gap = 800 / countArrValue;
+        let x = xMin;
+
+        ctx.lineWidth = 2.0; // Ширина линии
+        ctx.strokeStyle = 'blue';
+
+        for (let i = 0; i < countArrValue; i++) {
 
-        for (let i = 0; i <= 0 ; i++) {
             let value = array[i];
-            if (i == 0) {
+            ctx.beginPath();
-                ctx.moveTo(200, 400);
+
-                // ctx.lineTo(30, 460 - value);
+            ctx.arc(x += gap, value, 5, 0, 2 * Math.PI, false);
-                ctx.arc(200, 350 - value, 5, 0, 2 * Math.PI, false);
+            ctx.fill()
-                ctx.fillStyle = 'black';
+            ctx.stroke();
-                ctx.fill();
+            // ctx.closePath()
+        }
+    }
+
+    function sleep(ms: number) {
+        ms += new Date().getTime();
+        while (new Date().getTime() < ms) {
+        }
+    }
+
+    function printLines(array: number[]) {
+
+        const countArrValue = array.length;
+        const gap = 800 / countArrValue;
+        let x = xMin + gap;
+
+        ctx.lineWidth = 2.0; // Ширина линии
+        ctx.strokeStyle = 'black';
+
+        ctx.beginPath();
+        for (let i = 0; i < countArrValue; i++) {
+            let value = array[i];
+
+            if (i === 0) {
+                ctx.moveTo(x, value);
+                continue;
+            }
+
+            ctx.lineTo(x += gap, value);
+        }
+        ctx.stroke();
+        // ctx.closePath()
+    }
+
+    function clickHandle() {
+        fullState = !fullState;
+        // 20
+        // 30
+        //
+        //
+        // x30-y20 = z10
+        // z/2 = v5
+        let requestId = window.requestAnimationFrame(animate)
+
+
+        function animate() {
+
+            if (fullState) {
+                window.cancelAnimationFrame(requestId);
             } else {
-                // ctx.lineTo(30 + i * gap, 400 - value);
+                for (let i = 0; i < 60; i++) {
-                // ctx.arc(30 + i * gap, 460 - value, 5, 0, 2 * Math.PI, false);
+                    let resTime: number[] = [];
+                    let buff: number[] = [...resData];
+                    while (buff.length > 1) {
+                        let a = buff.shift()!;
+                        let b = buff.shift()!;
+
+                        let delta = 0;
+                        if (a > b) {
+                            delta = a - b;
+                            let deltaIt = delta / 100;
+                            resTime.push(a - deltaIt * i);
+                            resTime.push(b + deltaIt * i);
+                        } else {
+                            delta = b - a;
+                            let deltaIt = delta / 100;
+                            resTime.push(a + deltaIt * i);
+                            resTime.push(b - deltaIt * i);
+                        }
+                    }
+                    window.requestAnimationFrame(async function () {
+
+                        sleep(7);
+
+                        setTimeout(() => {
+                            ctx.clearRect(20, 20, 960, 450);
+                            // console.log(resTime)
+                            printDots(resTime);
+                            printLines(resTime);
+                        }, 500)
+
+
+                    })
+                }
+                let res: number[] = [];
+                let buff: number[] = [...resData];
+                while (buff.length > 1) {
+
+                    let a = buff.shift()!;
+                    let b = buff.shift()!;
+                    res.push((a + b) / 2)
+                }
+                window.requestAnimationFrame(function () {
+
+                    sleep(10);
+                    setTimeout(() => {
+                        ctx.clearRect(20, 20, 960, 450);
+                        printDots(res);
+                        printLines(res);
+                    }, 500)
+
+                });
+
+                window.cancelAnimationFrame(requestId);
             }
 
-            // ctx.stroke();
         }
-    };
+    }
-
-
-
 
     return (
-        <div className="App">
+        <div className="App" id={'app'}>
-            <header className="App-header">
+            <canvas id="canvas" onClick={clickHandle} width="1000" height="500" ref={refCanvas}/>
-                <canvas width="1000" height="500" ref={refCanvas}/>
-            </header>
         </div>
     );
 }
 
-export default App;
+export default App