hw 5 done
This commit is contained in:
74
site/src/components/Chart.jsx
Normal file
74
site/src/components/Chart.jsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { useState } from "react";
|
||||
import ChartDraw from './ChartDraw.jsx';
|
||||
import * as d3 from "d3";
|
||||
|
||||
|
||||
const Chart = (props) => {
|
||||
const [ox, setOx] = useState("size");
|
||||
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['price']));
|
||||
arrGraph.push({ labelX: entry[0], values: minMax });
|
||||
}
|
||||
console.log(arrGraph)
|
||||
return arrGraph;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h4>Визуализация</h4>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<p> OX value: </p>
|
||||
<div>
|
||||
<input type="radio" name="ox" value="size" defaultChecked={ox === "size"} />
|
||||
Size GB
|
||||
<br />
|
||||
<input type="radio" name="ox" value="release" defaultChecked={ox === "release"} />
|
||||
Release date
|
||||
<br />
|
||||
<input type="radio" name="ox" value="maker" defaultChecked={ox === "maker"} />
|
||||
Manufacturer
|
||||
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<p> OY value </p>
|
||||
{(!oy[0] && !oy[1]) && <span className="bad-selection"> Select at least one </span>}
|
||||
<div>
|
||||
<input type="checkbox" name="oy" defaultChecked={oy[0] === true} />
|
||||
Min price
|
||||
<br />
|
||||
<input type="checkbox" name="oy" defaultChecked={oy[1] === true} />
|
||||
Max price
|
||||
|
||||
</div>
|
||||
<p>Тип диаграммы </p>
|
||||
<div>
|
||||
<select name="graphType" defaultValue={graphType}>
|
||||
<option value="0" >Точечная</option>
|
||||
<option value="1">Гистограма</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<button type="submit">Построить </button>
|
||||
</p>
|
||||
</form>
|
||||
<ChartDraw data={createArrGraph(props.data, ox)} ox={ox} minMax={oy} graphType={graphType} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Chart;
|
||||
157
site/src/components/ChartDraw.jsx
Normal file
157
site/src/components/ChartDraw.jsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import * as d3 from "d3";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
|
||||
function drawGraph(data, keyX, drawMin, drawMax, graphtype) {
|
||||
// значения по оси ОХ
|
||||
|
||||
// создаем массив для построения графика
|
||||
// console.log(keyX)
|
||||
if(keyX=="release" || keyX=="size"){
|
||||
data = d3.sort(data, (x,y)=>Number(x["labelX"])-Number(y["labelX"]));
|
||||
}
|
||||
const svg = d3.select("svg")
|
||||
svg.selectAll('*').remove();
|
||||
|
||||
// создаем словарь с атрибутами области вывода графика
|
||||
const attr_area = {
|
||||
width: parseFloat(svg.style('width')),
|
||||
height: parseFloat(svg.style('height')),
|
||||
marginX: 50,
|
||||
marginY: 50
|
||||
}
|
||||
|
||||
// создаем шкалы преобразования и выводим оси
|
||||
const [scX, scY] = createAxis(svg, data, attr_area,[drawMin,drawMax]);
|
||||
|
||||
// рисуем график
|
||||
|
||||
const scaleYDomain = d3.extent(data.map(d => d.values[1]));
|
||||
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)
|
||||
}
|
||||
else if (drawMin) {
|
||||
createChart(svg, data, scX, scY, attr_area, "blue", 0,graphtype,1,scaleYDomain)
|
||||
}
|
||||
else if (drawMax) {
|
||||
createChart(svg, data, scX, scY, attr_area, "red", 1,graphtype,1,scaleYDomain)
|
||||
}
|
||||
}
|
||||
|
||||
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])]);
|
||||
// console.log(max,min,data)
|
||||
// функция интерполяции значений на оси
|
||||
// по оси ОХ текстовые значения
|
||||
const scaleX = d3.scaleBand()
|
||||
.domain(data.map(d => d.labelX))
|
||||
.range([0, attr_area.width - 2 * attr_area.marginX]);
|
||||
|
||||
const scaleY = d3.scaleLinear()
|
||||
.domain([min * 0.85, max * 1.1])
|
||||
.range([attr_area.height - 2 * attr_area.marginY, 0]);
|
||||
|
||||
// создание осей
|
||||
const axisX = d3.axisBottom(scaleX); // горизонтальная
|
||||
const axisY = d3.axisLeft(scaleY); // вертикальная
|
||||
|
||||
// отрисовка осей в SVG-элементе
|
||||
svg.append("g")
|
||||
.attr("transform", `translate(${attr_area.marginX},
|
||||
${attr_area.height - attr_area.marginY})`)
|
||||
.call(axisX)
|
||||
.selectAll("text") // подписи на оси - наклонные
|
||||
.style("text-anchor", "end")
|
||||
.attr("dx", "-.8em")
|
||||
.attr("dy", ".15em")
|
||||
.attr("transform", d => "rotate(-45)");
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||
.call(axisY);
|
||||
|
||||
return [scaleX, scaleY]
|
||||
}
|
||||
|
||||
function createChart(svg, data, scaleX, scaleY, attr_area, color, valueIdx,isHistogram,horisontalScale,scaleYDomain) {
|
||||
if (isHistogram){
|
||||
svg.selectAll(".dot")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", d => scaleX(d.labelX)+valueIdx*6)
|
||||
.attr("y", d => scaleY(d.values[valueIdx]))
|
||||
.attr("width",6*(horisontalScale+1))
|
||||
.attr("height",d => scaleY(scaleYDomain[0]*0.85)-scaleY(d.values[valueIdx]))
|
||||
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||
.style("fill", color)
|
||||
|
||||
|
||||
}
|
||||
else{
|
||||
const r = 4;
|
||||
|
||||
svg.selectAll(".dot")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("r", r)
|
||||
.attr("cx", d => scaleX(d.labelX) + scaleX.bandwidth() / 2+valueIdx*4)
|
||||
.attr("cy", d => scaleY(d.values[valueIdx]))
|
||||
.attr("transform", `translate(${attr_area.marginX}, ${attr_area.marginY})`)
|
||||
.style("fill", color)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const ChartDraw = (props) => {
|
||||
const chartRef = useRef(null);
|
||||
|
||||
const [width, setWidth] = useState(0);
|
||||
const [height, setHeight] = useState(0);
|
||||
|
||||
// заносим в состояния ширину и высоту svg-элемента
|
||||
useEffect(() => {
|
||||
const svg = d3.select(chartRef.current);
|
||||
setWidth(parseFloat(svg.style('width')));
|
||||
setHeight(parseFloat(svg.style('height')));
|
||||
});
|
||||
// задаем отступы в svg-элементе
|
||||
const margin = {
|
||||
top:10,
|
||||
bottom:60,
|
||||
left:40,
|
||||
right:10
|
||||
};
|
||||
|
||||
// вычисляем ширину и высоту области для вывода графиков
|
||||
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))
|
||||
});
|
||||
|
||||
return (
|
||||
<svg ref={chartRef} > </svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChartDraw;
|
||||
@@ -99,7 +99,7 @@ const Sorting = (props) => {
|
||||
// console.log(tempArr)
|
||||
|
||||
}
|
||||
props.setApplySort({f:clearSort});
|
||||
props.setClearSort({f:clearSort});
|
||||
|
||||
|
||||
return (
|
||||
|
||||
@@ -14,12 +14,13 @@ const Table = (props) => {
|
||||
const [activePage, setActivePage] = useState("1");
|
||||
|
||||
const [dataTable, setDataTable] = useState(props.data);
|
||||
const [applySort, setApplySort] = useState({f:(x)=>{x}});
|
||||
const [clearSort, setClearSort] = useState({f:(x)=>{x}});
|
||||
|
||||
|
||||
|
||||
const updateDataTable = (value) => {
|
||||
applySort.f();
|
||||
clearSort.f();
|
||||
props.setFilteredDataCallback(value)
|
||||
setDataTable(value);
|
||||
}
|
||||
const changeActive = (event) => {
|
||||
@@ -44,7 +45,7 @@ const Table = (props) => {
|
||||
|
||||
|
||||
<h4>Sort by</h4>
|
||||
<Sorting data = {dataTable} keys = {Object.keys(props.data[0])} returnDataCallback={setDataTable} setApplySort={setApplySort}/>
|
||||
<Sorting data = {dataTable} keys = {Object.keys(props.data[0])} returnDataCallback={setDataTable} setClearSort={setClearSort}/>
|
||||
|
||||
<table>
|
||||
<TableHead head={Object.keys(props.data[0])} />
|
||||
|
||||
Reference in New Issue
Block a user