task done

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 (
     <>
       <h4>Визуализация</h4>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} >
         <p> Значение по оси OX: </p>
         <div>
-          <input type="radio" name="ox" value="Страна" defaultChecked={ox === "Страна"} />
+          <input type="radio" name="ox" value="Страна" defaultChecked={ox === "Страна"}  />
           Страна
           <br />
-          <input type="radio" name="ox" value="Год" defaultChecked={ox === "Год"} />
+          <input  type="radio" name="ox" value="Год" defaultChecked={ox === "Год"}  />
           Год
           <br />
         </div>
 
         <p> Значение по оси OY </p>
-        {(!oy[0]&& !oy[1]) && <span className="bad-selection"> Выберите хотя бы одно</span>}
+        {(!oyBuf[0]&& !oyBuf[1]) && <span className="bad-selection"> Выберите хотя бы одно</span>}
         <div>
-           <input type="checkbox" name="oy" defaultChecked={oy[0] === true} />
+           <input id="0" type="checkbox" name="oy" defaultChecked={oyBuf[0] === true} onChange={handleCheckboxes} />
           Минимальная высота
           <br />
-          <input type="checkbox" name="oy" defaultChecked={oy[1] === true} />
+          <input id="1" type="checkbox" name="oy" defaultChecked={oyBuf[1] === true} onChange={handleCheckboxes}/>
           Максимальная высота 
          
         </div>

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))
 	});

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(
+        <>
+        <input type="number" value={interval} onChange={(event)=>{updateInterval(Number(event.target.value))}}></input>
+        <div className="blackDiv">
+            <h2 className="bigWhite">{lines[lineIdx]}</h2>
+        </div>
+        </>
+    )
+}
+export default Task;