Update

Phinetwork · Dec 12, 2024 · 66a9161 · 66a9161
1 parent 3380958
commit 66a9161
Showing 1 changed file with 19 additions and 88 deletions.
diff --git a/frontend/src/components/LiveTrendVisualizer.jsx b/frontend/src/components/LiveTrendVisualizer.jsx
@@ -1,61 +1,26 @@
 import React, { useEffect, useState } from "react";
 import { VictoryChart, VictoryLine, VictoryTheme, VictoryTooltip, VictoryAxis } from "victory";
-import axios from "axios";
 
 const LiveTrendVisualizer = () => {
   const [trendData, setTrendData] = useState([]);
-  const [predictedData, setPredictedData] = useState([]);
   const [lineColor, setLineColor] = useState("#00ff00"); // Default green color for upward trend
-  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const fetchLiveData = async () => {
-      try {
-        const response = await axios.get(
-          `https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=SPY&interval=1min&apikey=QKGDOFMD8UDB86OD`
-        );
-        const timeSeries = response.data["Time Series (1min)"];
-        if (!timeSeries) {
-          throw new Error("Invalid API response");
-        }
+    const interval = setInterval(() => {
+      setTrendData((prevData) => {
+        const newPoint = { x: new Date().toLocaleTimeString(), y: Math.random() * 100 };
+        const previousY = prevData.length > 0 ? prevData[prevData.length - 1].y : 0;
 
-        const liveData = Object.entries(timeSeries)
-          .slice(0, 10) // Fetch the last 10 minutes
-          .reverse()
-          .map(([time, data], index) => ({
-            x: index + 1, // Seconds as x-axis
-            y: parseFloat(data["4. close"]), // Close price
-          }));
+        // Update line color based on trend
+        setLineColor(newPoint.y >= previousY ? "#00ff00" : "#ff0000"); // Green if up, red if down
 
-        const latestValue = liveData[liveData.length - 1]?.y || 0;
-        const secondLatestValue = liveData[liveData.length - 2]?.y || 0;
-        const rateOfChange = latestValue - secondLatestValue;
+        return [...prevData.slice(-9), newPoint];
+      });
+    }, 1000);
 
-        // Predict 3 future values
-        const predictions = Array.from({ length: 3 }, (_, i) => ({
-          x: liveData.length + i + 1,
-          y: latestValue + rateOfChange * (i + 1),
-        }));
-
-        setTrendData(liveData);
-        setPredictedData(predictions);
-        setLineColor(rateOfChange >= 0 ? "#00ff00" : "#ff0000"); // Green if up, red if down
-        setLoading(false);
-      } catch (error) {
-        console.error("Error fetching live data:", error);
-        setLoading(false);
-      }
-    };
-
-    fetchLiveData();
-    const interval = setInterval(fetchLiveData, 60000); // Refresh every minute
     return () => clearInterval(interval);
   }, []);
 
-  if (loading) {
-    return <p style={{ color: "#ffffff", textAlign: "center" }}>Loading real-time data...</p>;
-  }
-
   return (
     <div
       style={{
@@ -71,41 +36,28 @@ const LiveTrendVisualizer = () => {
           color: "#ffffff",
           textAlign: "center",
           fontFamily: "Arial, sans-serif",
-          marginBottom: "10px",
-        }}
-      >
-        Real-Time Market Trends & Predictions
-      </h2>
-      <p
-        style={{
-          color: "#bbbbbb",
-          textAlign: "center",
-          fontSize: "14px",
           marginBottom: "20px",
         }}
       >
-        This chart visualizes real-time market data and predicts future trends based on the current rate of change.
-      </p>
+        AI Global Trend Detector
+      </h2>
       <VictoryChart
         theme={VictoryTheme.material}
         domainPadding={10}
         style={{ parent: { maxWidth: "100%" } }}
       >
         <VictoryAxis
-          label="Seconds (relative)"
+          tickFormat={(t) => `${t}`}
           style={{
             axis: { stroke: "#ffffff" },
-            axisLabel: { fontSize: 12, fill: "#ffffff", padding: 30 },
-            tickLabels: { fontSize: 10, fill: "#ffffff" },
+            tickLabels: { fontSize: 12, fill: "#ffffff" },
           }}
         />
         <VictoryAxis
           dependentAxis
-          label="Price ($)"
           style={{
             axis: { stroke: "#ffffff" },
-            axisLabel: { fontSize: 12, fill: "#ffffff", padding: 40 },
-            tickLabels: { fontSize: 10, fill: "#ffffff" },
+            tickLabels: { fontSize: 12, fill: "#ffffff" },
           }}
         />
         <VictoryLine
@@ -120,31 +72,10 @@ const LiveTrendVisualizer = () => {
           }}
           animate={{ duration: 500, onLoad: { duration: 1000 } }}
           labels={({ datum }) => `${datum.y.toFixed(2)}`}
-          labelComponent={
-            <VictoryTooltip
-              style={{ fontSize: 10, fill: "#ffffff" }}
-              flyoutStyle={{ fill: "#333", stroke: lineColor }}
-            />
-          }
-        />
-        <VictoryLine
-          data={predictedData}
-          x="x"
-          y="y"
-          style={{
-            data: {
-              stroke: "#ffa500",
-              strokeDasharray: "5,5",
-              strokeWidth: 2,
-            },
-          }}
-          labels={({ datum }) => `Predicted: $${datum.y.toFixed(2)}`}
-          labelComponent={
-            <VictoryTooltip
-              style={{ fontSize: 10, fill: "#ffffff" }}
-              flyoutStyle={{ fill: "#333", stroke: "#ffa500" }}
-            />
-          }
+          labelComponent={<VictoryTooltip
+            style={{ fontSize: 10, fill: "#ffffff" }}
+            flyoutStyle={{ fill: "#333", stroke: lineColor }}
+          />}
         />
       </VictoryChart>
       <p
@@ -156,7 +87,7 @@ const LiveTrendVisualizer = () => {
           fontStyle: "italic",
         }}
       >
-        "Stay informed with real-time and predictive insights."
+        "Stay ahead of the trends with real-time data visualization."
       </p>
     </div>
   );