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>