@tomaszjarosz/react-visualizers 0.2.4 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -31
- package/dist/index.cjs +440 -61
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +440 -61
- package/dist/index.js.map +1 -1
- package/package.json +22 -3
package/README.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Interactive algorithm and data structure visualizers for React.
|
|
4
4
|
|
|
5
|
+
[](https://6934a2d9e17d1e509a92c935-rdicbxowdr.chromatic.com/)
|
|
6
|
+
[](https://www.npmjs.com/package/@tomaszjarosz/react-visualizers)
|
|
7
|
+
|
|
8
|
+
## Live Demo
|
|
9
|
+
|
|
10
|
+
**[View all visualizers in Storybook](https://6934a2d9e17d1e509a92c935-rdicbxowdr.chromatic.com/)**
|
|
11
|
+
|
|
5
12
|
## Installation
|
|
6
13
|
|
|
7
14
|
```bash
|
|
@@ -10,62 +17,97 @@ npm install @tomaszjarosz/react-visualizers
|
|
|
10
17
|
|
|
11
18
|
## Requirements
|
|
12
19
|
|
|
13
|
-
- React 17+
|
|
14
|
-
- Tailwind CSS
|
|
20
|
+
- React 17+
|
|
21
|
+
- Tailwind CSS 4+
|
|
15
22
|
|
|
16
23
|
## Available Visualizers
|
|
17
24
|
|
|
18
|
-
###
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
+
### Algorithms
|
|
26
|
+
| Visualizer | Description |
|
|
27
|
+
|------------|-------------|
|
|
28
|
+
| `BinarySearchVisualizer` | Binary search with O(log n) visualization |
|
|
29
|
+
| `SortingVisualizer` | Step-by-step sorting algorithm |
|
|
30
|
+
| `SortingComparisonVisualizer` | Side-by-side algorithm comparison |
|
|
31
|
+
| `GraphVisualizer` | DFS/BFS graph traversal |
|
|
32
|
+
| `DijkstraVisualizer` | Shortest path algorithm |
|
|
33
|
+
| `DPVisualizer` | Dynamic programming table |
|
|
25
34
|
|
|
26
35
|
### Data Structures
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
+
| Visualizer | Description |
|
|
37
|
+
|------------|-------------|
|
|
38
|
+
| `ArrayListVisualizer` | Dynamic array with resizing |
|
|
39
|
+
| `LinkedListVisualizer` | Node-based list operations |
|
|
40
|
+
| `HashMapVisualizer` | Hash table with buckets |
|
|
41
|
+
| `HashTableVisualizer` | Hash function internals |
|
|
42
|
+
| `ArrayDequeVisualizer` | Circular buffer deque |
|
|
43
|
+
| `PriorityQueueVisualizer` | Min-heap operations |
|
|
44
|
+
| `TreeSetVisualizer` | Red-Black tree (BST) |
|
|
45
|
+
| `LinkedHashMapVisualizer` | Hash + insertion order |
|
|
46
|
+
| `EnumSetVisualizer` | Bit vector set |
|
|
36
47
|
|
|
37
48
|
### Concurrency
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
49
|
+
| Visualizer | Description |
|
|
50
|
+
|------------|-------------|
|
|
51
|
+
| `BlockingQueueVisualizer` | Producer-consumer pattern |
|
|
52
|
+
| `ConcurrentHashMapVisualizer` | Segment-based locking |
|
|
53
|
+
| `CopyOnWriteVisualizer` | Copy-on-write pattern |
|
|
54
|
+
| `ImmutableCollectionsVisualizer` | Java 9+ immutable collections |
|
|
42
55
|
|
|
43
56
|
### Other
|
|
44
|
-
|
|
45
|
-
|
|
57
|
+
| Visualizer | Description |
|
|
58
|
+
|------------|-------------|
|
|
59
|
+
| `GCVisualizer` | JVM garbage collection |
|
|
60
|
+
| `SQLJoinVisualizer` | SQL JOIN operations |
|
|
46
61
|
|
|
47
62
|
## Usage
|
|
48
63
|
|
|
49
64
|
```tsx
|
|
50
|
-
import {
|
|
65
|
+
import { BinarySearchVisualizer, HashMapVisualizer } from '@tomaszjarosz/react-visualizers';
|
|
51
66
|
|
|
52
67
|
function App() {
|
|
53
68
|
return (
|
|
54
69
|
<div>
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
<h2>HashMap Operations</h2>
|
|
59
|
-
<HashMapVisualizer />
|
|
70
|
+
<BinarySearchVisualizer showControls={true} showCode={true} />
|
|
71
|
+
<HashMapVisualizer showControls={true} showCode={true} />
|
|
60
72
|
</div>
|
|
61
73
|
);
|
|
62
74
|
}
|
|
63
75
|
```
|
|
64
76
|
|
|
77
|
+
### Props
|
|
78
|
+
|
|
79
|
+
All visualizers accept these props:
|
|
80
|
+
|
|
81
|
+
| Prop | Type | Default | Description |
|
|
82
|
+
|------|------|---------|-------------|
|
|
83
|
+
| `showControls` | `boolean` | `true` | Show playback controls |
|
|
84
|
+
| `showCode` | `boolean` | `true` | Show code panel |
|
|
85
|
+
| `className` | `string` | `''` | Additional CSS classes |
|
|
86
|
+
|
|
65
87
|
## Shared Components
|
|
66
88
|
|
|
67
89
|
```tsx
|
|
68
|
-
import {
|
|
90
|
+
import {
|
|
91
|
+
ControlPanel,
|
|
92
|
+
CodePanel,
|
|
93
|
+
Legend,
|
|
94
|
+
StatusPanel,
|
|
95
|
+
VisualizationArea,
|
|
96
|
+
HelpPanel
|
|
97
|
+
} from '@tomaszjarosz/react-visualizers';
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Development
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
# Run Storybook locally
|
|
104
|
+
pnpm run storybook
|
|
105
|
+
|
|
106
|
+
# Build library
|
|
107
|
+
pnpm run build
|
|
108
|
+
|
|
109
|
+
# Type check
|
|
110
|
+
pnpm run typecheck
|
|
69
111
|
```
|
|
70
112
|
|
|
71
113
|
## License
|