Merge pull request #57 from Ajay-Dhangar/dsa-content

added commet for add ArrayVisualization in Array

dsa/arrays/arrays-dsa.md

@@ -10,11 +10,13 @@ tags: [dsa, data-structures, arrays, array, array-data-structure, array-in-dsa,
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import SolutionAuthor from '@site/src/components/SolutionAuthor';
-import ArrayVisualization from '@site/src/components/DSA/arrays/ArrayVisualization';
+import ArrayVisualizations from '@site/src/components/DSA/arrays/ArrayVisualizations';
 
 An array is a collection of items stored at contiguous memory locations. It is a data structure that stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
 
-<ArrayVisualization />
+## Visualizations of Arrays in Data Structures and Algorithms (DSA)
+
+<ArrayVisualizations />
 
 ## Why are Arrays important?
 

src/components/DSA/arrays/ArrayVisualizations/ArrayVisualization.css

@@ -0,0 +1,28 @@
+.array-visualizations {
+    padding: 20px;
+    border: 1px solid #3498db;
+    border-radius: 5px;
+  }
+
+  .array-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    height: 300px;
+  }
+
+  .array-bar {
+    width: 20px;
+    margin: 0 2px;
+    background-color: #3498db;
+    transition: height 0.3s, background-color 0.3s; /* Added background-color transition */
+  }
+
+  .min-value {
+    background-color: #e74c3c;
+  }
+
+  .current-value {
+    background-color: yellow; /* Highlight current value */
+  }
+

src/components/DSA/arrays/ArrayVisualizations/index.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import './ArrayVisualization.css'; 
+
+const ArrayVisualizations: React.FC = () => {
+  const [array, setArray] = useState<number[]>([]);
+  const [delay, setDelay] = useState<number>(300); 
+  const [minIndex, setMinIndex] = useState<number | null>(null); 
+  const [isDisabled, setIsDisabled] = useState<boolean>(false); 
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+  const [isSorting, setIsSorting] = useState<boolean>(false);
+
+  useEffect(() => {
+    generateArray();    
+  }, []);
+
+  useEffect(() => {
+    updateMoveDuration();
+  }, [delay]);
+
+  const generateArray = () => {
+    const newArray = Array.from({ length: 18 }, () => Math.ceil(Math.random() * 90) + 10);
+    setArray(newArray);
+  };
+
+  const updateMoveDuration = () => {
+    const stylesheets = document.styleSheets;
+    for (let i = 0; i < stylesheets.length; i++) {
+      const rules = (stylesheets[i] as CSSStyleSheet).cssRules || (stylesheets[i] as CSSStyleSheet).rules;
+      for (let j = 0; j < rules.length; j++) {
+        if ((rules[j] as CSSStyleRule).selectorText === '.v-move') {
+          (rules[j] as CSSStyleRule).style.transitionDuration = `${delay}ms`;
+          break;
+        }
+      }
+    }
+  };
+
+  const findLowest = async () => {
+    setIsDisabled(true);
+    setIsSorting(true);
+    let minVal = array[0];
+    let minIdx = 0;
+    for (let j = 1; j < array.length; j++) {
+      setCurrentIndex(j);
+      if (array[j] < minVal) {
+        minVal = array[j];
+        minIdx = j;
+      }
+      await new Promise(resolve => setTimeout(resolve, delay));
+    }
+    setMinIndex(minIdx);
+    setIsSorting(false);
+    setIsDisabled(false);
+  };
+
+  const resetArray = () => {
+    generateArray();
+    setMinIndex(null);
+  };
+
+  return (
+    <div className='array-visualizations'>
+      <p>Speed: <input type="range" min="50" max="500" value={delay} onChange={e => setDelay(Number(e.target.value))} /></p>
+      <button onClick={findLowest} disabled={isDisabled || isSorting}>Find Lowest</button>
+      &nbsp;
+      <button onClick={resetArray} disabled={isDisabled || isSorting}>New Values</button>
+      <p>Lowest value: {minIndex !== null ? array[minIndex] : null}</p>
+      <br /> <br />
+      <div className="array-container">
+        {array.map((value, index) => (
+          <div
+            key={index}
+            className={`array-bar ${index === minIndex ? 'min-value' : ''} ${index === currentIndex ? 'current-value' : ''}`}
+            style={{ height: `${value * 3}px` }}
+          ></div>
+        ))}
+      </div>      
+    </div>
+  );
+};
+
+export default ArrayVisualizations;