Skip to content

Commit a69d976

Browse files
sasank-tadepallisasank-tadepalli
committed
Added implementation for speed, size, array generation, bubble and selection sort
1 parent 9952bbf commit a69d976

File tree

4 files changed

+209
-105
lines changed

4 files changed

+209
-105
lines changed

‎src/App.css

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
11
.App {
22
text-align: center;
33
}
4-
5-
.bar {
6-
width: 95%;
7-
margin: 0 auto;
8-
height: 350px;
9-
background-color: rgb(199, 199, 204);
10-
border: 1px solid lightgray;
11-
}

‎src/App.js

Lines changed: 140 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,163 @@
11
import "./App.css";
2-
import { Bar } from "react-chartjs-2";
32
import { useState } from "react";
3+
import Chart from "./components/Chart/Chart";
4+
import { useEffect } from "react";
45

56
function App() {
6-
const [data, setData] = useState({
7-
labels: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10],
8-
datasets: [
9-
{
10-
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10],
11-
backgroundColor: [
12-
"rgb(248,248,248)",
13-
"rgb(248,248,248)",
14-
"rgb(248,248,248)",
15-
"rgb(248,248,248)",
16-
"rgb(248,248,248)",
17-
"rgb(248,248,248)",
18-
"rgb(248,248,248)",
19-
"rgb(248,248,248)",
20-
"rgb(248,248,248)",
21-
"rgb(248,248,248)",
22-
],
23-
},
24-
],
25-
});
26-
const [sorting, setSorting] = useState(true);
7+
const [data, setData] = useState([]);
8+
const [isSorting, setIsSorting] = useState(false);
9+
const [currIJ, setCurrIJ] = useState({ i: -1, j: -1 });
10+
const [completed, setCompleted] = useState([]);
11+
const [size, setSize] = useState(10);
12+
const [speed, setSpeed] = useState(1);
2713

28-
var options = {
29-
maintainAspectRatio: false,
30-
responsive: true,
31-
scales: {
32-
x: {
33-
grid: {
34-
display: false,
35-
borderWidth: 0,
36-
},
37-
ticks: {
38-
display: true,
39-
// color: "white",
40-
},
41-
},
42-
y: {
43-
grid: {
44-
display: false,
45-
borderWidth: 0,
46-
},
47-
ticks: {
48-
display: false,
49-
},
50-
},
51-
},
52-
plugins: {
53-
legend: {
54-
display: false,
14+
// console.log(completed);
15+
console.log(completed);
16+
17+
useEffect(() => {
18+
const arr = generateArray(size);
19+
setCompleted([]);
20+
setData([...arr]);
21+
}, [size]);
22+
23+
const generateArray = (size) => {
24+
const arr = [];
25+
for (let i = 0; i < size; i++) {
26+
const num = Math.round(Math.random() * 100) + 1;
27+
// console.log(num);
28+
arr.push(num);
29+
}
30+
return [...arr];
31+
};
32+
33+
const alterStateAfterTimeOut = (arr, i, j, c, cond, index) => {
34+
setTimeout(
35+
(arr, i, j, c) => {
36+
setData(arr);
37+
setCurrIJ({ i, j });
38+
// if (c === arr.length) setIsSorting(false);
39+
if (cond) {
40+
setCompleted((prev) => {
41+
const next = [...prev];
42+
next.push(index);
43+
return [...next];
44+
});
45+
}
5546
},
56-
},
57-
events: [],
58-
animation: false,
47+
(500 * c) / speed,
48+
[...arr],
49+
i,
50+
j,
51+
c,
52+
speed
53+
);
5954
};
6055

61-
const sort = () => {
62-
const arr = data.datasets[0].data;
63-
let c = 0;
64-
for (let i = 0; i < arr.length; i++) {
65-
for (let j = i + 1; j < arr.length; j++) {
66-
setTimeout(
67-
(arr, i, j) => {
68-
setData((prev) => {
69-
const new_data = { ...prev };
70-
new_data.datasets[0].data = [...arr];
71-
new_data.labels = [...arr];
72-
new_data.datasets[0].backgroundColor = [
73-
"rgb(248,248,248)",
74-
"rgb(248,248,248)",
75-
"rgb(248,248,248)",
76-
"rgb(248,248,248)",
77-
"rgb(248,248,248)",
78-
"rgb(248,248,248)",
79-
"rgb(248,248,248)",
80-
"rgb(248,248,248)",
81-
"rgb(248,248,248)",
82-
"rgb(248,248,248)",
83-
];
84-
new_data.datasets[0].backgroundColor[i] = "red";
85-
new_data.datasets[0].backgroundColor[j] = "red";
86-
// console.log(arr);
87-
console.log(`${i} ${j}`);
88-
return new_data;
89-
});
90-
},
91-
100 * c,
92-
[...arr],
93-
i,
56+
const bubbleSort = () => {
57+
const array = [...data];
58+
let count = 0;
59+
for (let i = 0; i < array.length - 1; i++) {
60+
for (let j = 0; j < array.length - i - 1; j++) {
61+
alterStateAfterTimeOut(
62+
array,
9463
j,
95-
c
64+
j + 1,
65+
count,
66+
j === 0,
67+
array.length - i
9668
);
97-
c++;
98-
if (arr[i] > arr[j]) {
99-
let temp = arr[i];
100-
arr[i] = arr[j];
101-
arr[j] = temp;
69+
count++;
70+
if (array[j] > array[j + 1]) {
71+
let temp = array[j];
72+
array[j] = array[j + 1];
73+
array[j + 1] = temp;
74+
// console.log(arr);
75+
}
76+
}
77+
}
78+
alterStateAfterTimeOut(array, 0, 1, count, true, 1);
79+
alterStateAfterTimeOut(array, 0, 1, count, true, 0);
80+
alterStateAfterTimeOut(array, -1, -1, count);
81+
};
82+
83+
const selectionSort = () => {
84+
const array = [...data];
85+
let count = 0;
86+
for (let i = 0; i < array.length; i++) {
87+
let index = i;
88+
for (let j = i + 1; j < array.length; j++) {
89+
alterStateAfterTimeOut(array, i, j, count, j === i + 1, i - 1);
90+
count++;
91+
if (array[index] > array[j]) {
92+
index = j;
10293
// console.log(arr);
10394
}
10495
}
96+
let temp = array[i];
97+
array[i] = array[index];
98+
array[index] = temp;
10599
}
106-
setSorting(false);
100+
alterStateAfterTimeOut(
101+
array,
102+
array.length - 1,
103+
array.length - 2,
104+
count,
105+
true,
106+
array.length - 2
107+
);
108+
alterStateAfterTimeOut(
109+
array,
110+
array.length - 1,
111+
array.length - 2,
112+
count,
113+
true,
114+
array.length - 1
115+
);
116+
};
117+
118+
const sortClickHandler = () => {
119+
setCompleted([]);
120+
setIsSorting(true);
121+
// bubbleSort();
122+
selectionSort();
123+
setIsSorting(false);
107124
};
108125

109-
if (sorting) sort();
126+
const randomizeClickHandler = () => {
127+
const arr = generateArray(size);
128+
setData([...arr]);
129+
};
130+
131+
const sizeChangeHandler = (e) => {
132+
setSize(+e.target.value);
133+
// console.log(e.target.value);
134+
};
135+
136+
const speedChangeHandler = (e) => {
137+
setSpeed(+e.target.value);
138+
};
110139

111140
return (
112141
<div className="App">
113142
<h1>Sorting Visualizer</h1>
114-
<div className="bar">
115-
{/* {console.log(data)} */}
116-
<Bar data={data} options={options} />
117-
</div>
143+
<Chart data={data} currIJ={currIJ} completed={completed} />
144+
<button onClick={sortClickHandler}>Sort</button>
145+
<button onClick={randomizeClickHandler}>Randomize</button>
146+
<select value={`${size}`} onChange={sizeChangeHandler}>
147+
<option value="5">5</option>
148+
<option value="10">10</option>
149+
<option value="25">25</option>
150+
<option value="50">50</option>
151+
<option value="75">75</option>
152+
<option value="100">100</option>
153+
</select>
154+
<select value={`${speed}`} onChange={speedChangeHandler}>
155+
<option value="0.25">0.25x</option>
156+
<option value="0.5">0.5x</option>
157+
<option value="1">1x</option>
158+
<option value="2">2x</option>
159+
<option value="4">4x</option>
160+
</select>
118161
</div>
119162
);
120163
}

‎src/components/Chart/Chart.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.chart {
2+
width: 95%;
3+
margin: 0 auto;
4+
height: 350px;
5+
background-color: rgb(199, 199, 204);
6+
border: 1px solid lightgray;
7+
}

‎src/components/Chart/Chart.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Bar } from "react-chartjs-2";
2+
import "./Chart.css";
3+
4+
const options = {
5+
maintainAspectRatio: false,
6+
responsive: true,
7+
scales: {
8+
x: {
9+
grid: {
10+
display: false,
11+
borderWidth: 0,
12+
},
13+
ticks: {
14+
display: true,
15+
},
16+
},
17+
y: {
18+
grid: {
19+
display: false,
20+
borderWidth: 0,
21+
},
22+
ticks: {
23+
display: false,
24+
},
25+
},
26+
},
27+
plugins: {
28+
legend: {
29+
display: false,
30+
},
31+
},
32+
events: [],
33+
animation: false,
34+
};
35+
36+
const Chart = (props) => {
37+
const data = {
38+
labels: props.data,
39+
datasets: [
40+
{
41+
data: props.data,
42+
},
43+
],
44+
};
45+
const backgroundColor = props.data.map((el, i) => {
46+
return i === props.currIJ.i || i === props.currIJ.j
47+
? "red"
48+
: "rgb(248,248,248)";
49+
});
50+
51+
for (let i of props.completed) {
52+
backgroundColor[i] = "green";
53+
}
54+
data.datasets[0].backgroundColor = [...backgroundColor];
55+
return (
56+
<div className="chart">
57+
<Bar data={data} options={options} />
58+
</div>
59+
);
60+
};
61+
62+
export default Chart;

0 commit comments

Comments
 (0)