Changed imports

HypeTrade307/src/App.tsx

@@ -17,6 +17,8 @@ import Thread_page from "./pages/thread_viewer.tsx";
 import Post_page from "./pages/post_viewer.tsx";
 import PortfolioPage from './pages/Portfoilos_viewer.tsx';
 import Specific_Stock from './pages/specific_stock_request.tsx'
+import ViewStockPage from "@/pages/ViewStockPage.tsx";
+import HelpPage from "@/pages/HelpPage.tsx";
 
 function App() {
     return (
@@ -36,7 +38,8 @@ function App() {
                 <Route path="/forum" element={<Forum_page />} />
                 <Route path="/thread/:threadId/:postId" element={<Post_page />} />
                 <Route path="/specific-stock" element={<Specific_Stock />} />
-
+                <Route path="/stocks/:tkr" element={<ViewStockPage />} />
+                <Route path="/help" element={<HelpPage />} />
                 <Route path="*" element={<Page_Not_found />} />
             </Routes>
         </Router>

HypeTrade307/src/assets/area_Graph.tsx

@@ -2,63 +2,92 @@ import React, { useEffect, useState } from 'react';
 import {
     AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer
 } from 'recharts';
-
+import { TooltipProps } from "recharts";
 interface DataPoint {
     date: string;
     value: number;
 }
 
-const fetchData = async (): Promise<DataPoint[]> => {
-    try {
-        const response = await fetch("/data/.json");
-        return await response.json();
-    } catch (error) {
-        console.error("Error fetching data:", error);
-        return [];
+interface AreaGraphProps {
+    file: string;
+}
+let check = 0;
+
+const CustomTooltip = ({ active, payload }: TooltipProps<any, any>) => {
+    if (active && payload && payload.length > 0) {
+      const data = payload[0].payload;
+
+      console.log("Hovered data:", data); // Debug: check what keys exist
+
+      return (
+        <div style={{ background: "#000000 ", padding: "10px", border: "1px solid #ccc" }}>
+          <p><strong>Value:</strong> {data.value}</p>
+          <p><strong>Date:</strong> {data.date}</p>
+        </div>
+      );
     }
-};
+    return null;
+  };
+
 
-// Function to calculate the gradient offset based on current data
-const calculateGradientOffset = (data: DataPoint[]) => {
-    if (data.length === 0) return 1; // default value when there's no data
 
-    const dataMax = Math.max(...data.map((i) => i.value));
-    const dataMin = Math.min(...data.map((i) => i.value));
 
-    if (dataMax <= 0) {
-        return 0;
-    }
-    if (dataMin >= 0) {
-        return 1;
-    }
-    return dataMax / (dataMax - dataMin);
-};
-
-const Example: React.FC = () => {
+const AreaGraph: React.FC<AreaGraphProps> = ({ file }) => {
     const [chartData, setChartData] = useState<DataPoint[]>([]);
-    const [lastN, setLastN] = useState<number>(3); // default to last 3 items
+    const [lastN, setLastN] = useState<number>(3);
+
+
+
+    const filePath = `seniment_value/${file}_random.json`;
+
+    const fetchData = async (filePath: string): Promise<DataPoint[]> => {
+        try {
+            const response = await fetch(filePath);
+            if (!response.ok) throw new Error("File not found");
+            const data = await response.json();
+            check = 1;
+            return data;
+        } catch (error) {
+            console.error("Error fetching data:", error);
+            check = 0;
+            return [];
+        }
+    };
 
     useEffect(() => {
-        fetchData().then(setChartData);
-    }, []);
+        fetchData(filePath).then(setChartData);
+    }, [filePath]);
 
     const handleFetchData = async () => {
-        const fetchedData = await fetchData();
-        // Ensure lastN isn't greater than data length.
+        const fetchedData = await fetchData(filePath);
         const lastNItems = fetchedData.slice(-lastN);
         setChartData(lastNItems);
     };
 
     const handleResetData = async () => {
-        const fetchedData = await fetchData();
+        const fetchedData = await fetchData(filePath);
         setChartData(fetchedData);
     };
 
+    const calculateGradientOffset = (data: DataPoint[]) => {
+        if (data.length === 0) return 1;
+        const dataMax = Math.max(...data.map((i) => i.value));
+        const dataMin = Math.min(...data.map((i) => i.value));
+        if (dataMax <= 0) return 0;
+        if (dataMin >= 0) return 1;
+        return dataMax / (dataMax - dataMin);
+    };
+
     const off = calculateGradientOffset(chartData);
 
+
+    if (check == 0) {
+        return <div><p style={{ color: "black" }}>no seniment data found {file} is not a top 20 stock</p></div>;
+    }
     return (
         <div style={{ textAlign: "center" }}>
             <div style={{ marginBottom: "10px" }}>
+                <p>hiiiii {file} hhhhhhhhh</p>
                 <label htmlFor="lastNInput">Fetch last n values: </label>
                 <input
                     id="lastNInput"
@@ -80,11 +109,10 @@ const Example: React.FC = () => {
             <ResponsiveContainer width="100%" height={300}>
                 <AreaChart data={chartData}>
                     <CartesianGrid vertical={false} strokeDasharray="2"/>
-                    <XAxis dataKey="date" />
+                    <XAxis dataKey="date" color='black' />
                     <YAxis />
-                    <Tooltip />
+                    <Tooltip content={<CustomTooltip />} />
                     <defs>
-                        {/* Linear gradient to split between green (positive) and red (negative) */}
                         <linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
                             <stop offset={off} stopColor="green" stopOpacity={1} />
                             <stop offset={off} stopColor="red" stopOpacity={1} />
@@ -103,4 +131,4 @@ const Example: React.FC = () => {
     );
 };
 
-export default Example;
+export default AreaGraph;

HypeTrade307/src/assets/basic_Graph.tsx

@@ -1,46 +1,76 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import {
     LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, CartesianGrid,
 } from "recharts";
-
+import { TooltipProps } from "recharts";
 // Define TypeScript type for data
 interface DataPoint {
     date: string;
     value: number;
 }
 
-// Function to fetch data from JSON file
-const fetchData = async (): Promise<DataPoint[]> => {
-    try {
-        const response = await fetch("/data.json");
+interface MarketValueProps {
+    file: string; // Prop to dynamically select the JSON file
+}
+
 
-        return await response.json();
-    } catch (error) {
-        console.error("Error fetching data:", error);
-        return [];
+const CustomTooltip = ({ active, payload }: TooltipProps<any, any>) => {
+    if (active && payload && payload.length > 0) {
+      const data = payload[0].payload;
+
+      console.log("Hovered data:", data); // Debug: check what keys exist
+
+      return (
+        <div style={{ background: "#000000 ", padding: "10px", border: "1px solid #ccc" }}>
+          <p><strong>Value:</strong> {data.value}</p>
+          <p><strong>Date:</strong> {data.date}</p>
+        </div>
+      );
     }
-};
+    return null;
+  };
+
 
-const MyGraph: React.FC = () => {
+let check = 0;
+const MarketValue: React.FC<MarketValueProps> = ({ file }) => {
     const [data, setChartData] = useState<DataPoint[]>([]);
-    const [lastN, setLastN] = useState<number>(3); // default to last 3 items
+    const [lastN, setLastN] = useState<number>(3); // Default to last 3 items
+
+    // Construct the file path dynamically based on the passed file prop
+    const filePath = `/market_value/${file}_history.json`;
+
+    // Function to fetch data from JSON file
+    const fetchData = async (): Promise<DataPoint[]> => {
+        try {
+            const response = await fetch(filePath);
+            check = 1;
+            return await response.json();
+
+        } catch (error) {
+            console.error("Error fetching data:", error);
+            check = 0;
+            return [];
+        }
+    };
+
     useEffect(() => {
         fetchData().then(setChartData);
+    }, [filePath]); // Re-fetch data when filePath changes
 
-    }, []);
-
-    // Function to fetch data on button click
+    // Function to fetch last N data on button click
     const handleFetchData = async () => {
         const fetchedData = await fetchData();
-        // Ensure lastN isn't greater than data length.
-        const lastNItems = fetchedData.slice(-lastN);
+        const lastNItems = fetchedData.slice(-lastN); // Get last N items
         setChartData(lastNItems);
     };
 
     const handleResetData = async () => {
         const fetchedData = await fetchData();
         setChartData(fetchedData);
     };
+    if (check == 0) {
+        return <div><p style={{ color: "black" }}>no market data found {file} is not a top 20 stock</p></div>;
+    }
     return (
         <div style={{ textAlign: "center" }}>
             <div style={{ marginBottom: "10px" }}>
@@ -62,28 +92,26 @@ const MyGraph: React.FC = () => {
                     Reset Data
                 </button>
             </div>
-                <ResponsiveContainer width="102%" height={300}>
-                    <LineChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
-                        <XAxis dataKey="name" />
-                        <YAxis />
-                        <Tooltip />
-                        <Legend />
-                        <CartesianGrid vertical={false} strokeDasharray="2"/>
-                        <Line
-                            type="monotone"
-                            dataKey="value"
-                            stroke="#fa8fd8"
-                            strokeWidth={2}
-
-                            dot={{ stroke: "#fa8fd8", strokeWidth: 2 }} // Blue dots
-                            isAnimationActive={false}
-                            data={data.map((point) => (point.value ? point : { ...point, value: null }))}
-                        />
-                    </LineChart>
-                </ResponsiveContainer>
-
+            <ResponsiveContainer width="102%" height={300}>
+                <LineChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
+                    <XAxis dataKey="date" />
+                    <YAxis domain={['dataMin-10', 'dataMax']} />
+                    <Tooltip content={<CustomTooltip />} />
+                    <Legend />
+                    <CartesianGrid vertical={false} strokeDasharray="2" />
+                    <Line
+                        type="monotone"
+                        dataKey="value"
+                        stroke="#fa8fd8"
+                        strokeWidth={2}
+                        dot={{ stroke: "#fa8fd8", strokeWidth: 2 }} // Pink dots
+                        isAnimationActive={false}
+                        data={data.map((point) => (point.value ? point : { ...point, value: null }))}
+                    />
+                </LineChart>
+            </ResponsiveContainer>
         </div>
     );
 };
 
-export default MyGraph;
+export default MarketValue;