diff --git a/frontend/src/components/LiveTrendVisualizer.jsx b/frontend/src/components/LiveTrendVisualizer.jsx index 61f06bc..b1873a3 100644 --- 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

Loading real-time data...

; - } - return (
{ color: "#ffffff", textAlign: "center", fontFamily: "Arial, sans-serif", - marginBottom: "10px", - }} - > - Real-Time Market Trends & Predictions - -

- This chart visualizes real-time market data and predicts future trends based on the current rate of change. -

+ AI Global Trend Detector + `${t}`} style={{ axis: { stroke: "#ffffff" }, - axisLabel: { fontSize: 12, fill: "#ffffff", padding: 30 }, - tickLabels: { fontSize: 10, fill: "#ffffff" }, + tickLabels: { fontSize: 12, fill: "#ffffff" }, }} /> { }} animate={{ duration: 500, onLoad: { duration: 1000 } }} labels={({ datum }) => `${datum.y.toFixed(2)}`} - labelComponent={ - - } - /> - `Predicted: $${datum.y.toFixed(2)}`} - labelComponent={ - - } + labelComponent={} />

{ fontStyle: "italic", }} > - "Stay informed with real-time and predictive insights." + "Stay ahead of the trends with real-time data visualization."

);