hw done

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() {
        <h3>Самые высокие здания и сооружения</h3>
        <Chart data={ filteredData } />
         <Table data={ buildings } setFilteredDataCallback={setFilteredData} amountRows="15" />
-        {/* <Task/> */}
+        <Task interval="1000"/>
     </div>
   )
 }

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

labs/lab5/src/Task.jsx

@@ -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(
-        <li onClick={clickHandler}>{props.text}{clickCount>0 && `(${clickCount})`}</li>
-    )
-
-}
-
-const Task = (props)=>{
-    const [totalClickCount,updateTotalClickCount] = useState(0)
-    const addOne =()=>{
-        updateTotalClickCount(totalClickCount+1);
-    } 
-    const books = ['Мастер и Маргарита',
-        'Белая гвардия',
-        'Война и мир',
-        'Анна карненина',
-        'Игрок',
-    ]
-    return(
-        <>
-        <ul>
-        {books.map((x,i)=><ClickableEntry text={x} key={i} updateTotoal={addOne}/>)}
-        </ul>
-        <p>Totoal:{totalClickCount}</p>
-        </>
-    )
-}
-
-
-export default Task;

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;

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 max = d3.max(data,d => d.values[Number(drawMax)]);
-    const scaleYDomain = d3.extent(data.map(d => d.values[1]));
+    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)
     // функция интерполяции значений на оси
     // по оси ОХ текстовые значения