hw done

site/src/components/Chart.jsx

@@ -6,15 +6,25 @@ import * as d3 from "d3";
 const Chart = (props) => {
   const [ox, setOx] = useState("size");
   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]);
     let arrGraph = [];
@@ -45,12 +55,12 @@ const Chart = (props) => {
         </div>
 
         <p> OY value </p>
-        {(!oy[0] && !oy[1]) && <span className="bad-selection"> Select at least one </span>}
+        {(!oyBuf[0] && !oyBuf[1]) && <span className="bad-selection"> Select at least one </span>}
         <div>
-          <input type="checkbox" name="oy" defaultChecked={oy[0] === true} />
+           <input id="0" type="checkbox" name="oy" defaultChecked={oyBuf[0] === true} onChange={handleCheckboxes} />
           Min price
           <br />
-          <input type="checkbox" name="oy" defaultChecked={oy[1] === true} />
+          <input id="1" type="checkbox" name="oy" defaultChecked={oyBuf[1] === true} onChange={handleCheckboxes}/>
           Max price
 
         </div>

site/src/components/ChartDraw.jsx

@@ -25,8 +25,9 @@ function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
     const [scX, scY] = createAxis(svg, data, attr_area,[drawMin,drawMax]);
 
     // рисуем график
-
-    const scaleYDomain = d3.extent(data.map(d => d.values[1]));
+    const max = d3.max(data,d => d.values[Number(drawMax)]);
+    const min = d3.min(data,d => d.values[1-Number(drawMin)]);
+    const scaleYDomain = [min,max];
     if (drawMin && drawMax){
         createChart(svg, data, scX, scY, attr_area, "blue", 0,graphtype,0,scaleYDomain)
         createChart(svg, data, scX, scY, attr_area, "red", 1,graphtype,0,scaleYDomain)
@@ -43,7 +44,7 @@ function createAxis(svg, data, attr_area, selections) {
     // находим интервал значений, которые нужно отложить по оси OY 
     // максимальное и минимальное значение и максимальных высот по каждой стране
     const max = d3.max(data,d => d.values[Number(selections[1])]);
-    const min = d3.min(data,d => d.values[Number(1-selections[0])]);
+    const min = d3.min(data,d => d.values[1-Number(selections[0])]);
     // console.log(max,min,data)
     // функция интерполяции значений на оси
     // по оси ОХ текстовые значения