From 4f11081420da51538efc3d11850f9959aeaca944 Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 10 Apr 2026 14:33:23 +1000 Subject: [PATCH] task done --- labs/lab5/src/App.jsx | 4 +-- labs/lab5/src/CSS/App.css | 9 ++++++ labs/lab5/src/Task.jsx | 38 -------------------------- labs/lab5/src/components/Chart.jsx | 22 ++++++++++----- labs/lab5/src/components/ChartDraw.jsx | 15 +--------- labs/lab5/src/components/Task.jsx | 34 +++++++++++++++++++++++ 6 files changed, 61 insertions(+), 61 deletions(-) delete mode 100644 labs/lab5/src/Task.jsx create mode 100644 labs/lab5/src/components/Task.jsx diff --git a/labs/lab5/src/App.jsx b/labs/lab5/src/App.jsx index f194b2d..d34ab2a 100644 --- a/labs/lab5/src/App.jsx +++ b/labs/lab5/src/App.jsx @@ -3,7 +3,7 @@ import Table from './components/Table.jsx'; import buildings from './data.js'; import './CSS/App.css' import Chart from './components/Chart.jsx' -import Task from './Task.jsx' +import Task from './components/Task.jsx' function App() { @@ -14,7 +14,7 @@ function App() {

Самые высокие здания и сооружения

- {/* */} + ) } diff --git a/labs/lab5/src/CSS/App.css b/labs/lab5/src/CSS/App.css index f6c127e..427c64b 100644 --- a/labs/lab5/src/CSS/App.css +++ b/labs/lab5/src/CSS/App.css @@ -53,4 +53,13 @@ svg text { .bad-selection{ color: red; border: solid thin red; +} + + +.blackDiv{ + background-color: black; + color: white; + font-weight: bold; + padding: 60px; + } \ No newline at end of file diff --git a/labs/lab5/src/Task.jsx b/labs/lab5/src/Task.jsx deleted file mode 100644 index fa6b84a..0000000 --- a/labs/lab5/src/Task.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import { useState } from "react"; -const ClickableEntry = (props)=>{ - const [clickCount,updateClickCount] = useState(0) - - const clickHandler = (event)=>{ - updateClickCount(clickCount+1); - props.updateTotoal(); - } - - return( -
  • {props.text}{clickCount>0 && `(${clickCount})`}
    • - ) - -} - -const Task = (props)=>{ - const [totalClickCount,updateTotalClickCount] = useState(0) - const addOne =()=>{ - updateTotalClickCount(totalClickCount+1); - } - const books = ['Мастер и Маргарита', - 'Белая гвардия', - 'Война и мир', - 'Анна карненина', - 'Игрок', - ] - return( - <> -
      - {books.map((x,i)=>)} -
    -

    Totoal:{totalClickCount}

    - - ) -} - - -export default Task; \ No newline at end of file diff --git a/labs/lab5/src/components/Chart.jsx b/labs/lab5/src/components/Chart.jsx index 19d537e..8b960c4 100644 --- a/labs/lab5/src/components/Chart.jsx +++ b/labs/lab5/src/components/Chart.jsx @@ -6,14 +6,22 @@ import * as d3 from "d3"; const Chart = (props) => { const [ox, setOx] = useState("Страна"); const [oy, setOy] = useState([true, false]); + const [oyBuf, setOyBuf] = useState([true, false]); const [graphType, setGraphType] = useState(0); const handleSubmit = (event) => { event.preventDefault(); setOx(event.target["ox"].value); - setOy([event.target["oy"][0].checked, event.target["oy"][1].checked]); + setOy(oyBuf); setGraphType(event.target["graphType"].value); } + const handleCheckboxes = (event)=>{ + let buf = [...oyBuf]; + buf[Number(event.target.id)]=event.target.checked; + setOyBuf(buf); + console.log(buf) + + } const createArrGraph = (data, key) => { const groupObj = d3.group(data, d => d[key]); @@ -28,24 +36,24 @@ const Chart = (props) => { return ( <>

    Визуализация

    -
    +

    Значение по оси OX:

    - + Страна
    - + Год

    Значение по оси OY

    - {(!oy[0]&& !oy[1]) && Выберите хотя бы одно} + {(!oyBuf[0]&& !oyBuf[1]) && Выберите хотя бы одно}
    - + Минимальная высота
    - + Максимальная высота
    diff --git a/labs/lab5/src/components/ChartDraw.jsx b/labs/lab5/src/components/ChartDraw.jsx index dd7a8ea..a29755d 100644 --- a/labs/lab5/src/components/ChartDraw.jsx +++ b/labs/lab5/src/components/ChartDraw.jsx @@ -129,22 +129,9 @@ const ChartDraw = (props) => { }; // вычисляем ширину и высоту области для вывода графиков - const boundsWidth = width - margin.left - margin.right; - const boundsHeight = height - margin.top - margin.bottom; + useEffect(() => { - if(boundsWidth<0||boundsHeight<0){ - return; - } - const svg = d3.select(chartRef.current); - // выводим прямоугольник, - svg - .append("rect") - .attr("x", margin.left) - .attr("y", margin.top) - .attr("width", boundsWidth) - .attr("height", boundsHeight) - .style("fill", "lightgrey"); // console.log(props) drawGraph(props.data,props.ox,props.minMax[0],props.minMax[1],Number(props.graphType)) }); diff --git a/labs/lab5/src/components/Task.jsx b/labs/lab5/src/components/Task.jsx new file mode 100644 index 0000000..71efeb8 --- /dev/null +++ b/labs/lab5/src/components/Task.jsx @@ -0,0 +1,34 @@ +import { useState,useEffect } from "react" + +const lines = [ + "Ночь, улица, фонарь, аптека,", + "Бессмыссленный и тусклый свет.", + "Живи ещё хоть четверть века - ", + "Всё будет так. Исхода нет.", + "Умрёшь - начнёшь опять сначала", + "И повториться всё как встарь:", + "Ночь, ледяная рябь канала", + "Аптека, Улица, фонарь." +]; + +const Task = (props)=>{ + const [interval, updateInterval] = useState(props.interval); + const [lineIdx, updateLineIdx] = useState(0); + const updateLine = ()=>{ + updateLineIdx((lineIdx+1)%lines.length); + } + useEffect(()=>{ + const intervalId = setInterval(updateLine,Number(interval)); + + return ()=>{ clearInterval(intervalId)} + }) + return( + <> + {updateInterval(Number(event.target.value))}}> +
    +

    {lines[lineIdx]}

    +
    + + ) +} +export default Task; \ No newline at end of file