lab 5 done

labs/lab5/src/components/Chart.jsx

@@ -1,32 +1,69 @@
-const Chart = (props) => {
+import { useState } from "react";
+import ChartDraw from './ChartDraw.jsx';
+import * as d3 from "d3";
 
-   return (
+
+const Chart = (props) => {
+  const [ox, setOx] = useState("Страна");
+  const [oy, setOy] = 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]);
+    setGraphType(event.target["graphType"].value);
+  }
+
+  const createArrGraph = (data, key) => {
+    const groupObj = d3.group(data, d => d[key]);
+    let arrGraph = [];
+    for (let entry of groupObj) {
+      let minMax = d3.extent(entry[1].map(d => d['Высота']));
+      arrGraph.push({ labelX: entry[0], values: minMax });
+    }
+    return arrGraph;
+  }
+
+  return (
     <>
       <h4>Визуализация</h4>
-      <form>
+      <form onSubmit={handleSubmit}>
         <p> Значение по оси OX: </p>
-		<div>
-          <input type="radio" name="ox" value="Страна" />
-		  Страна
-		  <br/>		
-          <input type="radio" name="ox" value="Год" />
-		  Год
-		</div>
+        <div>
+          <input type="radio" name="ox" value="Страна" defaultChecked={ox === "Страна"} />
+          Страна
+          <br />
+          <input type="radio" name="ox" value="Год" defaultChecked={ox === "Год"} />
+          Год
+          <br />
+        </div>
 
         <p> Значение по оси OY </p>
-		<div>
-          <input type="checkbox" name="oy" />
-		  Максимальная высота <br/>
-          <input  type="checkbox" name="oy" />
-		  Минимальная высота
-		</div>
+        {(!oy[0]&& !oy[1]) && <span className="bad-selection"> Выберите хотя бы одно</span>}
+        <div>
+           <input type="checkbox" name="oy" defaultChecked={oy[0] === true} />
+          Минимальная высота
+          <br />
+          <input type="checkbox" name="oy" defaultChecked={oy[1] === true} />
+          Максимальная высота 
+         
+        </div>
+        <p>Тип диаграммы </p>
+        <div>
+          <select name="graphType" defaultValue={graphType}>
+            <option value="0" >Точечная</option>
+            <option value="1">Гистограма</option>
+          </select>
+        </div>
 
-        <p>  
+        <p>
           <button type="submit">Построить </button>
         </p>
-      </form>    
-	</>
-    )
+      </form>
+      <ChartDraw data={createArrGraph(props.data, ox)} ox={ox} minMax={oy} graphType={graphType} />
+    </>
+  )
 }
 
 export default Chart;