diff --git a/.gitignore b/.gitignore index 0b794d2..3d8b36a 100644 --- a/.gitignore +++ b/.gitignore @@ -17,7 +17,7 @@ .env.development.local .env.test.local .env.production.local -.idea/ +.idea npm-debug.log* yarn-debug.log* diff --git a/src/App.css b/src/App.css index 74b5e05..ef06a06 100644 --- a/src/App.css +++ b/src/App.css @@ -2,17 +2,6 @@ text-align: center; } -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - .App-header { background-color: #282c34; min-height: 100vh; @@ -24,15 +13,7 @@ color: white; } -.App-link { - color: #61dafb; -} +canvas { + background-color: #a1a39c; -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index a53698a..be358b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,26 +1,111 @@ -import React from 'react'; -import logo from './logo.svg'; +import React, {useEffect, useRef, useState} from 'react'; + import './App.css'; + function App() { - return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
- ); + + const [canvas, setCanvas] = useState(null); + + useEffect(() => { + + setCanvas(refCanvas.current!); + }, []); + + const refCanvas = useRef(null); + + + const ctx: CanvasRenderingContext2D = canvas?.getContext('2d')!; + useEffect(() => { + + + if (ctx && canvas) { + + ctx.clearRect(0, 0, canvas?.width, canvas?.height) + // ctx.fillRect(1, 2, 50, 50); + 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]; + + + + const print = (array: number[]) => { + + const countArrValue = array.length; + const gap = 800 / countArrValue; + + ctx.fillStyle = "red"; // Задаём чёрный цвет для линий + ctx.lineWidth = 2.0; // Ширина линии + + ctx.beginPath(); // Запускает путь + + for (let i = 0; i <= 0 ; i++) { + let value = array[i]; + if (i == 0) { + ctx.moveTo(200, 400); + // ctx.lineTo(30, 460 - value); + ctx.arc(200, 350 - value, 5, 0, 2 * Math.PI, false); + ctx.fillStyle = 'black'; + ctx.fill(); + } else { + // ctx.lineTo(30 + i * gap, 400 - value); + // ctx.arc(30 + i * gap, 460 - value, 5, 0, 2 * Math.PI, false); + } + + // ctx.stroke(); + } + }; + + + + + return ( +
+
+ +
+
+ ); } export default App; diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file