chore: Update LineChart component in playground to dynamically set y-…

…axis min and max values
HasanYahya101 · Jun 7, 2024 · e425052 · e425052
1 parent 7005c96
commit e425052
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/components/component/playground.jsx b/src/components/component/playground.jsx
@@ -304,7 +304,19 @@ function GraphData({ check, testData, setTestData, setCheck }) {
 }
 
 function LineChart({ month1, month2, month3, month4, month5, month6, data1high, data1low, data2high, data2low, data3high, data3low, data4high, data4low, data5high, data5low, data6high, data6low }) {
+    const [maxY, setMaxY] = useState(0);
+    const [minY, setMinY] = useState(0);
 
+    useEffect(() => {
+        const highData = [data1high, data2high, data3high, data4high, data5high, data6high];
+        const lowData = [data1low, data2low, data3low, data4low, data5low, data6low];
+
+        const maxY_ = Math.max(...highData) + 5;
+        const minY_ = Math.min(...lowData) - 5;
+
+        setMaxY(maxY_);
+        setMinY(minY_);
+    }, [data1high, data1low, data2high, data2low, data3high, data3low, data4high, data4low, data5high, data5low, data6high, data6low]);
     const { toast } = useToast();
     return (
         (<div className="aspect-[9/4]">
@@ -339,6 +351,7 @@ function LineChart({ month1, month2, month3, month4, month5, month6, data1high,
                 }}
                 yScale={{
                     type: "linear",
+                    min: minY, max: maxY,
                 }}
                 axisTop={null}
                 axisRight={null}